@extends('dashboard.layout.content')

@section('customTitle')
{{ __('general.edit_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.update', ['reservation' => $reservation->id]) }}" method="POST" enctype="multipart/form-data">
                                @method("PATCH")
                                @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">
                                            @if($reservation->user)
                                            <option value="{{ $reservation->user->id }}" selected>{{ $reservation->user->name }}</option>
                                            @else
                                            <option value="" selected>{{ __('dashboard.User') }}</option>
                                            @endif
                                        </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 basicFlatpickr flatpickr flatpickr-input" id="contract-start-date" placeholder="{{ __('validation.attributes.start_dateing Date') }}" name="start_date" value="{{ $reservation->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 basicFlatpickr flatpickr flatpickr-input" id="contract-end-date" placeholder="{{ __('company.Reservations.fields.Reservation Expiry Date') }}" name="end_date" value="{{ $reservation->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" value="{{ $reservation->delivery_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>
                                            @if ($reservation->car)
                                            <option value="{{ $reservation->models_id }},{{ $reservation->company->id }},{{ $reservation->branch->id }}" selected>
                                                {{ $reservation->models->name }} | {{ $reservation->car->model }} | {{ $reservation->company->name }} | {{ $reservation->branch->name }}
                                            </option>
                                            @else
                                            <option value="" selected>
                                                {{ __('company.Contracts.fields.Choose The Type Of Car') }}
                                            </option>
                                            @endif
                                        </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">
                                            @if ($reservation->coupon)
                                            <option value="{{ $reservation->coupon->id }}" selected>{{ $reservation->coupon->name }}</option>
                                            @else
                                            <option value="" selected>{{ __('dashboard.Coupon') }}</option>
                                            @endif
                                            @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">
                                            @if ($reservation->is_delivery_selected)
                                            <option value="{{ $reservation->is_delivery_selected }}" selected>{{ $reservation->is_delivery_selected == 1 ? __('general.yes') : __('general.no') }}</option>
                                            @else
                                            <option value="" selected>{{ __('dashboard.Want Delivery') }}</option>
                                            @endif
                                            <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="{{ $reservation->delivery_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="{{ $reservation->delivery_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="{{ $reservation->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="{{ $reservation->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="{{ $reservation->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">
                                            @if (isset($reservation->status))
                                            <option value="{{ $reservation->status }}" selected>{{ __("dashboard.$reservation->status") }}</option>
                                            @else
                                            <option value="" selected>{{ __('validation.attributes.status') }}</option>
                                            @endif
                                            <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="{{ $reservation->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="{{ $reservation->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="{{ $reservation->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) {
                    if (result.status == false) {
                        let message = "<ul class='list-unstyled'>";
                        $.each(result.message, function(key, value) {
                            message += `<li>${value}</li>`;
                        });
                        message += "</ul>";
                        swal({
                            html: message,
                            type: 'warning',
                            confirmButtonText: '{{ __('general.ok') }}',
                        });
                    } else if (result.status == true) {
                        $('#models_id').html();
                        $.each(result.cars, function(key, value) {
                            $('#models_id').append("<option dir='rtl' value='" + [value.models_id,value.company_id,value.branch_id
                                ] +
                                "'>" + value.car_name + ' | ' + value.model + ' | ' + value
                                .company_name + ' | ' + value.branch_name + "</option>");
                        });
                    }
                },
            });
        });
</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>
    $('#models_id').attr('selected', function() {
            $.ajax({
                url: "{{ route('dashboard.ReservationServicesDependsOnCarID2') }}",
                type: 'GET',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'models_id': $('#models_id').val(),
                    'reservation_id' : '{{ $reservation->id }}'
                },
                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")

        $("#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);
            }
        });

        $("#is_delivery_selected").attr('selected', 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