@extends('layouts.master')
@section('title')
@lang('translation.orders')
@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">All Quotations</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="{{route('quotation.index')}}" 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, customer..." 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">
                            <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-3 col-sm-4">
                            <div>
                                <input type="text" class="form-control border-light" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" id="demo-datepicker" placeholder="Select date">
                            </div>
                        </div> -->
                        <div class="col-xxl-3 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="9" {{ request('paymentStatus') == '9' ? 'selected' : '' }}>Request Price</option> --}}
                                    <option value="4" {{ request('paymentStatus') == '4' ? 'selected' : '' }}>Draft</option>
                                    <option value="5" {{ request('paymentStatus') == '5' ? 'selected' : '' }}>Request Price</option>
                                    <option value="13" {{ request('paymentStatus') == '13' ? 'selected' : '' }}>Cancelled</option>
                                    <option value="6" {{ request('paymentStatus') == '6' ? 'selected' : '' }}>Rejected</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>Quotation No</th>
                                {{-- <th class="sort" data-sort="product_name">Order No</th> --}}
                                <th data-sort="docdt">Order Date</th>
                                <th data-sort="salesman">Salesman</th>
                                <th data-sort="amount">Amount (RM)</th>
                                <th data-sort="customer_name">Customer</th>
                                <th data-sort="sales_order_no">Sales Order No</th>
                                <th data-sort="status" hidden>Payment Status</th>
                                <!-- <th data-sort="logs">Logs</th> -->
                                <th data-sort="action" hidden>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('quotation.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->quotation_number}}</a></td>
                                <!-- <td class="prefix">-</td> -->
                                <td class="docdt">{{ date('Y-m-d H:i:s', strtotime($order->created_at)) }}</td>
                                <td class="salesman">
                                    @if($order->user)
                                        @if($order->user->salesman)
                                        {{ $order->user->salesman->AcSalesmanID }}
                                        @else
                                        {{ $order->user->name }}
                                        @endif
                                    @endif
                                </td>
                                <td class="docdt">{{ number_format($order->totalAmount, 2) }}</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 ?? ($order->customer_name ?? '') }}</a></td>
                                <td class="sales_order_no">{{ $order->convert_so_id }}</td>
                                <td class="status" hidden>
                                    @if($order->sales_type == 4)
                                    <span class="badge bg-dark-subtle text-dark text-uppercase">Draft</span>
                                    @elseif($order->sales_type == 5)
                                    <span class="badge bg-info-subtle text-info text-uppercase">Request Price</span>
                                    @elseif($order->sales_type == 6)
                                    <span class="badge bg-danger-subtle text-danger text-uppercase">Rejected Request Price</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" hidden>
                                    @if($order->payment_status == 2)
                                    <a href="#" class="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#makePayment">Make Payment</a>
                                    @elseif($order->payment_status == 1)
                                    <span class="badge bg-success-subtle text-success text-uppercase">Completed</span>
                                    @else
                                    <a href="#" class="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#makePayment">Make Payment</a>
                                    @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('orders.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->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="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></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="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/sweetAlert.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();
    });


</script>


@endsection