@extends('layouts.user')

@section('title', 'State Change History')

@section('content')
<div class="container-fluid" data-user-role="{{ auth()->user()->currentRole->name ?? 'player' }}" data-debug-role="{{ auth()->user()->currentRole->name ?? 'player' }}">
    <!-- Page Header -->
    <!--<div class="row g-2 mb-3 align-items-center">
        <div class="col-md-7 col-12">
            <div class="d-flex align-items-center gap-2">
                <div>
                    <h2 class="mb-1 fw-bold">State Change History</h2>
                    <p class="text-body-tertiary mb-0 fs-9">View all your past state change requests</p>
                </div>
            </div>
        </div>
        <div class="col-md-5 col-12 text-md-end">
            <a href="{{ route('user.state-change.request', ['role' => auth()->user()->currentRole->name ?? 'player']) }}" 
               class="btn btn-primary btn-sm">
                <span class="uil uil-plus me-1"></span>
                New Request
            </a>
        </div>
    </div>-->

    <!-- Filters -->
    <div class="row g-2 mb-2 align-items-center">
        <div class="col-12">
            <form class="d-flex flex-wrap gap-2 align-items-center" id="state-change-history-search-form" autocomplete="off">
                <select class="form-select form-select-sm w-auto" id="status_filter" name="status" style="min-width:130px;">
                    <option value="">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="approved">Approved</option>
                    <option value="applied">Applied</option>
                    <option value="rejected">Rejected</option>
                    <option value="cancelled">Cancelled</option>
                    <option value="expired">Expired</option>
                </select>
                
                <select class="form-select form-select-sm w-auto" id="action_filter" name="action_type" style="min-width:130px;">
                    <option value="">All Actions</option>
                    <option value="change">Change</option>
                    <option value="revert">Revert</option>
                </select>
                
                <input type="text" 
                       class="form-control form-control-sm w-auto" 
                       id="search_key" 
                       name="search_key" 
                       placeholder="Search by Request Code..." 
                       style="min-width:180px;">
                
                <button type="submit" class="btn btn-phoenix-primary btn-sm px-3">
                    <span class="uil uil-search me-1"></span>Search
                </button>
                
                <button type="button" id="" class="btn btn-phoenix-success btn-sm px-3 d-none">
                    <span class="uil uil-download-alt me-1"></span>Export CSV
                </button>
                
                <input class="form-control datetimepicker form-control-sm w-auto ms-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;" />
            </form>
        </div>
    </div>

    <!-- Table Card -->
    <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;height:calc(100vh - 190px); max-height:calc(100vh - 190px); overflow:auto;">
                            <table class="table table-sm fs-9 mb-0">
                                <thead style="position:sticky; top:0; z-index:2; background:#fff;">
                                    <tr>
                                        <th class="sort border-top border-translucent ps-3" style="background:#fff;">Request Code</th>
                                        <th class="sort border-top border-translucent" style="background:#fff;">Action</th>
                                        <th class="sort border-top border-translucent" style="background:#fff;">From → To</th>
                                        <th class="sort border-top border-translucent" style="background:#fff;">Status</th>
                                        <th class="sort border-top border-translucent" style="background:#fff;">Submitted</th>
                                        <th class="sort border-top border-translucent" style="background:#fff;">Applied / Effective</th>
                                        <th class="sort border-top border-translucent pe-3" style="background:#fff;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="stateChangeHistoryTableBody" class="state_change_history_list">
                                    <!-- State change history rows will be rendered by JS -->
                                    <tr>
                                        <td colspan="7" class="text-center py-4">
                                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                            <p class="mt-2 mb-0 text-body-tertiary small">Loading your requests...</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('footer_paginator')
    <div id="laravel_paginator" class=""></div>
@endsection

<!-- Request Details Modal -->
<div class="modal fade" id="requestDetailsModal" tabindex="-1" aria-labelledby="requestDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-body-highlight">
                <div class="d-flex align-items-center">
                    <div class="bg-primary bg-opacity-10 rounded p-2 me-3">
                        <span class="uil uil-exchange text-primary fs-3"></span>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold mb-0" id="requestDetailsModalLabel">Request Details</h5>
                        <small class="text-body-tertiary">View full request information</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="requestDetailsContent">
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-3 text-body-tertiary">Loading request details...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                    <span class="uil uil-times me-1"></span>Close
                </button>
            </div>
        </div>
    </div>
</div>

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="/js/pages/user/state-change-history.js?v={{ time() }}"></script>
<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 the details.`;
                    } else if (data.status === 'applied') {
                        icon = 'success';
                        title = 'Changes Applied';
                        text = `Your state change request ${data.request_code || ''} has been applied successfully!`;
                    }
                    
                    Swal.fire({
                        icon: icon,
                        title: title,
                        text: text,
                        timer: 5000,
                        showConfirmButton: true,
                        confirmButtonText: 'Refresh Page',
                        allowOutsideClick: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.reload();
                        }
                    });
                }
                
                // Auto-refresh the table after 2 seconds
                setTimeout(() => {
                    if (typeof window.loadStateChangeHistory === 'function') {
                        window.loadStateChangeHistory();
                    }
                }, 2000);
            });
    } catch (e) {
        console.warn('Echo subscription failed:', e);
    }
})();
</script>
@endpush