@extends('dashboard.layout.content')

@section('customTitle')
{{ __('dashboard.Add Reservation') }}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="container">
        <div class="container">
            <div class="row">
                <div id="flStackForm" class="col-12 layout-spacing layout-top-spacing">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="row">
                                <div class="col-12">
                                    <h4>{{ __('dashboard.Add Reservation') }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                            <form class="uroad-form" action="{{ route('dashboard.reservation.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <div class="form-row mb-4">
                                    <div class="form-group col-md-3">
                                        <label for="user_id">{{ __('dashboard.User') }}</label>
                                        <select required class="form-control " id="user_id" name="user_id">
                                            <option value="" selected>{{ __('dashboard.User') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="contract-start-date">{{ __('validation.attributes.start_dateing Date') }}</label>
                                        <input type="date" class="form-control basicFlatpickrStartDate flatpickr flatpickr-input" id="contract-start-date" placeholder="{{ __('validation.attributes.start_dateing Date') }}" name="start_date" required>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="contract-end-date">{{ __('company.Reservations.fields.Reservation Expiry Date') }}</label>
                                        <input type="date" class="form-control basicFlatpickrStartDate flatpickr flatpickr-input" id="contract-end-date" placeholder="{{ __('company.Reservations.fields.Reservation Expiry Date') }}" name="end_date" required>
                                    </div>


                                    <div class="form-group col-md-3">
                                        <label for="contract-start-time">{{ __('validation.attributes.start_dateing Time') }}</label>
                                        <input class="form-control" type="time" id="contract-start-time" placeholder="{{ __('validation.attributes.start_dateing Time') }}" name="start_time" required>
                                    </div>

                                    <div class="col-12">
                                        <button id="search_for_cars_button" class="btn btn-warning" type="button">{{ __('company.Contracts.fields.Search For Cars') }}</button>
                                    </div>

                                    <hr class="col-12" style="border-top: 1px solid #2E9BD8;">

                                    <div class="col-xl-12 col-md-12 col-sm-12 col-12 mb-4">
                                        <h5 id="counter">{{ __('general.car_information') }} :</h5>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="models_id">{{ __('company.Contracts.fields.Choose The Type Of Car') }}</label>
                                        <select id="models_id" class="form-control basic" name="models_id" required>
                                            <option value="" selected>
                                                {{ __('company.Contracts.fields.Choose The Type Of Car') }}
                                            </option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car-daily-price">{{ __('validation.attributes.daily Price') }}</label>
                                        <input type="text" class="form-control" id="car-daily-price" placeholder="{{ __('validation.attributes.daily Price') }}" name="daily_price" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car-weekly-price">{{ __('validation.attributes.weekly Price') }}</label>
                                        <input type="text" class="form-control" id="car-weekly-price" placeholder="{{ __('validation.attributes.weekly Price') }}" name="weekly_price" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car-monthly-price">{{ __('validation.attributes.monthly Price') }}</label>
                                        <input type="text" class="form-control" id="car-monthly-price" placeholder="{{ __('validation.attributes.monthly Price') }}" name="monthly_price" readonly>
                                    </div>

                                    <hr class="col-12" style="border-top: 1px solid #2E9BD8;">

                                    <div class="form-group col-md-12">
                                        <label for="coupon_id">{{ __('dashboard.Coupon') }}</label>
                                        <select class="form-control basic" id="coupon_id" name="coupon_id">
                                            <option value="" selected>{{ __('dashboard.Coupon') }}</option>
                                            @foreach ($coupons as $coupon)
                                            <option {{ old('coupon_id')==$coupon->id ? 'selected' : '' }} value="{{ $coupon->id }}">{{ $coupon->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="is_delivery_selected">{{ __('dashboard.Want Delivery') }}</label>
                                        <select required class="form-control" id="is_delivery_selected" name="is_delivery_selected">
                                            <option value="" selected>{{ __('dashboard.Want Delivery') }}</option>
                                            <option {{ old('is_delivery_selected')=='1' ? 'selected' : '' }} value="1">{{ __('general.yes') }}</option>
                                            <option {{ old('is_delivery_selected')=='0' ? 'selected' : '' }} value="0">{{ __('general.no') }}</option>
                                        </select>
                                    </div>

                                    <div id="long_container" class="form-group col-md-3 d-none">
                                        <label for="long">{{ __('dashboard.Delivery Long') }}</label>
                                        <input type="text" id="long" class="form-control" placeholder="{{ __('dashboard.Delivery Long') }}" name="delivery_long" value="{{ old('long') }}" readonly>
                                    </div>

                                    <div id="lat_container" class="form-group col-md-3 d-none">
                                        <label for="lat">{{ __('dashboard.Delivery Lat') }}</label>
                                        <input type="text" id="lat" class="form-control" placeholder="{{ __('dashboard.Delivery Lat') }}" name="delivery_lat" value="{{ old('lat') }}" readonly>
                                    </div>

                                    <div id="delivery_address_container" class="form-group col-md-6 d-none">
                                        <label for="delivery_address">{{ __('dashboard.Delivery Adress') }}</label>
                                        <input type="text" id="delivery_address" class="form-control" placeholder="{{ __('dashboard.Delivery Adress') }}" name="delivery_address" value="{{ old('delivery_address') }}" readonly>
                                    </div>

                                    <div id="delivery_time_container" class="form-group col-md-6 d-none">
                                        <label for="delivery_time">{{ __('dashboard.Delivery Time') }}</label>
                                        <input id="delivery_time" class="form-control" type="time" placeholder="{{ __('dashboard.Delivery Time') }}" name="delivery_time" value="{{ old('delivery_time') }}" readonly>
                                    </div>

                                    <div id="map_container" class="form-group col-md-12 d-none" style="height: 400px;">
                                        <div id="map" style="height: 100%;"></div>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="pickup_time">{{ __('dashboard.Pickup Time') }}</label>
                                        <input required id="pickup_time" class="form-control" type="time" placeholder="{{ __('dashboard.Pickup Time') }}" name="pickup_time" value="{{ old('pickup_time') }}">
                                    </div>

                                    {{-- <div class="form-group col-md-4">
                                        <label for="return_time">{{ __('dashboard.Return Time') }}</label>
                                        <input required id="return_time" class="form-control" type="time" placeholder="{{ __('dashboard.Return Time') }}" name="return_time" value="{{ old('return_time') }}">
                                    </div> --}}

                                    <div class="form-group col-md-4">
                                        <label for="status">{{ __('validation.attributes.status') }}</label>
                                        <select required class="form-control" id="status" name="status">
                                            <option value="" selected>{{ __('validation.attributes.status') }}</option>
                                            <option {{ old('status')==='confirmed' ? 'selected' : '' }} value="confirmed">{{ __('general.confirmed') }}</option>
                                            <option {{ old('status')==='canceled' ? 'selected' : '' }} value="canceled">{{ __('general.canceled') }}</option>
                                            <option {{ old('status')==='finished' ? 'selected' : '' }} value="finished">{{ __('general.finished') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="notes">{{ __('validation.attributes.notes') }}</label>
                                        <input type="text" id="notes" class="form-control" placeholder="{{ __('validation.attributes.notes') }}" name="notes" value="{{ old('notes') }}">
                                    </div>

                                </div>

                                <div class="form-row">
                                    <div class="col-12 mb-4">
                                        <h6>{{ __('dashboard.Is This Reservation For Someone Else') }}</h6>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="name">{{ __('validation.attributes.name') }}</label>
                                        <input type="text" id="name" class="form-control" placeholder="{{ __('validation.attributes.name') }}" name="name" value="{{ old('name') }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="mobile">{{ __('dashboard.Person Mobile') }}</label>
                                        <input type="text" id="mobile" class="form-control" placeholder="{{ __('dashboard.Person Mobile') }}" name="mobile" value="{{ old('mobile') }}">
                                    </div>

                                </div>

                                <div class="form-row jquery-result">
                                    <div class="col-12 mt-4 mb-4">
                                        <h6>{{ __('general.services') }}</h6>
                                    </div>

                                    <div id="services_container" class="row col-12"></div>

                                </div>

                                <input type="submit" class="btn btn-primary mt-3" value="{{ __('general.submit') }}">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customScript')
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRxr9o0Aljlsq58FJ7nnhzyrSvmDcCN1w&libraries=places&v=weekly&language={{ $locale }}">
</script>

{{-- ============================================================================================
= Get The Cars Depends On Start Date & End Date..
============================================================================================ --}}

<script>
    $('#search_for_cars_button').on('click', function() {
            $.ajax({
                url: "{{ route('validation.attributes.carsDependsOnReservationDates') }}",
                type: 'GET',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'start_date': $('#contract-start-date').val(),
                    'start_time': $('#contract-start-time').val(),
                    'end_date': $('#contract-end-date').val(),
                    'end_time': $('#contract-end-time').val(),
                },
                success: function(result) {
                        $('#models_id').html(result);
                },
            });
        });
</script>


<script>
    $('#models_id').on('change', function() {
            $.ajax({
                url: "{{ route('dashboard.ReservationServicesDependsOnCarID') }}",
                type: 'GET',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'models_id': $('#models_id').val()
                },
                success: function(result) {
                    $('#services_container').html(result);
                },
            });


            $.ajax({
                url: "{{ route('validation.attributes.carDetailsDependsOnCarID') }}",
                type: 'GET',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'models_id': $('#models_id').val()
                },
                success: function(result) {
                    $('#car-daily-price').val(result.daily_price_system);
                    $('#car-weekly-price').val(result.weekly_price_system);
                    $('#car-monthly-price').val(result.monthly_price_system);
                },
            });

        });
</script>


<script>
    $("#reservations-menu-box").attr("data-active", "true")

        $('#car_id').on('change', function() {
            $.ajax({
                url: "{{ route('dashboard.ServicesDependsOnCompanyCar') }}",
                type: 'GET',
                data: {
                    car_id: $(this).val(),
                },
                success: function(result) {
                    $('.jquery-result').html(result);
                },
            });
        });

        $('#car_id').attr('selected', function() {
            if ($(this).val() != '') {
                $.ajax({
                    url: "{{ route('dashboard.ServicesDependsOnCompanyCar') }}",
                    type: 'GET',
                    data: {
                        car_id: $(this).val(),
                    },
                    success: function(result) {
                        $('.jquery-result').html(result);
                    },
                });

            }
        });

        $("#is_delivery_selected").on('change', function() {
            if ($(this).val() == 1) {
                $("#map_container").removeClass('d-none');
                $('#delivery_address_container').removeClass('d-none');
                $('#delivery_address_container input').prop('readonly', false);
                $('#delivery_time_container').removeClass('d-none');
                $('#delivery_time_container input').prop('readonly', false);
            } else {
                $("#map_container").addClass('d-none');
                $('#delivery_address_container').addClass('d-none');
                $('#delivery_address_container input').prop('readonly', true);
                $('#delivery_time_container').addClass('d-none');
                $('#delivery_time_container input').prop('readonly', true);
            }
        });

        initMap();

        ajaxSelect2('#user_id','/dashboard/select2/users')
</script>
@endsection