@extends('layout.master', ['headerTitle' => 'Order List'])

@section('style')
<link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
<style>
    .readonlyAttribute {
        pointer-events: none;
        background-color: #e9ecef;
    }
</style>
@endsection

@section('body')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="container-xxl" id="kt_content_container">
        <div class="card card-flush">
            <div class="card-body pt-5">
                <div class="d-flex align-items-center py-3 py-md-1 mt-3">
                    <a href="{{route('order.create')}}" class="btn btn btn-dark">Add Order</a>
                    <button type="button" class="btn btn-primary btn-lg ms-3" data-bs-toggle="modal" data-bs-target="#filterForm"><i class="fas fa-filter"></i> Filter</button>
                </div>
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="orderListTable">
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal for show accepted order -->
<div class="modal fade text-start" id="orderDataModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="reasonLabel">Mulajim Details</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="card-body row col-12" id="reasonText">
                    <div class="d-flex flex-stack">
                        <div class="text-gray-700 fw-bold fs-6 me-2">Name</div>
                        <div class="d-flex align-items-senter">
                            <span class="text-gray-900 fw-boldest fs-6 mulajimName">Name</span>
                        </div>
                    </div>
                    <div class="separator separator-dashed my-3"></div>
                    <div class="d-flex flex-stack">
                        <div class="text-gray-700 fw-bold fs-6 me-2">Email</div>
                        <div class="d-flex align-items-senter">
                            <span class="text-gray-900 fw-boldest fs-6 mulajimEmail"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01446c60686d41646c60686d2f626e6c">[email&#160;protected]</a></span>
                        </div>
                    </div>
                    <div class="separator separator-dashed my-3"></div>
                    <div class="d-flex flex-stack">
                        <div class="text-gray-700 fw-bold fs-6 me-2">Contact</div>
                        <div class="d-flex align-items-senter">
                            <span class="text-gray-900 fw-boldest fs-6 mulajimContact">0123654789</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="filterForm" tabindex="-1" aria-labelledby="filterFormModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog  modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-transparent">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-sm-5 mx-50 pb-5">
                <h1 class="text-center mb-1" id="filterFormModalCenterTitle">Filter</h1>
                <!-- form -->
                <form class="row gy-1 gx-2 mt-75" action="javascript:;" id="searchResult" method="POST">

                    <div class="col-12 col-md-6">
                        <select id="warehouse_id" name="warehouse_id" aria-label="Select a Warehouse" data-control="select2" data-placeholder="Select Warehouse" data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                            <option></option>
                            @foreach (\App\Models\Warehouse::all() as $warehouse)
                            <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-6">
                        <select id="cargo_id" name="cargo_id" aria-label="Select a Cargo" data-control="select2" data-placeholder="Select Cargo" data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                            <option></option>
                            @foreach (\App\Models\Cargo::all() as $cargo)
                            <option value="{{ $cargo->id }}">{{ $cargo->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-6">
                        <select id="orderStatus" name="orderStatus" aria-label="Select a Order Status" data-control="select2" data-placeholder="Select a Order Status..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                            <option></option>
                            <option value="0">Pending</option>
                            <option value="1">Accepted</option>
                            <option value="2">Partial completed</option>
                            <option value="3">completed</option>
                            <option value="4">Disputed</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-6">
                        <select id="orderType" name="orderType" aria-label="Select a Order Type" data-control="select2" data-placeholder="Select a Order Type..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                            <option></option>
                            <option value="1">Express Order</option>
                            <option value="2">Live Order</option>
                            <option value="3">Future Order</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-6">
                        <select id="paymentStatus" name="paymentStatus" aria-label="Select a Payment Status" data-control="select2" data-placeholder="Select a Payment Status..." data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                            <option></option>
                            <option value="0">Not Done</option>
                            <option value="1">Done</option>
                        </select>
                    </div>

                    @if (Auth::user()->role_id != 2)
                    <div class="col-12 col-md-6">
                        <select id="company_id" name="company_id" aria-label="Select a Company" data-control="select2" data-placeholder="Select Company" data-allow-clear="true" class="form-select form-select-solid form-select-lg fw-bold">
                            <option></option>
                            @foreach (\App\Models\Company::select('id', 'name')->get() as $company)
                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    <div class="col-12 text-center">
                        <button type="submit" id="searchButton" class="btn btn-primary me-1 mt-1">Search</button>
                        <button type="submit" id="resetButton" class="btn btn-secondary mt-1">Reset</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Modal for changing order status -->
<!-- Modal for changing order status -->
<div class="modal fade" id="statusChangeModal" tabindex="-1" aria-labelledby="statusChangeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusChangeModalLabel">Change Order Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="statusChangeForm" method="POST">
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    <div id="orderContainersContainer"></div>
                    <button type="submit" class="btn btn-primary">Change Status</button>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="paymentModalLabel">Payment Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="paymentForm" method="POST">
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    <div class="mb-3">
                        <label for="order_id" class="form-label">Order ID</label>
                        <input type="text" class="form-control" id="order_id" name="order_id" readonly required>
                    </div>
                    <div class="mb-3">
                        <label for="transaction_id" class="form-label">Transaction ID</label>
                        <input type="text" class="form-control" id="transaction_id" name="transaction_id" required>
                    </div>
                    <div class="mb-3">
                        <label for="transaction_date" class="form-label">Transaction Date</label>
                        <input type="date" class="form-control" id="transaction_date" name="transaction_date" required>
                    </div>
                    <div class="mb-3">
                        <label for="transaction_method" class="form-label">Transaction Method</label>
                        <select class="form-select" id="transaction_method" name="transaction_method" required>
                            <option value="cash">Cash</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="cheque">Cheque</option>
                            <option value="credit_card">Credit Card</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="amount" class="form-label">Amount</label>
                        <input type="number" class="form-control" id="amount" name="amount" readonly required>
                    </div>
                    <div class="mb-3">
                        <label for="comments" class="form-label">Comments</label>
                        <textarea class="form-control" id="comments" name="comments" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit Payment</button>
                </form>
            </div>
        </div>
    </div>
</div>



@endsection
@push('scripts')
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script src="{{ asset('assets/js/custom/apps/ecommerce/sales/listing.js') }}"></script>
<script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
<script src="{{ asset('assets/js/custom/widgets.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

<script>
    $(document).ready(function() {
        var table = $('#orderListTable');
        setorderListTable();

        function setorderListTable(result = '') {
            oTable = table.dataTable({
                "processing": true,
                "serverSide": true,
                "language": {
                    "aria": {
                        "sortAscending": ": click to sort column ascending",
                        "sortDescending": ": click to sort column descending"
                    },
                    "emptyTable": "No data available in table",
                    "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                    "infoEmpty": "No entries found",
                    "infoFiltered": "(filtered1 from _MAX_ total entries)",
                    "lengthMenu": "_MENU_ entries",
                    "search": "Search:",
                    "zeroRecords": "No matching records found",
                    "paginate": {
                        "previous": "Prev",
                        "next": "Next",
                        "last": "Last",
                        "first": "First",
                        "page": "Page",
                        "pageOf": "of"
                    }
                },
                "columns": [{
                        "title": "S.No",
                        "data": "id"
                    },
                    {
                        "title": "Order Unique Id",
                        "data": "order_unique_id",
                        sortable: false
                    },
                    {
                        "title": "Company",
                        "data": "company",
                        sortable: false
                    },
                    {
                        "title": "Warehouse",
                        "data": "warehouse",
                        sortable: false
                    },
                    {
                        "title": "Title",
                        "data": "title"
                    },
                    {
                        "title": "Rate",
                        "data": "rate"
                    },
                    {
                        "title": "Order Type",
                        "data": "orderType",
                        sortable: false
                    },
                    {
                        "title": "Payment",
                        "data": "payment",
                        sortable: false
                    },
                    {
                        "title": "Action",
                        "data": "action",
                        searchble: false,
                        sortable: false
                    }
                ],
                responsive: true,
                "order": [
                    [0, 'asc']
                ],
                "lengthMenu": [
                    [10, 20, 50, 100],
                    [10, 20, 50, 100]
                ],
                "pageLength":