@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body default-height">
    <div class="container-fluid">
        <div class="row page-titles align-items-center">
            <div class="col-md-8">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('board_results.imports.index') }}">Board Results Imports</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Review #{{ $import->id }}</a></li>
                </ol>
            </div>
            <div class="col-md-4 text-md-end">
                <form method="POST" action="{{ route('board_results.imports.approve', $import->id) }}" class="d-inline" id="board-result-approve-form" data-unmatched-only="{{ $allowUnmatchedConfirmation ? '1' : '0' }}" data-unmatched-count="{{ $unmatchedCount ?? 0 }}" data-other-critical-count="{{ $otherCriticalCount ?? 0 }}">
                    @csrf
                    <input type="hidden" name="allow_unmatched" value="0">
                    <button class="btn btn-success" type="submit" @disabled(!($canApprove || $allowUnmatchedConfirmation)) id="board-result-approve-btn">Approve and Save Final Results</button>
                </form>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-2">Total: {{ $import->total_parsed_rows }}</div>
                    <div class="col-md-2">Matched: {{ $import->matched_rows }}</div>
                    <div class="col-md-2">Unmatched: {{ $import->unmatched_rows }}</div>
                    <div class="col-md-2">Ambiguous: {{ $import->ambiguous_rows }}</div>
                    <div class="col-md-2">Duplicate: {{ $import->duplicate_rows }}</div>
                    <div class="col-md-2">Invalid: {{ $import->invalid_rows }}</div>
                </div>
                <div class="mt-2">Form fill-up students missing from PDF: <strong>{{ $missingInPdf }}</strong></div>
            </div>
        </div>

        <div class="card">
            <div class="card-body table-responsive">
                <table class="table table-bordered align-middle">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Board Roll</th>
                            <th>Result</th>
                            <th>Failed Subjects</th>
                            <th>GPA</th>
                            <th>Grade</th>
                            <th>Status</th>
                            <th>Student</th>
                            <th>Message</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($rows as $row)
                        <tr>
                            <td>{{ $row->id }}</td>
                            <td>{{ $row->board_roll }}</td>
                            <td>{{ $row->result_status }}</td>
                            <td>{{ $row->failed_subject_count ?? '-' }}</td>
                            <td>{{ $row->gpa }}</td>
                            <td>{{ $row->letter_grade }}</td>
                            <td>{{ $row->matching_status }}</td>
                            <td>{{ $row->student?->student_name_english ?? '-' }}</td>
                            <td>{{ $row->matching_message }}</td>
                            <td style="min-width: 280px;">
                                <form method="POST" action="{{ route('board_results.imports.rows.ignore', [$import->id, $row->id]) }}" class="d-flex gap-1 mb-1">
                                    @csrf
                                    <input name="reason" class="form-control form-control-sm" placeholder="Ignore reason" required>
                                    <button class="btn btn-sm btn-outline-danger" type="submit">Ignore</button>
                                </form>

                                <form method="POST" action="{{ route('board_results.imports.rows.manual_match', [$import->id, $row->id]) }}" class="d-flex gap-1">
                                    @csrf
                                    <select name="form_fillup_item_id" class="form-control form-control-sm" required>
                                        <option value="">Manual match</option>
                                        @foreach($scopeCandidates as $candidate)
                                            <option value="{{ $candidate->id }}">{{ $candidate->board_roll }} | {{ $candidate->student?->student_name_english }}</option>
                                        @endforeach
                                    </select>
                                    <button class="btn btn-sm btn-outline-primary" type="submit">Save</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                {{ $rows->links() }}
            </div>
        </div>
    </div>
</div>

@section('customjs')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('board-result-approve-form');
    const button = document.getElementById('board-result-approve-btn');
    const allowUnmatchedInput = form ? form.querySelector('input[name="allow_unmatched"]') : null;
    const unmatchedOnly = form && form.dataset.unmatchedOnly === '1';
    const unmatchedCount = form ? parseInt(form.dataset.unmatchedCount || '0', 10) : 0;
    let isSubmitting = false;

    if (!form || !button || !allowUnmatchedInput) {
        return;
    }

    form.addEventListener('submit', function (event) {
        if (isSubmitting) {
            event.preventDefault();
            return;
        }

        if (!unmatchedOnly || allowUnmatchedInput.value === '1') {
            isSubmitting = true;
            button.disabled = true;
            button.textContent = 'Submitting...';
            return;
        }

        event.preventDefault();

        const message = 'There are ' + unmatchedCount + ' unmatched records. Do you want to continue and submit while keeping these records unmatched?';

        if (window.Swal) {
            Swal.fire({
                title: 'Unmatched Records Found',
                text: message,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Continue',
                cancelButtonText: 'No, Cancel',
                reverseButtons: true,
            }).then((result) => {
                if (result.isConfirmed) {
                    allowUnmatchedInput.value = '1';
                    isSubmitting = true;
                    button.disabled = true;
                    button.textContent = 'Submitting...';
                    form.submit();
                }
            });
            return;
        }

        if (window.confirm(message)) {
            allowUnmatchedInput.value = '1';
            isSubmitting = true;
            button.disabled = true;
            button.textContent = 'Submitting...';
            form.submit();
        }
    });
});
</script>
@endsection
@endsection