@extends('layouts.admin')

@section('content')
    <style>
        #map {
            height: 500px;
            width: 100%
        }
    </style>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Booking Form</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Edit Booking</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-7">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Edit Booking</h3>
                    </div>
                    <div class="card-body">
                        <form id="updateBookingForm" method="post"
                            action="{{ route('admin.booking.update', $booking->id) }}">
                            @csrf

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="vehicle_id"><strong>Customer</strong></label>
                                        <select wire:model.defer="customer_id" class="form-control" id="customer_id"
                                            aria-label="Floating label select example" name="customer_id">
                                            <option value="" selected
                                                {{ $booking->is_someone_booking == 1 ? 'disabled' : '' }}>--Select
                                                Customer--</option>
                                            @foreach ($customers as $customer)
                                                <option value="{{ $customer->id }}"
                                                    {{ $customer->id == $booking->customer_id ? 'selected' : '' }}
                                                    {{ $booking->is_someone_booking == 1 ? 'disabled' : '' }}>
                                                    {{ $customer->name }}>{{ $customer->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('customer_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- @if ($booking->is_new_customer == 1) --}}
                            <div id="new_customer_fields">
                                <div class="callout callout-info">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label for="vehicle_id"><strong>Name</strong></label>
                                                <input type="text" name="new_name" id="customer_name"
                                                    class="form-control" value="{{ $booking->first_name }}">
                                                @error('new_name')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label for="vehicle_id"><strong>Email</strong></label>
                                                <input type="email" name="new_email" id="customer_email"
                                                    class="form-control" value="{{ $booking->email }}">
                                                @error('new_email')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label for="hrly_min_hour">Contact Number</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">+1</span>
                                                    </div>
                                                    <input type="number" class="form-control" name="new_phone"
                                                        id="new_phone" placeholder="XXX-XXX-XXXX"
                                                        value="{{ $booking->phone }}" onkeypress="return onlyDigits(event)"
                                                        maxlength="10">
                                                </div>
                                                @error('new_phone')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" name="is_whole_update"
                                                        class="custom-control-input" id="is_whole_update"
                                                        onclick="isWholeUpdateCustomer()" value="1">
                                                    <label class="custom-control-label" for="is_whole_update">Is Whole
                                                        Customer Update?</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- @endif --}}

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="vehicle_id"><strong>Service</strong></label>
                                        <select wire:model.defer="service" class="form-control" id="service"
                                            aria-label="Floating label select example" name="service">
                                            <option value="" selected>--Select Service--</option>
                                            @foreach ($services as $service)
                                                <option value="{{ $service->id }}"
                                                    {{ $service->id == $booking->service_id ? 'selected' : '' }}>
                                                    {{ $service->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('service')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label for="vehicle_id"><strong>Service Type</strong></label>
                                    <select onchange="dropoff()" class="form-control" id="service_type"
                                        aria-label="Floating label select example" name="service_type">
                                        <option value="" selected>--Select Service Type--</option>
                                        @foreach ($service_types as $service_type)
                                            <option value="{{ $service_type->id }}"
                                                {{ $service_type->id == $booking->service_type ? 'selected' : '' }}>
                                                {{ $service_type->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('service_type')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="vehicle_id"><strong>Travel Type</strong></label>
                                    <select wire:model.defer="service" class="form-control" id="travel_type"
                                        aria-label="Floating label select example" name="travel_type">
                                        <option value="">--Select Travel Type--</option>
                                        @foreach ($travel_types as $travel_type)
                                            <option value="{{ $travel_type->id }}"
                                                {{ $travel_type->id == $booking->transfer_type ? 'selected' : '' }}>
                                                {{ $travel_type->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('travel_type')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-sm-6 hours-input" style="display: none;">
                                    <label for="hours"><strong>No. Of Hours</strong></label>
                                    <input type="number" name="hours" class="form-control " id="hours-input"
                                        value="{{ $booking->duration_in_hours }}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="pickup_date"><strong>Pickup Date</strong></label>
                                    <input type="date" class="form-control" id="pickup_date" name="pickup_date"
                                        value="{{ $booking->pickup_date }}">
                                    @error('pickup_date')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-sm-6">
                                    <label for="pickup_time"><strong>Pickup Time</strong></label>
                                    <input type="time" class="form-control" id="pickup_time" name="pickup_time"
                                        value="{{ $booking->pickup_time }}">
                                    @error('pickup_time')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="pickup_location"><strong>Pickup Location</strong></label>
                                    <input wire:model.defer="pickup_location" wire:keyup="changeOrigin" wire:ignore
                                        type="text" class="form-control" id="origin-input" autocomplete="off"
                                        name="pickup_location" value="{{ $booking->pickup_location }}">
                                    @error('pickup_location')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-sm-6 destination-input">
                                    <label for="drop_location"><strong>Drop-off Location</strong></label>
                                    <input wire:model.defer="drop_location" wire:keyup="changeDestination" wire:ignore
                                        type="text" class="form-control " id="destination-input" name="drop_location"
                                        value="{{ $booking->drop_location }}">
                                    @error('drop_location')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="vehicle_id"><strong>Vehicle</strong></label>
                                    <select wire:model.defer="vehicle_id" class="form-control" id="vehicle_id"
                                        aria-label="Floating label select example" name="vehicle_id">
                                        <option value="">--Select Vehicle--</option>
                                        @foreach ($vehicles as $vehicle)
                                            <option value="{{ $vehicle->id }}"
                                                {{ $vehicle->id == $booking->vehicle_id ? 'selected' : '' }}>
                                                {{ $vehicle->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('vehicle_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-sm-6">
                                    <label for="flight_no"><strong>Flight No</strong></label>
                                    <input type="text" class="form-control" id="flight_no" name="flight_no"
                                        value="{{ $booking->flight_no }}">
                                    @error('flight_no')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-sm-6">
                                    <label for="no_of_passengers"><strong>No of Passengers</strong></label>
                                    <input type="number" class="form-control" id="no_of_passengers"
                                        name="no_of_passengers" value="{{ $booking->no_of_passengers }}">
                                    @error('no_of_passengers')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-sm-6">
                                    <label for="no_of_luggage"><strong>No of Luggage</strong></label>
                                    <input type="number" class="form-control" id="no_of_luggage" name="no_of_luggage"
                                        value="{{ $booking->no_of_luggage }}">
                                    @error('no_of_luggage')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            @if ($booking->is_someone_booking == 1)
                                <br><label for="booking_for_someone"><strong>Booking for Someone</strong></label>
                                <div id="someone_customer_fields">
                                    <div class="callout callout-info">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <label for="vehicle_id"><strong>Name</strong></label>
                                                <input type="text" name="name"
                                                    value="{{ $booking->booking_someone_name }}" id="customer_name"
                                                    class="form-control">
                                                @error('name')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-sm-6">
                                                <label for="vehicle_id"><strong>Email</strong></label>
                                                <input type="email" name="email"
                                                    value="{{ $booking->booking_someone_email }}" id="customer_email"
                                                    class="form-control">
                                                @error('email')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="hrly_min_hour">Contact Number</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">+1</span>
                                                        </div>
                                                        <input type="number" class="form-control" name="phone"
                                                            id="phone" placeholder="XXX-XXX-XXXX"
                                                            value="{{ $booking->booking_someone_phone }}"
                                                            onkeypress="return onlyDigits(event)" maxlength="10">
                                                    </div>
                                                    @error('phone')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <div class="row">
                                <div class="col-sm-12">
                                    <label for="name"><strong>Comments</strong></label>
                                    <textarea class="form-control" wire:model.defer="comments" id="comments" cols="30" rows="5"
                                        name="comments">{{ $booking->comments }}</textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="hidden" name="confirm_change_price" id="confirm_change_price"
                                        value="">
                                    <a href="{{ route('admin.booking.detail', $booking->booking_id) }}"
                                        class="m-1 float-end btn btn-secondary">View Detail</a>
                                    <button type="submit" id="submitButton" class="m-1 float-end btn btn-primary">Save
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div style="display: none">
                    <div id="mode-selector" class="controls">
                        <input type="radio" name="type" id="changemode-driving" checked="checked" />
                        <label for="changemode-driving">Driving</label>
                    </div>
                </div>
                <div id="map"></div>
                <div class="row p-4">
                    <div class="form-group col-md-6">
                        <input type="text" name="set-distance" id="set-distance" class="form-control"
                            placeholder="TOTAL DISTANCE" readonly>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" name="set-duration" id="set-duration" class="form-control"
                            placeholder="TOTAL TIME" readonly>
                    </div>
                </div>
            </div>
        </div>

    </section>
@endsection
@section('scripts')
    <script>
        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        // <script
        // src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                mapTypeControl: false,
                center: {
                    lat: 40.7128,
                    lng: -73.935242
                },
                zoom: 10,
            });

            const autocompleteDirectionsHandler = new AutocompleteDirectionsHandler(map);

            // Check if the origin and destination inputs are already populated
            const originInput = document.getElementById("origin-input").value;
            const destinationInput = document.getElementById("destination-input").value;

            if (originInput && destinationInput) {
                // Trigger place_changed event to calculate and show route
                autocompleteDirectionsHandler.route();
            }
        }

        class AutocompleteDirectionsHandler {
            map;
            originPlaceId;
            destinationPlaceId;
            travelMode;
            directionsService;
            directionsRenderer;
            constructor(map) {
                this.map = map;
                this.originPlaceId = "";
                this.destinationPlaceId = "";
                this.travelMode = google.maps.TravelMode.DRIVING;
                this.directionsService = new google.maps.DirectionsService();
                this.directionsRenderer = new google.maps.DirectionsRenderer();
                this.directionsRenderer.setMap(map);

                const originInput = document.getElementById("origin-input");
                const destinationInput = document.getElementById("destination-input");

                const modeSelector = document.getElementById("mode-selector");
                // Specify just the place data fields that you need.
                const originAutocomplete = new google.maps.places.Autocomplete(
                    originInput, {
                        fields: ["place_id"]
                    }
                );
                // Specify just the place data fields that you need.
                const destinationAutocomplete = new google.maps.places.Autocomplete(
                    destinationInput, {
                        fields: ["place_id"]
                    }
                );

                this.setupClickListener(
                    "changemode-driving",
                    google.maps.TravelMode.DRIVING
                );
                this.setupPlaceChangedListener(originAutocomplete, "ORIG");
                this.setupPlaceChangedListener(destinationAutocomplete, "DEST");
            }
            // Sets a listener on a radio button to change the filter type on Places
            // Autocomplete.
            setupClickListener(id, mode) {
                const radioButton = document.getElementById(id);

                radioButton.addEventListener("click", () => {
                    this.travelMode = mode;
                    this.route();
                });
            }
            setupPlaceChangedListener(autocomplete, mode) {
                autocomplete.bindTo("bounds", this.map);
                autocomplete.addListener("place_changed", () => {
                    const place = autocomplete.getPlace();

                    if (!place.place_id) {
                        window.alert("Please select an option from the dropdown list.");
                        return;
                    }

                    if (mode === "ORIG") {
                        this.originPlaceId = place.place_id;
                    } else {
                        this.destinationPlaceId = place.place_id;
                    }

                    this.route();

                    Livewire.emit('setGoogleMapPlaces', $("#origin-input").val(), $("#destination-input")
                        .val());
                });
            }
            route() {
                const originInput = document.getElementById("origin-input").value;
                const destinationInput = document.getElementById("destination-input").value;

                if (!this.originPlaceId && originInput) {
                    this.originPlaceId = new google.maps.places.PlacesService(this.map).findPlaceFromQuery({
                        query: originInput,
                        fields: ['place_id']
                    }, (results, status) => {
                        if (status === google.maps.places.PlacesServiceStatus.OK) {
                            this.originPlaceId = results[0].place_id;
                            this.route();
                        }
                    });
                }

                if (!this.destinationPlaceId && destinationInput) {
                    this.destinationPlaceId = new google.maps.places.PlacesService(this.map).findPlaceFromQuery({
                        query: destinationInput,
                        fields: ['place_id']
                    }, (results, status) => {
                        if (status === google.maps.places.PlacesServiceStatus.OK) {
                            this.destinationPlaceId = results[0].place_id;
                            this.route();
                        }
                    });
                }

                if (!this.originPlaceId || !this.destinationPlaceId) {
                    return;
                }

                const me = this;

                this.directionsService.route({
                        origin: {
                            placeId: this.originPlaceId
                        },
                        destination: {
                            placeId: this.destinationPlaceId
                        },
                        travelMode: this.travelMode,
                    },
                    (response, status) => {
                        if (status === "OK") {
                            me.directionsRenderer.setDirections(response);
                            Livewire.emit('successGoogleMap');
                            getDirection();
                        } else {
                            window.alert("Directions request failed due to " + status);
                        }
                    }
                );
            }
        }

        function getDirection() {
            $.ajax({
                url: "{{ route('admin.booking.google-map-distance') }}",
                type: "POST",
                data: {
                    origin: $("#origin-input").val(),
                    destination: $("#destination-input").val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(resp) {
                    $("#set-distance").val(resp.data.distance);
                    $("#set-duration").val(resp.data.duration);
                }
            });
        }

        window.initMap = initMap;
    </script>

    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXl5k0hdaecdpWF7AcfhkXv4TN6MvQn6g&callback=initMap&libraries=places&v=weekly"
        defer></script>

    <script>
        window.addEventListener('google-map-updated', event => {
            $("#set-distance").val(event.detail.distance);
            $("#set-duration").val(event.detail.duration);
        })

        function isWholeUpdateCustomer() {
            var isChecked = $('#is_whole_update').prop('checked');
        }

        function ShowSomeoneCustomer() {
            var isChecked = $('#someone_else').prop('checked');

            if (isChecked) {
                $('#someone_customer_fields').show();
            } else {
                $('#someone_customer_fields').hide();
            }
        }

        function dropoff() {
            if ($("#service_type").val() == 2) {
                $(".destination-input").hide();
                $(".hours-input").show();
            } else {
                $(".destination-input").show();
                $(".hours-input").hide();
            }
        }
        window.onload = function() {
            if ($("#service_type").val() == 2) {
                $(".destination-input").hide();
                $(".hours-input").show();
            }
        };
    </script>
    <script>
        $("#customer_id").on('change', function() {
            if ($(this).val() == 0) {

            } else {
                $.ajax({
                    url: "{{ route('admin.user.detail') }}",
                    type: "POST",
                    data: {
                        user_id: $(this).val(),
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(resp) {

                        if (resp.status == 200) {

                            $("#customer_name").val(resp.data.name);
                            $("#customer_email").val(resp.data.email);
                            $("#new_phone").val(resp.data.phone);
                        }
                    }
                });

            }

        });


        document.getElementById('submitButton').addEventListener('click', function(e) {
            e.preventDefault(); // Prevent form from submitting immediately



            Swal.fire({
                title: 'Are you sure?',
                text: "You want to go back to the old price?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    // If user clicked 'Yes', set hidden input value to 1
                    document.getElementById('custom_price').value = 1;
                } else {
                    document.getElementById('custom_price').value = 0;
                }


                // Submit the form
                document.getElementById('updateBookingForm').submit();
            });
        });
    </script>
@endsection