@extends('layouts.master')
@section('title')
All Delivery Order
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')

@if (session('success'))
    <div class="alert alert-success alert-solid" role="alert" id="success-alert">
        <strong>{{ session('success') }} </strong>
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger alert-solid" role="alert" id="danger-alert">
        <strong>{{ session('error') }} </strong>
    </div>
@endif

<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">@if(isset($title))
                            {{$title}}
                        @else    
                        All Delivery Order
                        @endif</h5>
                    </div>
                    <!-- <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <button type="button" class="btn btn-primary btn-label rounded-pill" onclick="location.href='/orders/create';" id="create-btn"><i class="ri-add-circle-line label-icon align-middle rounded-pill fs-16 me-2"></i> Create Order</button>
                            <button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <form action="@if(isset($title))
                {{route('deliveryOrder.index_sales_order')}}
                @else
                {{route('deliveryOrder.index')}}
                @endif" id="search-so-form" method="GET">
                    @csrf
                    <div class="row g-3">
                        <div class="col-xxl-3 col-sm-2">
                            <div class="search-box">
                                <input type="text" class="form-control search border-light" placeholder="Search Order No" name="query" id="search" value="{{ $query }}" autofocus>
                                <i class="ri-search-line search-icon"></i>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-sm-2" hidden>
                            <div class="search-box">
                                <input type="text" class="form-control search border-light" placeholder="Enter Staff ID" name="salesman_id" id="salesman_id" value="{{ $salesman_id }}">
                                <i class="ri-search-line search-icon"></i>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-2">
                            <div class="search-box">
                                <select class="form-select border-light" data-choices data-choices-search-false name="duration" id="duration" onchange="changedate()">
                                    <option value="" selected>All</option>
                                    <option value="Today" >Today</option>
                                    <option value="Tomorrow"  >Tomorrow</option>
                                    <option value="Next 3 days" >Next 3 days</option>
                                    <option value="Next Week" >Next Week</option>
                                    <option value="Next Month" >Next Month</option>
                                    <option value="Next Year" >Next Year</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-2">
                            <div class="search-box">
                                <input type="date" class="form-control"  data-provider="flatpickr" id="fromDate" name="fromDate" placeholder="From" onchange="changeduration()" style="border: none; background-color: #f9f9f9 !important">
                                <i class="ri-calendar-line position-absolute top-50 start-0 translate-middle-y ms-3" style="color:gray"></i>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-2">
                            <div class="search-box">
                                <input type="date" class="form-control"  data-provider="flatpickr" id="toDate" name="toDate" placeholder="To" onchange="changeduration()" style="border: none; background-color: #f9f9f9 !important">
                                <i class="ri-calendar-line position-absolute top-50 start-0 translate-middle-y ms-3" style="color:gray"></i>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-4" style="display:none">>
                          <input type="text" class="form-control border-light" data-provider="flatpickr" data-date-format="Y-m-d" data-range-date="true" id="demo-datepicker" name="date-range" placeholder="Select date range">
                        </div>
                        <div class="col-xxl-3 col-sm-2" hidden>
                            <div class="input-light">
                                <select class="form-select border-light" name="paymentStatus" id="paymentStatus">
                                    <option value="all" {{ request('paymentStatus') == 'all' ? 'selected' : '' }}>All</option>
                                    <option value="1" {{ request('paymentStatus') == '1' ? 'selected' : '' }}>Full Paid</option>
                                    <option value="2" {{ request('paymentStatus') == '2' ? 'selected' : '' }}>Partially</option>
                                    <option value="3" {{ request('paymentStatus') == '3' ? 'selected' : '' }}>Unpaid</option>
                                    <option value="4" {{ request('paymentStatus') == '4' ? 'selected' : '' }}>Draft</option>
                                    <option value="9" {{ request('paymentStatus') == '9' ? 'selected' : '' }}>Expired</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-4" style="display:none">
                            <div class="input-light">
                                <select class="form-select border-light" data-choices data-choices-search-false name="choices-single-default" id="idPayment">
                                    <option value="">Select Payment</option>
                                    <option value="all" selected>All</option>
                                    <option value="Mastercard">Mastercard</option>
                                    <option value="Paypal">Paypal</option>
                                    <option value="Visa">Visa</option>
                                    <option value="COD">COD</option>
                                </select>
                            </div>a
                        </div>
                        <div class="col-xxl-1 col-sm-2">
                            <div>
                                <button type="submit" class="btn btn-primary w-100">
                                    Search
                                </button>
                            </div>
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                </form>
            </div>
            <div class="card-body">
                <div class="table-responsive table-card mb-2">
                    <table class="table table-striped align-middle"  id="ticketTable">
                        <thead class="table-light text-muted">
                            <tr>
                                
                                <th>Order No</th>
                                {{-- <th>Schedule ID</th> --}}
                                {{-- <th class="sort" data-sort="product_name">Order No</th> --}}
                                <th data-sort="docdt">Delivery Date</th>
                                <th data-sort="salesman">Zone</th>
                                <!-- <th data-sort="amount">Amount (RM)</th> -->
                                <th data-sort="customer_name">Recipient Name</th>
                                <!-- <th data-sort="status">Payment Status</th> -->
                                <!-- <th data-sort="logs">Logs</th> -->

                                <th data-sort="action">Status</th>
                            </tr>
                        </thead>
                        <tbody class="list form-check-all" id="ticket-list-data">
                            @foreach ($orders as $order)
                            <tr>
                            
                                <td class="product_name"><a href="{{ route('deliveryOrder.edit', $order->id) }}" onclick="callLoaddingScreen('Retrieving Latest SO - '+'{{ $order->invoice_no}}' + ' Details')" style="border-bottom: dotted 1px rgba(var(--vz-link-color-rgb),var(--vz-link-opacity, 1))">{{ $order->sales_order_number}}</a></td>
                                {{-- <td class="product_name"><a href="{{ route('deliveryOrder.edit', $order->id) }}" onclick="callLoaddingScreen('Retrieving Latest SO - '+'{{ $order->invoice_no}}' + ' Details')" style="border-bottom: dotted 1px rgba(var(--vz-link-color-rgb),var(--vz-link-opacity, 1))">{{ $order->ScheduleID}}</a></td> --}}
                                <td class="docdt">{{ $order->delivery_date}} {{$order->time_slot}}</td>
                                <!-- <td class="prefix">-</td> -->
                                
                                <!-- <td class="salesman">
                                    @if($order->user)
                                        @if($order->user->salesman)
                                        {{ $order->user->salesman->AcSalesmanID }}
                                        @else
                                        {{ $order->user->name }}
                                        @endif
                                    @endif
                                </td> -->
                                <td class="salesman">{{$order->zone_id}}</td>
                                <!-- <td class="docdt">{{ number_format($order->totalAmount, 2) }}</td> -->
                                <td class="salesman">{{$order->recipient_name}}</td>
                                <!-- <td class="customer_name"><a href="{{ url('customers/'.$order->customer_id.'/show-customer-order') }}" style="border-bottom: dotted 1px rgba(var(--vz-link-color-rgb),var(--vz-link-opacity, 1))">{{ $order->customer_id}} {{ $order->customer->AcCustomerName ?? '' }}</a></td> -->
                                <!-- <td class="status">
                                    @if($order->sales_type == 4)
                                    <span class="badge bg-dark-subtle text-dark text-uppercase">Draft</span>
                                    @elseif($order->sales_type == 9)
                                    <span class="badge bg-dark-subtle text-warning text-uppercase">Expired</span>
                                    @elseif($order->status == 3)
                                    <span class="badge bg-dark-subtle text-warning text-uppercase">Cancelled</span>
                                    @elseif($order->payment_status == 1)
                                    <span class="badge bg-success-subtle text-success text-uppercase">Full Paid</span>
                                    @elseif($order->payment_status == 2)
                                    <span class="badge bg-danger-subtle text-danger text-uppercase">Partially</span>
                                    @else
                                    <span class="badge bg-danger-subtle text-danger text-uppercase">Unpaid</span>
                                    @endif
                                </td> -->
                                <!-- <td>
                                    <a href="#" style="border-bottom: dotted 1px rgba(var(--vz-link-color-rgb),var(--vz-link-opacity, 1))">Logs</a>
                                </td> -->
                                <td class="makepayment">
                                    @if($order->return_status)
                                    <span class="badge bg-success-subtle text-success text-uppercase">{{$order->return_status}}</span>
                                    @else
                                    @if($order->status == 2)
                                    <a href="#" class="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#makePayment">Make Payment</a>
                                    @elseif($order->status == 1)
                                    <span class="badge bg-success-subtle text-success text-uppercase">Submitted</span>
                                    @else
                                    <span class="badge bg-dark-subtle text-danger text-uppercase">Failed</span>
                                    @endif
                                    @endif
                                </td>
                                
                                
                                <!-- <td>
                                    <ul class="list-inline hstack gap-2 mb-0">
                                      <li class="list-inline-item view" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View Order">
                                        <a href="{{ route('deliveryOrder.edit', $order->id) }}" class="text-info d-inline-block edit-item-btn">
                                          <i class="ri-eye-line fs-16"></i>
                                        </a>
                                      </li>

                                      <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Delete">
                                          <a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteOrder"  data-order_id="{{ $order->id }}">
                                              <i class="ri-delete-bin-5-line fs-16"></i>
                                          </a>
                                      </li>

                                            </li>
                                        </ul>
                                </td> -->
                            </tr>
                            @endforeach
                            
                        </tbody>
                    </table>
                    <div class="noresult"  
                        @if(count($orders) > 0) 
                        style="display: none" 
                        @endif>
                            <div class="text-center">
                                <i data-feather="x-square" class="icon-dual" style="color: gray; width:75px;height:75px"></i>
                                <h5 class="mt-2">Sorry! No Result Found</h5>
                                <p class="text-muted mb-0">We did not find any results for you search.</p>
                            </div>

                </div>
                </div>
                {{ $orders->appends(request()->except('page'))->links() }}
             

                <!-- Modal -->
                <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="makePayment" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Make Payment</h5>
                                <br>
                                <button type="button" id="btnCloseSelectStockModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <!-- <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small> -->
                            <div class="modal-body pb-0">
                                Makepaymentcontent
                            </div>
                            <div class="modal-footer">
                                
                            </div>
                        </div>
                    </div>
                </div>
                <!--end modal -->
            </div>
            <!--end card-body-->
        </div>

    </div>
    <!--end col-->
</div>
<!--end row-->
@endsection
@section('script')
{{-- <script src="{{ URL::asset('build/libs/list.js/list.min.js') }}"></script> --}}
{{-- <script src="{{ URL::asset('build/libs/list.pagination.js/list.pagination.min.js') }}"></script> --}}
{{-- <script src="{{ URL::asset('build/js/pages/ecommerce-order.init.js') }}"></script> --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const successAlert = document.getElementById('success-alert');
        if (successAlert) {
            setTimeout(() => {
                successAlert.style.transition = 'opacity 1s';
                successAlert.style.opacity = '0';
                setTimeout(() => {
                    successAlert.remove();
                }, 1000); // Matches the transition duration
            }, 5000); // Adjust the delay time (in milliseconds) as needed
        
        }

        // var showModal = document.getElementById('deleteOrder');
        // showModal.addEventListener('show.bs.modal', function (event) {
            
        //     var button = event.relatedTarget; // Button that triggered the modal
        //     var order_id = button.getAttribute('data-order_id'); // Extract title from data-* attributes
        //     var target_anc = document.getElementById('delete-record');

        //     target_anc.href = "/orders/"+order_id+"/delete";

        // });
    });

    document.getElementById('search-so-form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission
        callLoaddingScreen('Searching for Sales Order, Please wait...');
        this.submit();
    });

    function changeduration(){
        document.getElementById('duration').value = '';
    }

    function changedate(){
        document.getElementById('fromDate').value = '';
            document.getElementById('toDate').value = '';
    }

</script>


@endsection