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

    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">
                    <!-- /.card-header -->
                    <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="tableContent">
                                <table class="table table-striped table-sm table-bordered tableContent datatable">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%;">{{ __('#') }}</th>
                                            <th style="width: 10%;">{{ __('Date') }}</th>
                                            <th style="width: 20%;">{{ __('EA-FA') }}</th>
                                            <th style="width: 15%;">{{ __('Company') }}</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: 15%;">{{ __('Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody">
                                        @forelse ($orders as $id => $order)
                                            <tr data-id="{{ $order->id }}">
                                                <td>
                                                    {{ ++$id }}
                                                </td>
                                                <td>
                                                    {{ $order->created_at->format('d-m-y') }}
                                                </td>
                                                <td>
                                                    {!! $order->invoice->company->short_name ?? null !!}
                                                </td>
                                                <td>
                                                    {{ $order->user->name ?? NULL }}
                                                </td>
                                                <td>
                                                    £ {{ $order->grand_total ?? null }}
                                                </td>
                                                <td>
                                                    <select name="approval_status" id="approval_status"
                                                        class="form-control form-control-sm">
                                                        <option
                                                            {{ ($order->delivery_status != 'pending' && $order->delivery_status != 'packing' && $order->delivery_status != 'packed') || $order->approval_status == 'canceled' || $order->approval_status == 'decline' ? 'disabled' : '' }}
                                                            value="pending"
                                                            {{ $order->approval_status === 'pending' ? 'selected' : '' }}>
                                                            Pending</option>
                                                        <option
                                                            {{ ($order->delivery_status != 'pending' && $order->delivery_status != 'packing' && $order->delivery_status != 'packed') || $order->approval_status == 'canceled' || $order->approval_status == 'decline' ? 'disabled' : '' }}
                                                            value="approved"
                                                            {{ $order->approval_status === 'approved' ? 'selected' : '' }}>
                                                            Approved</option>
                                                        <option
                                                            {{ ($order->delivery_status != 'pending' && $order->delivery_status != 'packing' && $order->delivery_status != 'packed') || $order->approval_status == 'canceled' || $order->approval_status == 'decline' ? 'disabled' : '' }}
                                                            value="decline"
                                                            {{ $order->approval_status === 'decline' ? 'selected' : '' }}>
                                                            Decline</option>
                                                        <option
                                                            {{ ($order->delivery_status != 'pending' && $order->delivery_status != 'packing' && $order->delivery_status != 'packed') || $order->approval_status == 'canceled' || $order->approval_status == 'decline' ? 'disabled' : '' }}
                                                            value="canceled"
                                                            {{ $order->approval_status === 'canceled' ? 'selected' : '' }}>
                                                            Canceled</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="delivery_status" id="delivery_status"
                                                        class="form-control form-control-sm"
                                                        data-order-id="{{ $order->id }}"
                                                        data-order-packer-id="{{ $order->packer_id ?? '' }}">
                                                        <option
                                                            {{ ($order->delivery_status != 'pending' && $order->delivery_status != 'packing') || $order->approval_status == 'canceled' || $order->approval_status == 'decline' ? 'disabled' : '' }}
                                                            value="pending"
                                                            {{ $order->delivery_status === 'pending' ? 'selected' : '' }}>
                                                            Pending</option>
                                                        <option
                                                            {{ $order->approval_status == 'canceled' || $order->approval_status == 'decline' ? 'disabled' : '' }}
                                                            value="packing"
                                                            {{ $order->delivery_status === 'packing' ? 'selected' : '' }}>
                                                            Packing</option>
                                                        <option disabled value="packed"
                                                            {{ $order->delivery_status === 'packed' ? 'selected' : '' }}>
                                                            Packed
                                                        </option>
                                                        <option
                                                            {{ $order->approval_status == 'canceled' || $order->approval_status == 'decline' ? 'disabled' : '' }}
                                                            value="dispatched"
                                                            {{ $order->delivery_status === 'dispatched' ? 'selected' : '' }}>
                                                            Dispatched
                                                        </option>
                                                        <option
                                                            {{ $order->approval_status == 'canceled' || $order->approval_status == 'decline' ? 'disabled' : '' }}
                                                            value="completed"
                                                            {{ $order->delivery_status === 'completed' ? 'selected' : '' }}>
                                                            Completed
                                                        </option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="payment_status" id="payment_status"
                                                        class="form-control form-control-sm">
                                                        <option value="pending"
                                                            {{ $order->payment_status === 'pending' ? 'selected' : '' }}>
                                                            Pending</option>
                                                        <option value="credit"
                                                            {{ $order->payment_status === 'credit' ? 'selected' : '' }}>
                                                            Credit</option>
                                                        <option value="paid"
                                                            {{ $order->payment_status === 'paid' ? 'selected' : '' }}>Paid
                                                        </option>
                                                    </select>
                                                </td>
                                                <td>
                                                    {{-- @if ($order->approval_status != 'canceled' && $order->approval_status != 'decline')
                <a href="{{ route('admin.order.edit', $order->id) }}" class="btn btn-sm btn-outline-primary"><i
                        class="bi bi-pencil"></i></a>
            @endif --}}
                                                    {{-- @if (!($order->approval_status == 'approved' || $order->payment_status != 'pending')) --}}
                                                    <a href="{{ route('admin.invoice.create', $order->id) }}"
                                                        class="btn btn-sm btn-outline-warning"><i
                                                            class="bi bi-pencil"></i></a>
                                                    <form id="deleteform" class="d-inline-block mx-1"
                                                        action="{{ route('admin.order.delete', $order->id) }}"
                                                        method="post">
                                                        @csrf
                                                        <button type="submit" class="btn btn-outline-danger btn-sm"
                                                            id="delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                    {{-- @endif --}}

                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="8" class="text-center">No orders found</td>
                                            </tr>
                                        @endforelse

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="loader text-center" id="loader" style="display: none">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden"></span>
                            </div>
                        </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" action="{{ route('admin.order.assign.packer') }}">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label for="packersDropdown" class="form-label">Select Packers</label>
                            <select class="form-select form-select-sm" 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>



@endsection
@section('js')

    <script>
        $(document).ready(function() {

            $(document).on('change', 'select[name="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).change();
                $("#assignToPackerModal").modal('show');
            });

            $('#assignToPackerForm').on('submit', function(e) {
                e.preventDefault();
                var order_id = $(this).find('#order_id').val();
                var status = $(this).find('#status').val();
                var packer_id = $(this).find('#packersDropdown').val();

                $.ajax({
                    url: "{{ route('admin.order.assign.packer') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "order_id": order_id,
                        "packer_id": packer_id,
                        'status': status
                    },
                    success: function(response) {
                        MyToast.fire({
                            icon: response.alert,
                            title: response.message
                        });

                        $('#assignToPackerModal').modal('hide');
                    },
                    error: function(error) {
                        if (error.hasOwnProperty('responseJSON') && error.responseJSON
                            .message) {
                            MyToast.fire({
                                icon: 'error',
                                title: error.responseJSON.message
                            });
                        } else {
                            MyToast.fire({
                                icon: 'error',
                                title: 'Something Went Wrong!'
                            });
                        }
                    }
                });
            });

            $(document).on('change',
                'select[name="approval_status"], select[name="payment_status"]',
                function() {
                    let row = $(this).closest('tr');
                    let orderId = row.data('id');

                    let approvalStatus = row.find('select[name="approval_status"] option:selected').val();
                    let deliveryStatus = row.find('select[name="delivery_status"] option:selected').val();
                    let paymentStatus = row.find('select[name="payment_status"] option:selected').val();


                    $.ajax({
                        url: `/admin/orders/update-order-status/${orderId}`,
                        method: "POST",
                        data: {
                            approval_status: approvalStatus,
                            payment_status: paymentStatus
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (approvalStatus == 'decline' || approvalStatus == 'canceled') {
                                row.find('select[name="approval_status"]').prop('disabled', true);
                                row.find('select[name="delivery_status"]').prop('disabled', true);
                                row.find('.btn-outline-primary').addClass('d-none');
                            }
                            MyToast.fire({
                                icon: response.alert,
                                title: response.message
                            });
                        },
                        error: function(xhr) {
                            let errorMessage = "Something went wrong. Please try again.";
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                            Swal.fire({
                                title: "Error",
                                text: errorMessage,
                                icon: "error",
                                confirmButtonColor: "#d33"
                            });
                        }
                    });
                });
        });
    </script>



    {{--
    <script>
        $(document).ready(function() {
            const tbody = $('#tbody');
            const userId = $('#user_id');
            const startDate = $('#due_date_start');
            const endDate = $('#paid_date_end');
            const companyName = $('#company_name');
            const approvalStatus = $('#approval');
            const paymentStatus = $('#payment');
            const invoiceStatus = $('#invoice_status');
            const searchBtn = $('#searchBtn');
            const loader = $('#loader');
            const tableContent = $('.tableContent');
            const refreshBtn = $('#refreshBtn');
            let dataTable = $('.datatable').length ? $('.datatable').DataTable() :
                null; // Initialize only if table exists

            function fetchOrders(data) {
                loader.show();
                tableContent.hide();
                searchBtn.attr("disabled", true);

                $.ajax({
                    url: "{{ route('admin.order.search') }}",
                    type: "POST",
                    data: data,
                    success: function(response) {
                        dataTable.destroy(); // Destroy existing DataTable
                        tbody.html(response.html);

                        if (!response.html.includes("No orders found")) {
                            dataTable = $('.datatable').DataTable();
                        }
                        loader.hide();
                        tableContent.show();
                        searchBtn.attr("disabled", false);
                    },
                    error: function(err) {
                        console.error(err);
                        loader.hide();
                        tableContent.show();
                        searchBtn.attr("disabled", false);
                    }
                });
            }

            searchBtn.on("click", function(e) {
                e.preventDefault();
                fetchOrders({
                    _token: "{{ csrf_token() }}",
                    user_id: userId.val(),
                    company_name: companyName.val(),
                    approval_status: approvalStatus.val(),
                    payment_status: paymentStatus.val(),
                    invoice_status: invoiceStatus.val(),
                    start_date: startDate.val(),
                    end_date: endDate.val()
                });
            });

            refreshBtn.on("click", function() {
                fetchOrders({
                    _token: "{{ csrf_token() }}",
                    user_id: '',
                    company_name: '',
                    approval_status: '',
                    payment_status: '',
                    invoice_status: '',
                    start_date: '',
                    end_date: ''

                });
            });
        });
    </script> --}}
    <script>
        $(document).ready(function() {
            const tbody = $('#tbody');
            const userId = $('#user_id');
            const startDate = $('#due_date_start');
            const endDate = $('#paid_date_end');
            const companyName = $('#company_name');
            const approvalStatus = $('#approval');
            const paymentStatus = $('#payment');
            const invoiceStatus = $('#invoice_status');
            const searchBtn = $('#searchBtn');
            const loader = $('#loader');
            const tableContent = $('.datatable');
            const refreshBtn = $('#refreshBtn');

            function fetchOrders(data, isRefresh = false) {
                loader.show();
                tbody.hide();
                searchBtn.attr("disabled", true);
                refreshBtn.attr("disabled", true);

                $.ajax({
                    url: "{{ route('admin.order.search') }}",
                    type: "POST",
                    data: data,
                    success: function(response) {
                        tbody.html(response.html);
                        if (response.html.includes(
                                '<td colspan="8" class="text-center">No orders found</td>')) {

                        } else {
                            tableContent.dataTable();
                        }
                        if (isRefresh) {
                            clearFilters();
                            history.replaceState({}, document.title, location
                                .pathname);
                        }
                        loader.hide();
                        tbody.show();
                        searchBtn.attr("disabled", false);
                        refreshBtn.attr("disabled", false); // Re-enable refresh button
                    },
                    error: function(err) {
                        console.error(err);
                        loader.hide();
                        tbody.show();
                        searchBtn.attr("disabled", false);
                        refreshBtn.attr("disabled", false); // Re-enable refresh button
                    }
                });
            }

            function clearFilters() {
                userId.val('');
                startDate.val('');
                endDate.val('');
                companyName.val('');
                approvalStatus.val('');
                paymentStatus.val('');
                invoiceStatus.val('');

            }

            searchBtn.on("click", function(e) {
                e.preventDefault();

                fetchOrders({
                    _token: "{{ csrf_token() }}",
                    user_id: userId.val(),
                    company_name: companyName.val(),
                    approval_status: approvalStatus.val(),
                    payment_status: paymentStatus.val(),
                    invoice_status: invoiceStatus.val(),
                    start_date: startDate.val(),
                    end_date: endDate.val(),

                });
            });

            refreshBtn.on("click", function() {
                fetchOrders({
                    _token: "{{ csrf_token() }}",
                    user_id: '',
                    company_name: '',
                    approval_status: '',
                    payment_status: '',
                    invoice_status: '',
                    start_date: '',
                    end_date: '',

                }, true);
            });
        });
    </script>



@endsection