@extends('admin.layouts.app')

@section('title', 'Anggota Baru')
@section('page-title', 'ANGGOTA BARU')

@section('styles')
<style>
    .bulk-edit-modal .modal-content {
        border: 0;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
    }

    .bulk-edit-modal .modal-header {
        background: linear-gradient(135deg, #0f4c81 0%, #1d6fb8 100%);
        color: #fff;
        border-bottom: 0;
        padding: 18px 22px;
    }

    .bulk-edit-modal .modal-title {
        font-weight: 700;
        letter-spacing: 0.2px;
    }

    .bulk-edit-modal .btn-close {
        filter: invert(1);
        opacity: 0.9;
    }

    .bulk-edit-modal .modal-body {
        padding: 20px 22px 8px;
        background: #f8fafc;
    }

    .bulk-edit-modal .form-label {
        font-size: 13px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 8px;
    }

    .bulk-edit-modal .field-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 14px;
    }

    .bulk-edit-modal .hint {
        color: #64748b;
        font-size: 13px;
        margin-top: 2px;
    }

    .bulk-edit-modal .modal-footer {
        border-top: 1px solid #e5e7eb;
        background: #fff;
        padding: 14px 22px 18px;
    }

    .bulk-edit-modal .btn {
        border-radius: 10px;
        padding: 9px 16px;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.2px;
        text-transform: uppercase;
    }

    .bulk-edit-modal .select2-container {
        width: 100% !important;
    }

    .bulk-edit-modal .select2-container .select2-selection--single {
        height: 42px;
        border-radius: 10px;
        border: 1px solid #cbd5e1;
        padding: 6px 10px;
        display: flex;
        align-items: center;
    }

    .bulk-edit-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #0f172a;
        line-height: 28px;
        padding-left: 0;
    }

    .bulk-edit-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
        right: 8px;
    }
</style>
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-user-plus me-2"></i>Data Anggota Baru</h5>
        </div>
        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
            @if(session('warning'))
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    {{ session('warning') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <form method="GET" action="{{ route('anggota-baru.index') }}" class="row g-2 mb-3">
                <div class="col-md-4">
                    <label class="form-label">Cari Nama Anggota</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" name="search" class="form-control" placeholder="Ketik nama anggota..."
                               value="{{ request('search') }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Provinsi</label>
                    <select name="provinsi_code" id="filterProvinsiCode" class="form-select">
                        <option value="">Semua Provinsi</option>
                        @foreach($provinsiOptions as $provinsi)
                            <option value="{{ $provinsi->code }}" {{ request('provinsi_code') === $provinsi->code ? 'selected' : '' }}>
                                {{ $provinsi->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Kabupaten/Kota</label>
                    <select name="kota_code" id="filterKotaCode" class="form-select">
                        <option value="">Semua Kabupaten/Kota</option>
                        @foreach($kotaOptions as $kota)
                            <option value="{{ $kota->code }}" {{ request('kota_code') === $kota->code ? 'selected' : '' }}>
                                {{ $kota->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-filter"></i>
                    </button>
                </div>
            </form>

            <div class="mb-3">
                <button type="button" class="btn btn-warning" id="bulkEditBtn" disabled onclick="openBulkEditModal()">
                    <i class="fas fa-user-edit me-1"></i>Bulk Edit Induk/Cabang
                </button>
            </div>

            <div class="table-responsive">
                <table class="table table-striped align-middle">
                    <thead>
                        <tr>
                            <th style="width: 40px;">
                                <input type="checkbox" id="selectAllAnggotaBaru">
                            </th>
                            <th>Nama</th>
                            <th>NIA</th>
                            <th>Provinsi</th>
                            <th>Kabupaten/Kota</th>
                            <th>Status</th>
                            <th>Dibuat</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($anggotas as $anggota)
                            <tr>
                                <td>
                                    <input type="checkbox" class="bulk-anggota-item" value="{{ $anggota->id }}">
                                </td>
                                <td>
                                    <a href="{{ route('anggota.show', $anggota->id) }}" class="text-decoration-none fw-semibold">
                                        {{ $anggota->nama }}
                                    </a>
                                </td>
                                <td>{{ $anggota->nia ?: '-' }}</td>
                                <td>{{ app(\App\Services\LocationService::class)->resolveName('province', $anggota->provinsi_code) ?: '-' }}</td>
                                <td>{{ app(\App\Services\LocationService::class)->resolveName('city', $anggota->kota_code) ?: '-' }}</td>
                                <td>
                                    <span class="badge {{ $anggota->status === 'Aktif' ? 'bg-success' : 'bg-danger' }}">
                                        {{ $anggota->status ?: '-' }}
                                    </span>
                                </td>
                                <td>{{ optional($anggota->created_at)->format('d-m-Y H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted">Belum ada data anggota.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted small">
                    Menampilkan {{ $anggotas->firstItem() ?? 0 }} - {{ $anggotas->lastItem() ?? 0 }} dari {{ $anggotas->total() }} data
                </div>
                <div>
                    {{ $anggotas->links() }}
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bulk-edit-modal" id="bulkEditModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('anggota-baru.bulk-update-induk-cabang') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="fas fa-user-edit me-2"></i>Bulk Edit Admin Induk & Cabang</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="ids" id="bulkEditIds">

                        <div class="field-card">
                            <label for="bulk_parent_id" class="form-label">Pilih Admin Induk</label>
                            <select name="parent_id" id="bulk_parent_id" class="form-select">
                                <option value="">Tidak diubah</option>
                                @foreach($admins as $adm)
                                    <option value="{{ $adm->id }}">{{ $adm->name }} ({{ $adm->username }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="field-card">
                            <label for="bulk_parent_id_cabang" class="form-label">Pilih Cabang</label>
                            <select name="parent_id_cabang" id="bulk_parent_id_cabang" class="form-select">
                                <option value="">Tidak diubah</option>
                                @foreach($admins as $adm)
                                    <option value="{{ $adm->id }}">{{ $adm->name }} ({{ $adm->username }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="hint"><i class="fas fa-circle-info me-1"></i>Pilih minimal satu nilai untuk diperbarui.</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const provinsi = document.getElementById('filterProvinsiCode');
        if (provinsi) {
            provinsi.addEventListener('change', function () {
                const kota = document.getElementById('filterKotaCode');
                if (kota) {
                    kota.value = '';
                }
                this.form.submit();
            });
        }

        if (window.jQuery) {
            $('#bulk_parent_id').select2({
                dropdownParent: $('#bulkEditModal'),
                placeholder: 'Cari admin induk...'
            });
            $('#bulk_parent_id_cabang').select2({
                dropdownParent: $('#bulkEditModal'),
                placeholder: 'Cari cabang...'
            });
        }

        const selectAll = document.getElementById('selectAllAnggotaBaru');
        const bulkBtn = document.getElementById('bulkEditBtn');
        const updateBulkState = () => {
            const selected = document.querySelectorAll('.bulk-anggota-item:checked').length;
            bulkBtn.disabled = selected === 0;
        };

        if (selectAll) {
            selectAll.addEventListener('change', function () {
                document.querySelectorAll('.bulk-anggota-item').forEach((cb) => {
                    cb.checked = this.checked;
                });
                updateBulkState();
            });
        }

        document.querySelectorAll('.bulk-anggota-item').forEach((cb) => {
            cb.addEventListener('change', function () {
                if (!this.checked && selectAll) {
                    selectAll.checked = false;
                }
                updateBulkState();
            });
        });
    });

    function openBulkEditModal() {
        const ids = Array.from(document.querySelectorAll('.bulk-anggota-item:checked')).map((el) => el.value);
        if (ids.length === 0) {
            return;
        }

        document.getElementById('bulkEditIds').value = JSON.stringify(ids);
        const modal = new bootstrap.Modal(document.getElementById('bulkEditModal'));
        modal.show();
    }
</script>
@endsection