@extends('layouts.admin')

@section('content')
<style>
    #map {
        height: 500px;
        width: 100%
    }

    .error-border {
        border: 1px solid red;
    }
</style>

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Bookings</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-8">
            @if (Session::has('error'))
            <div class="alert alert-danger alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>Error!</strong> {{ Session::get('error') }}
            </div>
            @endif
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">{{$edit_mode ? 'Edit' : 'Add'}} Booking</h3>
                </div>
                <div class="card-body">
                    <form id="create_booking_form"> @csrf

                        <input type="hidden" name="booking_id" id="booking_id" value="{{$booking->id ?? ''}}">

                        <div class="row callout callout-warning">
                            <div class="col-md-6 form-group">
                                <label><strong>Search Customer</strong></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <select name="search_key" id="search_key" class="custom-select filter-options" style="border-radius: 3px 0px 0px 3px;">
                                            <option value="name">Name</option>
                                            <option value="email">Email</option>
                                            <option value="phone">Phone</option>
                                        </select>
                                    </div>
                                    <input name="search_value" id="search_value" class="form-control" type="text">
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-sm table-hover">
                                        <tbody></tbody>
                                    </table>
                                    <div id="loadingIndicator" style="display: none;">
                                        <span class="spinner-border spinner-border-sm"></span> Searching...
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h6 class="font-weight-bold">Customer Information</h6>
                        <div class="row callout callout-success">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="vehicle_id"><strong>Customer Name</strong></label>
                                    <input type="text" name="customer_name" id="customer_name" class="form-control"
                                        value="{{ $customer->name ?? ''}}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="vehicle_id"><strong>Customer Email</strong></label>
                                    <input type="email" name="customer_email" id="customer_email" class="form-control"
                                        value="{{ $customer->email ?? ''}}">

                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Customer Phone</label>
                                    <input type="text" name="customer_phone" id="customer_phone" class="form-control"
                                        value="{{ $customer->phone ?? ''}}">
                                </div>
                            </div>
                        </div>

                        <h6 class="font-weight-bold">Ride Information</h6>
                        <div class="row callout callout-success">
                            <div class="col-md-3">
                                <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 }}" @if (isset($booking->service_id)) {{
                                            $service->id == $booking->service_id ? 'selected' : '' }} @endif>
                                            {{ $service->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('service')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <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 }}" @if (isset($booking->service_type)) {{
                                        $service_type->id == $booking->service_type ? 'selected' : '' }} @endif>
                                        {{ $service_type->name }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('service_type')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-3 hours-input" @if ($edit_mode && $booking->service_type != 2) style="display: none;" @endif>
                                <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 class="col-md-3">
                                <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="" selected>--Select Travel Type--</option>
                                    @foreach ($travel_types as $travel_type)
                                    <option value="{{ $travel_type->id }}" @if (isset($booking->transfer_type)) {{
                                        $travel_type->id == $booking->transfer_type ? 'selected' : '' }} @endif>
                                        {{ $travel_type->name }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('travel_type')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <h6 class="font-weight-bold">Pickup & Drop off</h6>
                        <div class="row callout callout-success">
                            <div class="col-sm-6 form-group">
                                <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 form-group">
                                <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 class="col-sm-6 form-group">
                                <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 form-group 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>

                        <h6 class="font-weight-bold">Vehicle Information</h6>
                        <div class="row callout callout-success">
                            <div class="col-sm-3">
                                <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="" selected>--Select Vehicle--</option>
                                    @foreach ($vehicles as $vehicle)
                                    <option value="{{ $vehicle->id }}" @if (isset($booking->vehicle_id)) {{ $vehicle->id
                                        == $booking->vehicle_id ? 'selected' : '' }} @endif>
                                        {{ $vehicle->name }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('vehicle_id')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <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-md-3">
                                <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 class="col-md-3">
                                <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>

                        <h6 class="font-weight-bold">Passenger Information <a href="javascript:void(0);" id="edit_passenger">Edit</a></h6>
                        <div class="row callout callout-success">
                            <div class="col-md-4">
                                <label for="vehicle_id"><strong>Passenger Name</strong></label>
                                <input type="text" name="passenger_name" id="passenger_name" class="form-control"
                                    value="{{ $booking->booking_someone_name ?? ''}}" readonly>
                            </div>
                            <div class="col-md-4">
                                <label for="vehicle_id"><strong>Passenger Email</strong></label>
                                <input type="email" name="passenger_email" id="passenger_email" class="form-control"
                                    value="{{ $booking->booking_someone_email ?? ''}}" readonly>
                            </div>
                            <div class="col-md-4">
                                <label for="">Passenger Phone</label>
                                <input type="text" class="form-control" name="passenger_phone" id="passenger_phone"
                                    id="phone" value="{{ $booking->booking_someone_phone ?? ''}}" readonly>
                            </div>
                        </div>

                        <h6 class="font-weight-bold">Additional Information</h6>
                        <div class="row callout callout-success">
                            <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="new_price" id="new_price" value="">
                                
                                @if ($edit_mode)
                                <a href="{{ route('admin.booking.detail', $booking->id) }}"
                                    class="m-1 float-end btn btn-secondary"> <i class="fas fa-list mr-1"></i> Detail</a>
                                @endif

                                <button type="submit" class="m-1 btn btn-primary float-right"
                                    id="submit_button">{{$edit_mode ? 'Update' : 'Save'}}
                                    Booking</button>
                                <a href="{{ route('admin.bookings') }}"
                                    class="m-1 btn btn-danger float-right">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <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>
    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);
            const originInput = document.getElementById("origin-input").value;
            const destinationInput = document.getElementById("destination-input").value;

            if (originInput && destinationInput) {
                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");
                // this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
                // this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(
                //     destinationInput
                // );
                // this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
            }
            // 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 ShowNewCustomer() {
            var isChecked = $('#new_customer').prop('checked');
            $('#customer_id').prop('disabled', isChecked);
            if (isChecked) {
                $('#new_customer_fields').show();

            } else {
                $('#new_customer_fields').hide();
            }
        }

        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();
            }
        }
</script>

<script>
    $("#customer_id").on('change', function() {
            if ($(this).val() == 0) {
                $("#customer_details").hide();
            } 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_details").show();
                            $("#dummy_name").val(resp.data.name);
                            $("#dummy_email").val(resp.data.email);
                            $("#dummy_phone").val(resp.data.phone);
                        }
                    }
                });

            }

        });
</script>

<script>
    $(document).ready(function(){
        $("#create_booking_form").on("submit", function(event){
            event.preventDefault();

            let edit_mode = {{ json_encode($edit_mode) }};

            if (edit_mode) {
                Swal.fire({
                    title: 'Confirmation Required',
                    text: "Please confirm the price you'd like to proceed with: either the recently updated price or the previous price.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Use New Price',
                    cancelButtonText: 'Use Previous Price'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('new_price').value = 1;
                    } else {
                        document.getElementById('new_price').value = 0;
                    }

                    submitBooking(this, event);
                });
            } else {
                submitBooking(this, event);
            }

        });

        function submitBooking(form, event) {
            var formData = new FormData(form);

            $(".error-message").remove();
            $(".error-border").removeClass("error-border");

            $.ajax({
                method: "POST",
                data: formData,
                url: '{{route('admin.booking.store')}}',
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function(){
                    $('#submit_button').prop('disabled', true);
                    $('#submit_button').html('<span class="spinner-border spinner-border-sm"></span> Loading...');
                },
                success: function (response) {
                    if (response.success) {
                        window.location.href = response.redirect_url;
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message,
                            icon: 'error',
                        });
                    }
                },
                error : function (errors) {
                    if (errors.status === 422) {
                        var errors = errors.responseJSON.errors;
                        for (let field in errors) {
                            if (errors.hasOwnProperty(field)) {
                                let errorMessages = errors[field];
                                let fieldElement = $(`[name="${field}"]`);
                                
                                errorMessages.forEach(function(message) {
                                    fieldElement.after(`<span class="error-message" style="color: red;">${message}</span>`);
                                });

                                fieldElement.addClass("error-border");
                            }
                        }
                    }
                },
                complete: function() {
                    $('#submit_button').prop('disabled', false);
                    $('#submit_button').html('Submit');
                },
            });
        }
    });
</script>

<script>
    const searchUrl = @json(route('admin.booking.search-customer'));

    $(document).ready(function() {
        $('#search_key').on('change', function() {
            performSearch();
        });

        // Trigger search when search_value input changes
        $('#search_value').on('keyup', function() {
            performSearch();
        });

        function performSearch() {
            let searchKey = $('#search_key').val();
            let searchValue = $('#search_value').val();

            // Ensure search value is not empty
            if (searchValue.length > 1) {
                $.ajax({
                    url: searchUrl, // Use generated route URL
                    type: 'GET',
                    data: {
                        search_key: searchKey,
                        search_value: searchValue
                    },
                    beforeSend: function() {
                        // Show loading indicator
                        $('#loadingIndicator').show();
                    },
                    success: function(response) {
                        console.log(response);

                        const tbody = $('table tbody');
                        tbody.empty();

                        if (response.length > 0) {
                        response.forEach(record => {
                            const row = `
                                <tr>
                                    <td>${record.id}</td>
                                    <td>${record.name}</td>
                                    <td>${record.email}</td>
                                    <td>${record.phone}</td>
                                    <td>
                                        <input type="checkbox" class="select-customer" 
                                        data-name="${record.name}" 
                                        data-email="${record.email}" 
                                        data-phone="${record.phone}">
                                    </td>
                                </tr>
                            `;
                            tbody.append(row);
                        });
                    } else {
                            const noRecordRow = `
                                <tr>
                                    <td colspan="5" class="text-center">No records found</td>
                                </tr>
                            `;
                            tbody.append(noRecordRow);
                        }
                    },
                    error: function(error) {
                        console.log("Error:", error);
                    },
                    complete: function() {
                        $('#loadingIndicator').hide();
                    },
                });
            } else {
                $('table tbody').empty();
                $('#loadingIndicator').hide(); // Hide loading indicator if no search
            }
        }
    });

    $(document).on('change', '.select-customer', function() {
        // Uncheck all other checkboxes if only one selection is allowed
        $('.select-customer').not(this).prop('checked', false);

        if ($(this).is(':checked')) {
            // Get data attributes from the selected checkbox
            let name = $(this).data('name');
            let email = $(this).data('email');
            let phone = $(this).data('phone');

            // Fill the input fields with the selected customer's data
            $('#customer_name').val(name);
            $('#customer_email').val(email);
            $('#customer_phone').val(phone);

            $('#passenger_name').val(name);
            $('#passenger_email').val(email);
            $('#passenger_phone').val(phone);
        } else {
            // Clear the input fields if the checkbox is unchecked
            $('#customer_name').val('');
            $('#customer_email').val('');
            $('#customer_phone').val('');

            $('#passenger_name').val('');
            $('#passenger_email').val('');
            $('#passenger_phone').val('');
        }
    });

    $(document).ready(function() {
        $('#customer_name').on('keyup', function() {
            if ($('#passenger_name').prop('readonly')) {
                $('#passenger_name').val($(this).val());
            }
        });

        $('#customer_email').on('keyup', function() {
            if ($('#passenger_email').prop('readonly')) {
                $('#passenger_email').val($(this).val());
            }
        });

        $('#customer_phone').on('keyup', function() {
            if ($('#passenger_phone').prop('readonly')) {
                $('#passenger_phone').val($(this).val());
            }
        });
    });

    document.getElementById('edit_passenger').addEventListener('click', function() {
        document.getElementById('passenger_name').removeAttribute('readonly');
        document.getElementById('passenger_email').removeAttribute('readonly');
        document.getElementById('passenger_phone').removeAttribute('readonly');
    });

</script>

@endsection