@extends('layouts.master')
@section('title', 'Orders')
@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>
    #ordersTable.dataTable th,
    #ordersTable.dataTable td {
        padding: 8px !important;
        border-top: 1px solid #dee2e6 !important;
        border-bottom: 1px solid #dee2e6 !important;
        min-width: 150px !important;
    }

    #ordersTable.dataTable tbody tr {
        margin-bottom: 10px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .badge-paid {
        background-color: green;
        color: white;
    }

    .badge-unpaid,
    .badge-error {
        background-color: red;
        color: white;
    }
    .badge-invoice {
    background-color: orange;
    color: white;
}
.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">
    <section class="section dashboard">
        <div class="container-fluid">
            <div class="card-body mt-5 table-responsive bg-white py-4 rounded">
                <h2>Orders</h2>

				<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>

                <table id="ordersTable" class="table">
                    <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Company</th>
                            <th>Order Booking Time</th>
                            <th>Transaction ID</th>
                            <th>Number of Bookings</th>
                            <th>Total Price</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </section>
</main>
@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 () {
    var table = $('#ordersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('orders.index') }}",
            type: 'GET',
            data: function (d) {
                d.user_ids = $('#userSelect').val();
                d.payStatus = $('#payStatus').val();
                d.invoiceStatus = $('#invoiceStatus').val();
                d.isError = $('#isError').val();
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'company', name: 'company' },
            { data: 'order_booking_time', name: 'order_booking_time' },
            { data: 'transaction_id', name: 'transaction_id' },
            { data: 'number_of_bookings', name: 'number_of_bookings' },
            { data: 'total_price', name: 'total_price' },
            { data: 'status', name: 'status' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[2, "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',
                className: ' bg-primary' // Bootstrap primary class
            },
            {
                extend: 'print',
                text: 'Print',
                className: ' bg-primary' // Bootstrap primary class
            }
        ]
 
    });

    $('#userSelect, #isError ,#invoiceStatus, #payStatus').on('change', function () {
        table.ajax.reload();
    });
});

	$(document).ready(function () {
		var selectedRows = [];

		$('#ordersTable tbody').on('change', 'input[type="checkbox"]', function () {
			// Get the row data from the data-bookings attribute
			var rowData = $(this).data('bookings');
			console.log('data', rowData);

			if ($(this).is(':checked')) {
				// Merge the rowData array into selectedRows array
				selectedRows = selectedRows.concat(rowData);
			} else {
				// Remove the row data from the selectedRows array
				selectedRows = selectedRows.filter(function (id) {
					return !rowData.includes(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(id => 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://example.com/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);
			}
		}

		$('#ordersTable').on('click', '.generate-invoice', function () {
        var orderId = $(this).data('order-id');

        $.ajax({
            url: '/orders/generate-invoice',
            type: 'POST',
            data: {
                order_id: orderId,
                _token: '{{ csrf_token() }}' // Add CSRF token for security
            },
            success: function (response) {
                if (response.success) {
                    alert('Invoice generated successfully.');
                } else {
                    alert('Error generating invoice.');
                }
            },
            error: function () {
                alert('Error generating invoice.');
            }
        });
    });

	});

</script>

@endsection