@php
    // Safeguard: precompute revert capability for use anywhere in the template
    $userHomeState = $req->user->home_state_id ?? null;
    $userCurrentState = $req->user->state_id ?? null;
    $canRevert = $userHomeState && $userCurrentState && $userHomeState !== $userCurrentState;
@endphp
<!-- User Information Section -->
<div class="bg-light border-bottom p-4">
    <div class="d-flex align-items-center mb-3">
        <div class="bg-primary bg-opacity-10 rounded p-2 me-3">
            <span class="uil uil-user text-primary fs-3"></span>
        </div>
        <div>
            <h6 class="mb-0 fw-bold">User Information</h6>
            <small class="text-body-tertiary">Member details</small>
        </div>
    </div>
    
    <div class="row g-3">
        <div class="col-12">
            <div class="border-start border-3 border-primary ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Full Name</label>
                <strong class="d-block">{{ $req->user ? $req->user->name : 'N/A' }}</strong>
            </div>
        </div>
        <div class="col-6">
            <div class="border-start border-3 border-primary ps-3">
                <label class="text-body-tertiary small mb-1 d-block">UID</label>
                <strong class="d-block">{{ $req->user ? $req->user->reg_uid : 'N/A' }}</strong>
            </div>
        </div>
        <div class="col-6">
            <div class="border-start border-3 border-primary ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Email</label>
                <strong class="d-block small">{{ $req->user ? $req->user->email : 'N/A' }}</strong>
            </div>
        </div>
        <div class="col-12">
            <div class="border-start border-3 border-primary ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Current State</label>
                <span class="badge badge-phoenix badge-phoenix-primary">
                    {{ $req->currentState ? $req->currentState->name : 'State ID: ' . $req->current_state_id }}
                </span>
            </div>
        </div>
    </div>
</div>

<!-- Request Details Section -->
<div class="p-4 border-bottom">
    <div class="d-flex align-items-center mb-3">
        <div class="bg-info bg-opacity-10 rounded p-2 me-3">
            <span class="uil uil-file-alt text-info fs-3"></span>
        </div>
        <div>
            <h6 class="mb-0 fw-bold">Request Details</h6>
            <small class="text-body-tertiary">Change information</small>
        </div>
    </div>
    
    <div class="row g-3">
        <div class="col-6">
            <div class="border-start border-3 border-info ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Action Type</label>
                @if($req->action_type === 'change')
                    <span class="badge badge-phoenix badge-phoenix-info">Change</span>
                @else
                    <span class="badge badge-phoenix badge-phoenix-primary">Revert</span>
                @endif
            </div>
        </div>
        <div class="col-6">
            <div class="border-start border-3 border-info ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Status</label>
                @if($req->status === 'pending')
                    <span class="badge badge-phoenix badge-phoenix-warning">Pending</span>
                @elseif($req->status === 'approved')
                    <span class="badge badge-phoenix badge-phoenix-success">Approved</span>
                @elseif($req->status === 'rejected')
                    <span class="badge badge-phoenix badge-phoenix-danger">Rejected</span>
                @elseif($req->status === 'cancelled')
                    <span class="badge badge-phoenix badge-phoenix-secondary">Cancelled</span>
                @else
                    <span class="badge badge-phoenix badge-phoenix-dark">{{ ucfirst($req->status) }}</span>
                @endif
            </div>
        </div>
        
        <div class="col-12">
            <div class="border-start border-3 border-info ps-3">
                <label class="text-body-tertiary small mb-1 d-block">State Change</label>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge badge-phoenix badge-phoenix-secondary">
                        {{ $req->currentState ? $req->currentState->name : 'State ID: ' . $req->current_state_id }}
                    </span>
                    <span class="uil uil-arrow-right text-body-tertiary"></span>
                    @if($req->action_type === 'revert')
                        <span class="badge badge-phoenix badge-phoenix-primary">
                            {{ ucfirst($req->revert_target ?? 'Previous') }}
                        </span>
                    @else
                        <span class="badge badge-phoenix badge-phoenix-success">
                            {{ $req->requestedState ? $req->requestedState->name : ($req->requested_state_id ? 'State ID: ' . $req->requested_state_id : 'N/A') }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-12">
            <div class="border-start border-3 border-info ps-3">
                <label class="text-body-tertiary small mb-1 d-block">District Change</label>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge badge-phoenix badge-phoenix-secondary">
                        {{ $req->currentDistrict ? $req->currentDistrict->name : ($req->current_district_id ? 'District ID: ' . $req->current_district_id : 'N/A') }}
                    </span>
                    <span class="uil uil-arrow-right text-body-tertiary"></span>
                    @if($req->action_type === 'revert')
                        <span class="badge badge-phoenix badge-phoenix-primary">
                            Restored from History
                        </span>
                    @else
                        <span class="badge badge-phoenix badge-phoenix-success">
                            {{ $req->requestedDistrict ? $req->requestedDistrict->name : ($req->requested_district_id ? 'District ID: ' . $req->requested_district_id : 'N/A') }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-6">
            <div class="border-start border-3 border-info ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Requested On</label>
                <strong class="small d-block">{{ $req->created_at ? $req->created_at->format('d M, Y h:i A') : 'N/A' }}</strong>
            </div>
        </div>
        <div class="col-6">
            <div class="border-start border-3 border-info ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Effective Date</label>
                <strong class="small d-block">{{ $req->requested_effective_date ? $req->requested_effective_date->format('d M, Y') : 'Immediate' }}</strong>
            </div>
        </div>
        
        @if($req->reason_user)
        <div class="col-12">
            <div class="border-start border-3 border-info ps-3">
                <label class="text-body-tertiary small mb-1 d-block">User's Reason</label>
                <div class="bg-light p-3 rounded small">{{ $req->reason_user }}</div>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- New Location Details Section -->
@if($req->action_type === 'change' && ($req->new_address || $req->new_pincode || $req->requested_city_name))
<div class="p-4 border-bottom">
    <div class="d-flex align-items-center mb-3">
        <div class="bg-success bg-opacity-10 rounded p-2 me-3">
            <span class="uil uil-map-marker text-success fs-3"></span>
        </div>
        <div>
            <h6 class="mb-0 fw-bold">New Location Details</h6>
            <small class="text-body-tertiary">Updated address information</small>
        </div>
    </div>
    
    <div class="row g-3">
        @if($req->new_address)
        <div class="col-12">
            <div class="border-start border-3 border-success ps-3">
                <label class="text-body-tertiary small mb-1 d-block">New Address</label>
                <div class="bg-light p-3 rounded small">{{ $req->new_address }}</div>
            </div>
        </div>
        @endif
        @if($req->new_pincode)
        <div class="col-6">
            <div class="border-start border-3 border-success ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Pincode</label>
                <strong class="d-block">{{ $req->new_pincode }}</strong>
            </div>
        </div>
        @endif
        @if($req->requested_city_name)
        <div class="col-6">
            <div class="border-start border-3 border-success ps-3">
                <label class="text-body-tertiary small mb-1 d-block">City/Town</label>
                <strong class="d-block">{{ $req->requested_city_name }}</strong>
            </div>
        </div>
        @endif
    </div>
</div>
@endif

<!-- Admin Actions History -->
@if($req->status !== 'pending')
<div class="p-4 border-bottom">
    <div class="d-flex align-items-center mb-3">
        <div class="bg-warning bg-opacity-10 rounded p-2 me-3">
            <span class="uil uil-history text-warning fs-3"></span>
        </div>
        <div>
            <h6 class="mb-0 fw-bold">Admin Action History</h6>
            <small class="text-body-tertiary">Administrative decisions</small>
        </div>
    </div>
    
    <div class="row g-3">
        @if($req->approved_at)
        <div class="col-6">
            <div class="border-start border-3 border-warning ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Approved At</label>
                <strong class="small d-block">{{ $req->approved_at ? $req->approved_at->format('d M, Y h:i A') : 'N/A' }}</strong>
            </div>
        </div>
        @endif
        @if($req->approved_by)
        <div class="col-6">
            <div class="border-start border-3 border-warning ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Approved By (Admin ID)</label>
                <strong class="small d-block">{{ $req->approved_by }}</strong>
            </div>
        </div>
        @endif
        @if($req->rejected_at)
        <div class="col-6">
            <div class="border-start border-3 border-warning ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Rejected At</label>
                <strong class="small d-block">{{ $req->rejected_at ? $req->rejected_at->format('d M, Y h:i A') : 'N/A' }}</strong>
            </div>
        </div>
        @endif
        @if($req->admin_note)
        <div class="col-12">
            <div class="border-start border-3 border-warning ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Admin Note</label>
                <div class="bg-light p-3 rounded small">{{ $req->admin_note }}</div>
            </div>
        </div>
        @endif
        @if($req->rejection_reason)
        <div class="col-12">
            <div class="border-start border-3 border-warning ps-3">
                <label class="text-body-tertiary small mb-1 d-block">Rejection Reason</label>
                <div class="bg-danger bg-opacity-10 p-3 rounded small text-danger">{{ $req->rejection_reason }}</div>
            </div>
        </div>
        @endif
    </div>
</div>
@endif

<!-- Spacing for sticky footer -->
<div style="height: 150px;"></div>

<!-- Sticky Footer with Action Buttons -->
@if($req->status === 'pending')
<div class="offcanvas-footer position-fixed bottom-0 bg-white border-top p-3" style="width: 600px; z-index: 1050; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
    <div class="d-flex gap-2 mb-2">
        <textarea id="admin_note_{{ $req->id }}" class="form-control form-control-sm" rows="2" placeholder="Add admin note (optional)..."></textarea>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-success btn-sm flex-fill approve-request-btn" data-request-id="{{ $req->id }}">
            <span class="uil uil-check-circle me-1"></span>Approve
        </button>
        <button type="button" class="btn btn-danger btn-sm flex-fill reject-request-btn" data-request-id="{{ $req->id }}">
            <span class="uil uil-times-circle me-1"></span>Reject
        </button>
    </div>
</div>
@elseif($req->status === 'approved' || $req->status === 'applied')
<div class="offcanvas-footer position-fixed bottom-0 bg-white border-top p-3" style="width: 600px; z-index: 1050; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
    @php
        $isFuture = $req->requested_effective_date && $req->requested_effective_date->isFuture();
    @endphp
    <div class="alert alert-success small mb-2">
        <span class="uil uil-check-circle me-1"></span>
        @if($req->status === 'applied')
            Applied on {{ $req->applied_at?->format('d M, Y h:i A') }}.
        @elseif($isFuture)
            Scheduled for {{ $req->requested_effective_date->format('d M, Y') }}. You may apply early.
        @else
            Approved and ready for application.
        @endif
    </div>
    <div class="d-flex gap-2">
        @if($req->status === 'approved')
        <button type="button" class="btn btn-primary btn-sm flex-fill apply-request-btn" data-request-id="{{ $req->id }}" data-force="{{ $isFuture ? '1' : '0' }}">
            <span class="uil uil-check me-1"></span>{{ $isFuture ? 'Apply Early' : 'Apply Now' }}
        </button>
        @endif
        @if($canRevert)
        <button type="button" class="btn btn-warning btn-sm flex-fill revert-state-change-btn" 
                data-request-id="{{ $req->id }}"
                data-user-id="{{ $req->user_id }}"
                data-user-name="{{ $req->user ? $req->user->name : 'N/A' }}"
                data-home-state="{{ $req->user && $req->user->homeState ? $req->user->homeState->name : 'N/A' }}"
                data-current-state="{{ $req->user && $req->user->state ? $req->user->state->name : 'N/A' }}">
            <span class="uil uil-redo me-1"></span>Revert to Home State
        </button>
        @endif
    </div>
</div>
@endif

{{-- Action handlers moved to external JS file: /public/js/pages/admin/state-change-actions.js --}}
<script>
// Legacy inline script removed - handlers now in state-change-actions.js
// This ensures proper loading order and avoids inline script issues with dynamic content
if (typeof jQuery !== 'undefined' && typeof Swal !== 'undefined') {
    console.log('✅ Dependencies available for action handlers');
} else {
    console.warn('⚠️ Some dependencies may not be loaded yet');
}

</script>