@extends('layout.layout')

@section('content')
    <div class="container mt-5">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div class="mb-0">Account Freeze Management</div>
                        <button 
                            id="freezeToggleBtn" 
                            class="btn {{ $hasActiveFrozen ? 'btn-warning' : 'btn-danger' }}"
                            onclick="toggleFreeze()"
                            {{ $hasPendingRequest ? 'disabled' : '' }}
                            title="{{ $hasPendingRequest ? 'You have a pending request.' : '' }}">
                            {{ $hasActiveFrozen ? 'Unfreeze Account' : 'Freeze Account' }}
                        </button>
                    </div>

                    <div class="card-body">
                        <!-- Status Alert -->
                        <div class="alert alert-info" role="alert">
                            <strong>Current Status:</strong>
                            @if($hasPendingRequest)
                                <span class="badge bg-warning text-dark">
                                    {{ $hasActiveFrozen ? 'Pending Freeze' : 'Pending Unfreeze' }}
                                </span>
                            @elseif($hasActiveFrozen)
                                <span class="badge bg-danger">Account is Frozen</span>
                            @else
                                <span class="badge bg-success">Account is Active</span>
                            @endif
                        </div>

                        <!-- Freeze Requests Table -->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Request Type</th>
                                        <th>Status</th>
                                        <th>Priority</th>
                                        <th>Subject</th>
                                        <th>Description</th>
                                        <th>Admin Note</th>
                                        <th>Submitted Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($freezeRequests as $index => $request)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                @if($request->type === 'freeze')
                                                    <span class="badge bg-danger">Freeze</span>
                                                @else
                                                    <span class="badge bg-success">Unfreeze</span>
                                                @endif
                                            </td>
                                            <td>
                                                @switch($request->status)
                                                    @case('pending')
                                                        <span class="badge bg-warning">Pending</span>
                                                        @break
                                                    @case('approved')
                                                        <span class="badge bg-success">Approved</span>
                                                        @break
                                                    @case('rejected')
                                                        <span class="badge bg-danger">Rejected</span>
                                                        @break
                                                    @case('unsolved')
                                                        <span class="badge bg-warning text-dark">Unsolved</span>
                                                        @break
                                                    @default
                                                        <span class="badge bg-secondary">{{ $request->status }}</span>
                                                @endswitch
                                            </td>
                                            <td>
                                                <span class="badge bg-info">{{ ucfirst($request->priority) }}</span>
                                            </td>
                                            <td>{{ $request->subject }}</td>
                                            <td>{{ Str::limit($request->description, 50) }}</td>
                                            <td>{{ $request->status_note }}</td>
                                            <td>{{ $request->created_at->format('d/m/Y H:i') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center text-muted py-3">
                                                No freeze requests yet. Click the button above to submit one.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Spinner Modal -->
    <div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-1">Processing your request...</p>
                </div>
            </div>
        </div>
    </div>

    <style>
        .card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        
        .btn {
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .table-hover tbody tr:hover {
            background-color: #f5f5f5;
        }
    </style>

    <script>
        function toggleFreeze() {
            const btn = document.getElementById('freezeToggleBtn');
            const currentText = btn.textContent.trim();
            const isFreeze = currentText.includes('Freeze');
            
            const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
            loadingModal.show();
            
            fetch('{{ route("freeze.store") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                loadingModal.hide();
                
                if (data.success) {
                    const alertType = data.requestType === 'freeze' ? 'warning' : 'success';
                    showAlert(data.message, alertType);
                    
                    setTimeout(() => {location.reload();}, 2000);
                } else {
                    showAlert('An error occurred. Please try again.', 'danger');
                }
            })
            .catch(error => {
                loadingModal.hide();
                console.error('Error:', error);
                showAlert('An error occurred. Please try again.', 'danger');
            });
        }

        function showAlert(message, type) {
            const alertHTML = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 9999; max-width: 400px;">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
            
            document.body.insertAdjacentHTML('beforeend', alertHTML);
            
            setTimeout(() => {
                const alerts = document.querySelectorAll('.alert');
                if (alerts.length > 0) {
                    const lastAlert = alerts[alerts.length - 1];
                    lastAlert.remove();
                }
            }, 5000);
        }
    </script>
@endsection