@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 class="card-tools">
                                <button class="btn btn-sm bg-white">Search</button>
                            </div>
                        </div>
                        <div class="card-body border-bottom-dashed border-bottom">
                            {{-- <form>
                                    <div class="row g-3">
                                        <div class="col-lg-2 col-sm-4">
                                            <div class="search-box">
                                                <input type="text" class="form-control form-control-sm search"
                                                    id="search-order" placeholder="Search for order, user, packer, etc...">
                                                <i class="ri-search-line search-icon"></i>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-sm-4">
                                            <input type="date" class="form-control form-control-sm"
                                                placeholder="Select date">
                                        </div>
                                        <div class="col-lg-2 col-sm-4">
                                            <select class="form-control form-control-sm" name="choices-single-default">
                                                <option value="" selected disabled>Payment Status</option>
                                                <option value="all">All</option>
                                                <option value="pending">Pending</option>
                                                <option value="paid">Paid</option>
                                                <option value="credit">Credit</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-2 col-sm-4">
                                            <select class="form-control form-control-sm" name="choices-single-default">
                                                <option value="" selected disabled>Approval Status</option>
                                                <option>
                                                    Pending</option>
                                                <option>
                                                    Approved</option>
                                                <option>
                                                    Decline</option>
                                                <option>
                                                    Canceled</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-2 col-sm-4">
                                            <select class="form-control form-control-sm" name="choices-single-default">
                                                <option value="" selected disabled>Delivery Status</option>
                                                <option>
                                                    Pending</option>
                                                <option>
                                                    Packing</option>
                                                <option>
                                                    Packed</option>
                                                <option>
                                                    Completed</option>
                                                <option>
                                                    Dispatched</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-2 col-sm-4">
                                            <select class="form-control form-control-sm" name="choices-single-default">
                                                <option value="" selected disabled>Invoice Status</option>
                                                <option>
                                                    Draft</option>
                                                <option>
                                                    Performa</option>
                                                <option>
                                                    Invoiced</option>
                                            </select>
                                        </div>
                                    </div>
                                </form> --}}



                            <form id="searchForm">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-3">
                                        <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">
                                                <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">
                                        <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">
                                                <option value="">Select Company</option>
                                                @foreach ($companies as $company)
                                                    <option value="{{ $company->company }}">{{ $company->company }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg 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')" value="{{ old('due_date_start') }}"
                                                    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')"
                                                    value="{{ old('paid_date_end') }}" id="paid_date_end"
                                                    name="paid_date_end">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="approval" class="form-label">Approval Status</label>
                                            <select class="form-control select2" name="approval" id="approval">
                                                <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">
                                        <div class="form-group">
                                            <label for="payment" class="form-label">Payment Status</label>
                                            <select class="form-control select2" name="payment" id="payment">
                                                <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">
                                        <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">
                                                <option value="">Select Status</option>
                                                <option value="draft">Draft</option>
                                                <option value="performa">Performa</option>
                                                <option value="invoiced">Invoiced</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 text-right mt-3">
                                        <button type="button" class="btn btn-primary btn-sm" id="refreshBtn">
                                            <i class="bi bi-arrow-clockwise"></i> Refresh
                                        </button>
                                        <button type="submit" class="btn btn-success btn-sm" id="searchBtn">
                                            <i class="bi bi-search"></i> Search
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>

            <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 datatable tableContent">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%;">{{ __('#') }}</th>
                                            <th style="width: 10%;">{{ __('Date') }}</th>
                                            <th style="width: 10%;">{{ __('INV No') }}</th>
                                            <th style="width: 20%;">{{ __('EA-FA') }}</th>
                                            <th style="width: 20%;">{{ __('Customer') }}</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">
                                        @include('admin.orders.partial.list', ['orders' => $orders])
                                    </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: `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 = $('.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