@extends('layouts.app')

@section('content')
@include('layouts.sidebar')

<div class="page-content-wrapper">
    <div class="pt-3"></div>
    <div class="container direction-rtl">
		<div class="register-form mt-4">
			<h6 class="mb-3 text-center">Add Booking</h6>
			<form action="{{ route('add-booking') }}" method="POST">
				@csrf
				<div class="form-group">
					<p class=" mb-2">Customer Name</p>
					<select class="form-control select2" id="customer_id" name="customer_id">
                        <option value="">Select</option>
                        @foreach ($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
                        @endforeach
                    </select>
					@if ($errors->has('customer_id'))
        				<span class="text-danger">{{ $errors->first('customer_id') }}</span>
    				@endif
				</div>
				        
				<div class="form-group">
					<p class=" mb-2">From Address</p>
					<textarea class="form-control" name="from_address" id="from_address" cols="30" rows="10">{{ old('from_address') }}</textarea>
					@if ($errors->has('from_address'))
        				<span class="text-danger">{{ $errors->first('from_address') }}</span>
    				@endif
				</div>

                <div class="form-group">
					<p class=" mb-2">To Address</p>
					<textarea class="form-control" name="to_address" id="to_address" cols="30" rows="10">{{ old('to_address') }}</textarea>
					@if ($errors->has('to_address'))
        				<span class="text-danger">{{ $errors->first('to_address') }}</span>
    				@endif
				</div>

                <div class="form-group">
					<p class=" mb-2">Total Amount</p>
					<input class="form-control" type="number" id="total_amount" name="total_amount" value="{{ old('total_amount') }}" placeholder="Total Amount">
					@if ($errors->has('total_amount'))
        				<span class="text-danger">{{ $errors->first('total_amount') }}</span>
    				@endif
				</div>

                <div class="form-group">
					<p class=" mb-2">Paid Amount</p>
					<input class="form-control" type="number" id="paid_amount" name="paid_amount" value="{{ old('paid_amount') }}" placeholder="Paid Amount">
					@if ($errors->has('paid_amount'))
        				<span class="text-danger">{{ $errors->first('paid_amount') }}</span>
    				@endif
				</div>

                <div class="form-group">
					<p class=" mb-2">Balance Amount</p>
					<input class="form-control" type="number" id="balance_amount" name="balance_amount" value="{{ old('balance_amount') }}" placeholder="Balance Amount" readonly>
					@if ($errors->has('balance_amount'))
        				<span class="text-danger">{{ $errors->first('balance_amount') }}</span>
    				@endif
				</div>

                <div class="form-group">
					<p class=" mb-2">Booking Date</p>
					<input class="form-control" type="date" id="booking_date" name="booking_date" value="{{ old('booking_date') }}" placeholder="Booking Date">
					@if ($errors->has('booking_date'))
        				<span class="text-danger">{{ $errors->first('booking_date') }}</span>
    				@endif
				</div>

          		<button class="btn btn-primary w-100" id="add_booking" type="submit">Submit</button>
			</form>
		</div>
	</div>
    <div class="pb-3"></div>
</div>
@endsection
@push('custom-scripts')
    <script>
        $('.select2').select2();
        $(document).on('change', '#total_amount,#paid_amount', function() {

            var total_amount = parseFloat($('#total_amount').val());
            var paid_amount = parseFloat($('#paid_amount').val());

            if(total_amount < paid_amount) {
                alert('Paid amount should be less than Total amount');
				$('#balance_amount').val('');
                return false;
            }  else {
                var balance_amount = parseFloat(total_amount) - parseFloat(paid_amount);
                $('#balance_amount').val(balance_amount);
            }
            return true;
        });
    </script>
@endpush