@extends('admin.layouts.master')
@section('title', 'Order List')

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card card-info mt-2" id="orderListFilter">
                        <div class="card-header">
                            Filter Orders
                        </div>
                        <div class="card-body border-bottom-dashed border-bottom">
                            <form id="searchForm">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-3 col-md-6">
                                        <div class="form-group">
                                            <label for="user_id" class="form-label">User Name</label>
                                            <select class="form-control select2" name="user_id" id="user_id" multiple>
                                                <option value="">Select User</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <div class="form-group">
                                            <label for="company_name" class="form-label">Company Name</label>
                                            <select class="form-control select2" name="company_name" id="company_name"
                                                multiple>
                                                <option value="">Select Company</option>
                                                @foreach ($companies as $company)
                                                    <option value="{{ $company->company }}">{{ $company->company }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <div class="form-group">
                                            <label for="due_date">Search By Due Date</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control date-input" placeholder="From Date"
                                                    onfocus="(this.type='date')" onblur="(this.type='text')"
                                                    id="due_date_start" name="due_date_start">
                                                <div class="input-group-text">to</div>
                                                <input type="text" class="form-control date-input" placeholder="To Date"
                                                    onfocus="(this.type='date')" onblur="(this.type='text')"
                                                    id="due_date_end" name="due_date_end">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <div class="form-group">
                                            <label for="approval_status" class="form-label">Approval Status</label>
                                            <select class="form-control select2" name="approval_status" id="approval_status"
                                                multiple>
                                                <option value="">Select Status</option>
                                                <option value="pending">Pending</option>
                                                <option value="approved">Approved</option>
                                                <option value="decline">Declined</option>
                                                <option value="canceled">Canceled</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <div class="form-group">
                                            <label for="payment_status" class="form-label">Payment Status</label>
                                            <select class="form-control select2" name="payment_status" id="payment_status" multiple>
                                                                    <option value="">Select
                                                                    Status</option>
                                                                    <option value=" pending">Pending</option>
                                                <option value="credit">Credit</option>
                                                <option value="paid">Paid</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <div class="form-group">
                                            <label for="invoice_status" class="form-label">Invoice Status</label>
                                            <select class="form-control select2" name="invoice_status" id="invoice_status"
                                                multiple>
                                                <option value="">Select Status</option>
                                                <option value="draft">Draft</option>
                                                <option value="performa">Performa</option>
                                                <option value="invoiced">Invoiced</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card card-outline card-primary">
                        <div class="card-header">
                            List of Orders
                            <div class="card-tools">
                                <a href="{{ route('admin.order.add') }}" class="btn btn-primary btn-sm">
                                    <i class="bi bi-plus"></i> Add Order
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-sm table-bordered" style="width:100%"
                                    id="orders-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%;">{{ __('#') }}</th>
                                            <th style="width: 10%;">{{ __('Date') }}</th>
                                            <th style="width: 10%;">{{ __('INV No') }}</th>
                                            <th style="width: 7%;">{{ __('EA-FA') }}</th>
                                            <th style="width: 15%;">{{ __('Customer First Name') }}</th>
                                            <th style="width: 15%;">{{ __('Customer Last Name') }}</th>
                                            <th style="width: 15%;">{{ __('Company') }}</th>
                                            <th style="width: 10%;">{{ __('Sub Total') }}</th>
                                            <th style="width: 10%;">{{ __('Total') }}</th>
                                            <th style="width: 10%;">{{ __('Approval') }}</th>
                                            <th style="width: 10%;">{{ __('Delivery') }}</th>
                                            <th style="width: 10%;">{{ __('Payment') }}</th>
                                            <th style="width: 8%;">{{ __('Actions') }}</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Data will be loaded by DataTables -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div id="assignToPackerModal" class="modal fade zoomIn" tabindex="-1" aria-labelledby="assignToPackerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content border-0 shadow-sm">
                <div class="modal-header bg-primary text-white py-2">
                    <h5 class="modal-title" id="assignToPackerModalLabel">Assign Packer</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form id="assignToPackerForm" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label for="packersDropdown" class="form-label">Select Packers</label>
                            <select class="form-control form-select-sm select2" id="packersDropdown" name="packer_id">
                                <option value="" selected disabled>Select Packers</option>
                                @foreach ($packers as $packer)
                                    <option value="{{ $packer->id }}">
                                        {{ $packer->first_name . ' ' . $packer->last_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <input type="hidden" id="order_id" name="order_id" value="">
                        <input type="hidden" id="status" name="status" value="">
                    </div>
                    <div class="modal-footer py-2">
                        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div id="trackingModal" class="modal fade zoomIn" tabindex="-1" aria-labelledby="assignToPackerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content border-0 shadow-sm">
                <div class="modal-header bg-primary text-white py-2">
                    <h5 class="modal-title" id="trackingModalLabel">Assign Courier</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <form id="trackingForm" method="POST" action="{{ route('admin.order.assign.courier') }}">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label for="couriersDropdown" class="form-label">Select Courier</label>
                            <select required class="form-select form-select-sm" id="couriersDropdown" name="packer_id">
                                <option value="" selected disabled>Select Courier</option>
                                @foreach ($couriers as $courier)
                                    <option value="{{ $courier->id }}">
                                        {{ $courier->name }}
                                    </option>
                                @endforeach
                            </select>

                            <label for="couriersDropdown" class="form-label mt-2">Tracking ID</label>
                            <input required type="text" class="form-control form-control-sm" name="tracking_id"
                                placeholder="Enter Tracking ID" id="tracking_id">
                        </div>

                        <input type="hidden" id="c_order_id" name="c_order_id" value="">
                    </div>
                    <div class="modal-footer py-2">
                        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('css')

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

@endsection

@section('js')


    <script>
        $(document).ready(function () {
            var table = $('#orders-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.order.index') }}",
                    data: function (d) {
                        d.user_id = $('#user_id').val();
                        d.company_name = $('#company_name').val();
                        d.approval_status = $('#approval_status').val();
                        d.payment_status = $('#payment_status').val();
                        d.invoice_status = $('#invoice_status').val();
                        d.due_date_start = $('#due_date_start').val();
                        d.due_date_end = $('#due_date_end').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'due_date', name: 'invoice.due_date' },
                    { data: 'invoice_no', name: 'invoice.invoice_no' },
                    { data: 'company_short_name', name: 'invoice.company.short_name' },
                    // {
                    //     data: null, name: 'customer_name', render: function (data, type, row) {
                    //         return row.user.first_name + ' ' + row.user.last_name;
                    //     }
                    // },
                    { data: 'user.first_name', name: 'user.first_name' },
                    { data: 'user.last_name', name: 'user.last_name' },

                    { data: 'company_name', name: 'user.company' },
                    {
                        data: 'sub_total',
                        name: 'total_amount', // Maps to database column
                        searchable: true,
                        render: function (data, type, row) {
                            if (type === 'display') {
                                return parseFloat(data).toLocaleString('en-US', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                            return data; // Raw data for searching/sorting
                        }
                    },
                    {
                        data: 'total',
                        name: 'grand_total', // Maps to database column
                        searchable: true,
                        render: function (data, type, row) {
                            if (type === 'display') {
                                return parseFloat(data).toLocaleString('en-US', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                            return data; // Raw data for searching/sorting
                        }
                    },
                    { data: 'approval_status', name: 'approval_status' },
                    { data: 'delivery_status', name: 'delivery_status' },
                    { data: 'payment_status', name: 'payment_status' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                responsive: true,
                pageLength: 10,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    text: 'Export to Excel',
                    title: 'Orders Export',
                    className: 'btn btn-success btn-sm',
                    action: function (e, dt, node, config) {
                        var filters = {
                            user_id: $('#user_id').val(),
                            company_name: $('#company_name').val(),
                            approval_status: $('#approval_status').val(),
                            payment_status: $('#payment_status').val(),
                            invoice_status: $('#invoice_status').val(),
                            due_date_start: $('#due_date_start').val(),
                            due_date_end: $('#due_date_end').val(),
                            _token: '{{ csrf_token() }}'
                        };
                        $('<form>', {
                            method: 'post',
                            action: '{{ route("admin.order.export") }}',
                            html: $.map(filters, function (value, key) {
                                if (Array.isArray(value)) {
                                    return value.map(function (v) {
                                        return $('<input>', {
                                            type: 'hidden',
                                            name: key + '[]',
                                            value: v
                                        });
                                    });
                                }
                                return $('<input>', {
                                    type: 'hidden',
                                    name: key,
                                    value: value
                                });
                            })
                        }).appendTo('body').submit().remove();
                    }
                }],
                order: [[1, 'desc']]
            });
            var debounceTimer;

            function filterTable() {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(function () {
                    let startDate = $('#due_date_start').val();
                    let endDate = $('#due_date_end').val();
                    console.log('Filter data:', {
                        user_id: $('#user_id').val(),
                        company_name: $('#company_name').val(),
                        approval_status: $('#approval_status').val(),
                        payment_status: $('#payment_status').val(),
                        invoice_status: $('#invoice_status').val(),
                        due_date_start: startDate,
                        due_date_end: endDate
                    });
                    if (startDate && endDate && new Date(startDate) > new Date(endDate)) {
                        Swal.fire({
                            title: "Error",
                            text: "Start date cannot be after end date.",
                            icon: "error",
                            confirmButtonColor: "#d33"
                        });
                        return;
                    }
                    table.draw();
                }, 500);
            }

            $('#user_id, #company_name, #approval_status, #payment_status, #invoice_status, #due_date_start, #due_date_end')
                .on('change blur', filterTable);

            // Delivery status change handler
            $(document).on('change', '.delivery-status', function () {
                var action = $(this).val();
                var order_id = $(this).attr('data-order-id');
                var packer_id = $(this).data('order-packer-id');

                $("#order_id").val(order_id);
                $("#status").val(action);

                $("#packersDropdown").val(packer_id).trigger('change');
                $("#assignToPackerModal").modal('show');

                $("#packersDropdown").val(packer_id).change();
                if (action != 'dispatched') {
                    $("#assignToPackerModal").modal('show');
                } else {
                    $('#trackingModal').modal('show');
                    $('#c_order_id').val(order_id);
                }
            });
            $('#assignToPackerForm').on('submit', function (e) {
                e.preventDefault();
                var formData = $(this).serialize();

                $.ajax({
                    url: "{{ route('admin.order.assign.packer') }}",
                    type: "POST",
                    data: formData,
                    success: function (response) {
                        Swal.fire({
                            icon: response.alert,
                            title: response.message,
                            confirmButtonColor: "#3085d6"
                        });
                        $('#assignToPackerModal').modal('hide');
                        table.draw();
                    },
                    error: function (xhr) {
                        let errorMessage = xhr.responseJSON?.message ||
                            "Something went wrong. Please try again.";
                        Swal.fire({
                            icon: 'error',
                            title: errorMessage,
                            confirmButtonColor: "#d33"
                        });
                    }
                });
            });

            // Tracking form submission
            $('#trackingForm').on('submit', function (e) {
                e.preventDefault();
                var order_id = $(this).find('#c_order_id').val();
                var courier_id = $(this).find('#couriersDropdown').val();
                var tracking_id = $(this).find('#tracking_id').val();

                $.ajax({
                    url: "{{ route('admin.order.assign.courier') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "c_order_id": order_id,
                        "courier_id": courier_id,
                        "tracking_id": tracking_id,
                        'status': 'dispatched'
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: response.alert,
                            title: response.message,
                            confirmButtonColor: "#3085d6"
                        });
                        $('#trackingModal').modal('hide');
                        table.draw();
                    },
                    error: function (error) {
                        if (error.hasOwnProperty('responseJSON') && error.responseJSON
                            .message) {
                            Swal.fire({
                                icon: 'error',
                                title: error.responseJSON.message,
                                confirmButtonColor: "#d33"
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Something Went Wrong!',
                                confirmButtonColor: "#d33"
                            });
                        }
                    }
                });
            });

            // Approval and payment status change handlers
            $(document).on('change', '.approval-status', function () {
                let row = $(this).closest('tr');
                let orderId = $(this).data('order-id');
                let field = $(this).attr('name');
                let value = $(this).val();
                let approval_status = row.find('.approval-status').val();
                let data = {};
                data['approval_status'] = approval_status;
                data[field] = value;

                $.ajax({
                    url: "{{ url('admin/orders/update-approval-status') }}/" + orderId,
                    method: "POST",
                    data: data,
                    success: function (response) {
                        Swal.fire({
                            icon: response.alert,
                            title: response.message,
                            confirmButtonColor: "#3085d6"
                        });
                        table.draw();
                    },
                    error: function (xhr) {
                        let errorMessage = xhr.responseJSON?.message ||
                            "Something went wrong. Please try again.";
                        if (xhr.responseJSON?.errors) {
                            errorMessage = Object.values(xhr.responseJSON.errors).join(' ');
                        }
                        Swal.fire({
                            title: "Error",
                            text: errorMessage,
                            icon: "error",
                            confirmButtonColor: "#d33"
                        });
                    }
                });
            });

            // Approval and payment status change handlers
            $(document).on('change', '.payment-status', function () {
                let row = $(this).closest('tr');
                let orderId = $(this).data('order-id');
                let field = $(this).attr('name');
                let value = $(this).val();
                let payment_status = row.find('.payment-status').val();
                let data = {};
                data['payment_status'] = payment_status;
                data[field] = value;

                $.ajax({
                    url: "{{ url('admin/orders/update-payment-status') }}/" + orderId,
                    method: "POST",
                    data: data,
                    success: function (response) {
                        Swal.fire({
                            icon: response.alert,
                            title: response.message,
                            confirmButtonColor: "#3085d6"
                        });
                        table.draw();
                    },
                    error: function (xhr) {
                        let errorMessage = xhr.responseJSON?.message ||
                            "Something went wrong. Please try again.";
                        if (xhr.responseJSON?.errors) {
                            errorMessage = Object.values(xhr.responseJSON.errors).join(' ');
                        }
                        Swal.fire({
                            title: "Error",
                            text: errorMessage,
                            icon: "error",
                            confirmButtonColor: "#d33"
                        });
                    }
                });
            });

            $(document).on('submit', '.delete-form', function (e) {
                e.preventDefault();
                var form = $(this);
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: form.attr('action'),
                            type: 'POST',
                            data: form.serialize(),
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Order deleted successfully',
                                    confirmButtonColor: "#3085d6"
                                });
                                table.draw();
                            },
                            error: function (xhr) {
                                let errorMessage = xhr.responseJSON?.message ||
                                    "Error deleting order";
                                Swal.fire({
                                    icon: 'error',
                                    title: errorMessage,
                                    confirmButtonColor: "#d33"
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection