@extends('admin.admin_dashboard')

@section('customcss')
<style>
    .form-card {
        border-radius: 12px;
        overflow: hidden;
    }

    .required {
        color: red;
    }

    .date-wrapper,
    .time-wrapper {
        position: relative;
    }

    .date-wrapper .form-control,
    .time-wrapper .form-control {
        padding-right: 42px;
    }

    .calendar-trigger,
    .clock-trigger {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        color: #374151;
        z-index: 3;
        pointer-events: none;
    }

    .native-hidden-picker {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .info-box {
        background: #eff6ff;
        border-left: 4px solid #2563eb;
        padding: 12px 14px;
        border-radius: 6px;
        font-size: 13px;
        color: #1e3a8a;
    }

    .platform-preview {
        display: inline-block;
        background: #eef2ff;
        color: #4338ca;
        padding: 6px 12px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 600;
    }
</style>
@endsection

@section('admin')

<div class="content-body default-height">
    <div class="container-fluid">

        {{-- Breadcrumb --}}
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}">Home</a>
                </li>

                <li class="breadcrumb-item">
                    <a href="{{ route('admin.online.online-classes.index') }}">
                        Online Classes
                    </a>
                </li>

                <li class="breadcrumb-item active">
                    <a href="javascript:void(0)">Create Online Class</a>
                </li>
            </ol>
        </div>

        {{-- Validation errors --}}
        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="alert"></button>
            </div>
        @endif

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

                <form action="{{ route('admin.online.online-classes.store') }}"
                      method="POST">

                    @csrf

                    <div class="card form-card">
                        <div class="card-header border-0 pb-0">
                            <h4 class="card-title">
                                <i class="fa-solid fa-video me-2"></i>
                                Create Online Class
                            </h4>
                        </div>

                        <div class="card-body">

                            {{-- Info --}}
                            <div class="info-box mb-4">
                                <i class="fa-solid fa-circle-info me-2"></i>

                                Recording link class complete হওয়ার পরে edit page থেকে add করা যাবে।
                            </div>

                            <div class="row">

                                {{-- Session --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        Session
                                        <span class="required">*</span>
                                    </label>

                                    <select name="session_id"
                                            class="form-control default-select wide">

                                        <option value="">Select Session</option>

                                        @foreach($sessions as $session)
                                            <option value="{{ $session->id }}"
                                                {{ old('session_id') == $session->id ? 'selected' : '' }}>
                                                {{ $session->session_name ?? $session->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Class --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        Class
                                        <span class="required">*</span>
                                    </label>

                                    <select name="class_id"
                                            id="class_id"
                                            class="form-control default-select wide">

                                        <option value="">Select Class</option>

                                        @foreach($classes as $class)
                                            <option value="{{ $class->id }}"
                                                {{ old('class_id') == $class->id ? 'selected' : '' }}>
                                                {{ $class->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Section --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        Section
                                        <span class="required">*</span>
                                    </label>

                                    <select name="section_id"
                                            id="section_id"
                                            class="form-control default-select wide">

                                        <option value="">Select Section</option>
                                    </select>
                                </div>

                                {{-- Subject --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        Subject
                                        <span class="required">*</span>
                                    </label>

                                    <select name="subject_id"
                                            id="subject_id"
                                            class="form-control default-select wide">

                                        <option value="">Select Subject</option>
                                    </select>
                                </div>

                                {{-- Teacher --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        Teacher
                                    </label>

                                    <select name="teacher_id"
                                            class="form-control default-select wide">

                                        <option value="">Select Teacher</option>

                                        @foreach($teachers as $teacher)
                                            <option value="{{ $teacher->id }}"
                                                {{ old('teacher_id') == $teacher->id ? 'selected' : '' }}>

                                                {{ $teacher->teacher_name ?? $teacher->name ?? 'Teacher' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Platform --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        Platform
                                        <span class="required">*</span>
                                    </label>

                                    <select name="platform"
                                            id="platform"
                                            class="form-control default-select wide">

                                        <option value="">Select Platform</option>

                                        @foreach($platforms as $key => $label)
                                            <option value="{{ $key }}"
                                                {{ old('platform') == $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Platform preview --}}
                                <div class="col-xl-3 col-md-6 mb-3 d-flex align-items-end">
                                    <div>
                                        <div class="small text-muted mb-1">
                                            Selected Platform
                                        </div>

                                        <div class="platform-preview" id="platform_preview">
                                            Not Selected
                                        </div>
                                    </div>
                                </div>

                                {{-- Class Date --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        Class Date
                                        <span class="required">*</span>
                                    </label>

                                    <div class="date-wrapper">

                                        {{-- Visible input --}}
                                        <input type="text"
                                               id="class_date_display"
                                               class="form-control"
                                               placeholder="dd-mm-yyyy"
                                               autocomplete="off"
                                               value="{{ old('class_date') }}">

                                        {{-- Native picker --}}
                                        <input type="date"
                                               id="class_date_picker"
                                               class="native-hidden-picker">

                                        {{-- Server value --}}
                                        <input type="hidden"
                                               name="class_date"
                                               id="class_date"
                                               value="{{ old('class_date') }}">

                                        <span class="calendar-trigger">
                                            <i class="far fa-calendar"></i>
                                        </span>
                                    </div>
                                </div>

                                {{-- Start Time --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        Start Time
                                        <span class="required">*</span>
                                    </label>

                                    <div class="time-wrapper">

                                        <input type="time"
                                               name="start_time"
                                               class="form-control"
                                               value="{{ old('start_time') }}">

                                        <span class="clock-trigger">
                                            <i class="far fa-clock"></i>
                                        </span>
                                    </div>
                                </div>

                                {{-- End Time --}}
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <label class="form-label">
                                        End Time
                                        <span class="required">*</span>
                                    </label>

                                    <div class="time-wrapper">

                                        <input type="time"
                                               name="end_time"
                                               class="form-control"
                                               value="{{ old('end_time') }}">

                                        <span class="clock-trigger">
                                            <i class="far fa-clock"></i>
                                        </span>
                                    </div>
                                </div>

                                {{-- Meeting Link --}}
                                <div class="col-xl-12 mb-3">
                                    <label class="form-label">
                                        Meeting Link
                                        <span class="required">*</span>
                                    </label>

                                    <input type="url"
                                           name="meeting_link"
                                           class="form-control"
                                           placeholder="https://..."
                                           value="{{ old('meeting_link') }}">
                                </div>

                            </div>

                        </div>

                        {{-- Footer --}}
                        <div class="card-footer border-0">

                            <button type="submit"
                                    class="btn btn-primary">

                                <i class="fa-solid fa-save me-1"></i>
                                Create Online Class
                            </button>

                            <a href="{{ route('admin.online.online-classes.index') }}"
                               class="btn btn-danger light">

                                Cancel
                            </a>

                        </div>
                    </div>

                </form>

            </div>
        </div>

    </div>
</div>

@endsection

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

        /*
        |--------------------------------------------------------------------------
        | Platform preview
        |--------------------------------------------------------------------------
        */
        $('#platform').on('change', function () {

            let text = $('#platform option:selected').text();

            $('#platform_preview').text(
                text ? text : 'Not Selected'
            );
        });

        $('#platform').trigger('change');

        /*
        |--------------------------------------------------------------------------
        | Native date picker bridge
        |--------------------------------------------------------------------------
        */
        setupNativeDatePicker('class_date');

        function setupNativeDatePicker(baseId) {

            const displayInput = document.getElementById(baseId + '_display');
            const pickerInput  = document.getElementById(baseId + '_picker');
            const hiddenInput  = document.getElementById(baseId);

            if (!displayInput || !pickerInput || !hiddenInput) {
                return;
            }

            pickerInput.addEventListener('change', function () {

                hiddenInput.value = pickerInput.value;
                displayInput.value = ymdToDdmmyyyy(pickerInput.value);
            });

            displayInput.addEventListener('click', function () {

                openNativePicker(pickerInput);
            });

            displayInput.addEventListener('input', function () {

                const converted = ddmmyyyyToYmd(displayInput.value.trim());

                if (converted) {
                    hiddenInput.value = converted;
                    pickerInput.value = converted;
                }
            });
        }

        function openNativePicker(input) {

            if (typeof input.showPicker === 'function') {
                input.showPicker();
            } else {
                input.focus();
                input.click();
            }
        }

        function ddmmyyyyToYmd(value) {

            const match = value.match(/^(\d{2})-(\d{2})-(\d{4})$/);

            if (!match) {
                return '';
            }

            return `${match[3]}-${match[2]}-${match[1]}`;
        }

        function ymdToDdmmyyyy(value) {

            const match = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);

            if (!match) {
                return '';
            }

            return `${match[3]}-${match[2]}-${match[1]}`;
        }

        /*
        |--------------------------------------------------------------------------
        | Class wise Section & Subject
        |--------------------------------------------------------------------------
        */
        $('#class_id').on('change', function () {

            let classId = $(this).val();

            loadSectionsAndSubjects(classId);
        });

        if ($('#class_id').val()) {

            loadSectionsAndSubjects(
                $('#class_id').val(),
                "{{ old('section_id') }}",
                "{{ old('subject_id') }}"
            );
        }

        function loadSectionsAndSubjects(classId, sectionId = '', subjectId = '') {

            $('#section_id').html('<option value="">Loading...</option>');
            $('#subject_id').html('<option value="">Loading...</option>');

            refreshSelect();

            if (!classId) {

                $('#section_id').html('<option value="">Select Section</option>');
                $('#subject_id').html('<option value="">Select Subject</option>');

                refreshSelect();

                return;
            }

            /*
            |--------------------------------------------------------------------------
            | Sections
            |--------------------------------------------------------------------------
            */
            $.ajax({
                url: "{{ url('admin/online-classes/class') }}/" + classId + "/sections",
                type: "GET",

                success: function (sections) {

                    let options = '<option value="">Select Section</option>';

                    $.each(sections, function (index, section) {

                        let selected =
                            sectionId == section.id ? 'selected' : '';

                        options += `
                            <option value="${section.id}" ${selected}>
                                ${section.name}
                            </option>
                        `;
                    });

                    $('#section_id').html(options);

                    refreshSelect();
                },

                error: function () {

                    $('#section_id').html(
                        '<option value="">Section load failed</option>'
                    );

                    refreshSelect();
                }
            });

            /*
            |--------------------------------------------------------------------------
            | Subjects
            |--------------------------------------------------------------------------
            */
            $.ajax({
                url: "{{ url('admin/online-classes/class') }}/" + classId + "/subjects",
                type: "GET",

                success: function (subjects) {

                    let options = '<option value="">Select Subject</option>';

                    $.each(subjects, function (index, subject) {

                        let selected =
                            subjectId == subject.id ? 'selected' : '';

                        options += `
                            <option value="${subject.id}" ${selected}>
                                ${subject.name}
                            </option>
                        `;
                    });

                    $('#subject_id').html(options);

                    refreshSelect();
                },

                error: function () {

                    $('#subject_id').html(
                        '<option value="">Subject load failed</option>'
                    );

                    refreshSelect();
                }
            });
        }

        /*
        |--------------------------------------------------------------------------
        | Theme select refresh
        |--------------------------------------------------------------------------
        */
        function refreshSelect() {

            if ($.fn.niceSelect) {

                $('#section_id').niceSelect('update');
                $('#subject_id').niceSelect('update');
            }

            if ($.fn.selectpicker) {

                $('#section_id').selectpicker('refresh');
                $('#subject_id').selectpicker('refresh');
            }
        }
    });
</script>
@endsection