@extends('layouts.admin')

@section('title', 'Membership Applications Registry')
@section('header_title', 'All Membership Applications')

@section('content')

<!-- Filter / Search Section -->
<div class="card-custom p-3 p-md-4 mb-4">
    <form method="GET" action="{{ route('admin.applications.index') }}" class="row g-2 align-items-center">
        
        <!-- Search Input -->
        <div class="col-12 col-md-4">
            <div class="input-group">
                <span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-1" name="search" value="{{ request('search') }}" placeholder="Search name, app no, mobile, pan, aadhaar...">
            </div>
        </div>

        <!-- District Filter -->
        <div class="col-6 col-md-3">
            <select class="form-select" name="district" onchange="this.form.submit()">
                <option value="all">All Districts (Tamil Nadu)</option>
                @foreach($districts as $district)
                    <option value="{{ $district }}" {{ request('district') == $district ? 'selected' : '' }}>{{ $district }}</option>
                @endforeach
            </select>
        </div>

        <!-- Status Filter -->
        <div class="col-6 col-md-3">
            <select class="form-select" name="status" onchange="this.form.submit()">
                <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>All Status ({{ $counts['all'] }})</option>
                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending ({{ $counts['pending'] }})</option>
                <option value="under_review" {{ request('status') == 'under_review' ? 'selected' : '' }}>Under Review ({{ $counts['under_review'] }})</option>
                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved ({{ $counts['approved'] }})</option>
                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected ({{ $counts['rejected'] }})</option>
            </select>
        </div>

        <div class="col-12 col-md-2 d-flex gap-2">
            <button type="submit" class="btn btn-primary w-100 rounded-pill"><i class="bi bi-funnel me-1"></i> Filter</button>
            @if(request()->hasAny(['search', 'district', 'status']))
                <a href="{{ route('admin.applications.index') }}" class="btn btn-outline-secondary rounded-pill" title="Reset Filters"><i class="bi bi-arrow-counterclockwise"></i></a>
            @endif
        </div>

    </form>
</div>

<!-- Applications Data Table -->
<div class="card-custom p-3 p-md-4">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
        <div>
            <h6 class="fw-bold text-dark mb-0 font-outfit">Member Applications Registry</h6>
            <span class="text-muted small">Showing <strong>{{ $applications->total() }}</strong> total applications</span>
        </div>
        <a href="{{ route('admin.applications.export') }}" class="btn btn-sm btn-outline-success rounded-pill px-3 shadow-sm">
            <i class="bi bi-file-earmark-excel me-1"></i> Export to CSV
        </a>
    </div>

    <!-- Responsive Table Container -->
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr class="text-muted small text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.05em; background-color: #f8fafc;">
                    <th class="py-3 ps-3 rounded-start">Photo</th>
                    <th class="py-3">App No & Applicant</th>
                    <th class="py-3">District</th>
                    <th class="py-3">PAN / Aadhaar</th>
                    <th class="py-3">Contact</th>
                    <th class="py-3">Status</th>
                    <th class="py-3">Submitted</th>
                    <th class="py-3 pe-3 text-end rounded-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($applications as $app)
                    <tr>
                        <td class="ps-3 py-3" style="width: 55px;">
                            @if($app->photo_doc)
                                <img src="{{ asset($app->photo_doc) }}" alt="Photo" class="rounded-3 border shadow-sm" style="width: 44px; height: 50px; object-fit: cover;">
                            @else
                                <div class="rounded-3 border bg-light d-flex align-items-center justify-content-center text-muted" style="width: 44px; height: 50px;">
                                    <i class="bi bi-person fs-5"></i>
                                </div>
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('admin.applications.show', $app->id) }}" class="fw-bold text-dark text-decoration-none d-block">
                                {{ $app->name }}
                            </a>
                            <div class="d-flex flex-wrap gap-1 align-items-center mt-1">
                                <span class="badge bg-secondary-subtle text-secondary small font-monospace">{{ $app->application_no }}</span>
                                @if($app->status === 'approved' && $app->membership_no)
                                    <span class="badge bg-success-subtle text-success border border-success-subtle small font-monospace fw-bold" title="Enrolled Membership Number">
                                        <i class="bi bi-person-badge-fill me-1"></i>{{ $app->membership_no }}
                                    </span>
                                @endif
                                @if($app->membership_category)
                                    <span class="badge bg-warning-subtle text-warning-emphasis small" style="color: #854d0e !important; background-color: #fef08a !important;">{{ $app->membership_category }}</span>
                                @endif
                            </div>
                            <div class="text-muted small">F/S: {{ $app->father_spouse_display }}</div>
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border px-2 py-1 rounded-pill">{{ $app->district }}</span>
                        </td>
                        <td>
                            <div class="small fw-semibold text-dark">PAN: <span class="text-uppercase font-monospace text-success">{{ $app->pan_number }}</span></div>
                            @if($app->aadhaar_number)
                                <small class="text-muted font-monospace">UID: {{ $app->aadhaar_number }}</small>
                            @endif
                        </td>
                        <td>
                            <div class="small"><i class="bi bi-whatsapp text-success me-1"></i>{{ $app->whatsapp_number ?: $app->mobile_number }}</div>
                            <small class="text-muted text-truncate d-inline-block" style="max-width: 140px;">{{ $app->email }}</small>
                        </td>
                        <td>
                            <span class="badge {{ $app->status_badge }} rounded-pill px-3 py-1 fw-semibold shadow-sm">
                                @if($app->status == 'pending') <span class="pulse-dot me-1"></span> @endif
                                {{ ucfirst(str_replace('_', ' ', $app->status)) }}
                            </span>
                        </td>
                        <td>
                            <small class="text-muted text-nowrap">{{ $app->created_at->format('d M Y') }}</small>
                        </td>
                        <td class="pe-3 text-end text-nowrap">
                            <div class="btn-group btn-group-sm">
                                <!-- Status / Approval Modal Button -->
                                <button type="button" class="btn btn-outline-success" title="Approve / Change Status" data-bs-toggle="modal" data-bs-target="#approvalModal{{ $app->id }}">
                                    <i class="bi bi-patch-check-fill"></i>
                                </button>
                                
                                <!-- Inspect View -->
                                <a href="{{ route('admin.applications.show', $app->id) }}" class="btn btn-outline-primary" title="View Full Dossier">
                                    <i class="bi bi-eye-fill"></i>
                                </a>

                                <!-- Preview PDF -->
                                <a href="{{ route('admin.applications.pdf.preview', $app->id) }}" target="_blank" class="btn btn-outline-warning" title="Preview PDF (New Tab)">
                                    <i class="bi bi-file-earmark-pdf"></i>
                                </a>

                                <!-- Download PDF -->
                                <a href="{{ route('admin.applications.pdf', $app->id) }}" class="btn btn-outline-secondary" title="Download PDF">
                                    <i class="bi bi-file-earmark-pdf-fill"></i>
                                </a>

                                <!-- Delete -->
                                <button type="button" class="btn btn-outline-danger" title="Delete" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $app->id }}">
                                    <i class="bi bi-trash3-fill"></i>
                                </button>
                            </div>

                            @php
                                $suggestedMNo = $app->membership_no ?: \App\Models\MembershipApplication::generateNextMembershipNo($app->membership_category);
                            @endphp

                            <!-- Approval / Status Modal for this Row -->
                            <div class="modal fade text-start app-status-modal" id="approvalModal{{ $app->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content rounded-4 border-0 shadow-lg">
                                        <div class="modal-header border-bottom p-4">
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="p-2 rounded-3 bg-success bg-opacity-10 text-success">
                                                    <i class="bi bi-patch-check-fill fs-5"></i>
                                                </div>
                                                <div>
                                                    <h6 class="modal-title fw-bold text-dark font-outfit mb-0">Update Application Status & Office Records</h6>
                                                    <small class="text-muted">{{ $app->application_no }} &bull; {{ $app->name }}</small>
                                                </div>
                                            </div>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        
                                        <form action="{{ route('admin.applications.status', $app->id) }}" method="POST">
                                            @csrf
                                            <div class="modal-body p-4">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold text-dark">Application Status <span class="text-danger">*</span></label>
                                                        <select name="status" class="form-select rounded-3 status-selector" required data-suggested="{{ $suggestedMNo }}">
                                                            <option value="pending" {{ $app->status == 'pending' ? 'selected' : '' }}>Pending Verification</option>
                                                            <option value="under_review" {{ $app->status == 'under_review' ? 'selected' : '' }}>Under Review / Query</option>
                                                            <option value="approved" {{ $app->status == 'approved' ? 'selected' : '' }}>Approved (Member Enrolled)</option>
                                                            <option value="rejected" {{ $app->status == 'rejected' ? 'selected' : '' }}>Rejected / Incomplete</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-md-6 membership-no-group" style="{{ $app->status === 'approved' ? '' : 'display: none;' }}">
                                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                                            <label class="form-label small fw-bold text-dark mb-0">Membership No. <span class="badge bg-success-subtle text-success small">Approved</span></label>
                                                            <button type="button" class="btn btn-link p-0 text-decoration-none small text-primary btn-auto-gen-mno" data-suggested="{{ $suggestedMNo }}" title="Auto-generate sequential Membership No.">
                                                                <i class="bi bi-magic me-1"></i>Auto-Generate
                                                            </button>
                                                        </div>
                                                        <input type="text" name="membership_no" class="form-control rounded-3 font-monospace membership-no-input" value="{{ old('membership_no', $app->membership_no) }}" placeholder="e.g. {{ $suggestedMNo }}">
                                                        <small class="text-muted" style="font-size: 0.72rem;">Suggested Sequence: <span class="fw-semibold text-success font-monospace">{{ $suggestedMNo }}</span></small>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold text-dark">Application Verified?</label>
                                                        <select name="office_verified" class="form-select rounded-3 office-verified-select">
                                                            <option value="">-- Select --</option>
                                                            <option value="Yes" {{ $app->office_verified == 'Yes' ? 'selected' : '' }}>Yes</option>
                                                            <option value="No" {{ $app->office_verified == 'No' ? 'selected' : '' }}>No</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold text-dark">Membership Approved?</label>
                                                        <select name="office_approved" class="form-select rounded-3 office-approved-select">
                                                            <option value="">-- Select --</option>
                                                            <option value="Yes" {{ $app->office_approved == 'Yes' ? 'selected' : '' }}>Yes</option>
                                                            <option value="No" {{ $app->office_approved == 'No' ? 'selected' : '' }}>No</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold text-dark">Receipt No.</label>
                                                        <input type="text" name="office_receipt_no" class="form-control rounded-3" value="{{ old('office_receipt_no', $app->office_receipt_no) }}" placeholder="Receipt number">
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold text-dark">Amount Received (₹)</label>
                                                        <input type="text" name="office_amount_received" class="form-control rounded-3" value="{{ old('office_amount_received', $app->office_amount_received) }}" placeholder="Amount in ₹">
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold text-dark">Office Action Date</label>
                                                        <input type="date" name="office_date" class="form-control rounded-3 office-date-input" value="{{ old('office_date', $app->office_date ? $app->office_date->format('Y-m-d') : date('Y-m-d')) }}">
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="form-label small fw-bold text-dark">Verified / Approved By</label>
                                                        <input type="text" name="office_approved_by" class="form-control rounded-3" value="{{ old('office_approved_by', $app->office_approved_by) }}" placeholder="Officer Name / Designation">
                                                    </div>

                                                    <div class="col-12">
                                                        <label class="form-label small fw-bold text-dark">Admin Remarks / Notes</label>
                                                        <textarea name="admin_notes" class="form-control rounded-3" rows="3" placeholder="Enter remarks or approval notes regarding this applicant...">{{ old('admin_notes', $app->admin_notes) }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer border-top p-3 bg-light rounded-bottom-4">
                                                <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-ftptn btn-sm rounded-pill px-4 shadow-sm">
                                                    <i class="bi bi-check2-circle me-1"></i> Save & Apply
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Delete Modal for this Row -->
                            <div class="modal fade text-start" id="deleteModal{{ $app->id }}" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content rounded-4 border-0 shadow">
                                        <div class="modal-header border-bottom p-3">
                                            <h6 class="modal-title fw-bold text-danger"><i class="bi bi-exclamation-triangle me-1"></i> Delete Application</h6>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body p-4">
                                            Are you sure you want to permanently delete application <strong>{{ $app->application_no }}</strong> for <strong>{{ $app->name }}</strong>?<br>
                                            <small class="text-danger">This action will remove all uploaded certificates permanently.</small>
                                        </div>
                                        <div class="modal-footer border-top p-3">
                                            <button type="button" class="btn btn-secondary btn-sm rounded-pill px-3" data-bs-dismiss="modal">Cancel</button>
                                            <form action="{{ route('admin.applications.destroy', $app->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm rounded-pill px-3">Confirm Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted">
                            <i class="bi bi-folder-x fs-1 d-block mb-2"></i>
                            No applications found matching your criteria.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="d-flex justify-content-center mt-4">
        {{ $applications->links('pagination::bootstrap-5') }}
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // When status changes in any modal, handle auto-population or reset & show/hide
    document.querySelectorAll('.status-selector').forEach(function (select) {
        select.addEventListener('change', function () {
            const modal = this.closest('.modal-content');
            if (!modal) return;
            const mnoGroup = modal.querySelector('.membership-no-group');
            const mnoInput = modal.querySelector('.membership-no-input');
            const verifiedSelect = modal.querySelector('.office-verified-select');
            const approvedSelect = modal.querySelector('.office-approved-select');
            const dateInput = modal.querySelector('.office-date-input');
            const suggested = this.getAttribute('data-suggested');

            if (this.value === 'approved') {
                if (mnoGroup) mnoGroup.style.display = 'block';
                if (mnoInput && (!mnoInput.value || mnoInput.value.trim() === '')) {
                    mnoInput.value = suggested;
                }
                if (verifiedSelect && (!verifiedSelect.value || verifiedSelect.value === '')) {
                    verifiedSelect.value = 'Yes';
                }
                if (approvedSelect && (!approvedSelect.value || approvedSelect.value === '')) {
                    approvedSelect.value = 'Yes';
                }
                if (dateInput && (!dateInput.value || dateInput.value === '')) {
                    dateInput.value = new Date().toISOString().split('T')[0];
                }
            } else {
                // If changing away from approved, hide and clear the membership number input
                if (mnoGroup) mnoGroup.style.display = 'none';
                if (mnoInput) mnoInput.value = '';
                if (this.value === 'rejected') {
                    if (approvedSelect) approvedSelect.value = 'No';
                }
            }
        });
    });

    // Auto-Generate button click handler
    document.querySelectorAll('.btn-auto-gen-mno').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const modal = this.closest('.modal-content');
            if (!modal) return;
            const statusSelect = modal.querySelector('.status-selector');
            const mnoGroup = modal.querySelector('.membership-no-group');
            const mnoInput = modal.querySelector('.membership-no-input');
            const suggested = this.getAttribute('data-suggested');
            if (mnoInput && suggested) {
                mnoInput.value = suggested;
                if (mnoGroup) mnoGroup.style.display = 'block';
                if (statusSelect) {
                    statusSelect.value = 'approved';
                }
            }
        });
    });
});
</script>
@endsection