@extends('admin.layouts.master')

@section('title', 'Upload Documents')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        .search-box {
            position: relative;
            max-width: 500px;
            margin: 0 auto;
        }

        .search-box input {
            height: 50px;
            padding-left: 20px;
            padding-right: 100px;
            border-radius: 50px;
            border: 1px solid #e2e8f0;
            width: 100%;
        }

        .search-btn {
            position: absolute;
            right: 5px;
            top: 5px;
            bottom: 5px;
            border-radius: 40px;
            padding: 0 25px;
            border: none;
            background: #4f46e5;
            color: white;
            font-weight: 600;
        }

        .search-btn:hover {
            background: #4338ca;
        }

        #search-results-area {
            display: none;
        }

        .table-upload-wrapper {
            min-width: 250px;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid pb-5">

        {{-- 1. SEARCH SECTION --}}
        <div class="text-center mt-5 mb-5">
            <h3 class="fw-bold text-dark">Upload Booking Documents</h3>
            <p class="text-muted">Enter a Booking ID to manage mandatory documents.</p>

            <div class="search-box mt-4">
                <input type="text" id="searchInput" placeholder="Enter Booking Code (e.g. BKG-2024-001)">
                <button class="search-btn" id="btnSearch">Search</button>
            </div>
        </div>

        {{-- 2. RESULTS SECTION --}}
        <div id="search-results-area">
            <div class="row">
                {{-- LEFT: DETAILS CARD --}}
                <div class="col-xl-4">
                    <div class="card custom-card border-0 shadow-sm mb-4">
                        <div class="card-header border-bottom">
                            <div class="card-title">Booking Details</div>
                        </div>
                        <div class="card-body">
                            <div class="text-center mb-3">
                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto fs-2 fw-bold"
                                    style="width: 60px; height: 60px;" id="ph_avatar">S</div>
                            </div>
                            <p class="mb-2"><strong>Code:</strong> <span class="text-primary fw-bold"
                                    id="ph_code"></span></p>
                            <p class="mb-2"><strong>Student:</strong> <span id="ph_student"></span></p>
                            <p class="mb-2"><strong>Course:</strong> <span id="ph_course"></span></p>

                            <input type="hidden" id="current_student_id">
                        </div>
                    </div>
                </div>

                {{-- RIGHT: DOCUMENT LIST WITH UPLOAD --}}
                <div class="col-xl-8">
                    <div class="card custom-card border-0 shadow-sm">
                        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                            <div class="card-title">Required Documents</div>
                            <button class="btn btn-sm btn-light border" onclick="$('#btnSearch').click()"><i
                                    class="ri-refresh-line"></i> Refresh List</button>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="ps-4" style="width: 30%;">Document Name</th>
                                            <th style="width: 15%;">Type</th>
                                            <th style="width: 55%;">Status / Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="docsTableBody">
                                        {{-- JS Populates This --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- OPTIONAL: EXTRA UPLOAD SECTION (For docs not in the list) --}}
                    <div class="card custom-card border-0 shadow-sm mt-4">
                        <div class="card-header border-bottom">
                            <div class="card-title text-muted text-uppercase fs-12 fw-bold">Upload Miscellaneous Document
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row g-2 align-items-end">
                                <div class="col-md-5">
                                    <label class="form-label text-xs">Document Name</label>
                                    <input type="text" class="form-control" id="extra_doc_name"
                                        placeholder="e.g. Vaccination Cert">
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label text-xs">File</label>
                                    <input type="file" class="form-control" id="extra_doc_file">
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-primary w-100" onclick="uploadExtraDoc()">Upload</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {

            // 1. Search Function
            $('#btnSearch').click(function() {
                let code = $('#searchInput').val().trim();
                if (code.length < 3) {
                    Swal.fire('Warning', 'Please enter a valid booking code', 'warning');
                    return;
                }

                let btn = $(this);
                btn.prop('disabled', true).text('Searching...');

                $.ajax({
                    url: "{{ route('admin.bookings.documents.search') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        booking_code: code
                    },
                    success: function(res) {
                        btn.prop('disabled', false).text('Search');

                        if (res.status === 'success') {
                            // Populate Details
                            $('#ph_code').text(res.booking.code);
                            $('#ph_student').text(res.booking.student_name);
                            $('#ph_course').text(res.booking.course_name);
                            $('#ph_avatar').text(res.booking.student_name.charAt(0)
                                .toUpperCase());

                            // Store Student ID globally
                            $('#current_student_id').val(res.booking.student_id);

                            // Render Data
                            renderDocumentsTable(res.documents);

                            $('#search-results-area').fadeIn();
                        } else {
                            Swal.fire('Not Found', res.message, 'error');
                            $('#search-results-area').hide();
                        }
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false).text('Search');
                        Swal.fire('Error', 'Server error or invalid code', 'error');
                    }
                });
            });

            // 2. Render Table with Upload Inputs
            function renderDocumentsTable(docs) {
                let tableHtml = '';

                if (docs.length === 0) {
                    tableHtml =
                        '<tr><td colspan="3" class="text-center py-4 text-muted">No documents required for this course.</td></tr>';
                } else {
                    docs.forEach(doc => {
                        let requirement = doc.mandatory ?
                            '<span class="badge bg-danger-subtle text-danger border border-danger">Mandatory</span>' :
                            '<span class="badge bg-secondary-subtle text-secondary border border-secondary">Optional</span>';

                        let actionHtml = '';

                        if (doc.is_uploaded) {
                            // IF UPLOADED: Show View Button
                            actionHtml = `
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge bg-success-subtle text-success border border-success"><i class="ri-checkbox-circle-fill"></i> Uploaded</span>
                                    <a href="${doc.file_url}" target="_blank" class="btn btn-sm btn-light border text-primary ms-auto"><i class="ri-eye-line"></i> View</a>
                                </div>
                            `;
                        } else {
                            // IF NOT UPLOADED: Show File Input & Upload Button
                            // We use a unique ID for the input based on the doc name to grab it later
                            let safeName = doc.name.replace(/[^a-z0-9]/gi, '_');

                            actionHtml = `
                                <div class="d-flex gap-2 table-upload-wrapper">
                                    <input type="file" class="form-control form-control-sm" id="file_${safeName}">
                                    <button class="btn btn-sm btn-primary px-3" onclick="uploadSpecificDoc('${doc.name}', 'file_${safeName}')">
                                        <i class="ri-upload-2-line"></i>
                                    </button>
                                </div>
                            `;
                        }

                        tableHtml += `
                            <tr>
                                <td class="ps-4 fw-medium text-dark">${doc.name}</td>
                                <td>${requirement}</td>
                                <td>${actionHtml}</td>
                            </tr>
                        `;
                    });
                }

                $('#docsTableBody').html(tableHtml);
            }

            // 3. GLOBAL: Upload Specific Document Function
            window.uploadSpecificDoc = function(docName, fileInputId) {
                let fileInput = document.getElementById(fileInputId);
                let studentId = $('#current_student_id').val();

                if (fileInput.files.length === 0) {
                    Swal.fire('Required', 'Please select a file first.', 'warning');
                    return;
                }

                let file = fileInput.files[0];
                let formData = new FormData();
                formData.append('_token', "{{ csrf_token() }}");
                formData.append('student_id', studentId);
                formData.append('document_name', docName);
                formData.append('file', file);

                // Show loading state on the button's parent row or global
                Swal.fire({
                    title: 'Uploading...',
                    text: docName,
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "{{ route('admin.bookings.documents.store') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        if (res.status === 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Done',
                                timer: 1000,
                                showConfirmButton: false
                            });
                            // Refresh the table to show the new status
                            $('#btnSearch').click();
                        } else {
                            Swal.fire('Error', res.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        let err = xhr.responseJSON ? xhr.responseJSON.message : 'Upload failed';
                        Swal.fire('Error', err, 'error');
                    }
                });
            };

            // 4. GLOBAL: Upload Extra Document
            window.uploadExtraDoc = function() {
                let name = $('#extra_doc_name').val();
                let fileInput = document.getElementById('extra_doc_file');

                if (!name || fileInput.files.length === 0) {
                    Swal.fire('Required', 'Please enter Name and select File', 'warning');
                    return;
                }

                // Reuse the logic via a temporary ID approach or just duplicate logic
                let studentId = $('#current_student_id').val();
                let formData = new FormData();
                formData.append('_token', "{{ csrf_token() }}");
                formData.append('student_id', studentId);
                formData.append('document_name', name);
                formData.append('file', fileInput.files[0]);

                Swal.fire({
                    title: 'Uploading...',
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "{{ route('admin.bookings.documents.store') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        if (res.status === 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Done',
                                timer: 1000,
                                showConfirmButton: false
                            });
                            $('#extra_doc_name').val('');
                            $('#extra_doc_file').val('');
                            $('#btnSearch').click();
                        } else {
                            Swal.fire('Error', res.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Error', 'Upload failed', 'error');
                    }
                });
            }

        });
    </script>
@endpush