@extends('layouts.user')

@section('content')
<div class="container-fluid py-4">
    <!-- Page Header -->
    <div class="mb-4">
        <!-- <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-2">
                <li class="breadcrumb-item">
                    <a href="{{ auth()->user()->currentRole ? route('user.dashboard', ['role' => auth()->user()->currentRole->name]) : route('dashboard') }}">
                        <span class="uil uil-estate"></span> Dashboard
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Request State Change</li>
            </ol>
        </nav>
        <h2 class="mb-2 fw-bold">Request State Change</h2>
        <p class="text-body-tertiary mb-0">Submit a request to change your state membership or revert to a previous state</p> -->
       <!--  <div class="">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body py-3 px-4">
                    <div class="d-flex align-items-center gap-3 text-truncate">
                        <div class="bg-primary bg-opacity-10 rounded p-1 me-2 flex-shrink-0">
                            <span class="uil uil-map-marker text-primary fs-4"></span>
                        </div>
                        <div class="small text-body-tertiary">Current Location:</div>
                        <div class="text-truncate fw-semibold">
                            {{ auth()->user()->state->name ?? 'Not Set' }}

                            <button type="button" class="btn btn-sm btn-outline-info ms-2" data-bs-toggle="modal"
                                data-bs-target="#stateInfoModal">
                                <span class="uil uil-info-circle me-1"></span>
                                More State Info
                            </button>

                        </div>
                    </div>
                </div>
            </div>
        </div>-->
    </div>

    <!-- Alert Messages -->
    @if (session('status'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <span class="uil uil-check-circle fs-5 me-2"></span>
        {{ session('status') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <span class="uil uil-exclamation-triangle fs-5 me-2"></span>
        <strong>Please correct the following errors:</strong>
        <ul class="mb-0 mt-2">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <!-- Cooling Period Alert -->
    @if(isset($appliedRequest) && $appliedRequest && auth()->user()->next_state_change_allowed_at && \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->isFuture())
    <div class="alert alert-warning alert-dismissible fade show" role="alert" id="coolingPeriodAlert">
        <div class="d-flex align-items-start">
            <span class="uil uil-clock fs-3 me-3"></span>
            <div class="flex-grow-1">
                <h6 class="alert-heading mb-2"><strong>⏳ Cooling Period Active</strong></h6>
                <p class="mb-2">Your last request ({{ $appliedRequest->request_code }}) was <strong>applied on {{ $appliedRequest->applied_at?->format('d M, Y h:i A') }}</strong>. Next request allowed after <strong>{{ \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->format('d M, Y h:i A') }}</strong>.</p>
                <div class="bg-white bg-opacity-50 p-3 rounded">
                    <div class="d-flex align-items-center justify-content-between">
                        <strong>🕒 Time Remaining:</strong>
                        <div id="countdownTimer" class="fs-5 fw-bold text-warning" data-target="{{ \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->toIso8601String() }}">
                            <span class="spinner-border spinner-border-sm me-2"></span>Calculating...
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    
    <script>
        (function() {
            const timerElement = document.getElementById('countdownTimer');
            if (!timerElement) return;
            
            const targetDate = new Date(timerElement.getAttribute('data-target'));
            
            function updateCountdown() {
                const now = new Date();
                const diff = targetDate - now;
                
                if (diff <= 0) {
                    timerElement.innerHTML = '<span class="text-success">✅ Cooling Period Expired - Refresh Page</span>';
                    clearInterval(countdownInterval);
                    return;
                }
                
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
                
                timerElement.innerHTML = `
                    <span class="badge bg-warning text-dark me-1">${days}d</span>
                    <span class="badge bg-warning text-dark me-1">${hours}h</span>
                    <span class="badge bg-warning text-dark me-1">${minutes}m</span>
                    <span class="badge bg-warning text-dark">${seconds}s</span>
                `;
            }
            
            updateCountdown();
            const countdownInterval = setInterval(updateCountdown, 1000);
        })();
    </script>
    @endif

    <!-- Scheduled Approved Request Alert -->
    @if(isset($scheduledRequest) && $scheduledRequest)
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <div class="d-flex align-items-start">
            <span class="uil uil-calendar-alt fs-3 me-3 text-success"></span>
            <div class="flex-grow-1">
                <h6 class="alert-heading mb-2">📅 Scheduled State Change Approved</h6>
                <p class="mb-2">Your request ({{ $scheduledRequest->request_code }}) has been <strong>approved</strong> and is scheduled for <strong>{{ $scheduledRequest->requested_effective_date->format('d M, Y') }}</strong>.</p>
                <p class="mb-0 small text-muted">It will be applied automatically on the effective date. You cannot submit a new request until then.</p>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <!-- Pending Request Alert -->
    @if(isset($pendingRequest) && $pendingRequest)
    <div class="alert alert-warning alert-dismissible fade show border-warning" role="alert">
        <div class="d-flex align-items-start">
            <span class="uil uil-exclamation-triangle fs-3 me-3 text-warning"></span>
            <div class="flex-grow-1">
                <h6 class="alert-heading mb-2">⚠️ Request Submission Blocked</h6>
                <p class="mb-2">
                    You have a <strong>pending request ({{ $pendingRequest->request_code }})</strong> awaiting admin review.
                </p>
                <p class="mb-2">
                    <strong>From:</strong> {{ $pendingRequest->currentState->name ?? 'N/A' }} 
                    @if($pendingRequest->currentDistrict)
                        ({{ $pendingRequest->currentDistrict->name }})
                    @endif
                    <span class="uil uil-arrow-right mx-1"></span>
                    <strong>To:</strong> {{ $pendingRequest->requestedState->name ?? 'N/A' }}
                    @if($pendingRequest->requestedDistrict)
                        ({{ $pendingRequest->requestedDistrict->name }})
                    @endif
                </p>
                <p class="mb-0">
                    <small class="text-muted">
                        Submitted: {{ $pendingRequest->created_at->format('d M, Y h:i A') }}
                        ({{ $pendingRequest->created_at->diffForHumans() }})
                    </small>
                </p>
                <hr class="my-2">
                <p class="mb-0 small">
                    <strong>Note:</strong> You cannot submit a new request until the admin approves or rejects your pending request.
                    <a href="{{ route('user.state-change.history', ['role' => auth()->user()->currentRole->name]) }}" class="alert-link">View Full History</a>
                </p>
            </div>
        </div>
    </div>
    @endif

    <!-- Main Layout -->
    <div class="row g-4">
        <!-- Left Sidebar - Current Information -->


        <!-- Right Main Content - Request Form -->
        <div class="col-lg-12">
            @if(isset($showForm) && $showForm)
            <!-- Request Form Card -->
            <div class="card border-0 shadow-sm mb-4"
                style="height: calc(100vh - 140px); max-height: calc(100vh - 140px); display: flex; flex-direction: column;">
                <div class="card-header bg-white border-bottom py-3 flex-shrink-0" style="position: sticky; top: 0; z-index: 10;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="bg-success bg-opacity-10 rounded me-3">
                                <span class="uil uil-exchange text-success fs-4"></span>
                            </div>
                            <h5 class="mb-0 fw-bold">State Change Request Form</h5>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal"
                                data-bs-target="#importantInfoModal">
                                <span class="uil uil-info-circle me-1"></span>
                                Important Info
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal"
                                data-bs-target="#stateInfoModal">
                                <span class="uil uil-map-marker me-1"></span>
                                Current State Info
                            </button>
                        </div>
                    </div>
                </div>
                <form method="post"
                    action="{{ route('user.state-change.store', ['role' => $currentRoleSlug]) }}"
                    id="stateChangeForm"
                    style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
                    @csrf
                    
                    <div class="card-body p-4 flex-grow-1" style="overflow-y: auto; overflow-x: hidden;">
                        <!-- Action Type -->
                        <div class="row mb-4">
                            <label for="action_type" class="col-sm-3 col-form-label fw-semibold">
                                Action Type <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <select name="action_type" id="action_type" class="form-select" required>
                                    <option value="">-- Select Action --</option>
                                    <option value="change" {{ old('action_type')==='change' ?'selected':'' }}>
                                        Change to another state
                                    </option>
                                    {{-- Revert option hidden as per requirement: users can only apply for state change --}}
                                    {{-- <option value="revert" {{ old('action_type')==='revert' ?'selected':'' }}>
                                        Revert to previous/home state
                                    </option> --}}
                                </select>
                                <div class="form-text">Apply to change your state/district affiliation</div>
                                <div class="invalid-feedback">Please select an action type</div>
                            </div>
                        </div>

                        <!-- Change Fields Container (shown when action_type = change) -->
                        <div id="changeFields" style="display:none;">
                            <!-- New State -->
                            <div class="row mb-4">
                                <label for="requested_state_id" class="col-sm-3 col-form-label fw-semibold">
                                    New State <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <select name="requested_state_id" id="requested_state_id" class="form-select">
                                        <option value="">-- Select State --</option>
                                        @foreach(\App\Models\State::orderBy('name')->get(['id','name']) as $s)
                                        <option value="{{ $s->id }}" {{ (string)old('requested_state_id')===(string)$s->
                                            id?'selected':'' }}
                                            {{ auth()->user()->state_id == $s->id ? 'disabled' : '' }}>
                                            {{ $s->name }}{{ auth()->user()->state_id == $s->id ? ' (Current)' : '' }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div class="form-text">Select the state you want to transfer to</div>
                                    <div class="invalid-feedback">Please select a state</div>
                                </div>
                            </div>

                            <!-- New District -->
                            <div class="row mb-4">
                                <label for="requested_district_id" class="col-sm-3 col-form-label fw-semibold">
                                    New District <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <select name="requested_district_id" id="requested_district_id" class="form-select"
                                        disabled>
                                        <option value="">-- First Select State --</option>
                                    </select>
                                    <div class="form-text">Select your district in the new state</div>
                                    <div class="invalid-feedback">Please select a district</div>
                                </div>
                            </div>

                            <!-- New Address -->
                            <div class="row mb-4">
                                <label for="new_address" class="col-sm-3 col-form-label fw-semibold">
                                    New Address <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <textarea name="new_address" id="new_address" rows="3" class="form-control"
                                        maxlength="500"
                                        placeholder="Enter your complete address in the new state...">{{ old('new_address') }}</textarea>
                                    <div class="form-text">Provide your full address in the target state (minimum 10 characters)
                                    </div>
                                    <div class="invalid-feedback">Please provide a complete address (minimum 10 characters)</div>
                                </div>
                            </div>

                            <!-- New Pincode -->
                            <div class="row mb-4">
                                <label for="new_pincode" class="col-sm-3 col-form-label fw-semibold">
                                    New Pincode <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" name="new_pincode" id="new_pincode" class="form-control"
                                        pattern="[0-9]{6}" maxlength="6" placeholder="Enter 6-digit pincode"
                                        value="{{ old('new_pincode') }}">
                                    <div class="form-text">Enter the 6-digit pincode for your new address</div>
                                    <div class="invalid-feedback">Please enter a valid 6-digit pincode</div>
                                </div>
                            </div>

                            <!-- City/Village (Optional) -->
                            <div class="row mb-4">
                                <label for="requested_city_name" class="col-sm-3 col-form-label fw-semibold">
                                    City/Village
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" name="requested_city_name" id="requested_city_name"
                                        class="form-control" maxlength="50"
                                        placeholder="Enter city or village name (optional)"
                                        value="{{ old('requested_city_name') }}">
                                    <div class="form-text">Optional - Specify your city or village</div>
                                </div>
                            </div>
                        </div>

                        <!-- Revert Target (shown when action_type = revert) -->
                        <div id="revertFields" class="row mb-4" style="display:none;">
                            <label for="revert_target" class="col-sm-3 col-form-label fw-semibold">
                                Revert To <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <select name="revert_target" id="revert_target" class="form-select">
                                    <option value="">-- Select Target --</option>
                                    <option value="previous" {{ old('revert_target')==='previous' ?'selected':'' }}>
                                        Previous State (Last active state)
                                    </option>
                                    <option value="home" {{ old('revert_target')==='home' ?'selected':'' }}>
                                        Home State (Original registration state)
                                    </option>
                                </select>
                                <div class="form-text">Choose which previous state to revert to</div>
                                <div class="invalid-feedback">Please select a revert target</div>
                            </div>
                        </div>

                        <!-- Reason -->
                        <div class="row mb-4">
                            <label for="reason_user" class="col-sm-3 col-form-label fw-semibold">
                                Reason for Request
                            </label>
                            <div class="col-sm-9">
                                <textarea name="reason_user" id="reason_user" rows="4" class="form-control"
                                    maxlength="1000"
                                    placeholder="Please provide a detailed reason for your state change request...">{{ old('reason_user') }}</textarea>
                                <div class="form-text">
                                    <span id="charCount">0</span>/1000 characters
                                    <span class="text-body-tertiary ms-2">(Optional but recommended for faster
                                        approval)</span>
                                </div>
                            </div>
                        </div>

                        <!-- Effective Date -->
                        <div class="row mb-4">
                            <label for="requested_effective_date" class="col-sm-3 col-form-label fw-semibold">
                                Effective Date
                            </label>
                            <div class="col-sm-9">
                                <input type="datetime-local" name="requested_effective_date"
                                    id="requested_effective_date" class="form-control"
                                    value="{{ old('requested_effective_date') }}" />
                                <div class="form-text">
                                    Leave empty to apply immediately after admin approval. Or schedule for a future
                                    date.
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="card-footer bg-white border-top flex-shrink-0" style="z-index: 10; box-shadow: 0 -2px 10px rgba(0,0,0,0.08);">
                        <div class="row">
                            <div class="col-sm-9 offset-sm-3">
                                <div class="d-flex gap-2 justify-content-end">
                                    <button type="submit" id="submitBtn" class="btn btn-outline-primary px-4">
                                        <span class="uil uil-check me-1"></span>
                                        Submit Request
                                    </button>
                                    <button type="reset" class="btn btn-outline-secondary px-4">
                                        <span class="uil uil-redo me-1"></span>
                                        Reset Form
                                    </button>
                                    <a class="btn btn-outline-danger px-4" href="{{ route('user.dashboard', ['role' => $currentRoleSlug]) }}">
                                        Cancel
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            @else
            <!-- Form Blocked Info Card -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body text-center py-5">
                    <div class="mb-4">
                        <span class="uil uil-clock-eight text-warning" style="font-size: 4rem;"></span>
                    </div>
                    @if(isset($pendingRequest) && $pendingRequest)
                        <h4 class="fw-bold mb-3">Pending Request Exists</h4>
                        <p class="text-muted mb-4">You have a pending state change request awaiting admin approval. Please wait for admin review.</p>
                    @elseif(isset($scheduledRequest) && $scheduledRequest)
                        <h4 class="fw-bold mb-3">Scheduled Change Pending Application</h4>
                        <p class="text-muted mb-4">An approved request is scheduled for {{ $scheduledRequest->requested_effective_date->format('d M, Y') }}. New submissions are blocked until it is applied.</p>
                    @elseif(isset($appliedRequest) && $appliedRequest && $coolingPeriodActive)
                        <h4 class="fw-bold mb-3">Cooling Period Active</h4>
                        <p class="text-muted mb-4">Your last change was applied on {{ $appliedRequest->applied_at?->format('d M, Y') }}. Next request allowed after {{ \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->format('d M, Y') }}.</p>
                    @else
                        <h4 class="fw-bold mb-3">Request Blocked</h4>
                        <p class="text-muted mb-4">A blocking condition prevents submitting a new request right now.</p>
                    @endif
                    <a href="{{ route('user.state-change.history', ['role' => auth()->user()->currentRole->name]) }}" 
                       class="btn btn-primary">
                        <span class="uil uil-history me-2"></span>
                        View Request History
                    </a>
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- State Information Modal -->
    <div class="modal fade" id="stateInfoModal" tabindex="-1" aria-labelledby="stateInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-white border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="bg-warning bg-opacity-10 rounded p-2 me-3">
                            <span class="uil uil-info-circle text-warning fs-3"></span>
                        </div>
                        <h5 class="modal-title fw-bold" id="stateInfoModalLabel">Current State Information</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-4">
                        <div class="col-md-12">
                            <!-- Current Location Card -->
                            <div class="card border-0 shadow-sm mb-4">
                                <div class="card-body p-4">


                                    <div class="d-flex flex-column gap-3">
                                        <!-- State -->
                                        <div class="border-start border-4 border-primary ps-3">
                                            <label class="text-body-tertiary small mb-1 d-block">State</label>
                                            <strong class="d-block">{{ auth()->user()->state->name ?? 'Not Set'
                                                }}</strong>
                                        </div>

                                        <!-- District -->
                                        <div class="border-start border-4 border-primary ps-3">
                                            <label class="text-body-tertiary small mb-1 d-block">District</label>
                                            <strong class="d-block">{{ auth()->user()->district->name ?? 'Not
                                                Set' }}</strong>
                                        </div>

                                        <!-- City -->
                                        @if(auth()->user()->city_name)
                                        <div class="border-start border-4 border-primary ps-3">
                                            <label class="text-body-tertiary small mb-1 d-block">City/Town</label>
                                            <strong class="d-block">{{ auth()->user()->city_name }}</strong>
                                        </div>
                                        @endif

                                        <!-- Address -->
                                        @if(auth()->user()->address)
                                        <div class="border-start border-4 border-primary ps-3">
                                            <label class="text-body-tertiary small mb-1 d-block">Address</label>
                                            <p class="mb-0 small text-break">{{ auth()->user()->address }}</p>
                                        </div>
                                        @endif

                                        <!-- Pincode -->
                                        @if(auth()->user()->pincode)
                                        <div class="border-start border-4 border-primary ps-3">
                                            <label class="text-body-tertiary small mb-1 d-block">Pincode</label>
                                            <strong class="d-block">{{ auth()->user()->pincode }}</strong>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="modal-footer bg-light border-top">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <span class="uil uil-times me-1"></span>
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Important Information Modal -->
    <div class="modal fade" id="importantInfoModal" tabindex="-1" aria-labelledby="importantInfoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-white border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="bg-warning bg-opacity-10 rounded p-2 me-3">
                            <span class="uil uil-info-circle text-warning fs-3"></span>
                        </div>
                        <h5 class="modal-title fw-bold" id="importantInfoModalLabel">Important Information</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="d-flex align-items-start mb-4">
                                <div class="bg-success bg-opacity-10 rounded p-2 me-3 flex-shrink-0">
                                    <span class="uil uil-check-circle text-success fs-4"></span>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-2">Admin Approval Required</h6>
                                    <p class="text-body-tertiary small mb-0">All state change requests require
                                        administrative approval. Your request will be reviewed by the admin team before
                                        any changes are applied to your profile.</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-start">
                                <div class="bg-info bg-opacity-10 rounded p-2 me-3 flex-shrink-0">
                                    <span class="uil uil-clock text-info fs-4"></span>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-2">One Year Cooldown</h6>
                                    <p class="text-body-tertiary small mb-0">You can only request one state change per
                                        year. This policy ensures proper tracking and management of membership
                                        transfers.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-start mb-4">
                                <div class="bg-primary bg-opacity-10 rounded p-2 me-3 flex-shrink-0">
                                    <span class="uil uil-file-alt text-primary fs-4"></span>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-2">Detailed Reason</h6>
                                    <p class="text-body-tertiary small mb-0">Provide a clear and detailed reason for
                                        your state change request. A well-explained reason helps expedite the approval
                                        process.</p>
                                </div>
                            </div>
                            <div class="d-flex align-items-start">
                                <div class="bg-danger bg-opacity-10 rounded p-2 me-3 flex-shrink-0">
                                    <span class="uil uil-calendar-alt text-danger fs-4"></span>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-2">Effective Date</h6>
                                    <p class="text-body-tertiary small mb-0">You can schedule your state change for a
                                        future date or leave it empty to apply immediately after admin approval.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-info d-flex align-items-center mt-4 mb-0" role="alert">
                        <span class="uil uil-exclamation-circle fs-4 me-2"></span>
                        <div class="small">
                            <strong>Note:</strong> Once submitted, you cannot edit or cancel your request until an admin
                            takes action. Make sure all information is correct before submitting.
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light border-top">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <span class="uil uil-times me-1"></span>
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 State Change Form - Initialization Started');
            
            // ========================================
            // 1. ELEMENT REFERENCES
            // ========================================
            const form = document.getElementById('stateChangeForm');
            const submitBtn = document.getElementById('submitBtn');
            const actionTypeSelect = document.getElementById('action_type');
            const changeFields = document.getElementById('changeFields');
            const revertFields = document.getElementById('revertFields');
            const requestedStateSelect = document.getElementById('requested_state_id');
            const requestedDistrictSelect = document.getElementById('requested_district_id');
            const newAddressTextarea = document.getElementById('new_address');
            const newPincodeInput = document.getElementById('new_pincode');
            const revertTargetSelect = document.getElementById('revert_target');
            const reasonTextarea = document.getElementById('reason_user');
            const charCountSpan = document.getElementById('charCount');
            const effectiveDateInput = document.getElementById('requested_effective_date');
            
            // Validation check
            if (!form) {
                console.error('❌ Form #stateChangeForm not found!');
                return;
            }
            if (!submitBtn) {
                console.error('❌ Submit button #submitBtn not found!');
                return;
            }
            
            console.log('✅ All critical elements found');
            
            // ========================================
            // 2. TOGGLE FIELDS FUNCTION
            // ========================================
            function toggleFields() {
                const actionType = actionTypeSelect.value;
                console.log('🔄 Toggle Fields - Action Type:', actionType);
                
                if (actionType === 'change') {
                    // Show change fields
                    changeFields.style.display = 'block';
                    revertFields.style.display = 'none';
                    
                    // Set required attributes
                    requestedStateSelect.required = true;
                    requestedDistrictSelect.required = true;
                    newAddressTextarea.required = true;
                    newPincodeInput.required = true;
                    revertTargetSelect.required = false;
                    
                    console.log('✅ Change fields visible');
                    
                } else if (actionType === 'revert') {
                    // Show revert fields
                    changeFields.style.display = 'none';
                    revertFields.style.display = 'block';
                    
                    // Set required attributes
                    requestedStateSelect.required = false;
                    requestedDistrictSelect.required = false;
                    newAddressTextarea.required = false;
                    newPincodeInput.required = false;
                    revertTargetSelect.required = true;
                    
                    console.log('✅ Revert fields visible');
                    
                } else {
                    // Hide all conditional fields
                    changeFields.style.display = 'none';
                    revertFields.style.display = 'none';
                    
                    // Clear required attributes
                    requestedStateSelect.required = false;
                    requestedDistrictSelect.required = false;
                    newAddressTextarea.required = false;
                    newPincodeInput.required = false;
                    revertTargetSelect.required = false;
                    
                    console.log('✅ All conditional fields hidden');
                }
            }
            
            // ========================================
            // 3. LOAD DISTRICTS FUNCTION
            // ========================================
            function loadDistricts(stateId) {
                console.log('🌍 Loading districts for state ID:', stateId);
                
                if (!stateId) {
                    requestedDistrictSelect.innerHTML = '<option value="">-- First Select State --</option>';
                    requestedDistrictSelect.disabled = true;
                    return;
                }
                
                // Show loading state
                requestedDistrictSelect.disabled = true;
                requestedDistrictSelect.innerHTML = '<option value="">⏳ Loading districts...</option>';
                
                fetch(`/get-districts?state_id=${stateId}`)
                    .then(response => response.json())
                    .then(data => {
                        requestedDistrictSelect.innerHTML = '<option value="">-- Select District --</option>';
                        
                        if (data && Array.isArray(data) && data.length > 0) {
                            data.forEach(district => {
                                const option = document.createElement('option');
                                option.value = district.id;
                                option.textContent = district.name;
                                
                                // Restore old value if exists
                                if ('{{ old("requested_district_id") }}' == district.id) {
                                    option.selected = true;
                                }
                                
                                requestedDistrictSelect.appendChild(option);
                            });
                            requestedDistrictSelect.disabled = false;
                            console.log(`✅ Loaded ${data.length} districts`);
                        } else {
                            requestedDistrictSelect.innerHTML = '<option value="">No districts found</option>';
                            console.warn('⚠️ No districts found for state:', stateId);
                        }
                    })
                    .catch(error => {
                        console.error('❌ Error loading districts:', error);
                        requestedDistrictSelect.innerHTML = '<option value="">❌ Error loading districts</option>';
                    });
            }
            
            // ========================================
            // 4. CHARACTER COUNTER
            // ========================================
            function updateCharCount() {
                if (reasonTextarea && charCountSpan) {
                    charCountSpan.textContent = reasonTextarea.value.length;
                }
            }
            
            // ========================================
            // 5. CLIENT-SIDE VALIDATION
            // ========================================
            function validateForm() {
                console.log('🔍 Running client-side validation...');
                
                // Remove all previous validation states
                form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
                
                const actionType = actionTypeSelect.value;
                
                // Validate Action Type
                if (!actionType) {
                    actionTypeSelect.classList.add('is-invalid');
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            text: 'Please select an Action Type',
                            confirmButtonText: 'OK'
                        });
                    } else {
                        alert('Please select an Action Type');
                    }
                    actionTypeSelect.focus();
                    return false;
                }
                
                // Validate Change Action
                if (actionType === 'change') {
                    const requestedStateId = requestedStateSelect.value;
                    const requestedDistrictId = requestedDistrictSelect.value;
                    const newAddress = newAddressTextarea.value.trim();
                    const newPincode = newPincodeInput.value.trim();
                    
                    if (!requestedStateId) {
                        requestedStateSelect.classList.add('is-invalid');
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please select a New State',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            alert('Please select a New State');
                        }
                        requestedStateSelect.focus();
                        return false;
                    }
                    
                    if (!requestedDistrictId) {
                        requestedDistrictSelect.classList.add('is-invalid');
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please select a New District',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            alert('Please select a New District');
                        }
                        requestedDistrictSelect.focus();
                        return false;
                    }
                    
                    if (!newAddress || newAddress.length < 10) {
                        newAddressTextarea.classList.add('is-invalid');
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please provide a complete address (minimum 10 characters)',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            alert('Please provide a complete address (minimum 10 characters)');
                        }
                        newAddressTextarea.focus();
                        return false;
                    }
                    
                    if (!newPincode || !/^\d{6}$/.test(newPincode)) {
                        newPincodeInput.classList.add('is-invalid');
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please enter a valid 6-digit pincode',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            alert('Please enter a valid 6-digit pincode');
                        }
                        newPincodeInput.focus();
                        return false;
                    }
                }
                
                // Validate Revert Action
                if (actionType === 'revert') {
                    const revertTarget = revertTargetSelect.value;
                    
                    if (!revertTarget) {
                        revertTargetSelect.classList.add('is-invalid');
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please select a Revert Target',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            alert('Please select a Revert Target');
                        }
                        revertTargetSelect.focus();
                        return false;
                    }
                }
                
                console.log('✅ Client-side validation passed');
                return true;
            }
            
            // ========================================
            // 6. EVENT LISTENERS
            // ========================================
            
            // Action type change
            actionTypeSelect.addEventListener('change', toggleFields);
            
            // State selection change
            requestedStateSelect.addEventListener('change', function() {
                loadDistricts(this.value);
            });
            
            // Character counter
            if (reasonTextarea) {
                reasonTextarea.addEventListener('input', updateCharCount);
                updateCharCount();
            }
            
            // Set minimum effective date to now
            if (effectiveDateInput) {
                const now = new Date();
                now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
                effectiveDateInput.min = now.toISOString().slice(0, 16);
            }
            
            // ========================================
            // 7. FORM SUBMISSION OR DISABLE LOGIC
            // ========================================
            
            @if(isset($pendingRequest) && $pendingRequest)
                // PENDING REQUEST EXISTS - DISABLE FORM
                console.log('⚠️ Pending request detected - Disabling form');
                
                const formInputs = form.querySelectorAll('input:not([type="hidden"]), select, textarea, button');
                formInputs.forEach(input => {
                    input.disabled = true;
                    if (input.tagName !== 'BUTTON') {
                        input.classList.add('bg-light');
                    }
                });
                
                submitBtn.innerHTML = '<span class="uil uil-ban me-1"></span> Pending Request Exists';
                submitBtn.classList.remove('btn-outline-primary');
                submitBtn.classList.add('btn-secondary');
                
                form.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'info',
                            title: 'Request Pending',
                            html: 'You have a pending request ({{ $pendingRequest->request_code }}). Please wait for admin to approve or reject it before submitting a new request.',
                            confirmButtonText: 'Understood'
                        });
                    }
                });
                
            @elseif(auth()->user()->next_state_change_allowed_at && \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->isFuture())
                // COOLING PERIOD ACTIVE - DISABLE FORM
                console.log('⏳ Cooling period active - Disabling form');
                
                const formInputs = form.querySelectorAll('input:not([type="hidden"]), select, textarea, button');
                formInputs.forEach(input => {
                    input.disabled = true;
                    if (input.tagName !== 'BUTTON') {
                        input.classList.add('bg-light');
                    }
                });
                
                submitBtn.innerHTML = '<span class="uil uil-lock me-1"></span> Cooling Period Active';
                submitBtn.classList.remove('btn-outline-primary');
                submitBtn.classList.add('btn-secondary');
                
                let warningShown = false;
                form.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (!warningShown && typeof Swal !== 'undefined') {
                        warningShown = true;
                        Swal.fire({
                            icon: 'warning',
                            title: 'Cooling Period Active',
                            html: 'You can submit your next state change request after <strong>{{ \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->format("d M, Y") }}</strong><br><small class="text-muted">({{ \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->diffForHumans() }})</small>',
                            confirmButtonText: 'Understood'
                        });
                    }
                });
                
            @else
                // FORM ENABLED - ATTACH SUBMIT HANDLER
                console.log('✅ Form is active - Attaching submit handler');
                
                form.addEventListener('submit', async function(e) {
                    e.preventDefault();
                    console.log('📤 Form submission triggered');
                    
                    // Run client-side validation
                    if (!validateForm()) {
                        console.log('❌ Validation failed');
                        return;
                    }
                    
                    const originalBtnText = submitBtn.innerHTML;
                    
                    // Show loading state
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Submitting...';
                    
                    try {
                        const formData = new FormData(form);
                        const response = await fetch(form.action, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json'
                            }
                        });
                        
                        let data;
                        try {
                            data = await response.json();
                        } catch (jsonError) {
                            console.error('❌ JSON parse error:', jsonError);
                            throw new Error('Invalid response from server. Please try again.');
                        }
                        
                        if (response.ok && data.success) {
                            console.log('✅ Request submitted successfully');
                            
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Request Submitted',
                                    text: data.message || 'Your state change request has been submitted successfully.',
                                    timer: 3000,
                                    timerProgressBar: true,
                                    showConfirmButton: false
                                }).then(() => {
                                    if (data.redirect) {
                                        window.location.href = data.redirect;
                                    } else {
                                        window.location.reload();
                                    }
                                });
                            } else {
                                alert(data.message || 'Request submitted successfully');
                                window.location.reload();
                            }
                        } else {
                            console.log('❌ Server validation errors:', data.errors);
                            
                            if (data.errors) {
                                let errorMessage = '<ul class="text-start mb-0">';
                                Object.values(data.errors).forEach(errors => {
                                    errors.forEach(error => {
                                        errorMessage += `<li>${error}</li>`;
                                    });
                                });
                                errorMessage += '</ul>';
                                
                                if (typeof Swal !== 'undefined') {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Validation Error',
                                        html: errorMessage,
                                        confirmButtonText: 'OK'
                                    });
                                } else {
                                    alert('Validation errors occurred. Please check the form.');
                                }
                            } else {
                                throw new Error(data.message || 'An error occurred while submitting the request.');
                            }
                        }
                    } catch (error) {
                        console.error('❌ Submission error:', error);
                        
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: error.message || 'An unexpected error occurred. Please try again.',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            alert('An error occurred. Please try again.');
                        }
                    } finally {
                        // Restore button state
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalBtnText;
                    }
                });
            @endif
            
            // ========================================
            // 8. INITIALIZE
            // ========================================
            console.log('🔧 Initializing form state...');
            toggleFields();
            
            // Load districts if old value exists (validation error scenario)
            const oldStateId = '{{ old("requested_state_id") }}';
            if (oldStateId) {
                console.log('📋 Restoring old state selection:', oldStateId);
                loadDistricts(oldStateId);
            }
            
            // Trigger toggle if old action type exists
            const oldActionType = '{{ old("action_type") }}';
            if (oldActionType) {
                console.log('📋 Restoring old action type:', oldActionType);
                actionTypeSelect.value = oldActionType;
                toggleFields();
            }
            
            console.log('✅ Form initialization complete - All systems ready!');
        });
    </script>
    
    @if(isset($showRejectionAlert) && $showRejectionAlert && isset($latestRejectedRequest))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'Request Rejected',
                    html: `
                        <div class="text-start">
                            <p class="mb-3">Your state change request was rejected {{ $latestRejectedRequest->rejected_at->diffForHumans() }}.</p>
                            @if($latestRejectedRequest->rejection_reason)
                            <div class="alert alert-danger mb-0">
                                <strong class="d-block mb-2"><i class="uil uil-info-circle me-1"></i>Rejection Reason:</strong>
                                <p class="mb-0">{{ $latestRejectedRequest->rejection_reason }}</p>
                            </div>
                            @endif
                            <p class="mt-3 mb-0 small text-muted">
                                <i class="uil uil-lightbulb-alt me-1"></i>
                                You can submit a new request addressing the concerns mentioned above.
                            </p>
                        </div>
                    `,
                    confirmButtonText: 'I Understand',
                    confirmButtonColor: '#3085d6',
                    allowOutsideClick: false,
                    customClass: {
                        popup: 'swal-wide',
                        confirmButton: "btn btn-primary", 
                    }
                });
            }
        });
    </script>
    <style>
        .swal-wide {
            width: 600px !important;
            max-width: 90% !important;
        }
    </style>
    @endif
    
    <script>
    // Real-time state change request updates via Echo
    (function() {
        const userId = {{ (int)auth()->id() }};
        if (!userId || typeof Echo === 'undefined') return;
        
        try {
            Echo.private('private-user.' + userId)
                .listen('.state-change.updated', (data) => {
                    console.log('State change request updated:', data);
                    
                    // Show toast notification
                    if (typeof Swal !== 'undefined') {
                        let icon = 'info';
                        let title = 'Request Updated';
                        let text = 'Your state change request has been updated.';
                        
                        if (data.status === 'approved') {
                            icon = 'success';
                            title = 'Request Approved';
                            text = `Your state change request ${data.request_code || ''} has been approved!`;
                        } else if (data.status === 'rejected') {
                            icon = 'error';
                            title = 'Request Rejected';
                            text = `Your state change request ${data.request_code || ''} was rejected. Please check your request history for details.`;
                        } else if (data.status === 'applied') {
                            icon = 'success';
                            title = 'Changes Applied';
                            text = `Your state change request ${data.request_code || ''} has been applied successfully! Your profile has been updated.`;
                        }
                        
                        Swal.fire({
                            icon: icon,
                            title: title,
                            text: text,
                            timer: 6000,
                            showConfirmButton: true,
                            confirmButtonText: 'OK',
                            allowOutsideClick: true
                        }).then(() => {
                            // Refresh page to show updated state
                            window.location.reload();
                        });
                    }
                });
        } catch (e) {
            console.warn('Echo subscription failed:', e);
        }
    })();
    </script>
    @endsection