@extends('admin.layouts.app')
@section('content')
    <div class="container-xl">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Darta Chalani</h3>
                <div class="card-actions">
                    <a href="{{ route('panel.darta-chalani.create') }}" class="btn btn-primary btn-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="icon icon-2">
                            <path d="M12 5l0 14"></path>
                            <path d="M5 12l14 0"></path>
                        </svg>
                        Add new
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
                <!-- Search Form -->
                <div class="p-3 border-bottom">
                    <form method="GET" action="{{ route('panel.darta-chalani.index') }}" class="row g-3">
                        <div class="col-md-3">
                            <input type="text" name="search" class="form-control" placeholder="Search by name..."
                                value="{{ request('search') }}">
                        </div>
                        <div class="col-md-3">
                            <input type="text" name="chalani_no" class="form-control"
                                placeholder="Search by Chalani No..." value="{{ request('chalani_no') }}">
                        </div>
                        <div class="col-md-3">
                            <select name="municipality" class="form-select">
                                <option value="">All Municipalities</option>
                                @foreach ($municipalities ?? [] as $municipality)
                                    <option value="{{ $municipality->id }}"
                                        {{ request('municipality') == $municipality->id ? 'selected' : '' }}>
                                        {{ $municipality->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select name="status" class="form-select">
                                <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-12">
                            <button type="submit" class="btn btn-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="icon">
                                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                                    <path d="M21 21l-6 -6"></path>
                                </svg>
                                Search
                            </button>
                            <a href="{{ route('panel.darta-chalani.index') }}" class="btn btn-secondary">Reset</a>
                        </div>
                    </form>
                </div>

                <!-- Results Count -->
                <div class="p-3 border-bottom bg-light">
                    <small>Total records found: {{ $datas->total() }}</small>
                </div>

                <div class="table-responsive">
                    <table class="table table-vcenter card-table">
                        <thead>
                            <tr>
                                <th>S.N</th>
                               <th>Chalani No</th>
                                        <th>Date</th>
                                        <th>Applicant Name</th>
                                        <th>Office Name</th>
                                        <th>Subject</th>
                                        <th>Category</th>
                                        <th>Year/Month</th>
                                        <th>Status</th>
                                <th class="w-1">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($datas as $keys=>$data)
                                <tr>
                                    <td>{{  $keys +1 }}</td>
                                    <td>{{ $data->chalani_no ?? 'N/A' }}</td>
                                            <td>{{ $data->date }}</td>
                                            <td>{{ $data->applicant_name ?? 'N/A' }}</td>
                                            <td>{{ $data->office_name ?? 'N/A' }}</td>
                                            <td>{{ \Illuminate\Support\Str::limit($data->subject, 50) }}</td>
                                            <td>{{ $data->category->name ?? 'N/A' }}</td>
                                            <td><span class="nepali-input">{{ $data->year->name ?? 'N/A' }}</span> /
                                                {{ $data->month }}</td>
                                            <td>
                                                @if ($data->status == 'active')
                                                    <span class="badge bg-success">Active</span>
                                                @elseif($data->status == 'inactive')
                                                    <span class="badge bg-danger">Inactive</span>
                                                @else
                                                    <span class="badge bg-warning">Pending</span>
                                                @endif
                                            </td>
                                    <td>
                                        <div class="btn-group" role="group">

                                            <a href="{{ route('panel.darta-chalani.edit', $data) }}"
                                                class="btn btn-sm btn-warning">Edit</a>
                                            <button type="button" class="btn btn-sm btn-danger"
                                                onclick="confirmDelete({{ $data->id }})">Delete</button>
                                        </div>
                                        <form id="delete-form-{{ $data->id }}"
                                            action="{{ route('panel.darta-chalani.destroy', $data) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <div class="empty">
                                            <div class="empty-img">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <line x1="22" y1="12" x2="18" y2="12">
                                                    </line>
                                                    <line x1="6" y1="12" x2="2" y2="12">
                                                    </line>
                                                    <line x1="12" y1="6" x2="12" y2="2">
                                                    </line>
                                                    <line x1="12" y1="22" x2="12" y2="18">
                                                    </line>
                                                </svg>
                                            </div>
                                            <p class="empty-title">No records found</p>
                                            <p class="empty-subtitle text-secondary">
                                                Try adjusting your search filters
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    {{ $datas->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function confirmDelete(id) {
            if (confirm('Are you sure you want to delete this record?')) {
                document.getElementById('delete-form-' + id).submit();
            }
        }

        // Live search (optional - adds real-time search functionality)
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.querySelector('input[name="search"]');
            if (searchInput) {
                let timeout = null;
                searchInput.addEventListener('keyup', function(e) {
                    clearTimeout(timeout);
                    timeout = setTimeout(() => {
                        if (e.target.value.length >= 2 || e.target.value.length === 0) {
                            this.form.submit();
                        }
                    }, 500);
                });
            }
        });
    </script>
@endpush