@extends('layouts.master')
@section('style')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<style>
    /* Increase specificity of CSS selectors */
    /* Override default DataTables styles with !important */
    #myTable.dataTable th,
    #myTable.dataTable td {
        padding: 8px !important;
        border-top: 1px solid #dee2e6 !important;
        /* Add small border on top */
        border-bottom: 1px solid #dee2e6 !important;
        /* Add small border on bottom */
        min-width: 150px !important;
        /* Set minimum width */
    }

    #myTable.dataTable tbody tr {
        margin-bottom: 10px !important;
        /* Add margin between rows */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        /* Add shadow effect */
    }

    .modal-header {
        border-bottom: none;
    }

    .dt-buttons {
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }

    .dt-button {
        background-color: #309cdc !important;
        color: white;
        border: none;
        padding: 8px 16px;
        margin: 0 5px;
        border-radius: 4px;
        cursor: pointer;
    }

    .dt-button:hover {
        background-color: #0056b3;
    }
</style>
@endsection

@section('content')
<main id="main" class="main">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <section class="section dashboard">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Bookings</h1>
                    </div>
                </div>
            </div>
        </div>


        <div class="card-body mt-5 table-responsive bg-white py-4 rounded">
            <div class="col-12 d-flex flex-wrap gap-2 align-items-center">
                @role('Administrator')
                <div class="mb-3 col-12 col-md-6 col-xl-3">
                    <label for="userSelect" class="form-label">Select User</label>
                    <select multiple id="userSelect" class="form-select">
                        @foreach($users as $user)
                            <option value="{{ $user->id }}">{{ $user->company_name }}</option>
                        @endforeach
                    </select>
                </div>
                @endrole
                <div class="mb-3 col-12 col-md-6 col-xl-3">
                    <label for="courierSelect" class="form-label">Select Courier</label>
                    <select multiple id="courierSelect" class="form-select">
                        @foreach($parentCouriers as $courier)
                            <option value="{{ $courier->display_name }}">{{ $courier->display_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3 col-6 col-md-3 col-xl-2">
                    <label for="payStatus" class="form-label">Pay Status</label>
                    <select id="payStatus" class="form-select">
                        <option value="">All</option>
                        <option value="1">Paid</option>
                        <option value="0">Unpaid</option>
                    </select>
                </div>
                <div class="mb-3 col-6 col-md-3 col-xl-2">
                    <label for="invoiceStatus" class="form-label">Is Invoice Pay</label>
                    <select id="invoiceStatus" class="form-select">
                        <option value="">All</option>
                        <option value="1">Yes</option>
                        <option value="0">No</option>
                    </select>
                </div>
                <div class="mb-3 col-6 col-md-3 col-xl-2">
                    <label for="isError" class="form-label">Booking Status</label>
                    <select id="isError" class="form-select">
                        <option value="">All</option>
                        <option value="0">Booked</option>
                        <option value="1">Pending</option>
                    </select>
                </div>

                @role('Administrator')
                <div class="mb-3 col-12 col-md-6 col-xl-2">
                    <label for="actionsSelect" class="form-label">Actions</label>
                    <select id="actionsSelect" class="form-select">
                        <option value="">Select an action</option>
                        <option value="cancel">Cancel Labels</option>
                        <option value="markPaid">Mark Labels as Paid</option>
                    </select>
                </div>
                @endrole
            </div>


            <div class="table-responsive">

                <table id="myTable" class="table text-center responsive">
                    <thead>
                        <tr class='text-center'>
                            <input type="checkbox" class="specifyColor form-check-input custom-control-input"
                                id="select-all-rows" role="button">Select All Rows <th class='text-center'>Courier</th>
                            <th class='text-center'>Booked By</th>
                            <th class='text-center'>Customer</th>
                            <th class='text-center'>Origin</th>
                            <th class='text-center'>Destination</th>
                            <th class='text-center'>Items & Weight</th>
                            <th class='text-center'>Price</th>
                            <th class='text-center'>Ordered at</th>
                            <th class='text-center'>Tracking ID</th>
                            <th class='text-center'>Action</th>
                        </tr>
                    </thead>
                    <tbody id="tablebody">
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</main>
<!-- Bootstrap Modal for Details -->
<div class="modal fade modal-lg" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">Booking Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="details-tab" data-bs-toggle="tab" href="#details" role="tab"
                            aria-controls="details" aria-selected="true">Details</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="json-tab" data-bs-toggle="tab" href="#json" role="tab"
                            aria-controls="json" aria-selected="false">JSON</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                        <!-- Booking details content goes here -->
                        <div id="bookingDetailsContent">
                            <!-- Populate with booking details -->
                        </div>
                    </div>
                    <div class="tab-pane fade" id="json" role="tabpanel" aria-labelledby="json-tab">
                        <pre id="bookingJsonContent">
                            <!-- Populate with booking JSON -->
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script>
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover();
    });
</script>
<script>


    $(document).ready(function () {
        function updateURLParameter(name, value) {
            const url = new URL(window.location);
            if (value === "" || (Array.isArray(value) && value.length === 0)) {
                url.searchParams.delete(name);
            } else {
                url.searchParams.set(name, value);
            }
            window.history.replaceState(null, null, url);
        }

        // Save filter selections to URL parameters
        function saveFiltersToURL() {

            const courierSelect = Array.from(document.getElementById('courierSelect').selectedOptions).map(option => option.value).join(',');
            const userSelect = Array.from(document.getElementById('userSelect').selectedOptions).map(option => option.value).join(',');
            const payStatus = document.getElementById('payStatus').value;
            const invoiceStatus = document.getElementById('invoiceStatus').value;
            const isError = document.getElementById('isError').value;

            updateURLParameter('userSelect', userSelect);
            updateURLParameter('courierSelect', courierSelect);
            updateURLParameter('payStatus', payStatus);
            updateURLParameter('invoiceStatus', invoiceStatus);
            updateURLParameter('isError', isError);
        }

        // Load filter selections from URL parameters
        // Load filter selections from URL parameters
        function loadFiltersFromURL() {
        console.log('Loading filters from URL');
        const urlParams = new URLSearchParams(window.location.search);
        const userSelect = urlParams.get('userSelect') ? urlParams.get('userSelect').split(',') : [];
        const courierSelect = urlParams.get('courierSelect') ? urlParams.get('courierSelect').split(',') : [];
        const payStatus = urlParams.get('payStatus') || "";
        const invoiceStatus = urlParams.get('invoiceStatus') || "";
        const isError = urlParams.get('isError') || "";
      

        $('#payStatus').val(payStatus).trigger('change');
        $('#userSelect').val(userSelect).trigger('change');
        $('#courierSelect').val(courierSelect).trigger('change');
        $('#invoiceStatus').val(invoiceStatus).trigger('change');
        $('#isError').val(isError).trigger('change');
      }

       
        // Load filters from URL on page load
        $(document).ready(function () {
            loadFiltersFromURL();
        });
        var currentUrl = window.location.href;

        // Extract the part of the URL containing the IDs
        var idsString = currentUrl.split('/').pop();

        // Split the IDs string into an array
        var idsArray = idsString.split(',');
        var table = $('#myTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('bookings.index') }}" + "/" + idsArray,
                type: 'GET',
                data: function (d) {
                    d.user_ids = $('#userSelect').val();
                    d.courier_names = $('#courierSelect').val();
                    d.payStatus = $('#payStatus').val();
                    d.invoiceStatus = $('#invoiceStatus').val();
                    d.isError = $('#isError').val();
                }
            },
            columns: [
                { data: 'courier', name: 'courier', orderable: true }, // Allow sorting
                { data: 'booked_by', name: 'booked_by', orderable: false }, // Allow sorting
                { data: 'customer', name: 'customer', orderable: false }, // Allow sorting
                { data: 'origin', name: 'origin', orderable: false }, // Allow sorting
                { data: 'destination', name: 'destination', orderable: false }, // Allow sorting
                { data: 'items_weight', name: 'items_weight', orderable: false }, // Allow sorting
                { data: 'price', name: 'price', orderable: true }, // Allow sorting
                { data: 'created_at', name: 'created_at', orderable: true }, // Allow sorting
                { data: 'tracking_id', name: 'tracking_id', orderable: false }, // Allow sorting
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            order: [[7, "desc"]],
            dom: '<"d-flex justify-content-between"lfB>rtip', // Adjusted for layout
            buttons: [
                {
                    extend: 'copy',
                    text: 'Copy',
                    className: ' bg-primary' // Bootstrap primary class
                },
                {
                    extend: 'csv',
                    text: 'CSV',
                    className: ' bg-primary' // Bootstrap primary class
                },
                {
                    extend: 'excel',
                    text: 'Excel',
                    className: ' bg-primary' // Bootstrap primary class
                },
                {
                    extend: 'pdf',
                    text: 'PDF',
                    customize: function (doc) {
                        // Set column widths
                        doc.content[1].table.widths = ['10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%', '10%'];

                        // Adjust page margins
                        doc.pageMargins = [10, 10, 10, 10];

                        // Set font size for the table
                        doc.defaultStyle.fontSize = 8;

                        // Set font size for the table header
                        doc.styles.tableHeader.fontSize = 10;

                        // If necessary, reduce the font size further or adjust the table layout
                        doc.styles.tableBodyOdd.alignment = 'center';
                        doc.styles.tableBodyEven.alignment = 'center';
                    },
                    className: ' bg-primary' // Bootstrap primary class
                },
                {
                    extend: 'print',
                    text: 'Print',
                    className: ' bg-primary' // Bootstrap primary class
                }
            ]

        });
        $('#userSelect, #courierSelect, #isError ,#invoiceStatus, #payStatus').on('change', function () {
            table.ajax.reload();
            saveFiltersToURL();
        });
        //Handle click event for the "Details" button
        $('#myTable tbody').on('click', '.details-btn', function () {

            var detailsData = $(this).data('details');
            var logo = $(this).data('logo');
            console.log(detailsData);
            var rowData = detailsData;

            // Update modal content
            var detailsContent = getBookingDetails(rowData, logo);
            $('#detailsModal .modal-body').html(detailsContent);

            // Open the modal
            $('#detailsModal').modal('show');
        });
        $('#myTable tbody').on('click', '.json-btn', function () {

            var detailsData = $(this).data('details');
            var logo = $(this).data('logo');
            console.log(detailsData);
            var rowData = detailsData;

            // Update modal content
            var detailsContent = getBookingReqJson(rowData, logo);
            $('#detailsModal .modal-body').html(detailsContent);

            // Open the modal
            $('#detailsModal').modal('show');
        });
        //     $('#tablebody').on('click', '.booking-row', function () {

        //         var $target = $(event.target);
        //     if ($target.hasClass('details-btn') || $target.hasClass('json-btn') || $target.hasClass('actionbtn') ) {
        //         alert('yes')
        //         return;
        //     }

        //         var detailsData = $(this).data('details');
        //         var logo = $(this).data('logo');

        //         var rowData = detailsData;


        // // Update modal content
        // var detailsContent = getBookingDetails(rowData,logo);
        // $('#detailsModal .modal-body').html(detailsContent);

        // // Open the modal
        // $('#detailsModal').modal('show');
        //     });
        //  
        function getBookingDetails(rowData, logo) {

            console.log('Row data', rowData);
            // Customize this function based on your actual data structure
            var html = `<div class="row">
        <div class="col-12">
            <table class="table">
                <tbody><tr>
            <th>Reference No</th>
         <td>${rowData.reference}</td></tr><tr>
            <th>Booked On</th>
         <td>${new Date(rowData.created_at).toLocaleString()}</td></tr>
        <!-- <tr>
            <th>Booked By</th>
         <td>${rowData.user?.first_name + ' ' + rowData.user?.last_name}</td>
         </tr> -->
            <th>Download Label</th>
         <td><a class='btn btn-primary text-white' href='${rowData.uri}' target='_blank'>Download/Print Label</a></td></tr>
        `;


            html += `</tbody>
        </table>
    </div>
    <div class="col-12 cart-item" style="position:relative">
        <div class="card shadow-sm rounded-4 border">
            <div class="d-flex align-items-center align-content-center justify-content-between">
                <div class="col-sm-3 border-end p-3 d-flex flex-wrap align-items-center justify-content-center">
                <img class="img-fluid rounded" src="`+ logo + `" alt="Courier Image">
                    <b class="card-text text-center mt-2 w-full">`+ rowData?.display_name + `</b>
                </div>
                <div class="col-sm-9 px-2 py-3 d-flex justify-content-between align-items-start flex-wrap">
                    <div>
                        <div class="d-flex align-items-center gap-1">
                            <iconify-icon width="22" icon="mdi:location"></iconify-icon>
                            <h5 class="card-title">`+ rowData?.origin_postal + `</h5>
                        </div>
                        <div class="ms-2 py-3 border-start border-4 border-primary">
                        </div>
                        <div class="d-flex align-items-center gap-1">
                            <iconify-icon width="22" icon="mdi:location"></iconify-icon>
                            <h5 class="card-title">`+ rowData?.destination_postal + `</h5>
                        </div>
                    </div>
                    <div class="pe-2 pt-2">
                        <p class="w-full text-end">Items: `+ rowData?.total_items + `</p>
                        <p class="w-full text-end">Weight: `+ rowData?.total_weight + `</p>
                        <p class="w-full text-end text-primary fw-bold">Total: £ `+ rowData?.total_price + `</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 my-2">
            <div class="card shadow-sm rounded-4 border">
                <div class="card-body">
                    <h5 class="card-title">Origin Details</h5>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:account"></iconify-icon> ${rowData.origin_name}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:email"></iconify-icon> ${rowData.origin_email}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:phone"></iconify-icon> ${rowData.origin_phone}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:map-marker"></iconify-icon> ${rowData.origin_address}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:city"></iconify-icon> ${rowData.origin_city}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:mailbox"></iconify-icon> ${rowData.origin_postal}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:earth"></iconify-icon> ${rowData.origin_country}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 my-2">
            <div class="card shadow-sm rounded-4 border">
                <div class="card-body">
                    <h5 class="card-title">Destination Details</h5>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:account"></iconify-icon> ${rowData.destination_name}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:email"></iconify-icon> ${rowData.destination_email}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:phone"></iconify-icon> ${rowData.destination_phone}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:map-marker"></iconify-icon> ${rowData.destination_address}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:city"></iconify-icon> ${rowData.destination_city}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:mailbox"></iconify-icon> ${rowData.destination_postal}</p>
                    <p class="card-text"><iconify-icon width="18" icon="mdi:earth"></iconify-icon> ${rowData.destination_country}</p>
                </div>
            </div>
        </div>
        </div>
        <div class="col-12 my-2">
            <div class="card shadow-sm rounded-4 border">
                <div class="card-body">
                    <h5 class="card-title">Tracking Details</h5>`;

            // Iterate over parcels and their tracking events
            rowData.tracking_info?.data?.parcels?.forEach(parcel => {
                html += `<p class="card-text"><b>Parcel Tracking Code:</b> ${parcel.tracking_code}</p>`;
                html += `<ul class="list-group">`;
                parcel?.tracking_events?.forEach(event => {
                    html += `<li class="list-group-item">${event.status} - ${event.status_description} - Updated at: ${new Date(event.update_date).toLocaleString()}</li>`;
                });
                html += `</ul>`;
            });

            html += `</div>
            </div>
        </div>
        
        </div>`;

            return html;
        }


    });

    @if(auth()->user()->hasPermissionTo('couriers'))
        function getBookingReqJson(details) {
            var prettyData = details;
            var reqJson = JSON.parse(prettyData.req_json);

            return `
                                                <div class="row">
                                                    <div class="col-12">
                                                        <form id="regenerateForm" class='col-12' method='post' action="{{ route('regenerate')}}/${prettyData.id}">
                                                            @csrf
                                                            <label>Booking Json</label>
                                                            <textarea  disabled class='col-12' rows="20">
                                        ${JSON.stringify(prettyData, null, 2)}
                                                            </textarea>
                                                            <label>Label Request Json</label>
                                                            <textarea name='req_json'  class='col-12' rows="14">
                                        ${JSON.stringify(reqJson, null, 2)}
                                                            </textarea>
                                                            <button type='submit' class='btn btn-primary'>Regenerate Label</button>
                                                            <br>
                                                            <label>Label Error Json</label>
                                                            <textarea class='col-12' rows="5">
                                        ${prettyData.error_message}
                                                            </textarea>
                                                        </form>
                                                    </div>
                                                </div>
                                            `;
        }
    @endif
    // Update form action with prettyData.id before submitting the form
    // document.getElementById("regenerateForm").addEventListener("submit", function(event) {
    //     var form = this;
    //     var prettyDataId = prettyData.id;
    //     form.action = form.action.replace('', prettyDataId);
    //     return true;
    // });


    $(document).ready(function () {
        var selectedRows = []; // Array to store selected rows data


        document.getElementById('select-all-rows').addEventListener('change', function () {
            const isChecked = this.checked;
            const checkboxes = document.querySelectorAll('.select-row');
            selectedRows = [];

            checkboxes.forEach(checkbox => {
                var rowData = $(checkbox).data('details');
                checkbox.checked = isChecked;
                if (isChecked) {
                    selectedRows.push(rowData);
                }
            });

            console.log('Selected Rows:', selectedRows);
        });

        $('#myTable tbody').on('change', 'input[type="checkbox"]', function () {
            // Get the row data from the data-details attribute
            var rowData = $(this).data('details');
            console.log('data', rowData);
            if ($(this).is(':checked')) {
                // Add the row data to the selectedRows array
                selectedRows.push(rowData);
            } else {
                // Remove the row data from the selectedRows array
                selectedRows = selectedRows.filter(function (row) {
                    return row.id !== rowData.id;
                });
            }
        });


        // Function to mark labels as paid
        async function markLabelsAsPaid() {
            if (selectedRows.length == 0) {

                toastr.error('Please select atleast one Booking');
                return;
            }
            try {
                const response = await fetch('/bookings/mark-labels-as-paid', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    body: JSON.stringify(selectedRows.map(row => row.id)) // Assuming each row has an ID
                });

                if (response.ok) {
                    const data = await response.json();
                    console.log('Labels marked as paid:', data);
                    location.reload();

                } else {
                    console.error('Error marking labels as paid:', response.statusText);
                }
            } catch (error) {
                console.error('Error marking labels as paid:', error.message);
            }
        }
        // Handle button click event to mark labels as paid
        $(document).on('change', '#actionsSelect', function () {
            const selectedAction = $(this).val();
            if (selectedAction === 'cancel') {
                if (confirm('Are you sure you want to cancel the selected labels?')) {
                    cancelLabels();
                }
            } else if (selectedAction === 'markPaid') {
                if (confirm('Are you sure you want to mark the selected labels as paid?')) {
                    markLabelsAsPaid();
                }
            }
            // Reset the select box after an action
            $(this).val('');
        });


        async function cancelLabels() {
            console.log(selectedRows);

            if (selectedRows.length == 0) {

                toastr.error('Please select atleast one Booking');
                return;
            }
            // Prepare the request payload
            const requests = selectedRows.map(row => ({
                reference: row.reference,
                courier: row.courier,
                auth_company: 'Global Corporate Logistics - Worldwide',
                cancel_label: true,
                testing: true
            }));

            const payload = {
                requests: requests,
                webhook: {
                    url: "https://app.shipflow.io/api/booking/bulkcancel",
                    headers: {
                        "Authorization": "cwqpnhmjtrvbyafs"
                    }
                }
            };

            try {
                const response = await fetch('https://production.courierapi.co.uk/api/couriers/v1/bulk/mark-shipment-cancelled', {
                    method: 'POST',
                    headers: {
                        'api-user': 'GCL Courier Accounts',
                        'api-token': 'cwqpnhmjtrvbyafs',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                if (response.ok) {
                    const jsonResponse = await response.json();
                    console.log('API Response:', jsonResponse);
                } else {
                    console.error('API Error:', response.statusText);
                }
            } catch (error) {
                console.error('Fetch Error:', error);
            }
        }

        // // Handle button click event to cancel labels
        // $(document).on('click', '#CancelLabels', function () {
        //     if (confirm('Are you sure you want to cancel the selected labels?')) {
        //         cancelLabels();
        //     }
        // });

    });


</script>

@endsection