@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <style>
                            /* Remove the spinner from number input */
                            input[type="number"]::-webkit-outer-spin-button,
                            input[type="number"]::-webkit-inner-spin-button {
                                -webkit-appearance: none;
                                margin: 0;
                            }

                            input[type="number"] {
                                -moz-appearance: textfield;
                                /* Firefox */
                            }
                        </style>

                        @include('elements.alert-error')


                        <form action="{{ isset($topic) ? route('admin.topic.update', $topic->id) : route('admin.topic.store') }}" id="topic_form" method="POST" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">

                            @csrf

                            @if (isset($topic))
                                @method('PUT')
                            @endif

                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#master" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" aria-selected="true" role="tab">General</a>
                                </li>
                                @foreach (config('translatable.locales') as $locale => $language)
                                    <li class="nav-item" data-target-form="#profileForm">
                                        <a href="#{{ $locale }}" data-bs-toggle="tab" aria-expanded="true" class="nav-link" aria-selected="false" role="tab" tabindex="-1">
                                            {{ ucfirst($language) }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="tab-content mb-0 b-0">
                                <div class="tab-pane active show" id="master">
                                    <div class="row mb-3">
                                        <!-- Number_of_questions -->
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label" for="pincode">Number Of Questions: <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" placeholder="Number Of Questions" class="form-control"
                                                    id="number_of_questions" name="number_of_questions"
                                                    value="{{ old('number_of_questions', $topic ? $topic->number_of_questions : '') }}">
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label" for="exam_times">Exam Duration (HH:MM): <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="exam_times" name="exam_times"
                                                    placeholder="HH:MM"
                                                    value="{{ old('exam_times', isset($topic) && $topic->exam_times ? gmdate('H:i', $topic->exam_times * 60) : '') }}">
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label" for="min_purchase_time">Min Purchase Time: <span class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="min_purchase_time"
                                                    name="min_purchase_time" placeholder="Min Purchase Time"
                                                    value="{{ old('min_purchase_time', $topic ? $topic->min_purchase_time : '') }}">

                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label" for="sequence_number">Sequence Number: <span
                                                        class="text-danger">*</span></label>

                                                <input type="number" class="form-control" id="sequence_number"
                                                    name="sequence_number" placeholder="Sequence Number"
                                                    value="{{ old('sequence_number', $topic ? $topic->sequence_number : '') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label" for="url">URL: </label>

                                                <input type="text" class="form-control" id="url" name="url"
                                                    placeholder="URL" value="{{ old('url', $topic ? $topic->url : '') }}">

                                            </div>
                                        </div>


                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label class="form-label" for="practical_hours">Practical Hours: </label>
                                                <input type="number" placeholder="Practical Hours" class="form-control"
                                                id="practical_hours" name="practical_hours"
                                                value="{{ old('practical_hours', $topic ? $topic->practical_hours : '') }}">
                                            </div>
                                        </div>

                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label class="form-label" for="total_theory_hours">Total Theory Hours : </label>
                                                <input type="number" class="form-control" id="total_theory_hours" name="total_theory_hours" min="0" placeholder="Total Theory Hours" value="{{ old('total_theory_hours', isset($topic) && $topic->total_theory_hours ? $topic->total_theory_hours : '') }}">
                                            </div>
                                        </div>

                                        <!-- Status -->
                                        <div class="col-md-2">
                                            <label class="form-label" for="status">Status: </label>
                                            <div class="form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="customSwitch1"
                                                    name="status" value="1"
                                                    {{ old('status', $topic ? $topic->status : 1) == 1 ? 'checked' : '' }}>

                                            </div>
                                        </div>

                                        <!-- Is_cheacking_required -->
                                        <div class="col-md-2">
                                            <label class="form-label" for="is_cheacking_required">Is Cheacking Required:
                                            </label>
                                            <div class="form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="customSwitch1"
                                                    name="is_cheacking_required" value="1"
                                                    {{ old('is_cheacking_required', $topic ? $topic->is_cheacking_required : 0) ? 'checked' : '' }}>

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

                                    <div class="row mb-2">
                                        <div class="col-12">
                                            <label class="form-label">Topic Videos</label>
                                        </div>

                                        <input type="hidden" name="video_required" id="video_required">

                                        <div class="col-12" id="video-wrapper">
                                            @if(isset($topic) && $topic->video->count() > 0)
                                                @foreach($topic->video as $topicVideo)
                                                    <div class="row video-group mb-2" data-video-id="{{ $topicVideo->id }}">
                                                        <input type="hidden" name="video_ids[]" value="{{ $topicVideo->id }}">

                                                        <div class="col-md-6 mb-2">
                                                            <select class="form-control select2" name="video_id[{{ $topicVideo->id }}]">
                                                                <option value="">Select Video</option>
                                                                @foreach($videos as $video)
                                                                    <option value="{{ $video->id }}"
                                                                        {{ $topicVideo->id == $video->id ? 'selected' : '' }}>
                                                                        {{ $video->title }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="col-md-4 mb-2">
                                                            <input type="number"
                                                                name="video_sequence_number[{{ $topicVideo->id }}]"
                                                                class="form-control"
                                                                placeholder="Video Sequence Number"
                                                                value="{{ $topicVideo->pivot->sequence_number }}">
                                                        </div>

                                                        <div class="col-md-2 mb-2">
                                                            <button type="button" class="btn btn-danger remove-video">X</button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="row video-group mb-2" data-video-id="new_0">
                                                    <input type="hidden" name="video_ids[]" value="new_0">

                                                    <div class="col-md-6 mb-2">
                                                        <select class="form-control select2" name="video_id[new_0]">
                                                            <option value="">Select Video</option>
                                                            @foreach($videos as $video)
                                                                <option value="{{ $video->id }}">{{ $video->title }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-md-4 mb-2">
                                                        <input type="number" name="video_sequence_number[new_0]" class="form-control" placeholder="Video Sequence Number">
                                                    </div>

                                                    <div class="col-md-2 mb-2">
                                                        <button type="button" class="btn btn-danger remove-video">X</button>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-12">
                                            <button type="button" class="btn btn-outline-primary" id="add-video">+ Add More Video</button>
                                        </div>
                                    </div>

                                    <div class="row mb-2">
                                        <div class="col-12">
                                            <label class="form-label">Topic PDFs</label>
                                        </div>

                                        <input type="hidden" name="pdf_required" id="pdf_required">

                                        <div class="col-12" id="pdf-wrapper">

                                            @if(isset($topic) && $topic->pdfs->count() > 0)
                                                @foreach($topic->pdfs as $topicPdf)
                                                    <div class="row pdf-group mb-2" data-pdf-id="{{ $topicPdf->id }}">
                                                        <input type="hidden" name="pdf_ids[]" value="{{ $topicPdf->id }}">

                                                        <div class="col-md-6 mb-2">
                                                            <input type="file" name="pdf_file[{{ $topicPdf->id }}]" class="form-control pdf-input" value="{{ $topicPdf->pdf_file }}" accept="application/pdf">
                                                            <small class="text-muted">Existing: {{ $topicPdf->pdf_file }}</small>
                                                        </div>

                                                        <div class="col-md-4 mb-2">
                                                            <input type="number" name="pdf_sequence_number[{{ $topicPdf->id }}]" class="form-control" value="{{ $topicPdf->pdf_sequence_number }}" placeholder="PDF Sequence Number">
                                                        </div>

                                                        <div class="col-md-2 mb-2">
                                                            <button type="button" class="btn btn-danger remove-pdf">X</button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="row pdf-group mb-2" data-pdf-id="new_0">
                                                    <input type="hidden" name="pdf_ids[]" value="new_0">

                                                    <div class="col-md-6 mb-2">
                                                        <input type="file" name="pdf_file[new_0]" class="form-control pdf-input" accept="application/pdf">
                                                    </div>

                                                    <div class="col-md-4 mb-2">
                                                        <input type="number" name="pdf_sequence_number[new_0]" class="form-control" placeholder="PDF Sequence Number">
                                                    </div>

                                                    <div class="col-md-2 mb-2">
                                                        <button type="button" class="btn btn-danger remove-pdf">X</button>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-12">
                                            <button type="button" class="btn btn-outline-primary" id="add-pdf">
                                                + Add More PDF
                                            </button>
                                        </div>
                                    </div>

                                </div>

                                @foreach (config('translatable.locales') as $locale => $language)
                                    <div class="tab-pane fade" id="{{ $locale }}">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <label class="col-3 col-form-label"
                                                        for="name_{{ $language }}">Title:<span
                                                            class="text-danger">*</span></label>
                                                    <div class="col-9">
                                                        <input class="form-control" id="title_{{ $language }}"
                                                            name="title[{{ $language }}]"
                                                            value="{{ old('title.' . $language, $topic ? $topic->getTranslation('title', $language) : '') }}"
                                                            placeholder="Title" />
                                                        {{-- <input type="text" class="form-control"
                                                            id="title_{{ $language }}"
                                                            name="title[{{ $language }}]" placeholder="Title"
                                                            value="{{ old('title.' . $language, $topic ? $topic->getTranslation('title', $language) : '') }}"> --}}
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <label class="col-3 col-form-label"
                                                        for="description_{{ $language }}">Description: <span
                                                            class="text-danger">*</span></label>
                                                    <div class="col-9">
                                                        <textarea class="form-control" id="descriptions_{{ $language }}" name="descriptions[{{ $language }}]"
                                                            placeholder="Description">{{ old('descriptions.' . $language, $topic ? $topic->getTranslation('descriptions', $language) : '') }}</textarea>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="mb-3 text-end">
                                <button class="btn btn-primary mx-2" type="submit" name="submit"
                                    value="add">{{ isset($topic) ? 'Update' : 'Save' }}</button>
                                <a href="{{ route('admin.topic.index') }}" class="btn btn-outline-danger">Cancel</a>
                            </div>

                        </form>

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



@section('scripts')
    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            $.validator.addMethod("requireVideo", function(value, element, param) {
                // check if at least one schedule-group exists
                return $('#video-wrapper .video-group').length > 0;
            }, "At least one video is required.");

            flatpickr("#exam_times", {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i", // 24-hour format
                time_24hr: true
            });
        });

        $(document).ready(function() {

            var rules = {
                number_of_questions: {
                    required: true,
                    digits: true
                },
                exam_times: {
                    required: true,
                    digits: false,
                },
                min_purchase_time: {
                    required: true,
                    digits: true,
                },
                sequence_number: {
                    required: true
                },
                // video_required: {
                //     requireVideo: true
                // },

            };

            var messages = {
                number_of_questions: {
                    required: "Number of questions is required",
                    digits: "Please enter a valid number of questions"
                },
                exam_times: {
                    required: "Exam time is required",
                    digits: "Please enter a valid time in the format HH:MM"
                },
                min_purchase_time: {
                    required: "Minimum purchase time is required",
                    digits: "Please enter a valid time in the format HH:MM"
                },
                sequence_number: {
                    required: "Sequence number is required"
                },
                // video_required: {
                //     requireVideo: "Please add at least one video."
                // },
            };

            @foreach (config('translatable.locales') as $locale => $language)
                rules["title[{{ $language }}]"] = {
                    required: true
                };
                rules["descriptions[{{ $language }}]"] = {
                    required: true
                };

                messages["title[{{ $language }}]"] = {
                    required: "Title is required"
                };
                messages["descriptions[{{ $language }}]"] = {
                    required: "Description is required"
                };
            @endforeach

            $("#topic_form").validate({
                rules: rules,
                messages: messages,
                errorClass: "invalid-feedback",
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('text-danger');
                    error.insertAfter(element);

                    // Display the box alert with error messages
                    let errorMessages = [];
                    $('#topic_form').find('.invalid-feedback').each(function() {
                        errorMessages.push($(this).text());
                    });
                    if (errorMessages.length > 0) {
                        $('#error_messages').html(errorMessages.join('<br>')).show();
                    }
                },
                highlight: function(element, errorClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    $('#error_messages').hide();
                    form.submit();
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-valid').removeClass('is-invalid');
                }
            });

            let videoCounter = $('#video-wrapper .video-group').length;

            // function addVideoValidation($group) {
            //     const select = $group.find('select');
            //     const seq = $group.find('input[type="number"]');

            //     select.rules('add', {
            //         required: true,
            //         messages: { required: "Please select a video" }
            //     });

            //     seq.rules('add', {
            //         required: true,
            //         number: true,
            //         messages: { required: "Video sequence number is required" }
            //     });
            // }

            function addVideoValidation($group) {
                const select = $group.find('select');
                const seq = $group.find('input[type="number"]');

                // Remove any old validation rules first
                select.rules('remove');
                seq.rules('remove');

                // Add listener to video select
                select.on('change', function () {
                    const hasVideo = $(this).val().trim() !== '';

                    // Update sequence field validation based on video selection
                    seq.rules('remove');
                    if (hasVideo) {
                        seq.rules('add', {
                            required: true,
                            number: true,
                            messages: {
                                required: "Please enter sequence number when video is selected"
                            }
                        });
                    }
                });

                // Add listener to sequence input
                seq.on('input change', function () {
                    const hasSeq = $(this).val().trim() !== '';

                    // Update video dropdown validation based on sequence
                    select.rules('remove');
                    if (hasSeq) {
                        select.rules('add', {
                            required: true,
                            messages: {
                                required: "Please select a video when entering a sequence number"
                            }
                        });
                    }
                });

                // Initialize both once on page load (useful in edit mode)
                select.trigger('change');
                seq.trigger('change');
            }

            // Apply validation on existing ones
            $('#video-wrapper .video-group').each(function() {
                addVideoValidation($(this));
            });

            // Add new video row
            $('#add-video').on('click', function () {
                videoCounter++;
                const newId = 'new_' + videoCounter;

                const $group = $(`
                    <div class="row video-group mb-2" data-video-id="${newId}">
                        <input type="hidden" name="video_ids[]" value="${newId}">
                        <div class="col-md-6 mb-2">
                            <select class="form-control select2" name="video_id[${newId}]">
                                <option value="">Select Video</option>
                                @foreach($videos as $video)
                                    <option value="{{ $video->id }}">{{ $video->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-2">
                            <input type="number" name="video_sequence_number[${newId}]" class="form-control" placeholder="Video Sequence Number">
                        </div>
                        <div class="col-md-2 mb-2">
                            <button type="button" class="btn btn-danger remove-video">X</button>
                        </div>
                    </div>
                `);

                $('#video-wrapper').append($group);
                $('.select2').select2(); // reinit select2
                addVideoValidation($group);
                $("#video_required").valid();
            });

            // Remove video row
            $('#video-wrapper').on('click', '.remove-video', function () {
                $(this).closest('.video-group').remove();
                $("#video_required").valid();
            });
        });
    </script>

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

            let pdfCounter = $('#pdf-wrapper .pdf-group').length;

            function isExistingPdf($group) {
                return !isNaN($group.data('pdf-id'));
            }

            function addPdfValidation($group) {

                const pdfInput = $group.find('.pdf-input');
                const seqInput = $group.find('input[type="number"]');
                const existing = isExistingPdf($group);

                pdfInput.rules('remove');
                seqInput.rules('remove');

                /** ----------------------------
                 * PDF CHANGE
                 -----------------------------*/
                pdfInput.on('change', function () {

                    const hasPdf = this.files.length > 0;

                    seqInput.rules('remove');

                    if (hasPdf) {
                        seqInput.rules('add', {
                            required: true,
                            number: true,
                            messages: {
                                required: "Please enter sequence number when PDF is uploaded"
                            }
                        });
                    }
                });

                /** ----------------------------
                 * SEQUENCE CHANGE
                 -----------------------------*/
                seqInput.on('input change', function () {

                    const hasSeq = $(this).val().trim() !== '';

                    pdfInput.rules('remove');

                    // 🔥 ONLY for NEW PDFs
                    if (hasSeq && !existing) {
                        pdfInput.rules('add', {
                            required: true,
                            messages: {
                                required: "Please upload PDF when sequence number is entered"
                            }
                        });
                    }
                });

                // Init only for NEW PDFs
                if (!existing) {
                    pdfInput.trigger('change');
                    seqInput.trigger('change');
                }
            }

            // Existing PDFs
            $('#pdf-wrapper .pdf-group').each(function () {
                addPdfValidation($(this));
            });

            // Add PDF
            $('#add-pdf').on('click', function () {

                pdfCounter++;
                const newId = 'new_' + pdfCounter;

                const $group = $(`
                    <div class="row pdf-group mb-2" data-pdf-id="${newId}">
                        <input type="hidden" name="pdf_ids[]" value="${newId}">
                        <div class="col-md-6 mb-2">
                            <input type="file"
                                name="pdf_file[${newId}]"
                                class="form-control pdf-input"
                                accept="application/pdf">
                        </div>
                        <div class="col-md-4 mb-2">
                            <input type="number"
                                name="pdf_sequence_number[${newId}]"
                                class="form-control"
                                placeholder="PDF Sequence Number">
                        </div>
                        <div class="col-md-2 mb-2">
                            <button type="button" class="btn btn-danger remove-pdf">X</button>
                        </div>
                    </div>
                `);

                $('#pdf-wrapper').append($group);
                addPdfValidation($group);
            });

            // Remove PDF
            $('#pdf-wrapper').on('click', '.remove-pdf', function () {
                $(this).closest('.pdf-group').remove();
            });

        });
    </script>


@endsection