@extends('admin.layouts.app')
@section('content')
    <div class="container-xl">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Purchased Module</h3>
                <div class="card-actions">
                    <a href="{{ route('panel.purchase-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.purchase-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">
                            <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.purchase-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>Municipality</th>
                                <th>Ward</th>
                                <th>Code Name</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->module->name }}</td>
                                <td class="text-secondary">{{ $data->municipality->name }}</td>
                                <td class="text-secondary">{{ $data->ward->name }}</td>
                                <td class="text-secondary">{{ $data->module->code_name }}</td>
                                <td>{{ $data->code_name }}</td>


                                <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