@extends("admin.template.layout")

@section('header')
<link rel="stylesheet" type="text/css" href="{{ asset('') }}admin_assets/plugins/table/datatable/datatables.css">
@stop

@section('content')
<div class="card">
    <div class="card-body">
        <h4>{{ $page_heading }}</h4>

        <form action="" method="get" class="row mb-3">
            <div class="col-md-3">
                <label>Status</label>
                <select name="status" class="form-control">
                    <option value="">All</option>
                    <option value="Pending" {{ $status=='Pending'?'selected':'' }}>Pending</option>
                    <option value="Accepted" {{ $status=='Accepted'?'selected':'' }}>Accepted</option>
                    <option value="Pickup" {{ $status=='Pickup'?'selected':'' }}>Pickup</option>
                    <option value="Completed" {{ $status=='Completed'?'selected':'' }}>Completed</option>
                </select>
            </div>
             <div class="col-md-3 form-group">
                <label>Customer</label>
                <select name="customer" class="form-control select-nosearch">
                    <option value="">All Customers</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ $customer == $user->id ? 'selected' : '' }}>
                            {{ $user->first_name }} {{ $user->last_name }}
                        </option>
                    @endforeach
                </select>
            </div>
             <div class="col-md-3 form-group">
                <label>Date From</label>
                 <input type="text" id="from_date" name="from" class="form-control flatpickr-input" autocomplete="off" value="{{ $from ?? '' }}">
            </div>
            <div class="col-md-3 form-group">
                <label>Date To</label>
                <input type="text" id="to_date" name="to" class="form-control flatpickr-input" autocomplete="off" value="{{ $to ?? '' }}">
            </div>
              <div class="col-md-3 form-group">
                <label>Order Number</label>
                <input type="text" name="order_id" class="form-control" placeholder="Enter Order No" value="{{ $order_id ?? '' }}">
            </div>
            <div class="col-md-12 mt-2">
                <button class="btn btn-primary">Search</button>
                <a href="{{ url('admin/replaceRequests') }}" class="btn btn-warning">Clear</a>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-bordered" id="replace_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Order No</th>
                        <th>Customer</th>
                        <th>Product</th>
                        <th>Comment</th>
                        <th>Status</th>
                        <th>Request Date</th>
                        @if ( GetUserPermissions("replacement_requests_edit") )
                        <th>Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @forelse($list as $i=>$item)
                    <tr>
                        <td>{{ $i + $list->firstItem() }}</td>
                        <td>{{ $item->order_no }}</td>
                        <td>{{ $item->customer_name }}</td>
                        <td>{{ $item->product_name ?? '-' }}</td>
                        <td>{{ $item->comment ?? '-' }}</td>
                        <td>
                            <form action="{{ url('admin/updateReplaceStatus/status/'.$item->id) }}" method="post">
                                @csrf
                                @method('PUT')
                                <select name="status" class="form-control" onchange="this.form.submit()">
                                    <option value="Pending" {{ $item->status=='Pending'?'selected':'' }}>Pending</option>
                                    <option value="Accepted" {{ $item->status=='Accepted'?'selected':'' }}>Accepted</option>
                                    <option value="Pickup" {{ $item->status=='Pickup'?'selected':'' }}>Pickup</option>
                                    <option value="Completed" {{ $item->status=='Completed'?'selected':'' }}>Completed</option>
                                </select>
                            </form>
                        </td>
                        <td>{{ $item->created_at }}</td>
                        @if ( GetUserPermissions("replacement_requests_edit") )
                        <td>
                            <a href="{{ url('admin/order_details/'.$item->order_id) }}" class="btn btn-info btn-sm">Order</a>
                        </td>
                        @endif
                    </tr>
                    @empty
                    <tr><td colspan="8" class="text-center">No replacement requests found</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {!! $list->links('admin.template.pagination') !!}
        </div>
    </div>
</div>
@stop

@section('script')
<script src="{{ asset('') }}admin-assets/plugins/table/datatable/datatables.js"></script>
<script>
$('#replace_table').DataTable({
    "paging": false,
    "searching": false,
    "ordering": true,
    "info": false
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
   
    let fromPicker = flatpickr("#from_date", {
        dateFormat: "Y-m-d",
        onChange: function(selectedDates, dateStr) {
            if (dateStr) {
                toPicker.set("minDate", dateStr);
                toPicker.open();
            }
        }
    });

    let toPicker = flatpickr("#to_date", {
        dateFormat: "Y-m-d"
    });

    // Disable To date if From is empty on load
    if (!document.getElementById('from_date').value) {
        document.getElementById('to_date').disabled = true;
    }

    // Enable To date when From is selected
    document.getElementById('from_date').addEventListener('change', function () {
        document.getElementById('to_date').disabled = !this.value;
    });

});
</script>
@stop