@extends('layouts.admin')

@section('title', 'All States Management')

@section('content')
<div class="row g-2 mb-3 align-items-center">
    <div class="col-md-7 col-12">
        <form class="d-flex gap-2 align-items-center" id="state-search-form" autocomplete="off">
            <select class="form-select form-select-sm w-auto js-choices" id="filter_state_id" name="filter_state_id" style="min-width:220px;">
                <option value="">All States</option>
                <optgroup label="STATES">
                @foreach ($states as $s)
                @if($s->is_state == 1)
                <option value="{{ $s->id }}">{{ $s->name }}</option>
                @endif
                @endforeach
                </optgroup>
                <optgroup label="UNION TERRITORY">
                @foreach ($states as $s)
                @if($s->is_state == 2)
                <option value="{{ $s->id }}">{{ $s->name }}</option>
                @endif
                @endforeach
                </optgroup>
                <optgroup label="DEPARTMENTS">
                @foreach ($states as $s)
                @if($s->is_state == 3)
                <option value="{{ $s->id }}">{{ $s->name }}</option>
                @endif
                @endforeach
                </optgroup>
            </select>
            
            <!-- <select class="form-select form-select-sm w-auto" id="filter_admin_status" name="filter_admin_status" style="min-width:140px;">
                <option value="">All Status</option>
                <option value="verified">Verified Admin</option>
                <option value="unverified">No Admin</option>
            </select> -->

            <select class="form-select form-select-sm w-auto profile-filter" id="filter_status" name="filter_status" style="min-width:120px;">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
            <select class="form-select form-select-sm w-auto profile-filter" id="search_by" name="search_by" style="min-width:130px;">
                <option value="">Select Option</option>
                <option value="email">Admin Email</option>
            </select>
            <input type="text" class="form-control form-control-sm w-auto profile-filter" id="search_key" name="search_key"
                placeholder="Enter state name or email..." style="min-width:160px;">

            <button type="submit" class="btn btn-phoenix-primary btn-sm px-3" id="search_go">
                <span class="uil uil-search me-1"></span>Go
            </button>
            <button type="button" class="btn btn-phoenix-secondary btn-sm px-3" id="reset_filters" title="Reset Filters"><span class="uil uil-redo"></span></button>
        </form>
    </div>
    <div class="col-md-1 col-12 text-md-end mt-2 mt-md-0">
    </div>
    <div class="col-md-4 col-12 text-md-end mt-2 mt-md-0">
        <div class="d-flex justify-content-md-end align-items-center gap-2">
             <label for="date_range" class="form-label mb-0 me-2 small">Date Range:</label>

            <input class="form-control datetimepicker form-control-sm w-auto" id="reportrange" name="date_range" placeholder="d/m/y to d/m/y" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true}' readonly style="min-width:200px;" />
        </div>
    </div>
    
</div>

<div class="row g-3">
    <div class="col-12">
        <div class="card border h-100">
          
            <div class="card-body p-0">
               
                    <div class="table-responsive scrollbar">
                 
                    <div class="phoenix-table-sticky-wrapper" style="position:relative; min-height:calc(100vh - 200px); max-height:calc(100vh - 200px); overflow:auto;">
                        <table class="table table-sm fs-9 mb-0">
                            <thead class="text-center" style="position:sticky; top:0; z-index:2; background:#fff;">
                            <tr>
                                <th class="ps-3 sort" data-sort="id">#</th>
                                <th class="sort" data-sort="state_name">State Name</th>
                                <th class="sort" data-sort="admin_email">Admin Email</th>
                                <th class="sort" data-sort="admin_status">Admin Status</th>
                                <th class="sort" data-sort="active_status">Active Status</th>
                                <th class="sort" data-sort="pending_verification">Pending?</th>
                                <th class="sort" data-sort="password_pending">Pwd Pending?</th>
                                <!-- <th class="sort" data-sort="status">State Status</th> -->
                                <th class="sort" data-sort="admin_created_at">Created Date</th>
                                <th class="sort" data-sort="admin_updated_at">Verified At</th>
                                <th class="ps-3 ">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="state-table-body" class="all_states_lists">
                            <!-- State rows will be rendered by JS -->
                            <!-- <tr>
                                <td colspan="8" class="text-center py-4">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <div class="mt-2">Loading states...</div>
                                </td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>

            

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer_paginator')
    <div id="laravel_paginator" class=""></div>
    <!-- Offcanvas for viewing state/admin details -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="stateDetailCanvas" aria-labelledby="stateDetailCanvasLabel" style="width:460px; z-index:1085;">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="stateDetailCanvasLabel">State Details</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body p-0 d-flex flex-column bg-body">
            <div id="stateDetailLoader" class="p-5 text-center d-none">
                <div class="spinner-border text-primary mb-3" role="status"></div>
                <div class="small text-body-secondary">Loading details...</div>
            </div>
            <div id="stateDetailError" class="p-4 d-none"></div>
            <div id="stateDetailContent" class="flex-grow-1 overflow-auto" style="max-height: calc(100vh - 140px);">
                <!-- Filled dynamically -->
            </div>
            <div class="p-3 border-top bg-body-tertiary shadow-sm">
                <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                    <div class="form-check form-switch m-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="stateAdminActiveSwitch">
                        <label class="form-check-label small" for="stateAdminActiveSwitch">Allow Login</label>
                    </div>
                    <div class="d-flex gap-2">
                        <button class="btn btn-sm btn-outline-secondary" id="resendSetupEmailBtn" disabled>
                            <span class="uil uil-envelope-add me-1"></span>Resend Setup
                        </button>
                        <button class="btn btn-sm btn-phoenix-primary" id="saveStateAdminStatusBtn" disabled>
                            <span class="uil uil-save me-1"></span>Save
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('styles')
   <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendors/dropzone/dropzone.css') }}" rel="stylesheet">
@endpush

{{-- Scripts loaded after admin layout jQuery --}}
@section('scripts')
 <script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}?v={{ config('app.asset_version') }}"></script>
<script src="{{ asset('js/pages/admin/manage-state/state_users_list.js') }}?v={{ config('app.asset_version') }}"></script>
<script>
// Delegated handler for dropdown actions
document.addEventListener('click', function(e){
    const actionLink = e.target.closest('a.dropdown-item[data-action]');
    if(!actionLink) return;
    e.preventDefault();
    const action = actionLink.getAttribute('data-action');
    const stateId = actionLink.getAttribute('data-state-id');
    if(action === 'view') {
        openStateDetailCanvas(stateId);
    } else if(action === 'add-user') {
        redirectToAddUser(stateId);
    } else if(action === 'toggle-status') {
        const nextStatus = actionLink.getAttribute('data-next-status');
        toggleStateStatus(stateId, nextStatus);
    }
});

function openStateDetailCanvas(stateId){
    const canvasEl = document.getElementById('stateDetailCanvas');
    if(!canvasEl) return;
    const offcanvas = bootstrap.Offcanvas.getOrCreateInstance(canvasEl);
    // Reset
    document.getElementById('stateDetailLoader').classList.remove('d-none');
    document.getElementById('stateDetailError').classList.add('d-none');
    document.getElementById('stateDetailContent').innerHTML = '';
    document.getElementById('saveStateAdminStatusBtn').disabled = true;
    offcanvas.show();
    fetch(`/admin/fetch_state_detail/${stateId}`, {headers:{'X-Requested-With':'XMLHttpRequest'}})
        .then(r=>{ if(!r.ok) throw new Error('Failed to load'); return r.json(); })
        .then(data=>{
            document.getElementById('stateDetailLoader').classList.add('d-none');
            if(!data.success){ throw new Error(data.message || 'Error'); }
            renderStateDetail(data.state, data.admin);
        })
        .catch(err=>{
            document.getElementById('stateDetailLoader').classList.add('d-none');
            const errBox = document.getElementById('stateDetailError');
            errBox.classList.remove('d-none');
            errBox.innerHTML = `<div class='alert alert-danger mb-0'>${err.message}</div>`;
        });
}

function renderStateDetail(state, admin){
    const content = document.getElementById('stateDetailContent');
    const activeSwitch = document.getElementById('stateAdminActiveSwitch');
    if(!content) return;
    const createdAt = state.admin_created_at || 'N/A';
    const verifiedAt = state.email_verified_at || 'N/A';
    const passwordPending = state.admin_password_pending ? 'Yes (Not Set)' : 'No';
    const pending = state.admin_pending ? 'Yes' : 'No';
    activeSwitch.checked = !!(admin && admin.is_active);
    activeSwitch.disabled = !admin; // cannot toggle if no admin yet
    document.getElementById('saveStateAdminStatusBtn').disabled = !admin;
    document.getElementById('resendSetupEmailBtn').disabled = !(admin && (state.admin_password_pending || state.admin_pending));
    activeSwitch.setAttribute('data-admin-id', admin ? admin.id : '');
    content.innerHTML = `
        <div class="px-4 py-3 border-bottom bg-body-tertiary">
            <h5 class="mb-0 d-flex align-items-center gap-2"><span class="uil uil-map-marker text-primary"></span>${state.state_name}</h5>
            <small class="text-body-secondary">State Identifier #${state.id}</small>
        </div>
        <div class="p-4">
            <div class="mb-4">
                <h6 class="text-uppercase text-body-secondary fs-10 mb-2">Admin Overview</h6>
                <div class="d-flex flex-column gap-1 small">
                    <div><span class="fw-semibold">Email:</span> ${state.admin_email}</div>
                    <div><span class="fw-semibold">Name:</span> ${state.admin_name}</div>
                    <div><span class="fw-semibold">Status:</span> ${state.admin_status_badge}</div>
                    <div><span class="fw-semibold">Active:</span> ${state.admin_active_badge}</div>
                </div>
            </div>
            <div class="mb-4">
                <h6 class="text-uppercase text-body-secondary fs-10 mb-2">Timeline</h6>
                <div class="row g-2 small">
                    <div class="col-6"><span class="fw-semibold d-block">Created</span><span>${createdAt}</span></div>
                    <div class="col-6"><span class="fw-semibold d-block">Verified</span><span>${verifiedAt}</span></div>
                </div>
            </div>
            <div class="mb-4">
                <h6 class="text-uppercase text-body-secondary fs-10 mb-2">Pending States</h6>
                <div class="row g-2 small">
                    <div class="col-6"><span class="fw-semibold d-block">Verification</span><span>${pending}</span></div>
                    <div class="col-6"><span class="fw-semibold d-block">Password Set</span><span>${passwordPending}</span></div>
                </div>
            </div>
            <div class="mb-2">
                <h6 class="text-uppercase text-body-secondary fs-10 mb-2">Actions Help</h6>
                <p class="small text-body-secondary mb-0">Use the toggle below to permit or restrict admin login once verification is complete. Resend setup email if password not yet set.</p>
            </div>
        </div>`;
}

document.getElementById('saveStateAdminStatusBtn')?.addEventListener('click', function(){
    const switchEl = document.getElementById('stateAdminActiveSwitch');
    const adminId = switchEl.getAttribute('data-admin-id');
    if(!adminId) return;
    this.disabled = true;
    fetch(`/admin/state/admin/${adminId}/toggle-active`, {
        method:'POST',
        headers:{'X-Requested-With':'XMLHttpRequest','Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content},
        body: JSON.stringify({is_active: switchEl.checked ? 1 : 0})
    }).then(r=>r.json()).then(resp=>{
        this.disabled = false;
        if(!resp.success){ alert(resp.message || 'Failed'); return; }
        // refresh list row by reloading current page
        const currentPage = all_states.pagination?.current_page || 1;
        loadStatesData(currentPage);
    }).catch(()=>{ this.disabled=false; alert('Request failed'); });
});

function redirectToAddUser(stateId){
    // Redirect to new invitation view with state_id query parameter
    if (stateId) {
        window.location.href = `/admin/state/users/invite?state_id=${stateId}`;
    } else {
        window.location.href = '/admin/state/users/invite';
    }
}

function resendInvitationEmail(userId, stateName) {
    Swal.fire({
        title: 'Resend Invitation?',
        html: `Send reminder email to <strong>${stateName}</strong> state admin?`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Yes, Resend Email',
        cancelButtonText: 'Cancel',
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#6c757d'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`/admin/state/users/${userId}/resend-invitation`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        title: 'Email Sent!',
                        text: data.message || 'Invitation email has been resent successfully.',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                    // Reload the current page
                    const currentPage = all_states.pagination?.current_page || 1;
                    loadStatesData(currentPage);
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: data.message || 'Failed to send invitation email.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            })
            .catch(err => {
                Swal.fire({
                    title: 'Error',
                    text: 'Failed to send invitation email. Please try again.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        }
    });
}

// On create user page, preselect state if provided
document.addEventListener('DOMContentLoaded', function(){
    if(window.location.pathname.endsWith('/admin/add_user')){
        fetch('/admin/state/preselect', {headers:{'X-Requested-With':'XMLHttpRequest'}})
            .then(r=>r.json())
            .then(data=>{
                if(data.success && data.state_id && document.getElementById('state_id')){
                    const stateSelect = document.getElementById('state_id');
                    stateSelect.value = data.state_id;
                    stateSelect.setAttribute('disabled','disabled');
                }
            });
    }
});
</script>
@endsection