@extends('frontend.vendor_dashboard.dashboard.layouts.app')

@section('content')
    <div class="page-content">

        <!-- Breadcrumb-->
        <div class="row pt-2 pb-2">
            <div class="col-sm-10">
                <h4 class="page-title">Address</h4>
            </div>
            <div class="col-sm-2">
                <div class="btn-group float-sm-right">
                    <a href="{{ route('vendor.vendor-address.create') }}" class="btn btn-outline-primary waves-effect waves-light">
                        <i class="fa fa-plus mr-1"></i> Add New
                    </a>
                </div>
            </div>
        </div>
        <!-- End Breadcrumb-->

        <!-- Search and Filter Section -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <form method="GET" action="{{ route('vendor.vendor-address.index') }}" id="searchForm">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">Search</label>
                                    <input type="text" name="search" class="form-control"
                                           placeholder="Search by name, chalani no..."
                                           value="{{ request('search') }}">
                                </div>

                                <div class="col-md-2 mb-3">
                                    <label class="form-label">From Date</label>
                                    <input type="date" name="from_date" class="form-control"
                                           value="{{ request('from_date') }}">
                                </div>

                                <div class="col-md-2 mb-3">
                                    <label class="form-label">To Date</label>
                                    <input type="date" name="to_date" class="form-control"
                                           value="{{ request('to_date') }}">
                                </div>

                                <div class="col-md-2 mb-3">
                                    <label class="form-label">Status</label>
                                    <select name="status" class="form-control">
                                        <option value="">All Status</option>
                                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>

                                <div class="col-md-3 mb-3">
                                    <label class="form-label">&nbsp;</label>
                                    <div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fa fa-search"></i> Search
                                        </button>
                                        <a href="{{ route('vendor.vendor-address.index') }}" class="btn btn-secondary">
                                            <i class="fa fa-refresh"></i> Reset
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Results Info -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fa fa-table"></i> address Verification Records
                            </div>
                            <div>
                                <span class="badge bg-primary">Total: {{ $datas->total() }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="example" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th width="5%">
                                            <a href="{{ route('vendor.vendor-address.index', array_merge(request()->all(), ['sort_by' => 'id', 'sort_order' => request('sort_order') == 'asc' ? 'desc' : 'asc'])) }}" class="text-dark text-decoration-none">
                                                S.N
                                                @if(request('sort_by') == 'id')
                                                    <i class="fa fa-sort-{{ request('sort_order') == 'asc' ? 'asc' : 'desc' }}"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th width="10%">
                                            <a href="{{ route('vendor.vendor-address.index', array_merge(request()->all(), ['sort_by' => 'date', 'sort_order' => request('sort_order') == 'asc' ? 'desc' : 'asc'])) }}" class="text-dark text-decoration-none">
                                                Date
                                                @if(request('sort_by') == 'date')
                                                    <i class="fa fa-sort-{{ request('sort_order') == 'asc' ? 'asc' : 'desc' }}"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th width="10%">
                                            <a href="{{ route('vendor.vendor-address.index', array_merge(request()->all(), ['sort_by' => 'chalani_no', 'sort_order' => request('sort_order') == 'asc' ? 'desc' : 'asc'])) }}" class="text-dark text-decoration-none">
                                                Chalani No
                                                @if(request('sort_by') == 'chalani_no')
                                                    <i class="fa fa-sort-{{ request('sort_order') == 'asc' ? 'asc' : 'desc' }}"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th width="15%">
                                            <a href="{{ route('vendor.vendor-address.index', array_merge(request()->all(), ['sort_by' => 'applicant_name', 'sort_order' => request('sort_order') == 'asc' ? 'desc' : 'asc'])) }}" class="text-dark text-decoration-none">
                                                Applicant Name
                                                @if(request('sort_by') == 'applicant_name')
                                                    <i class="fa fa-sort-{{ request('sort_order') == 'asc' ? 'asc' : 'desc' }}"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th width="12%">Applicant Municipality</th>
                                        <th width="8%">Applicant Ward</th>
                                        <th width="8%">
                                            <a href="{{ route('vendor.vendor-address.index', array_merge(request()->all(), ['sort_by' => 'status', 'sort_order' => request('sort_order') == 'asc' ? 'desc' : 'asc'])) }}" class="text-dark text-decoration-none">
                                                Status
                                                @if(request('sort_by') == 'status')
                                                    <i class="fa fa-sort-{{ request('sort_order') == 'asc' ? 'asc' : 'desc' }}"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th width="15%">Action</th>
                                    </td>
                                </thead>
                                <tbody>
                                    @forelse ($datas as $keys => $data)
                                        <tr>
                                            <td>{{ $datas->firstItem() + $keys }}</td>
                                            <td class="text-secondary">{{ \Carbon\Carbon::parse($data->date)->format('Y-m-d') }}</td>
                                            <td class="text-secondary">{{ $data->chalani_no ?? '' }}</td>
                                            <td class="text-secondary">{{ $data->applicant_name }}</td>
                                            <td class="text-secondary">{{ $data->municipality->name ?? '' }}</td>
                                            <td class="text-secondary">{{ $data->ward->name ?? '' }}</td>
                                            @if ($data->status == 'active')
                                                <td class="text-secondary"><span class="badge rounded-pill bg-success">{{ $data->status }}</span></td>
                                            @else
                                                <td class="text-secondary"><span class="badge rounded-pill bg-danger">{{ $data->status }}</span></td>
                                            @endif
                                               <td>
                                                 {{-- <a href="{{ route('vendor.vendor-address.nibedan', $data->id) }}" class="btn btn-sm btn-primary">Nibedan</a> --}}
                                            <a href="{{ route('vendor.vendor-address.show', $data->id) }}" class="btn btn-sm btn-info">View</a>
                                            <a href="{{ route('vendor.vendor-address.edit', $data->id) }}" class="btn btn-sm btn-warning">Edit</a>
                                            <form action="{{ route('vendor.vendor-address.destroy', $data->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this form?')">Delete</button>
                                            </form>
                                        </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center">
                                                <div class="alert alert-info mb-0">
                                                    <i class="fa fa-info-circle"></i> No records found
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        @if($datas->total() > 0)
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        Showing {{ $datas->firstItem() }} to {{ $datas->lastItem() }} of {{ $datas->total() }} entries
                                    </small>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-end">
                                        {{ $datas->appends(request()->all())->links() }}
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div><!-- End Row-->
    </div>
@endsection

@push('scripts')
<script>


    // Search form auto-submit with vanilla JavaScript or safe jQuery
    (function() {
        // Auto-submit form on date change or status change
        var fromDate = document.getElementById('from_date');
        var toDate = document.getElementById('to_date');
        var status = document.getElementById('status');

        if (fromDate) {
            fromDate.addEventListener('change', function() {
                document.getElementById('searchForm').submit();
            });
        }

        if (toDate) {
            toDate.addEventListener('change', function() {
                document.getElementById('searchForm').submit();
            });
        }

        if (status) {
            status.addEventListener('change', function() {
                document.getElementById('searchForm').submit();
            });
        }

        // Debounce search input
        var searchInput = document.querySelector('input[name="search"]');
        var searchTimeout;

        if (searchInput) {
            searchInput.addEventListener('keyup', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    document.getElementById('searchForm').submit();
                }, 500);
            });
        }
    })();
</script>
@endpush