@extends('admin.layouts.app')
@section('content')
    <div class="container-xl">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Module</h3>
                <div class="card-actions">
                    <a href="{{ route('panel.module.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.module.index') }}" class="row g-3">
                        <div class="col-md-3">
                            <input type="text" name="search" class="form-control nepali-input"
                                placeholder="gfdaf6 vf]Hg'xf]; ." value="{{ request('search') }}">
                        </div>
                        <div class="col-md-3">
                            <input type="text" name="chalani_no" class="form-control nepali-input"
                                placeholder="rnfgL g+ af6 vf]Hg'xf]; ." 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.module.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>Module</th>
                                <th>Code</th>
                                <th>Status</th>
                                <th class="w-1">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($datas as $keys=>$data)
                                <tr>
                                    <td>{{ $datas->firstItem() + $keys }}</td>
                                    <td class="text-secondary">{{ $data->name }}</td>
                                    <td class="text-secondary">{{ $data->code_name }}</td>

                                    @if ($data->status == 'active')
                                        <td class="text-secondary"><span
                                                class="badge bg-success-lt">{{ $data->status }}</span></td>
                                    @else
                                        <td class="text-secondary"><span
                                                class="badge bg-danger-lt">{{ $data->status }}</span></td>
                                    @endif
                                    <td>
                                        <div class="btn-group" role="group">

                                            <a href="{{ route('panel.module.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.gharbato.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