@extends('layouts.admin')
@section('content')
<style>
    .bg-success {
        background-color: #343a40 !important;
        ;
    }

    .lead_heading {
        font-size: 1.4rem;
    }

    .error {
        color: red;
    }

    .followup_text {
        display: none;
    }
</style>
<section class="content-header">
    <div class="container">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Booking Detail</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.bookings')}}">Booking List</a></li>
                    <li class="breadcrumb-item active">Booking Detail</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<div>
    @if (session()->has('message'))
    <div class="alert alert-success">
        {{ session('message') }}
    </div>
    @endif
</div>
<div>
    <livewire:new-livewire.booking.booking-details :booking="$booking" :booking_comments="$booking_comments"
        :booking_reasons="$booking_reasons" :drivers="$drivers" :vehicles="$vehicles">
</div>
@endsection
@section('scripts')
<script>
    $(".textarea").summernote({
            height: 300
        });
</script>
<script>
    $(document).ready(function() {
            $('.template_id').change(function() {
                var template_id = $(this).val();
                if (template_id == 'follow_up') {

                    $(".followup_text").show();

                    var booking_id = $(this).data('booking_id');
                    $.ajax({
                        type: 'POST',
                        url: "{{ route('admin.booking.get_followups') }}",
                        data: {

                            booking_id: booking_id,
                            "_token": "{{ csrf_token() }}"
                        },
                        success: function(response) {

                            $('#accordionExample_' + booking_id).empty();
                            if (response.status == 200) {
                                // Create accordion items based on response data
                                response.data.forEach(function(item, index) {
                                    var accordionItem = `
                                    <div class="card">
                                        <div class="card-header" id="heading${item.id}">
                                            <h2 class="mb-0">
                                                <button class="btn btn-link ${index === 0 ? '' : 'collapsed'}" type="button" data-toggle="collapse" data-target="#collapse${item.id}" aria-expanded="${index === 0}" aria-controls="collapse${item.id}">
                                                    Follow Up #${index + 1}
                                                </button>
                                            </h2>
                                        </div>

                                        <div id="collapse${item.id}" class="collapse ${index === 0 ? 'show' : ''}" aria-labelledby="heading${item.id}" data-parent="#accordionExample_${booking_id}">
                                            <div class="card-body">
                                                ${item.comment}
                                            </div>
                                        </div>
                                    </div>
                                `;
                                    $('#accordionExample_' + booking_id).append(
                                        accordionItem);
                                });
                            }
                        }
                    });

                } else {
                    $(".followup_text").hide();
                }
            });
        });
</script>
<script>
    function SubmitAssignDriver(booking_id) {
            var bookingId = $("#assign_booking_id" + booking_id).val();
            var driverId = $("#assign_driver_id" + booking_id).val();
            var price = $("#price" + booking_id).val();
            var driver_note = $("#drivernote" + booking_id).val();
            var pick_up_sign = $("#pickupsign" + booking_id).val();

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.assign') }}",
                data: {
                    booking_id: bookingId,
                    driver_id: driverId,
                    price: price,
                    driver_note: driver_note,
                    pick_up_sign: pick_up_sign,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {
                    console.log(data);
                    if (data.status == 200) {

                        $("#assign_driver").show();
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    } else if (data.status == 400) {
                        $("#error").text(data.msg);
                    } else if (data.status == 422) {
                        $("#assign_driver").hide();
                        $("#already_assign_driver").show();
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    }
                }
            });
        }

        function SubmitEditVehicle(booking_id) {
            var bookingId = $("#edit_vehicle_booking_id" + booking_id).val();
            var vehicleId = $("#assign_vehicle_id" + booking_id).val();


            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.updatevehicle') }}",
                data: {
                    booking_id: bookingId,
                    vehicleId: vehicleId,

                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {

                    if (data.status == 200) {

                        $("#update_vehicle").show();
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    } else {
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    }
                }
            });
        }

        function SubmitEmail(tmpID) {
            $("#emailsubmit").prop('disabled', true);
            $(".loader").show();
            var template_id = $("#template_id" + tmpID).val();
            var email = $("#customer_email" + tmpID).val();
            var booking_id = $("#booking_id_email" + tmpID).val();
            var message = $(".followup_text_" + tmpID).val();
            // var message = $("#message" + tmpID).summernote('code');
            console.log("Template ID: " + template_id);
            console.log("Email: " + email);
            console.log("Booking ID: " + booking_id);
            console.log("Message: " + message);

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.sendmail') }}",
                data: {
                    template: template_id,
                    email: email,
                    booking_id: booking_id,
                    message: message,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {
                    $("#emailsubmit").prop('disabled', false);
                    $(".loader").hide();
                    if (data.status == 200) {
                        $("#mailsuccess" + tmpID).show();
                        $("#mailsuccess" + tmpID).text(data.msg);
                        // setTimeout(function() {
                        //     window.location.reload();
                        // }, 2000);
                    } else {
                        $("#mailsuccess" + tmpID).hide();
                        $("#mailerror" + tmpID).show();
                        $("#mailerror" + tmpID).text(data.msg);

                    }
                }
            });
        }

        function SubmitSMS(tmpID) {
            $("#smssubmit").prop('disabled', true);
            $(".loader").show();
            var template_id = $("#sms_template_id" + tmpID).val();
            var number = $("#customer_sms" + tmpID).val();
            var booking_id = $("#booking_id_sms" + tmpID).val();
            var send_from = $("#send_from" + tmpID).val();

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.sendsms') }}",
                data: {
                    template: template_id,
                    number: number,
                    booking_id: booking_id,
                    send_from: send_from,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {
                    $("#smssubmit").prop('disabled', false);
                    $(".loader").hide();
                    if (data.status == 200) {
                        $("#smssuccess" + tmpID).show();
                        $("#smssuccess" + tmpID).text(data.msg);
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    } else {
                        $("#smssuccess" + tmpID).hide();
                        $("#smserror" + tmpID).show();
                        $("#smserror" + tmpID).text(data.msg);

                    }
                }
            });
        }

        function SubmitEditPaymentMethod(booking_id) {
            var bookingId = $("#edit_payment_method_booking_id" + booking_id).val();
            var paymentStatus = $("#assign_payment_status_id" + booking_id).val();
            var paymentMethod = $("#assign_payment_method_id" + booking_id).val();

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.updatePaymentMethodAndType') }}",
                data: {
                    booking_id: bookingId,
                    payment_status: paymentStatus,
                    payment_method: paymentMethod,

                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {

                    if (data.status == 200) {

                        $("#update_payment_method").show();
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    } else {
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    }
                }
            });
        }

        $(document).ready(function () {
            $('#edit_driver_form').on('submit', function (e) {
                e.preventDefault(); // Prevent default form submission

                var formData = $(this).serialize(); // Serialize form data

                $.ajax({
                    url: "{{ route('admin.booking.editDriver') }}", // Update with your route name
                    type: "POST",
                    data: formData,
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}" // Include CSRF token for Laravel
                    },
                    beforeSend: function () {
                        $('#error').hide().html('');
                    },
                    success: function (response) {
                        if (response.success) {
                            alert('Driver updated successfully!');
                            location.reload(); // Refresh or redirect if needed
                        } else {
                            $('#error').show().html(response.message);
                        }
                    },
                    error: function (xhr) {
                        if (xhr.status === 422) { // Laravel validation error
                            var errors = xhr.responseJSON.errors;
                            $.each(errors, function (key, value) {
                                var inputField = $('[name="' + key + '"]');
                                inputField.after('<span class="text-danger">' + value[0] + '</span>'); // Append error message below input
                            });
                        } else {
                            $('#error').show().html('Something went wrong. Please try again.');
                        }
                    }
                });
            });
        });

        // function SubmitEditDriver(booking_id) {
        //     var bookingId = $("#edit_driver_booking_id" + booking_id).val();
        //     var driverId = $("#edit_driver_id" + booking_id).val();

        //     $.ajax({
        //         type: 'POST',
        //         url: "{{ route('admin.booking.editDriver') }}",
        //         data: {
        //             booking_id: bookingId,
        //             driver_id: driverId,
        //             "_token": "{{ csrf_token() }}"
        //         },
        //         success: function(data) {
        //             console.log(data);
        //             if (data.status == 200) {

        //                 $("#assign_driver").show();
        //                 setTimeout(function() {
        //                     window.location.reload();

        //                 }, 2000);
        //             } else if (data.status == 400) {
        //                 $("#error").text(data.msg);
        //             } else if (data.status == 422) {
        //                 $("#assign_driver").hide();
        //                 $("#already_assign_driver").show();
        //                 setTimeout(function() {
        //                     window.location.reload();

        //                 }, 2000);
        //             }
        //         }
        //     });
        // }

        function SubmitBookingComment(booking_id) {
            var bookingId = $("#booking_id" + booking_id).val();
            var booking_comment = $("#booking_comment" + booking_id).val();

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.add-comment') }}",
                data: {
                    booking_id: bookingId,
                    booking_comment: booking_comment,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {
                    console.log(data);
                    if (data.status == 200) {

                        $("#add_comment").show();
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    } else if (data.status == 400) {
                        $("#error").text(data.msg);
                    } else if (data.status == 422) {
                        $("#add_comment").hide();
                        $("#already_assign_driver").show();
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    }
                }
            });
        }

        function ChangeLeadStatus(booking_id) {
            var bookingId = $("#booking_id" + booking_id).val();
            var lead_status = $("#lead_status" + booking_id).val();
            var booking_reason = $("#booking_reason" + booking_id).val();

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.change-lead-status') }}",
                data: {
                    booking_id: bookingId,
                    lead_status: lead_status,
                    booking_reason: booking_reason,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {
                    console.log(data);
                    if (data.status == 200) {

                        $("#add_reason").show();
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    } else if (data.status == 400) {

                        // error_lead first display block
                        $("#error_lead").show();

                        $("#error_lead").text(data.msg);
                    } else if (data.status == 422) {
                        $("#add_reason").hide();
                        $("#already_assign_driver").show();
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    }
                }
            });
        }
</script>
<script>
    $(document).ready(function() {
            $('#copyBtn').click(function() {
                // Build the text to copy
                var copyText = "Pick up Address: " + $('#pickup').text().trim() + "\n" +
                    "Destination Address: " + $('#drop').text().trim() + "\n" +
                    "Date: " + $('#date').text().trim() + "  Time: " + $('#time').text().trim() + "\n" +
                    "No. of Passengers: " + $('#passengers').text().trim() + "\n" +
                    "No. of Luggage's: " + $('#luggage').text().trim() + "\n" +
                    "Price: " + $('#price').text().trim();

                // Check if the Clipboard API is supported
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(copyText).then(function() {
                        // Success
                        alert("Dispatch message copied to clipboard!");
                    }).catch(function(error) {
                        // Handle error
                        console.error("Failed to copy text: ", error);
                        alert("Failed to copy text. Please try again.");
                    });
                } else {
                    // Fallback for older browsers that do not support Clipboard API
                    var $temp = $("<textarea>");
                    $temp.css({
                        position: "absolute",
                        left: "-9999px",
                        top: "0"
                    });
                    $("body").append($temp);
                    $temp.val(copyText).select();

                    try {
                        document.execCommand("copy");
                        alert("Dispatch message copied to clipboard!");
                    } catch (err) {
                        console.error("Unable to copy to clipboard", err);
                        alert("Failed to copy text. Please try again.");
                    }

                    $temp.remove();
                }
            });
            $('#copyBtn2').click(function() {
                // Build the text to copy
                var copyText = "Name: " + $('#name').text().trim() + "\n" +
                    "Phone: " + $('#phone').text().trim() + "\n" +
                    "Pick up Address: " + $('#pickup').text().trim() + "\n" +
                    "Destination Address: " + $('#drop').text().trim() + "\n" +
                    "Date: " + $('#date').text().trim() + "  Time: " + $('#time').text().trim() + "\n" +
                    "No. of Passengers: " + $('#passengers').text().trim() + "\n" +
                    "No. of Luggage's: " + $('#luggage').text().trim() + "\n" +
                    "Flight Number: " + $('#flight').text().trim() + "\n" +
                    "Price: " + $('#price').text().trim();

                // Check if the Clipboard API is supported
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(copyText).then(function() {
                        // Success
                        alert("Dispatch message copied to clipboard!");
                    }).catch(function(error) {
                        // Handle error
                        console.error("Failed to copy text: ", error);
                        alert("Failed to copy text. Please try again.");
                    });
                } else {
                    // Fallback for older browsers that do not support Clipboard API
                    var $temp = $("<textarea>");
                    $temp.css({
                        position: "absolute",
                        left: "-9999px",
                        top: "0"
                    });
                    $("body").append($temp);
                    $temp.val(copyText).select();

                    try {
                        document.execCommand("copy");
                        alert("Dispatch message copied to clipboard!");
                    } catch (err) {
                        console.error("Unable to copy to clipboard", err);
                        alert("Failed to copy text. Please try again.");
                    }

                    $temp.remove();
                }
            });
            $('#copyBtn3').click(function() {
                // Build the text to copy
                var copyText = "Hello " + $('#name').text().trim() + ",\n" +
                    "Thanks for reaching out to us.\n" +
                    "Below is the quote for your trip:\n\n" +
                    "Base price for a Full-Size SUV: $" + $('#basePrice').text().trim() + "\n" +
                    "Toll: " + $('#toll').text().trim() + "\n" +
                    "Std gratuity: " + $('#std_grat').text().trim() + "\n" +
                    "Administrative charges: " + $('#admin_charge').text().trim() + "\n\n" +
                    "Total: " + $('#total').text().trim() + "\n\n" +
                    "We have upper model Full-Size SUVs like Suburban, Escalade, and GMC Yukon (depending on availability).\n\n" +
                    "Let us know if you wish to proceed.\n" +
                    "Feel free to ask if you have any questions.\n\n" +
                    "Best Regards,\n" +
                    $('#sender_name').text().trim() + "\n" +
                    $('#project_name').text().trim();

                // Check if the Clipboard API is supported
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(copyText).then(function() {
                        // Success
                        alert("Quotation message copied to clipboard!");
                    }).catch(function(error) {
                        // Handle error
                        console.error("Failed to copy text: ", error);
                        alert("Failed to copy text. Please try again.");
                    });
                } else {
                    // Fallback for older browsers that do not support Clipboard API
                    var $temp = $("<textarea>");
                    $temp.css({
                        position: "absolute",
                        left: "-9999px",
                        top: "0"
                    });
                    $("body").append($temp);
                    $temp.val(copyText).select();

                    try {
                        document.execCommand("copy");
                        alert("Quotation message copied to clipboard!");
                    } catch (err) {
                        console.error("Unable to copy to clipboard", err);
                        alert("Failed to copy text. Please try again.");
                    }

                    $temp.remove();
                }
            });
        });
</script>
@endsection