@extends('layouts.app-admin')

@section('content')
    <link href="{{ asset('assets/css/selects/select2.min.css') }}" rel="stylesheet" />

    <style>
        .select2-container .select2-selection--single {
            height: 42px;
            padding: 6px 12px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 14px;
            background-color: #fff;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px;
            right: 10px;
        }

        .select2-container--default .select2-selection--single:hover {
            border-color: #80bdff;
        }

        .select2-container--default .select2-selection--single:focus {
            outline: none;
            border-color: #80bdff;
            box-shadow: 0 0 3px rgba(128, 189, 255, 0.75);
        }

        .select2-container .select2-selection__rendered {
            line-height: 42px;
        }
    </style>
    <div class="card card-custom shadow-sm mt-5">
        <div class="card-header bg-primary text-white py-4">
            <h3 class="card-title font-weight-bolder">Get Support - Feel Free to Ask Your Question Below</h3>
        </div>

        <div class="card-body">
            <form action="{{ route('admin.general_support.submit') }}" method="POST">
                @csrf
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label class="form-label">Customer Name <span class="text-danger">*</span></label>
                        <select class="form-control select2" name="customer_id" id="customer_id">
                            <option value="">Select Customer Name</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->full_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Transporter Name <span class="text-danger">*</span></label>
                        <select class="form-control select2" name="broker_id" id="broker_id">
                            <option value="">Select Transporter Name</option>
                            @foreach ($brokers as $broker)
                                <option value="{{ $broker->id }}">{{ $broker->full_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-6">
                        <label class="form-label">Customer Mail <span class="text-danger">*</span></label>
                        <select class="form-control select2" name="customer_email" id="customer_email">
                            <option value="">Select Customer Mail</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->email }}">{{ $customer->email }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Transporter Mail <span class="text-danger">*</span></label>
                        <select class="form-control select2" name="transporter_email" id="transporter_email">
                            <option value="">Select Transporter Mail</option>
                            @foreach ($brokers as $broker)
                                <option value="{{ $broker->email }}">{{ $broker->email }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-12">
                        <label class="form-label">Subject <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="subject" placeholder="Enter Subject">
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-12">
                        <label class="form-label">Select Reason <span class="text-danger">*</span></label>
                        <select class="form-control select2" name="type" id="type">
                            <option value="1">Dispute</option>
                            <option value="2">Shipment</option>
                            <option value="3">Other</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-12">
                        <label class="form-label">ATC Support Comments <span class="text-danger">*</span></label>
                        <textarea class="form-control" rows="6" name="message">
Hello, we are now starting communication with both parties (Customer & Transporter) to get some clarity on this matter. I will also be copied on this message to provide any assistance with clarifying our policies.

Shipment Details: Reason:
Regards,
ATC Marketplace | Support Team
                        </textarea>
                    </div>
                </div>

                <div class="text-end">
                    <button type="submit" class="btn btn-primary px-6 py-3 font-weight-bold">
                        <i class="fa fa-paper-plane"></i> Send Message
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('extra-scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="{{ asset('assets/vendors/select/select2.full.min.js') }}" type="text/javascript"></script>

    <script>
        $(document).ready(function() {
            $(".select2").select2();
            $('select[id="type"]').change(function() {
                const typeValue = $(this).val();
                const shipmentField = $('#shipment-field');

                if (typeValue == 2) {
                    if (shipmentField.length === 0) {
                        $('<div class="row mb-4" id="shipment-field">' +
                            '<div class="col-md-12">' +
                            '<label class="form-label">Shipment ID <span class="text-danger">*</span></label>' +
                            '<input type="text" class="form-control" name="shipment_id" id="shipment_id" placeholder="Enter Shipment ID">' +
                            '</div>' +
                            '</div>').insertAfter($(this).closest('.row'));
                    }
                } else {
                    shipmentField.remove();
                }
            });

            $('form').validate({
                rules: {
                    customer_id: {
                        required: true
                    },
                    customer_email: {
                        required: true,
                        email: true
                    },
                    broker_id: {
                        required: true
                    },
                    transporter_email: {
                        required: true,
                        email: true
                    },
                    subject: {
                        required: true
                    },
                    type: {
                        required: true
                    },
                    message: {
                        required: true
                    },
                    shipment_id: {
                        required: function() {
                            return $('select[name="type"]').val() == 2;
                        }
                    }
                },
                messages: {
                    customer_id: "Please select a customer name.",
                    customer_email: "Please select a customer email.",
                    broker_id: "Please select a transporter name.",
                    transporter_email: "Please select a transporter email.",
                    subject: "Please enter the subject.",
                    reason: "Please select the reason.",
                    message: "Please enter your support message.",
                    shipment_id: "Please enter the shipment ID."
                },
                submitHandler: function(form) {
                    const customerName = $('#customer_id').val();
                    const customerMail = $('#customer_email').val();
                    const transporterName = $('#broker_id').val();
                    const transporterMail = $('#transporter_email').val();

                    $.ajax({
                        url: '{{ route('admin.general_support.verify.matching') }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            customer_id: customerName,
                            customer_email: customerMail,
                            broker_id: transporterName,
                            transporter_email: transporterMail
                        },
                        success: function(response) {
                            let errorMessages = [];

                            if (!response.customer_match) {
                                errorMessages.push(
                                    '<li>Customer name and email do not match.</li>');
                            }

                            if (!response.transporter_match) {
                                errorMessages.push(
                                    '<li>Transporter name and email do not match.</li>');
                            }

                            if (errorMessages.length > 0) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Mismatch Detected!',
                                    html: `<ul>${errorMessages.join('')}</ul>`,
                                    confirmButtonText: 'OK'
                                });
                                return;
                            }

                            Swal.fire({
                                icon: 'success',
                                title: 'Validation Successful!',
                                text: 'Form is valid. Submitting now...',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => {
                                form.submit();
                            });
                        },
                        error: function() {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'An issue occurred during validation. Please try again.',
                                confirmButtonText: 'OK'
                            });
                        }
                    });
                },
                errorPlacement: function(error, element) {
                    if (!Swal.isVisible()) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error!',
                            text: error.text(),
                            confirmButtonText: 'OK'
                        });
                    }
                }
            });

            let queryString = window.location.search;

            let id = queryString.replace("?", "");

            if (id && !isNaN(id)) {
                $.ajax({
                    url: '{{ route('admin.shipment.cancelled.getThreeWayDetails') }}?id=' + id,                    
                    type: "GET",
                    dataType: "json",
                    success: function(response) {
                        if (response.customer_id) {
                            console.log(response);
                            $("#customer_id").val(response.customer_id).trigger('change.select2').prop('disabled', true);
                            $("#broker_id").val(response.transporter_id).trigger('change.select2').prop('disabled', true);
                            $("#customer_email").val(response.customer_email).trigger('change.select2').prop('disabled', true);
                            $("#transporter_email").val(response.transporter_email).trigger('change.select2').prop('disabled', true);
                            $('#type').val(2).trigger('change.select2'); 
                            $('#type').prop('disabled', true); 
                            $('#shipment_id').prop('readonly', true);
                            $('form').append(`<input type="hidden" name="customer_id" value="${response.customer_id}">`);
                            $('form').append(`<input type="hidden" name="broker_id" value="${response.transporter_id}">`);
                            $('form').append(`<input type="hidden" name="customer_email" value="${response.customer_email}">`);
                            $('form').append(`<input type="hidden" name="transporter_email" value="${response.transporter_email}">`);
                            $('form').append(`<input type="hidden" name="shipment_id" value="${id}">`);
                            $('form').append(`<input type="hidden" name="type" value="2">`);


                        } else {
                            console.error("Invalid Response Data:", response);
                            alert("No data found for this ID.");
                        }
                    },
                    error: function(xhr) {
                        console.error("AJAX Error:", xhr.responseText);
                    }
                });
            }
        });
    </script>
@endsection