@extends('layouts.master')

@section('title', 'Application View')

@section('style')
    <style>
        .summary-card {
            border-radius: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .summary-card:hover {
            transform: translateY(-3px);
        }
    </style>
@endsection

@section('content')
    @include('layouts.header')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <h4 class="mb-4 text-center fs-26">@yield('title')</h4>

            {{-- ปุ่มด้านบน --}}
            <div class="d-flex justify-content-end mb-4">
                <a href="{{ url('/applicationgetedit', $applications->application_id) }}"
                    class="btn btn-sm btn-violet rounded-pill me-2">
                    <i class="uil uil-pen"></i> Edit
                </a>
                <a href="{{ url('/applicationlist') }}" class="btn btn-sm btn-danger rounded-pill">
                    <i class="uil uil-backspace"></i> Back
                </a>
            </div>

            {{-- ข้อมูลผู้สมัคร --}}
            <div class="card summary-card mb-4">
                <div class="card-body">
                    <h5 class="mb-3">📋 Applicant Information</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Application No:</strong> {{ $applications->application_no }}</p>
                            <p><strong>Citizen ID:</strong> {{ $applications->application_citizen_id }}</p>
                            <p><strong>Name:</strong> {{ $applications->application_title }}
                                {{ $applications->application_name }} {{ $applications->application_surname }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>School:</strong> {{ $school->school_name ?? '-' }}</p>
                            <p><strong>Program:</strong> {{ $applications->application_program }}</p>
                            <p><strong>Syllabus:</strong> {{ $applications->application_syllabus }}</p>
                        </div>
                    </div>
                    <br>
                    <h6 class="mb-3">📎 Documents</h6>
                    <ul class="list-unstyled">
                        <li>Portfolio:
                            @if ($applications->application_portfolio_file)
                                <a href="{{ $applications->application_portfolio_file }}" target="_blank">View</a>
                            @else
                                <span>-</span>
                            @endif
                        </li>
                        <li>Transcript:
                            @if ($applications->application_transcript_file)
                                <a href="{{ $applications->application_transcript_file }}" target="_blank">View</a>
                            @else
                                <span>-</span>
                            @endif
                        </li>
                        <li>Citizen ID:
                            @if ($applications->application_citizen_file)
                                <a href="{{ $applications->application_citizen_file }}" target="_blank">View</a>
                            @else
                                <span>-</span>
                            @endif
                        </li>
                    </ul>
                </div>
            </div>

            {{-- สรุปคะแนนหลัก --}}
            <div class="row g-4 mb-5">
                <div class="col-md-6">
                    <div class="card summary-card text-center p-3 h-100" style="background-color:#e6f8fa;">
                        <h6>CGPA (All)</h6>
                        <h2>{{ number_format($applications->application_cgpa, 2) ?? '-' }}</h2>
                        {{-- <small class="text-muted">Weight 0% : 0.00</small> --}}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card summary-card text-center p-3 h-100" style="background-color:#f0f7ff;">
                        <h6>CGPA by Subject</h6>
                        <p>Math: <strong>{{ $applications->application_gpax_mathematics ?? '-' }}</strong></p>
                        <p>Physics: <strong>{{ $applications->application_gpax_physics ?? '-' }}</strong></p>
                        <p>English: <strong>{{ $applications->application_gpax_english ?? '-' }}</strong></p>
                        <small class="text-muted">Weight 80% : {{ $gpax_score ?? '0.00' }}</small>
                    </div>
                </div>
            </div>

            {{-- ผู้ประเมิน + กราฟ --}}
            <div class="row g-4 mb-5">
                <div class="col-md-6">
                    <div class="card summary-card text-center p-4 h-100" style="background-color:#fcffe2;">
                        <h6>Portfolio Review</h6>
                        <p>Assist.Prof.Dr.Tide ({{ $portfolio_score }})</p>
                        <p>Assoc. Prof.Dr.Michael ({{ $portfolio_score }})</p>
                        <div class="text-center mt-3">
                            <span class="badge bg-violet text-light">Portfolio Score 20% :
                                {{ number_format($portfolio_score, 2) }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card summary-card text-center p-3 h-100 d-flex flex-column justify-content-center" style="background-color:#ffe6f0;">
                        <h6>Grand Total (100%)</h6>
                        <h1 class="text-danger">{{ $grand_total ?? '0.00' }}</h1>
                    </div>
                </div>
                {{-- <div class="col-md-6">
                    <div class="card summary-card p-4">
                        <h6 class="text-center mb-3">📊 Score Breakdown</h6>
                        <canvas id="scoreChart"></canvas>
                    </div>
                </div> --}}
            </div>

            <hr class="my-8" />

            {{-- Interviews --}}
            <div class="card summary-card mb-4 shadow-sm border-0">
                <div class="card-body">
                    <h5 class="mb-4 fw-bold">
                        📋 Interviews
                    </h5>
                    <div class="row text-center">
                        <div class="col-md-4 mb-3">
                            <p class="mb-1 text-muted">Interview Result</p>
                            <p class="fw-semibold fs-8">
                                {{-- @if($interview->result == 'Pass')
                                    <span class="badge bg-success">Pass</span>
                                @else
                                    <span class="badge bg-danger">Fail</span>
                                @endif --}}
                                <br>
                                {{-- {{ $interview->result ?? '-' }} --}}
                                <span class="badge bg-success fs-20">Pass</span>
                            </p>
                        </div>
                        <div class="col-md-4 mb-3">
                            <p class="mb-1 text-muted">Comment</p>
                            {{-- <p class="fw-semibold fs-6">{{ $interview->comment ?? '-' }}</p> --}}
                            <p class="fw-semibold fs-16">Nice</p>
                        </div>
                        <div class="col-md-4 mb-3">
                            <p class="mb-1 text-muted">Interviewer</p>
                            {{-- <p class="fw-semibold fs-6">{{ $interview->interviewer ?? '-' }}</p> --}}
                            <p class="fw-semibold fs-16">MONICA FUENTES</p>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-5" />

            {{-- Exam --}}
            <div class="card summary-card mb-4 border-0">
                <div class="card-body">
                    <h5 class="mb-4 fw-bold">📋 Exam</h5>

                    <div class="table-responsive">
                        <table class="table text-center mb-0" style="border-collapse: collapse; width: 100%;">
                            <thead style="background-color: #b7e3ea;">
                                <tr>
                                    <th colspan="2">Maths</th>
                                    <th colspan="2">Physics</th>
                                    <th colspan="2">EPT</th>
                                </tr>
                                <tr style="background-color: #e6f8fa;">
                                    <th>40</th>
                                    <th>100</th>
                                    <th>40</th>
                                    <th>100</th>
                                    <th>75</th>
                                    <th>100</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>35</td>
                                    <td>87.50</td>
                                    <td>37</td>
                                    <td>92.50</td>
                                    <td>69</td>
                                    <td>92.00</td>
                                </tr>
                                <tr style="background-color: #b7e3ea; font-weight: bold;">
                                    <td colspan="6" class="text-end pe-3">
                                        Total SIIT Exam Scores
                                        <span style="color: red;">272.00</span> /300
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </section>

    @include('layouts.footer')
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('scoreChart');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Portfolio (20%)', 'GPAX (80%)'],
                datasets: [{
                    data: [{{ $portfolio_score ?? 0 }}, {{ $gpax_score ?? 0 }}],
                    backgroundColor: ['#ff6384', '#36a2eb']
                }]
            }
        });
    </script>
@endsection