@extends('layouts.user')

@section('styles')
<style>
    /* Custom styles for rejection modal */
    .swal-rejection-modal .swal2-html-container {
        max-height: 400px;
        overflow-y: auto;
    }
    
    .swal-rejection-modal .alert-danger {
        text-align: left;
        word-wrap: break-word;
    }
    
    /* Tooltip styling for rejection preview */
    .tooltip-inner {
        max-width: 300px;
        text-align: left;
    }
</style>
@endsection

@section('content')
<div class="container-fluid py-4">
    <!-- Page Header -->
    <div class="mb-4">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
                <h2 class="mb-2 fw-bold">State Change History</h2>
                <p class="text-body-tertiary mb-0">View all your past state change requests and their status</p>
            </div>
            <a href="{{ route('user.state-change.request', ['role' => auth()->user()->currentRole->name]) }}" 
               class="btn btn-primary">
                <span class="uil uil-plus me-1"></span>
                New Request
            </a>
        </div>
    </div>

    <!-- Rejected Request Alert -->
    @php
        $recentRejectedRequest = $requests->where('status', 'rejected')->sortByDesc('rejected_at')->first();
    @endphp
    @if($recentRejectedRequest && $recentRejectedRequest->rejected_at && $recentRejectedRequest->rejected_at->isAfter(now()->subDays(7)))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <div class="d-flex align-items-start">
            <span class="uil uil-exclamation-triangle fs-3 me-3"></span>
            <div class="flex-grow-1">
                <h6 class="alert-heading mb-2">
                    <strong>Request Rejected</strong>
                </h6>
                <p class="mb-2">
                    Your state change request (ID: #{{ $recentRejectedRequest->id }}) was rejected 
                    {{ $recentRejectedRequest->rejected_at->diffForHumans() }}.
                </p>
                @if($recentRejectedRequest->rejection_reason)
                <div class="bg-white bg-opacity-50 p-3 rounded mb-2">
                    <strong class="d-block mb-1">Rejection Reason:</strong>
                    <p class="mb-0 small">{{ $recentRejectedRequest->rejection_reason }}</p>
                </div>
                @endif
                <small class="text-muted">
                    <i class="uil uil-info-circle me-1"></i>
                    You can submit a new request addressing the concerns mentioned above.
                </small>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <!-- Cooling Period Info -->
    @if(auth()->user()->next_state_change_allowed_at && \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->isFuture())
    <div class="alert alert-warning" role="alert">
        <span class="uil uil-clock fs-5 me-2"></span>
        <strong>Cooling Period:</strong> Next state change allowed after 
        <strong>{{ \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->format('d M, Y') }}</strong>
        ({{ \Carbon\Carbon::parse(auth()->user()->next_state_change_allowed_at)->diffForHumans() }})
    </div>
    @endif

    <!-- Requests Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            @if($requests->isEmpty())
            <div class="text-center py-5">
                <span class="uil uil-folder-open text-muted" style="font-size: 4rem;"></span>
                <h5 class="text-muted mt-3">No Requests Found</h5>
                <p class="text-body-tertiary">You haven't submitted any state change requests yet.</p>
                <a href="{{ route('user.state-change.request', ['role' => auth()->user()->currentRole->name]) }}" 
                   class="btn btn-primary mt-3">
                    <span class="uil uil-plus me-1"></span>
                    Submit Your First Request
                </a>
            </div>
            @else
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="px-4">Request ID</th>
                            <th>Action Type</th>
                            <th>From State</th>
                            <th>From District</th>
                            <th>To State</th>
                            <th>To District</th>
                            <th>Status</th>
                            <th>Submitted On</th>
                            <th>Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($requests as $req)
                        <tr>
                            <td class="px-4 fw-semibold">#{{ $req->id }}</td>
                            <td>
                                <span class="badge bg-{{ $req->action_type === 'change' ? 'primary' : 'info' }}">
                                    {{ ucfirst($req->action_type) }}
                                </span>
                            </td>
                            <td>{{ $req->currentState->name ?? 'N/A' }}</td>
                            <td>{{ $req->currentDistrict->name ?? 'N/A' }}</td>
                            <td>{{ $req->requestedState->name ?? 'N/A' }}</td>
                            <td>{{ $req->requestedDistrict->name ?? 'N/A' }}</td>
                            <td>
                                @if($req->status === 'approved')
                                    <span class="badge bg-success">
                                        <span class="uil uil-check-circle"></span> Approved
                                    </span>
                                @elseif($req->status === 'rejected')
                                    <span class="badge bg-danger">
                                        <span class="uil uil-times-circle"></span> Rejected
                                    </span>
                                    @if($req->rejection_reason)
                                    <br>
                                    <button type="button" class="btn btn-link btn-sm text-danger p-0 mt-1" 
                                            data-bs-toggle="tooltip" 
                                            data-bs-placement="left" 
                                            title="{{ $req->rejection_reason }}"
                                            onclick="showRejectionReason('{{ addslashes($req->rejection_reason) }}')">
                                        <span class="uil uil-info-circle"></span> View Reason
                                    </button>
                                    @endif
                                @elseif($req->status === 'pending')
                                    <span class="badge bg-warning text-dark">
                                        <span class="uil uil-hourglass"></span> Pending
                                    </span>
                                @elseif($req->status === 'cancelled')
                                    <span class="badge bg-secondary">
                                        <span class="uil uil-ban"></span> Cancelled
                                    </span>
                                @else
                                    <span class="badge bg-secondary">{{ ucfirst($req->status) }}</span>
                                @endif
                            </td>
                            <td>
                                <small>{{ $req->created_at->format('d M, Y') }}</small>
                                <br>
                                <small class="text-muted">{{ $req->created_at->format('h:i A') }}</small>
                            </td>
                            <td>
                                <button type="button" 
                                        class="btn btn-sm btn-outline-primary view-details-btn" 
                                        data-request-id="{{ $req->id }}"
                                        data-bs-toggle="modal"
                                        data-bs-target="#requestDetailsModal">
                                    <span class="uil uil-eye"></span> View
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            @if($requests->hasPages())
            <div class="p-4 border-top">
                {{ $requests->links() }}
            </div>
            @endif
            @endif
        </div>
    </div>
</div>

<!-- 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">
                <h5 class="modal-title" id="requestDetailsModalLabel">Request Details</h5>
                <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>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Show rejection reason in SweetAlert2 modal
function showRejectionReason(reason) {
    Swal.fire({
        icon: 'error',
        title: '<strong>Request Rejected</strong>',
        html: `
            <div class="text-start">
                <p class="text-muted mb-3">Your state change request was rejected by the administrator for the following reason:</p>
                <div class="alert alert-danger mb-0">
                    <i class="uil uil-exclamation-triangle me-2"></i>
                    <strong>Reason:</strong><br>
                    <div class="mt-2">${reason}</div>
                </div>
            </div>
        `,
        confirmButtonText: 'I Understand',
        confirmButtonColor: '#d33',
        allowOutsideClick: false,
        allowEscapeKey: false,
        customClass: {
            popup: 'swal-rejection-modal'
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Bootstrap tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Handle view details button clicks
    document.querySelectorAll('.view-details-btn').forEach(button => {
        button.addEventListener('click', function() {
            const requestId = this.dataset.requestId;
            const modalContent = document.getElementById('requestDetailsContent');
            
            // Show loading spinner
            modalContent.innerHTML = `
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            `;
            
            // Fetch request details
            fetch(`/api/state-change-requests/${requestId}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    const req = data.request;
                    modalContent.innerHTML = `
                        <div class="row g-3">
                            <div class="col-md-6">
                                <h6 class="text-muted mb-2">Request Information</h6>
                                <table class="table table-sm">
                                    <tr>
                                        <th class="text-muted">Request ID:</th>
                                        <td>#${req.id}</td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Action Type:</th>
                                        <td><span class="badge bg-primary">${req.action_type}</span></td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Status:</th>
                                        <td>${getStatusBadge(req.status)}</td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Submitted:</th>
                                        <td>${new Date(req.created_at).toLocaleString()}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted mb-2">State Change Details</h6>
                                <table class="table table-sm">
                                    <tr>
                                        <th class="text-muted">From State:</th>
                                        <td>${req.current_state?.name || 'N/A'}</td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">From District:</th>
                                        <td>${req.current_district?.name || 'N/A'}</td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">To State:</th>
                                        <td>${req.requested_state?.name || 'N/A'}</td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">To District:</th>
                                        <td>${req.requested_district?.name || 'N/A'}</td>
                                    </tr>
                                </table>
                            </div>
                            ${req.reason_user ? `
                            <div class="col-12">
                                <h6 class="text-muted mb-2">Your Reason</h6>
                                <div class="alert alert-light">${req.reason_user}</div>
                            </div>
                            ` : ''}
                            ${req.status === 'approved' && req.admin_note ? `
                            <div class="col-12">
                                <h6 class="text-success mb-2">Admin Note</h6>
                                <div class="alert alert-success">${req.admin_note}</div>
                            </div>
                            ` : ''}
                            ${req.status === 'rejected' && req.rejection_reason ? `
                            <div class="col-12">
                                <h6 class="text-danger mb-2">Rejection Reason</h6>
                                <div class="alert alert-danger">${req.rejection_reason}</div>
                            </div>
                            ` : ''}
                        </div>
                    `;
                } else {
                    modalContent.innerHTML = `
                        <div class="alert alert-danger">
                            Failed to load request details. Please try again.
                        </div>
                    `;
                }
            })
            .catch(error => {
                modalContent.innerHTML = `
                    <div class="alert alert-danger">
                        An error occurred while loading request details.
                    </div>
                `;
                console.error('Error:', error);
            });
        });
    });
    
    function getStatusBadge(status) {
        const badges = {
            'approved': '<span class="badge bg-success"><span class="uil uil-check-circle"></span> Approved</span>',
            'rejected': '<span class="badge bg-danger"><span class="uil uil-times-circle"></span> Rejected</span>',
            'pending': '<span class="badge bg-warning text-dark"><span class="uil uil-hourglass"></span> Pending</span>',
            'cancelled': '<span class="badge bg-secondary"><span class="uil uil-ban"></span> Cancelled</span>'
        };
        return badges[status] || `<span class="badge bg-secondary">${status}</span>`;
    }
});
</script>
@endpush