@extends('layouts.app')

@section('title', 'Rehabilitation Details')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold">Rehabilitation Program Details</h2>
                    <small class="text-muted">View program progress and certification</small>
                </div>
                <div>
                    <a href="{{ route('prison.rehabilitation.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i> Back to List
                    </a>
                    @can('prison.rehabilitation.edit')<a href="{{ route('prison.rehabilitation.edit', $rehabilitation->id) }}" class="btn btn-warning">
                        <i class="fas fa-edit me-2"></i> Edit Progress
                    </a>@endcan
                    @if($rehabilitation->certificate_issued)
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#certificateModal">
                            <i class="fas fa-print me-2"></i> Print Certificate
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- Prisoner Information --}}
        <div class="col-md-6">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-user me-2"></i> Prisoner Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Name:</strong> {{ $rehabilitation->prisoner->name ?? 'N/A' }}</p>
                            <p><strong>Prisoner Number:</strong> {{ $rehabilitation->prisoner->prisoner_number ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Gender:</strong> {{ $rehabilitation->prisoner->gender ?? 'N/A' }}</p>
                            <p><strong>Case Number:</strong> {{ $rehabilitation->prisoner->case_number ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Program Information --}}
        <div class="col-md-6">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-graduation-cap me-2"></i> Program Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Category:</strong> 
                                <span class="badge {{ $rehabilitation->getProgramCategoryBadge() }}">
                                    {{ $rehabilitation->program_category }}
                                </span>
                            </p>
                            <p><strong>Program Name:</strong> {{ $rehabilitation->program_name }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Status:</strong> 
                                <span class="badge {{ $rehabilitation->getProgressBadgeClass() }}">
                                    {{ $rehabilitation->progress_status }}
                                </span>
                            </p>
                            <p><strong>Progress:</strong> {{ $rehabilitation->progress_percentage }}%</p>
                        </div>
                    </div>
                    <p><strong>Description:</strong></p>
                    <p>{{ $rehabilitation->program_description ?? 'No description provided' }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- Schedule --}}
        <div class="col-md-6">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-calendar me-2"></i> Schedule</h5>
                </div>
                <div class="card-body">
                    <p><strong>Start Date:</strong> {{ $rehabilitation->start_date->format('F d, Y') }}</p>
                    <p><strong>Expected End Date:</strong> {{ $rehabilitation->expected_end_date ? $rehabilitation->expected_end_date->format('F d, Y') : 'N/A' }}</p>
                    <p><strong>Actual End Date:</strong> {{ $rehabilitation->actual_end_date ? $rehabilitation->actual_end_date->format('F d, Y') : 'In Progress' }}</p>
                    <p><strong>Attendance Rate:</strong> {{ $rehabilitation->attendance_rate ?? 'N/A' }}%</p>
                </div>
            </div>
        </div>

        {{-- Assessments --}}
        <div class="col-md-6">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="fas fa-clipboard-list me-2"></i> Assessments</h5>
                </div>
                <div class="card-body">
                    <p><strong>Initial Assessment:</strong></p>
                    <p class="text-muted">{{ $rehabilitation->initial_assessment ?? 'Not recorded' }}</p>
                    
                    <p><strong>Mid-Term Assessment:</strong></p>
                    <p class="text-muted">{{ $rehabilitation->mid_term_assessment ?? 'Not recorded' }}</p>
                    
                    <p><strong>Final Assessment:</strong></p>
                    <p class="text-muted">{{ $rehabilitation->final_assessment ?? 'Not recorded' }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- Performance --}}
        <div class="col-md-6">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i> Performance & Skills</h5>
                </div>
                <div class="card-body">
                    <p><strong>Instructor Rating:</strong> 
                        @if($rehabilitation->instructor_rating)
                            @for($i = 1; $i <= 5; $i++)
                                @if($i <= $rehabilitation->instructor_rating)
                                    <i class="fas fa-star text-warning"></i>
                                @else
                                    <i class="far fa-star text-muted"></i>
                                @endif
                            @endfor
                        @else
                            Not rated
                        @endif
                    </p>
                    <p><strong>Behavior Rating:</strong> {{ $rehabilitation->behavior_rating ?? 'Not rated' }}</p>
                    <p><strong>Skills Acquired:</strong></p>
                    <p class="text-muted">{{ $rehabilitation->skill_acquired ?? 'None recorded' }}</p>
                    <p><strong>Employment Placement:</strong> {{ $rehabilitation->employment_placement ?? 'None' }}</p>
                </div>
            </div>
        </div>

        {{-- Certification --}}
        <div class="col-md-6">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-certificate me-2"></i> Certification</h5>
                </div>
                <div class="card-body text-center">
                    @if($rehabilitation->certificate_issued)
                        <i class="fas fa-certificate fa-4x text-success mb-3"></i>
                        <h5>Certificate Issued</h5>
                        <p><strong>Certificate Number:</strong> {{ $rehabilitation->certificate_number }}</p>
                        <p><strong>Issued Date:</strong> {{ $rehabilitation->certificate_issued_date ? $rehabilitation->certificate_issued_date->format('F d, Y') : 'N/A' }}</p>
                        <button type="button" class="btn btn-success mt-2" data-bs-toggle="modal" data-bs-target="#certificateModal">
                            <i class="fas fa-print me-2"></i> View / Print Certificate
                        </button>
                    @else
                        <i class="fas fa-certificate fa-4x text-muted mb-3"></i>
                        <h5>Certificate Not Issued</h5>
                        <p>Complete the program to receive certification</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Recommendations --}}
    @if($rehabilitation->recommendations)
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-secondary text-white">
            <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i> Recommendations</h5>
        </div>
        <div class="card-body">
            <p>{{ $rehabilitation->recommendations }}</p>
        </div>
    </div>
    @endif

    {{-- Notes --}}
    @if($rehabilitation->notes)
    <div class="card shadow-sm">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0"><i class="fas fa-sticky-note me-2"></i> Additional Notes</h5>
        </div>
        <div class="card-body">
            <p>{{ $rehabilitation->notes }}</p>
        </div>
    </div>
    @endif
</div>

{{-- CERTIFICATE MODAL - Popup for Printing --}}
<div class="modal fade" id="certificateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-certificate me-2"></i> Certificate of Completion
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                {{-- Certificate Content --}}
                <div id="certificateContent" class="certificate-container" style="background: white; padding: 30px; border: 20px solid #d4af37; position: relative;">
                    <div style="text-align: center;">
                        <div style="margin-bottom: 20px;">
                            <i class="fas fa-balance-scale" style="font-size: 60px; color: #d4af37;"></i>
                        </div>
                        <h1 style="font-size: 36px; color: #2c3e50; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 3px;">
                            CERTIFICATE OF COMPLETION
                        </h1>
                        <div style="font-size: 16px; color: #7f8c8d; margin-bottom: 30px; border-bottom: 2px solid #d4af37; display: inline-block; padding-bottom: 5px;">
                            This certificate is proudly presented to
                        </div>
                        
                        <div style="font-size: 34px; font-weight: bold; color: #2c3e50; margin: 20px 0; text-transform: uppercase;">
                            {{ $rehabilitation->prisoner->name ?? 'N/A' }}
                        </div>
                        <div style="margin: 10px 0;">
                            Prisoner Number: <strong>{{ $rehabilitation->prisoner->prisoner_number ?? 'N/A' }}</strong>
                        </div>
                        
                        <div style="font-size: 24px; color: #d4af37; margin: 20px 0; font-weight: bold;">
                            {{ $rehabilitation->program_name }}
                        </div>
                        
                        <div style="font-size: 14px; color: #555; margin: 20px auto; line-height: 1.6; max-width: 500px;">
                            Successfully completed the {{ $rehabilitation->program_name }} program 
                            with a grade of {{ $rehabilitation->progress_percentage }}% completion rate.
                            This certification acknowledges the dedication, hard work, and commitment 
                            demonstrated throughout the program.
                        </div>
                        
                        <div style="margin-top: 30px;">
                            Issued on this day of <strong>{{ $rehabilitation->certificate_issued_date ? $rehabilitation->certificate_issued_date->format('F d, Y') : now()->format('F d, Y') }}</strong>
                        </div>
                        
                        <div style="margin-top: 40px; display: flex; justify-content: space-around; padding: 0 30px;">
                            <div style="text-align: center;">
                                <hr style="width: 180px; margin: 5px auto; border: 1px solid #333;">
                                <strong>Program Coordinator</strong>
                            </div>
                            <div style="text-align: center;">
                                <hr style="width: 180px; margin: 5px auto; border: 1px solid #333;">
                                <strong>Prison Superintendent</strong>
                            </div>
                        </div>
                        
                        <div style="position: absolute; bottom: 30px; right: 30px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid #d4af37; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #d4af37; text-align: center;">
                            OFFICIAL<br>SEAL
                        </div>
                        
                        <div style="position: absolute; bottom: 20px; left: 20px; font-size: 9px; color: #999;">
                            Certificate No: {{ $rehabilitation->certificate_number ?? 'N/A' }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i> Close
                </button>
                <button type="button" class="btn btn-success" onclick="printCertificate()">
                    <i class="fas fa-print me-2"></i> Print Certificate
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    @media print {
        body * {
            visibility: hidden;
        }
        #certificateContent, #certificateContent * {
            visibility: visible;
        }
        #certificateContent {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 20px;
        }
        .modal-footer, .modal-header {
            display: none;
        }
    }
    
    .certificate-container {
        background: white;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
</style>

<script>
    function printCertificate() {
        var printContents = document.getElementById('certificateContent').innerHTML;
        var originalContents = document.body.innerHTML;
        
        var printWindow = window.open('', '_blank');
        printWindow.document.write('<html>');
        printWindow.document.write('<head>');
        printWindow.document.write('<title>Certificate of Completion</title>');
        printWindow.document.write('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">');
        printWindow.document.write('<style>');
        printWindow.document.write(`
            @page {
                size: A4 landscape;
                margin: 0;
            }
            body {
                margin: 0;
                padding: 0;
                font-family: 'Times New Roman', serif;
            }
            .certificate-print {
                width: 100%;
                height: 100%;
                padding: 40px;
                background: white;
                border: 20px solid #d4af37;
                box-sizing: border-box;
                position: relative;
            }
            h1 {
                font-size: 36px;
                color: #2c3e50;
                margin-bottom: 10px;
                text-transform: uppercase;
                letter-spacing: 3px;
            }
            .prisoner-name {
                font-size: 34px;
                font-weight: bold;
                color: #2c3e50;
                margin: 20px 0;
                text-transform: uppercase;
            }
            .program-name {
                font-size: 24px;
                color: #d4af37;
                margin: 20px 0;
                font-weight: bold;
            }
            .signature-line hr {
                width: 180px;
                margin: 5px auto;
                border: 1px solid #333;
            }
            .seal {
                position: absolute;
                bottom: 30px;
                right: 30px;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                border: 2px solid #d4af37;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
                color: #d4af37;
                text-align: center;
            }
        `);
        printWindow.document.write('</style>');
        printWindow.document.write('</head>');
        printWindow.document.write('<body>');
        printWindow.document.write('<div class="certificate-print">');
        printWindow.document.write(printContents);
        printWindow.document.write('</div>');
        printWindow.document.write('</body>');
        printWindow.document.write('</html>');
        
        printWindow.document.close();
        printWindow.focus();
        
        setTimeout(function() {
            printWindow.print();
            printWindow.close();
        }, 500);
    }
</script>
@endsection