@extends('Admin.layout.app')

@section('title','Deleverd Orders')
@section('page-title','Deleverd Orders')

@section('content')


<div class="card">
   <div class="card-header d-flex justify-content-between align-items-center">
       <h5 class="mb-0">Delivered Order List</h5>
       
   </div>

   <div class="card-body">
       <!-- Filter Form -->
       <form method="GET" class="row g-2 mb-3">
           <div class="col-md-3">
               <input type="text" name="search" class="form-control"
                  value="{{ request('search') }}" placeholder="Search">
           </div>
           <div class="col-md-3">
               <select name="category" class="form-control">
                 <option value="">All Status</option>
              
                 <option value="Partially-Paid" {{ request('category')=='Partially-Paid' ? 'selected' : '' }}>
                     Partially-Paid
                 </option>
              
                 <option value="Un-Paid" {{ request('category')=='Un-Paid' ? 'selected' : '' }}>
                     Un-Paid
                 </option>
              
                 <option value="Paid" {{ request('category')=='Paid' ? 'selected' : '' }}>
                     Paid
                 </option>
               </select>
           </div>
           
           <div class="col-md-3">
            <input
               type="date"
               class="form-control"
               id="return_date"
               name="return_date"
            >
           </div>
           
           <div class="col-md-3">
               <button class="btn btn-secondary w-100">Filter</button>
           </div>
       </form>

       <!-- Products Table -->
       <div class="table-responsive">
           <table class="table table-bordered align-middle">
               <thead class="table-light">
                   <tr>
                       <th width="30"><input type="checkbox" class="check-all"></th>
                       <th>Name</th>
                       <th>Order Date</th>
                       <th>Total</th>
                       <th>Paid</th>
                       <th>Balance</th>
                       <th>Payment Status</th>
                       <th>Delevery Status</th>
                       <th class="text-end">Action</th>
                   </tr>
               </thead>
               <tbody>
                 @foreach($allorder as $Order)
                    <tr>
                       <td><input type="checkbox" class="check-one" value="{{ $Order->id }}"></td>
                       
                       <td>
                           <strong>{{ $Order->customer->name }} </strong><br>
                            <small class="text-muted"> {{ $Order->customer->urdu_name ?? ''}}</small>
                       </td>

                       <td>
                           <strong>{{  \Carbon\Carbon::parse($Order->order_date)->format('d M Y h:i A') }}</strong>
                       </td>

                       <td>Rs {{ number_format($Order->grand_total, 2) }}</td>
                       <td>Rs {{ number_format($Order->paid_amount, 2) }}<br>
                        <small>Discount: Rs {{ number_format($Order->discount, 2) }}</small>
                       </td>
                       <td>Rs {{ number_format($Order->balance, 2) }}</td>

                       <td>
                           
                            @if($Order->payment_status == 'Paid')
                                 <span class="badge bg-success">Paid</span>

                           @elseif($Order->payment_status == 'Un-Paid')
                                 <span class="badge bg-danger">Un-Paid</span>

                           @else
                                 <span class="badge bg-warning">{{$Order->payment_status}}</span>
                           @endif
                       </td>

                       <td>
                          
                            @if($Order->order_status == 'delivered')
                                 <span class="badge bg-success">Delivered</span>

                           @elseif($Order->order_status == 'cancelled')
                                 <span class="badge bg-danger">Cancelled</span>

                           @else
                                 <span class="badge bg-warning">{{$Order->order_status}}</span>
                           @endif
                       </td>


                       
                       <td class="text-end">
                          <a href="{{ route('admin.Order.detail', $Order->id) }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
                             <i class="las la-eye"></i> Detail
                         </a>

                          <button
                              class="btn btn-sm btn-outline-info rounded-pill px-3 btn-delivered"
                              data-bs-toggle="modal"
                              data-bs-target="#deliveredModal"
                              data-id="{{ $Order->id }}">
                              <i class="las la-truck"></i> Delivered
                          </button>
                      
                          <button
                              class="btn btn-sm btn-outline-success rounded-pill px-3 btn-paid"
                              data-bs-toggle="modal"
                              data-bs-target="#paidModal"
                              data-id="{{ $Order->id }}">
                              <i class="las la-check-circle"></i> Paid
                          </button>
                        </td>
                   </tr>

                  @endforeach
                 
               </tbody>
           </table>
       </div>

       <!-- Pagination -->
       <div class="mt-3">
           <div class="pagination-sm">
           {{ $allorder->links() }}
        </div>
       </div>
   </div>
</div>

<div class="modal fade" id="deliveredModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <form id="deliveredForm" method="POST">
                @csrf
                @method('PUT')

                <div class="modal-header">
                    <h5 class="modal-title">Mark Order Delivered</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    Are you sure you want to mark this order as <strong>Delivered</strong>?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">Cancel</button>

                    <button type="submit" class="btn btn-info">
                        Yes, Delivered
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal fade" id="paidModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <form id="paidForm" method="POST">
                @csrf
                @method('PUT')

                <div class="modal-header">
                    <h5 class="modal-title">Mark Order as Paid</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <p>Are you sure you want to mark this order as <strong>Paid</strong>?</p>

                    <!-- Paid Amount -->
                    <div class="mb-3">
                        <label for="paid_amount" class="form-label">
                            Paid Amount <span class="text-danger">*</span>
                        </label>
                        <input type="number"
                               class="form-control"
                               id="paid_amount"
                               name="paid_amount"
                               step="0.01"
                               min="0"
                               placeholder="Enter paid amount"
                               required>
                    </div>

                    <!-- Payment Method -->
                    <div class="mb-3">
                        <label for="payment_method" class="form-label">
                            Payment Method <span class="text-danger">*</span>
                        </label>

                        <select class="form-select"
                                id="payment_method"
                                name="payment_method"
                                required>
                            <option value="">Select Payment Method</option>
                            <option value="Cash">Cash</option>
                            <option value="Bank Transfer">Bank Transfer</option>
                            <option value="JazzCash">JazzCash</option>
                            <option value="EasyPaisa">EasyPaisa</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>

                    <!-- Equipment Returned -->
                    <div class="form-check mt-3">
                        <input class="form-check-input"
                               type="checkbox"
                               id="equipmentReturned"
                               name="equipment_returned">

                        <label class="form-check-label" for="equipmentReturned">
                            I confirm that <strong>all equipment has been returned.</strong>
                        </label>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit"
                            class="btn btn-success">
                        Mark as Paid
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>

@endsection
@push('js')
<script>

$(function () {

    $('.btn-delivered').click(function () {

        let id = $(this).data('id');

        $('#deliveredForm').attr(
            'action',
            '/admin/orders/' + id + '/delivered'
        );

    });

    $('.btn-paid').click(function () {

        let id = $(this).data('id');

        $('#paidForm').attr(
            'action',
            '/admin/orders/' + id + '/paid'
        );

    });

});
</script>
@endpush