@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body default-height">
    <div class="container-fluid">

        {{-- Page Header --}}
        <div class="row page-titles align-items-center">
            <div class="col-md-8">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Form Fill-up</a></li>
                </ol>
                
            </div>
            <div class="col-md-4 text-md-end mt-2 mt-md-0">
                <span class="badge light badge-primary">Module: Form Fillup</span>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="fa-solid fa-circle-check me-2"></i>
                <div>{{ session('success') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <div class="col-xl-12">

                {{-- FILTER BOX --}}
                <div class="cm-content-box box-primary eff-card">
                    <div class="content-title SlideToolHeader d-flex align-items-center justify-content-between">
                        <div class="cpa d-flex align-items-center">
                            <i class="fa-sharp fa-solid fa-filter me-2"></i>
                            <div>
                                <div class="fw-semibold">Filter</div>
                                <div class="text-muted small">Session & Class required</div>
                            </div>
                        </div>

                        <div class="tools d-flex align-items-center gap-2">
                            <span class="badge light badge-warning">Required</span>
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>

                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <div class="row g-3">

                                <div class="col-xl-3 col-sm-6">
                                    <label class="form-label mb-1">Session <span class="text-danger">*</span></label>
                                    <select id="session_id" class="form-control default-select h-auto wide">
                                        <option value="">Select Session</option>
                                        @foreach($sessions as $s)
                                            <option value="{{ $s->id }}">{{ $s->name ?? $s->title ?? $s->id }}</option>
                                        @endforeach
                                    </select>
                                    <div class="text-muted small mt-1">Choose academic session</div>
                                </div>

                                <div class="col-xl-3 col-sm-6">
                                    <label class="form-label mb-1">Class <span class="text-danger">*</span></label>
                                    <select id="class_id" class="form-control default-select h-auto wide">
                                        <option value="">Select Class</option>
                                        @foreach($classes as $c)
                                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                                        @endforeach
                                    </select>
                                    <div class="text-muted small mt-1">Group/Section loads by class</div>
                                </div>

                                <div class="col-xl-3 col-sm-6">
                                    <label class="form-label mb-1">Group <span class="text-muted">(Optional)</span></label>
                                    <select id="group_id" class="form-control default-select h-auto wide">
                                        <option value="">All Group</option>
                                    </select>
                                </div>

                                <div class="col-xl-3 col-sm-6">
                                    <label class="form-label mb-1">Section <span class="text-muted">(Optional)</span></label>
                                    <select id="section_id" class="form-control default-select h-auto wide">
                                        <option value="">All Section</option>
                                    </select>
                                </div>

                                <div class="col-xl-3 col-sm-6">
                                    <label class="form-label mb-1">Sort By</label>
                                    <select id="sort_by" class="form-control default-select h-auto wide">
                                        <option value="class_roll" selected>Class Roll</option>
                                        <option value="board_roll">Board Roll</option>
                                    </select>
                                </div>

                                <div class="col-xl-9 col-sm-6 d-flex align-items-end justify-content-xl-end">
                                    <div class="d-flex gap-2 flex-wrap mt-2 mt-xl-0">
                                        <button class="btn btn-primary eff-btn" id="btnLoad" type="button">
                                            <i class="fa fa-filter me-1"></i><span class="btn-text">Filter</span>
                                        </button>
                                        <button class="btn btn-danger light eff-btn" id="btnReset" type="button">
                                            <i class="fa-solid fa-rotate-left me-1"></i>Remove Filter
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                {{-- LIST BOX --}}
                <form method="POST" action="{{ route('form_fillup.ssc.submit') }}" id="fillupForm" enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="session_id" id="f_session_id">
                    <input type="hidden" name="class_id" id="f_class_id">
                    <input type="hidden" name="group_id" id="f_group_id">
                    <input type="hidden" name="section_id" id="f_section_id">

                    <div class="cm-content-box box-primary eff-card mt-3">
                        <div class="content-title SlideToolHeader d-flex align-items-center justify-content-between">
                            <div class="cpa d-flex align-items-center">
                                <i class="fa-solid fa-file-lines me-2"></i>
                                <div>
                                    <div class="fw-semibold">Form Fillup (eFF) Probable List</div>
                                    <div class="text-muted small">
                                        Fill Reg/Board Roll/Subjects & Fee info
                                        <span class="ms-2 text-muted" id="summaryText"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-none d-md-flex gap-2">
                                <span class="badge light badge-info">Inline Subject Preview</span>
                                <span class="badge light badge-success">Bulk Submit</span>
                            </div>
                        </div>

                        <div class="cm-content-body form excerpt">
                            <div class="card-body pb-3">
                                <div class="table-responsive eff-table-wrap">
                                    <table class="table table-bordered eff-table" id="studentsTable">
                                        <thead class="eff-thead">
                                            <tr>
                                                <th style="width:150px;">SL.No<br><span class="text-muted small">Reg.No</span></th>
                                                <th style="width:170px;">Type<br><span class="text-muted small">Session</span></th>
                                                <th>Name<br><span class="text-muted small">Father / Mother</span></th>
                                                <th style="width:210px;">Profile<br><span class="text-muted small">Rolls</span></th>
                                                <th style="width:200px;">Academic<br><span class="text-muted small">Shift / Section / Group</span></th>
                                                <th style="width:360px;">Subjects<br><span class="text-muted small">Codes + Preview</span></th>
                                                <th style="width:170px;">Fee<br><span class="text-muted small">Status + Amount</span></th>
                                                <th style="width:150px;">Image<br><span class="text-muted small">Upload Photo</span></th>
                                                <th style="width:260px;">Duplicate Row<br><span class="text-muted small">Paste copied table row</span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="9" class="text-center text-muted py-4">\n                                                    <i class="fa-solid fa-filter me-2"></i>
                                                    Please select filters and click <b>Filter</b>.
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-3 eff-submitbar">
                                    <div class="text-muted small">
                                        Tip: Subject codes separated by space (e.g., <b>101 102 103</b>)
                                    </div>
                                    <button type="submit" class="btn btn-success px-4">
                                        <i class="fa fa-save me-1"></i>Submit
                                    </button>
                                </div>

                            </div>
                        </div>

                    </div>
                </form>

            </div>
        </div>

    </div>
</div>
@endsection

@section('customcss')
<style>
    .eff-card { border-radius: 12px; overflow: hidden; }
    .page-title { font-weight: 700; letter-spacing: .2px; }
    .eff-btn { min-width: 130px; }
    .eff-table-wrap { border-radius: 12px; overflow: auto; border: 1px solid rgba(0,0,0,.06); }
    .eff-table { margin-bottom: 0; background: #fff; }
    .eff-thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; }
    .eff-table td, .eff-table th { vertical-align: top; }
    .eff-submitbar { padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.12); }
    .badge.light { border-radius: 999px; }
    .form-control { border-radius: 10px; }

    .form-control-sm{ border-radius: 10px; }
    textarea.form-control { resize: vertical; min-height: 52px; }

    .eff-mini-card{
        background: #f8fafc;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 10px;
        padding: 8px 10px;
    }
    .eff-name{
        line-height: 1.25;
        font-size: 14px;
    }
    .eff-kv{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .eff-subject-preview{
        background: #fbfbfd;
        border: 1px dashed rgba(0,0,0,.15);
        border-radius: 10px;
        padding: 10px;
        min-height: 54px;
    }
</style>
@endsection

@section('customjs')
<script>
$(document).ready(function () {

    function escapeHtml(text) {
        const s = (text === null || text === undefined) ? '' : String(text);
        return s.replace(/[&<>"']/g, function(m) {
            return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]);
        });
    }

    function syncHiddenFilters() {
        $('#f_session_id').val($('#session_id').val());
        $('#f_class_id').val($('#class_id').val());
        $('#f_group_id').val($('#group_id').val());
        $('#f_section_id').val($('#section_id').val());
    }

    function loadGroupsSections() {
        const classId = $('#class_id').val();
        $('#group_id').html('<option value="">All Group</option>');
        $('#section_id').html('<option value="">All Section</option>');

        if (!classId) return;

        $.get("{{ route('form_fillup.ajax.groups') }}", {class_id: classId})
            .done(function(res){
                (res.data || []).forEach(r => $('#group_id').append(`<option value="${r.id}">${escapeHtml(r.name)}</option>`));
            });

        $.get("{{ route('form_fillup.ajax.sections') }}", {class_id: classId})
            .done(function(res){
                (res.data || []).forEach(r => $('#section_id').append(`<option value="${r.id}">${escapeHtml(r.name)}</option>`));
            });
    }

    /**
     * ✅ Subject lookup (PER ROW debounce)
     */
    function lookupSubjects($row, codesText) {
        const $ta = $row.find('.subject-codes');
        const cleaned = (codesText || '').trim();

        if (cleaned === '') {
            $row.find('.subject-names').text('—');
            $row.find('.eff-lookup-status').text('—');
            return;
        }

        const oldTimer = $ta.data('timer');
        if (oldTimer) clearTimeout(oldTimer);

        const newTimer = setTimeout(function () {

            // ✅ user-friendly status
            $row.find('.eff-lookup-status').text('Looking up...');

            $.ajax({
                url: "{{ route('form_fillup.ajax.subjects_by_codes') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    codes: cleaned
                }
            })
            .done(function(res){
                const list = (res.data || []);
                if (!list.length) {
                    $row.find('.subject-names').text('— (No match)');
                    $row.find('.eff-lookup-status').text('No match');
                    return;
                }
                $row.find('.subject-names').text(list.map(x => `${x.code} - ${x.name}`).join(', '));
                $row.find('.eff-lookup-status').text('Matched');
            })
            .fail(function(xhr){
                console.log('subjects lookup failed', xhr.status, xhr.responseText);
                $row.find('.subject-names').text('Lookup failed');
                $row.find('.eff-lookup-status').text('Failed');
            });

        }, 250);

        $ta.data('timer', newTimer);
    }

    // dynamic rows => delegated
    $(document).on('input', '.subject-codes', function(){
        const $row = $(this).closest('tr');
        lookupSubjects($row, $(this).val());
    });

    function sortTableByBoardRoll() {
        const $tbody = $('#studentsTable tbody');
        const rows = $tbody.find('tr.data-row').get();

        rows.sort(function(a, b) {
            const av = $(a).find('.board_roll_input').val() || '';
            const bv = $(b).find('.board_roll_input').val() || '';
            const an = av.trim() === '' ? Number.POSITIVE_INFINITY : parseInt(av, 10);
            const bn = bv.trim() === '' ? Number.POSITIVE_INFINITY : parseInt(bv, 10);
            return an - bn;
        });

        rows.forEach(r => $tbody.append(r));
    }

    function renderStudents(students) {
        const $tbody = $('#studentsTable tbody');
        $tbody.empty();

        if (!students.length) {
            $('#summaryText').text('');
            $tbody.append(`<tr><td colspan="9" class="text-center text-muted py-4">No students found.</td></tr>`);
            return;
        }

        $('#summaryText').text(`(Total Student: ${students.length})`);
        const sessionText = $('#session_id option:selected').text();

        students.forEach((s, i) => {
            const sl = i + 1;

            const name = (s.student_name_english || '') + (s.student_name_bangla ? ' / ' + s.student_name_bangla : '');
            const father = s.father_name_english || '';
            const mother = s.mother_name_english || '';

            const gender = s.gender || '';
            const version = s.version || '';
            const classRoll = s.class_roll ?? '';

            const shift = s.shift_name || s.shift_text || '';
            const section = s.section_name || '';
            const group = s.group_name || '';

            // ✅ previous saved values
            const prevBoardRoll = s.prev_board_roll ?? '';
            const prevRegNo = s.prev_reg_no ?? '';
            const prevType = s.prev_type ?? 'REGULAR';
            const prevCodes = s.prev_subject_codes ?? '';
            const prevFeeStatus = s.prev_fee_status ?? 'Pending';
            const prevFeeAmount = (s.prev_fee_amount ?? 0);
            const prevDupText = s.prev_duplicate_row_text ?? '';

            $tbody.append(`
                <tr class="data-row" data-student-id="${s.student_id}">
                    <!-- SL + Reg -->
                    <td>
                        <div class="d-flex align-items-start justify-content-between">
                            <div class="text-primary fw-bold">${sl}</div>
                            <span class="badge light badge-primary">ID: ${escapeHtml(s.student_id)}</span>
                        </div>

                        <input type="hidden" name="rows[${i}][student_id]" value="${s.student_id}">
                        <label class="text-muted small mt-2 mb-1 d-block">Reg No</label>
                        <input class="form-control form-control-sm"
                               name="rows[${i}][reg_no]"
                               placeholder="Enter Reg No"
                               value="${escapeHtml(prevRegNo)}">
                    </td>

                    <!-- Type + Session -->
                    <td>
                        <label class="text-muted small mb-1 d-block">Type</label>
                        <select class="form-control form-control-sm" name="rows[${i}][type]">
                            <option value="REGULAR" ${prevType==='REGULAR'?'selected':''}>REGULAR</option>
                            <option value="IMPROVEMENT" ${prevType==='IMPROVEMENT'?'selected':''}>IMPROVEMENT</option>
                            <option value="IRREGULAR" ${prevType==='IRREGULAR'?'selected':''}>IRREGULAR</option>
                        </select>

                        <div class="eff-mini-card mt-2">
                            <div class="text-muted small">Session</div>
                            <div class="fw-semibold">${escapeHtml(sessionText)}</div>
                        </div>
                    </td>

                    <!-- Name -->
                    <td>
                        <div class="fw-semibold eff-name">${escapeHtml(name)}</div>
                        <div class="text-muted small mt-1">
                            <div><span class="me-1">Father:</span>${escapeHtml(father)}</div>
                            <div><span class="me-1">Mother:</span>${escapeHtml(mother)}</div>
                        </div>
                    </td>

                    <!-- Profile + Rolls -->
                    <td>
                        <div class="d-flex flex-wrap gap-1">
                            <span class="badge light badge-info">${escapeHtml(gender || '—')}</span>
                            <span class="badge light badge-secondary">${escapeHtml(version || '—')}</span>
                        </div>

                        <div class="mt-2">
                            <div class="eff-kv">
                                <span class="text-muted small">Class Roll</span>
                                <span class="badge light badge-primary">${escapeHtml(classRoll)}</span>
                            </div>

                            <label class="text-muted small mt-2 mb-1 d-block">Board Roll</label>
                            <input class="form-control form-control-sm board_roll_input"
                                   name="rows[${i}][board_roll]"
                                   placeholder="Enter Board Roll"
                                   value="${escapeHtml(prevBoardRoll)}">
                        </div>
                    </td>

                    <!-- Academic info -->
                    <td>
                        <div class="eff-kv">
                            <span class="text-muted small">Shift</span>
                            <span class="fw-semibold">${escapeHtml(shift || '—')}</span>
                        </div>
                        <div class="eff-kv mt-1">
                            <span class="text-muted small">Section</span>
                            <span class="fw-semibold">${escapeHtml(section || '—')}</span>
                        </div>
                        <div class="eff-kv mt-1">
                            <span class="text-muted small">Group</span>
                            <span class="fw-semibold">${escapeHtml(group || '—')}</span>
                        </div>
                    </td>

                    <!-- Subjects -->
                    <td>
                        <label class="text-muted small mb-1 d-block">Subject Codes</label>
                        <textarea class="form-control form-control-sm subject-codes"
                                  name="rows[${i}][subject_codes]"
                                  rows="2"
                                  placeholder="e.g. 101 102 103 104">${escapeHtml(prevCodes)}</textarea>

                        <div class="eff-subject-preview mt-2">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="text-muted small">Preview</div>
                                <div class="text-muted small eff-lookup-status">—</div>
                            </div>
                            <div class="subject-names small mt-1">—</div>
                        </div>
                    </td>

                    <!-- Fee -->
                    <td>
                        <label class="text-muted small mb-1 d-block">Fee Status</label>
                        <select class="form-control form-control-sm mb-2" name="rows[${i}][fee_status]">
                            <option value="Pending" ${prevFeeStatus==='Pending'?'selected':''}>Pending</option>
                            <option value="Complete" ${prevFeeStatus==='Complete'?'selected':''}>Complete</option>
                            <option value="Incomplete" ${prevFeeStatus==='Incomplete'?'selected':''}>Incomplete</option>
                            <option value="Checking" ${prevFeeStatus==='Checking'?'selected':''}>Checking</option>
                            <option value="Processing" ${prevFeeStatus==='Processing'?'selected':''}>Processing</option>
                        </select>

                        <label class="text-muted small mb-1 d-block">Amount</label>
                        <input class="form-control form-control-sm"
                               name="rows[${i}][fee_amount]"
                               placeholder="0"
                               value="${escapeHtml(prevFeeAmount)}">
                    </td>

                    <!-- Image -->
                    <td>
                        <label class="text-muted small mb-1 d-block">Photo</label>
                        <input type="file" 
                               class="form-control form-control-sm mb-2" 
                               name="rows[${i}][image]"
                               accept="image/*"
                               onchange="previewImage(this, ${i})">
                        
                        <div id="image-preview-${i}" class="mt-2" style="display:none;">
                            <img src="" alt="Preview" style="max-width:100%; max-height:80px; border-radius:4px;">
                        </div>
                        
                        ${s.prev_image ? `
                            <div class="mt-2">
                                <small class="text-success">
                                    <i class="fa fa-check-circle me-1"></i>Uploaded
                                </small>
                                <a href="/storage/${escapeHtml(s.prev_image)}" target="_blank" class="d-block">
                                    <img src="/storage/${escapeHtml(s.prev_image)}" alt="Current" 
                                         style="max-width:100%; max-height:80px; border-radius:4px; margin-top:4px;">
                                </a>
                            </div>
                        ` : ''}
                    </td>

                    <!-- Duplicate Row -->
                    <td>
                        <label class="text-muted small mb-1 d-block">Paste Row</label>
                        <textarea class="form-control form-control-sm"
                                  name="rows[${i}][duplicate_row_text]"
                                  rows="4"
                                  placeholder="Copy a full row from table and paste here...">${escapeHtml(prevDupText)}</textarea>

                        <div class="text-muted small mt-1">
                            Tip: 1st image এর টেবিল থেকে row copy করে paste করুন
                        </div>
                    </td>
                </tr>
            `);

            // ✅ auto lookup subject names for every row having previous codes
            if ((prevCodes || '').trim() !== '') {
                const $row = $('#studentsTable tbody tr.data-row:last');
                lookupSubjects($row, prevCodes);
            }
        });

        if ($('#sort_by').val() === 'board_roll') {
            sortTableByBoardRoll();
        }
    }

    // events
    $('#class_id').on('change', loadGroupsSections);

    $('#btnLoad').on('click', function () {
        const sessionId = $('#session_id').val();
        const classId = $('#class_id').val();

        if (!sessionId || !classId) {
            alert('Session and Class required!');
            return;
        }

        const $btn = $(this);
        $btn.prop('disabled', true);
        $btn.find('.btn-text').text('Loading...');

        syncHiddenFilters();

        $.get("{{ route('form_fillup.ajax.students') }}", {
            session_id: sessionId,
            class_id: classId,
            group_id: $('#group_id').val(),
            section_id: $('#section_id').val()
        })
        .done(function(res){
            renderStudents(res.data || []);
        })
        .fail(function(xhr){
            console.log('students ajax failed', xhr.status, xhr.responseText);
            alert('Failed to load students. Check console.');
        })
        .always(function(){
            $btn.prop('disabled', false);
            $btn.find('.btn-text').text('Filter');
        });
    });

    $('#btnReset').on('click', function(){
        $('#session_id').val('');
        $('#class_id').val('');
        $('#group_id').html('<option value="">All Group</option>');
        $('#section_id').html('<option value="">All Section</option>');
        $('#sort_by').val('class_roll');
        $('#summaryText').text('');
        $('#studentsTable tbody').html(`
            <tr>
                <td colspan="9" class="text-center text-muted py-4">
                    <i class="fa-solid fa-filter me-2"></i>
                    Please select filters and click <b>Filter</b>.
                </td>
            </tr>
        `);
        syncHiddenFilters();
    });

    $('#sort_by').on('change', function(){
        if ($(this).val() === 'board_roll') sortTableByBoardRoll();
    });

    $(document).on('input', '.board_roll_input', function(){
        if ($('#sort_by').val() === 'board_roll') sortTableByBoardRoll();
    });

    $('#fillupForm').on('submit', function(){
        syncHiddenFilters();
    });

    // Image preview function
    window.previewImage = function(input, index) {
        const previewDiv = document.getElementById(`image-preview-${index}`);
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewDiv.style.display = 'block';
                previewDiv.querySelector('img').src = e.target.result;
            };
            reader.readAsDataURL(input.files[0]);
        } else {
            previewDiv.style.display = 'none';
        }
    };

});
</script>
@endsection