@extends('layouts')
@section('main')
    <div class="loader">
        <div class="spinner">
            <div class="react1"></div>
            <div class="react2"></div>
            <div class="react3"></div>
            <div class="react4"></div>
            <div class="react5"></div>
        </div>
        <div class="pro_loadet">
            <div class="progress mb-3">
                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0"
                    aria-valuemax="100"></div>
            </div>
            <div id="progress-text">0%</div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="card_me extre_pd">
                <div class="top_white_header">
                    <div class="row">
                        <div class="col-auto my-auto">
                            <h3 class="title_red"><a href="{{ route('manage-doctor') }}"><i
                                        class="fa-solid fa-arrow-left me-3"></i></a>{{ $moduleName }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <form id="add_doctor_form" method="post">
                        @csrf
                        <input type="hidden" name="dr_id"
                            value="{{ isset($doctor->id) ? Crypt::encrypt($doctor->id) : '' }}">
                        <input type="hidden" name="add_dr_id" id="add_dr_id">
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm6 col-12">
                                <div class="mb-3">

                                    <label for="doctor_name_id" class="form-label">Doctor Name</label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="doctor_name" id="doctor_name_id">
                                        <option value="" selected>Select Doctor</option>
                                        @foreach ($add_doctor as $key => $val)
                                            <option value="{{ $key }}"
                                                {{ isset($doctor) && $doctor->id == Crypt::decrypt($key) ? 'selected' : '' }}>
                                                {{ $val }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm6 col-12">
                                <div class="mb-3">
                                    <label for="sc_code_id" class="form-label">SC Code</label>
                                    <input type="text" class="form-control" id="sc_code_id" name="sc_code"
                                        value="{{ isset($doctor->sc_code) ? $doctor->sc_code : '' }}"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                                        placeholder="Enter Your SC Code" {{ isset($doctor->sc_code) ? 'readonly' : '' }}>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm6 col-12">
                                <div class="mb-3 select_error">
                                    <label for="speciality_id" class="form-label">Speciality</label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="speciality" id="speciality_id">
                                        <option value="" selected>Select Speciality</option>
                                        @foreach ($speciality as $key => $val)
                                            <option value="{{ $key }}"
                                                {{ isset($doctor->speciality_id) && $doctor->speciality_id == $key ? 'selected' : '' }}>
                                                {{ $val }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm6 col-12">
                                <div class="mb-3">
                                    <label for="clinic_name_id" class="form-label">Clinic Name</label>
                                    <input type="text" class="form-control" id="clinic_name_id" name="clinic_name"
                                        value="{{ isset($doctor->clinic_name) ? $doctor->clinic_name : '' }}"
                                        oninput="this.value = this.value.replace(/[^a-zA-Z0-9\s]/g, '');"
                                        placeholder="Enter Your Clinic Name">
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm6 col-12">
                                <div class="mb-3">
                                    <label for="country_id" class="form-label">Country Name</label>
                                    <input type="text" class="form-control" id="country_id" name="country"
                                        value="{{ isset($doctor->country) ? $doctor->country : '' }}"
                                        oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '');"
                                        placeholder="Enter Your Country Name"
                                        {{ isset($doctor->country) ? 'readonly' : '' }}>
                                </div>
                            </div>
                            {{--                            <div class="col-lg-4 col-md-4 col-sm6 col-12"> --}}
                            {{--                                <div class="mb-3 select_error"> --}}
                            {{--                                    <label for="state_id" class="form-label">State</label> --}}
                            {{--                                    <select class="select2 js-example-basic-single select-label form-control w-100" --}}
                            {{--                                            name="state" id="state_id"> --}}
                            {{--                                        <option value="" selected>Select State</option> --}}
                            {{--                                        @foreach ($state as $key => $val) --}}
                            {{--                                            <option --}}
                            {{--                                                value="{{$key}}" {{ isset($doctor) && $doctor->state == $key ? 'selected' : '' }}>{{$val}}</option> --}}
                            {{--                                        @endforeach --}}
                            {{--                                    </select> --}}
                            {{--                                </div> --}}
                            {{--                            </div> --}}
                            <div class="col-lg-4 col-md-4 col-sm6 col-12">
                                <div class="mb-3">
                                    <label for="city_id" class="form-label">City</label>
                                    <input type="text" class="form-control" id="city_id" name="city"
                                        value="{{ isset($doctor->city) ? $doctor->city : '' }}"
                                        oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '');"
                                        placeholder="Enter Your City Name" {{ isset($doctor->city) ? 'readonly' : '' }}>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4 col-sm6 col-12">
                                <div class="mb-3">
                                    <label for="select_media" class="form-label">Select PDF/Video </label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="select_media" id="select_media">
                                        <option value="" selected>Select PDF/Video</option>
                                        <option value="PDF">PDF</option>
                                        <option value="Video">Video</option>
                                    </select>
                                </div>
                            </div>


                            <div class="w-100"></div>
                            <div id="dynamic" class="row videoSection" style="display: none;">
                                <div class="col-lg-4 col-md-4 col-sm-6 col-12 upload-section" id="div_0">
                                    <div class="white_shadow_rs">
                                        <div class="mb-3 select_error">
                                            <label for="topic_0" class="form-label">Topic</label>
                                            <select
                                                class="select2 js-example-basic-single select-label form-control w-100 topic-select"
                                                id="topic_0" name="topic[]">
                                                <option value="" selected="selected">
                                                    Select Topic
                                                </option>
                                                @foreach ($topic as $key => $val)
                                                    <option value="{{ $key }}">{{ $val }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3" id="preview_0" style="display:none;">
                                            <label class="form-label">Upload
                                                Video</label>
                                            <div class="youtube_black">
                                                <img src="{{ asset('/assets/images/login-left.png') }}"
                                                    class="youtube_thub" width="100%">
                                                <a href="#"><img
                                                        src="{{ asset('/assets/images/close_white.png') }}"
                                                        class="delete_icon"></a>
                                                <a href="#"><img
                                                        src="{{ asset('/assets/images/youtube_play.png') }}"
                                                        class="youtube_icon"></a>
                                            </div>
                                            <span></span>
                                        </div>

                                        <div class="mb-3 file_error drag_upload_photos" id="upload_video_0">
                                            <label for="video_0" class="form-label">Upload
                                                Video</label>
                                            <div class="upload_photo">
                                                <span>
                                                    <img src="{{ asset('/assets/images/upload_icon.png') }}"
                                                        width="45px">
                                                </span>
                                                <p class="m-0"><b>Click</b> To Upload Videos</p>
                                                <span>Drag And Drop Video Files To Upload</span>
                                                {{--                                                <input type="file" class="video-upload" id="video_0" name="video[]" accept=".mp4, video/*"> --}}
                                                <input type="file" class="video-upload" id="video_0" name="video[]"
                                                    accept="video/mp4">
                                                <input type="hidden" class="h_video" id="h_video_0" name="h_video[]">
                                            </div>
                                        </div>

                                        <div class="delete_white_icon">

                                        </div>
                                    </div>
                                    <div class="mt-3 text-end mb-3">
                                        <button type="button" class="btn btn-outline-primary grey_br add-upload-section">
                                            <i class="fa-solid fa-plus me-2"></i>Add More
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div id="dynamicPDF" class="row pdfSection" style="display: none;">
                                <div class="col-lg-4 col-md-4 col-sm-6 col-12 upload-section" id="div_pdf_0">
                                    <div class="white_shadow_rs">
                                        <div class="mb-3 select_error">
                                            <label for="topic_pdf_0" class="form-label">Topic</label>
                                            <select
                                                class="select2 js-example-basic-single select-label form-control w-100 topic-select"
                                                id="topic_pdf_0" name="topic_pdf[]">
                                                <option value="" selected="selected">
                                                    Select Topic
                                                </option>
                                                @foreach ($topicPDF as $key => $val)
                                                    <option value="{{ $key }}">{{ $val }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3" id="preview_pdf_0" style="display:none;">
                                            <label class="form-label">Upload
                                                PDF</label>
                                            <div class="youtube_black">
                                                <img src="{{ asset('/assets/images/login-left.png') }}"
                                                    class="youtube_thub" width="100%">
                                                <a href="#"><img
                                                        src="{{ asset('/assets/images/close_white.png') }}"
                                                        class="delete_icon_pdf"></a>
                                                <a href="#"><img
                                                        src="{{ asset('/assets/images/youtube_play_pdf.png') }}"
                                                        class="youtube_icon"></a>
                                            </div>
                                            <span></span>
                                        </div>

                                        <div class="mb-3 file_error drag_upload_photos" id="upload_pdf_0">
                                            <label for="pdf_0" class="form-label">Upload
                                                PDF</label>
                                            <div class="upload_photo">
                                                <span>
                                                    <img src="{{ asset('/assets/images/upload_icon_pdf.png') }}"
                                                        width="45px">
                                                </span>
                                                <p class="m-0"><b>Click</b> To Upload PDF</p>
                                                <span>Drag And Drop PDF Files To Upload</span>
                                                {{--                                                <input type="file" class="video-upload" id="video_0" name="video[]" accept=".mp4, video/*"> --}}
                                                <input type="file" class="pdf-upload" id="pdf_0" name="pdf[]"
                                                    accept="pdf">
                                                <input type="hidden" class="h_pdf" id="h_pdf_0" name="h_pdf[]">
                                            </div>
                                        </div>

                                        <div class="delete_white_icon">

                                        </div>
                                    </div>
                                    <div class="mt-3 text-end mb-3">
                                        <button type="button"
                                            class="btn btn-outline-primary grey_br add-upload-section-pdf">
                                            <i class="fa-solid fa-plus me-2"></i>Add More
                                        </button>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 text-end">
                                <button type="submit" id="submit" class="btn btn-primary mt-4">Submit</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            // Check if $doctor is set
            @if (isset($doctor))
                $('#doctor_name_id').prop('disabled', true).trigger('change.select2');
                $('#select_media').val('Video').trigger('change.select2');
                $('.videoSection').show();
                equalheight('.file_error');
                equalheight('.white_shadow_rs .title_red');
            @endif

            $('#select_media').on('change', function() {
                const selected = $(this).val();
                if (selected === 'Video') {
                    $('.videoSection').show();
                    $('.pdfSection').hide();
                    equalheight('.file_error');
                    equalheight('.white_shadow_rs .title_red');
                } else if (selected === 'PDF') {
                    $('.pdfSection').show();
                    $('.videoSection').hide();
                    equalheight('.file_error');
                    equalheight('.white_shadow_rs .title_red');
                } else {
                    $('.pdfSection').hide();
                    $('.videoSection').hide();
                    equalheight('.file_error');
                    equalheight('.white_shadow_rs .title_red');
                }
            });
        });
        $('#doctor_name_id').change(function() {
            var selectedDoctorId = $('#doctor_name_id').val();
            if (selectedDoctorId == '') {
                $('#speciality_id').val('').trigger('change');
                // $('#state_id').val('').trigger('change');
                $('#clinic_name_id').val('')
                $('#sc_code_id').val('')
                $('#country_id').val('')
                $('#city_id').val('')
                return false;
            }
            $('#add_dr_id').val(selectedDoctorId)

            $.ajax({
                url: "{{ route('get-doctor-details') }}",
                type: 'POST',
                data: {
                    '_token': "{{ csrf_token() }}",
                    'dr_id': selectedDoctorId
                },
                dataType: "json",
                error: function(error) {
                    $.notify('Error : ', error, "error");
                },
                success: function(data) {
                    const doctor = data.data;
                    if (data.status = 1) {
                        // if(doctor.speciality_id && doctor.speciality_id !== ''){
                        //     $('#speciality_id').val(doctor.speciality_id).trigger('change');
                        //     // $('#speciality_id').prop('readonly',true);
                        //     $('#speciality_id').prop('disabled', true).trigger('change.select2');
                        // }
                        // if(doctor.state && doctor.state !== ''){
                        //     $('#state_id').val(doctor.state).trigger('change');
                        //     // $('#state_id').prop('readonly',true);
                        //     $('#state_id').prop('disabled', true).trigger('change.select2');
                        // }
                        if (doctor.clinic_name && doctor.clinic_name !== '') {
                            $('#clinic_name_id').val(doctor.clinic_name)
                            // $('#clinic_name_id').prop('readonly',true);
                        }
                        if (doctor.sc_code && doctor.sc_code !== '') {
                            $('#sc_code_id').val(doctor.sc_code)
                            $('#sc_code_id').prop('readonly', true);
                        }
                        if (doctor.country && doctor.country !== '') {
                            $('#country_id').val(doctor.country)
                            $('#country_id').prop('readonly', true);
                        }
                        if (doctor.city && doctor.city !== '') {
                            $('#city_id').val(doctor.city)
                            $('#city_id').prop('readonly', true);
                        }
                    }
                }
            });
        })
    </script>
    <script>
        var editTimeCount = {{ isset($totalCount) ? $totalCount : '0' }};
        var pdfEditTimeCount = {{ isset($pdfTotalCount) ? $pdfTotalCount : '0' }};

        var isEdit = {{ isset($doctor) ? 'true' : 'false' }};

        @if (@$topicIds)
            @foreach ($topicIds as $index => $topicId)
                @if ($index == 0)
                    $('#topic_0').val({{ $topicId }}).trigger('change');
                    $('#upload_video_0').hide();
                    var fileName = '{{ $videoNames[$index] }}';
                    $('#preview_0').show().find('span').text(fileName);
                    $('#h_video_0').val(fileName);
                @else

                    var original = $("#div_0");
                    var clone = original.clone(true);

                    var idNumber = '{{ $index }}';
                    clone.attr('id', 'div_' + idNumber);

                    clone.find('[id$=_0]').each(function() {
                        var newId = $(this).attr('id').replace('_0', '_' + idNumber);
                        $(this).attr('id', newId);
                    });

                    var selectedValue = '{{ $topicId }}';
                    clone.find('#topic_' + idNumber).val(selectedValue).trigger('change');
                    var selectLanguages = clone.find('#topic_' + idNumber).val(selectedValue);

                    var fileName = '{{ $videoNames[$index] }}';
                    clone.find('#preview_' + idNumber).show().find('span').text(fileName);
                    clone.find('#h_video_' + idNumber).val(fileName);

                    var deleteButton = $(
                        '<a href="#" class="delete-upload-section"><img src="{{ asset('/assets/images/delete_white.png') }}" class=""></a>'
                    );
                    clone.find('.delete_white_icon').html(deleteButton);

                    selectLanguages.select2();
                    $('.topic-select').last().next().next().remove();


                    var prevIdNumber = idNumber - 1;
                    $('#div_' + prevIdNumber).find('.add-upload-section').hide();
                    clone.find('.add-upload-section').show();

                    $('#dynamic').append(clone);
                @endif
            @endforeach
            $('.topic-select').select2();
        @endif

        @if (@$pdfTopicIds)
            @foreach ($pdfTopicIds as $index => $topicPdfId)
                @if ($index == 0)
                    $('#topic_pdf_0').val({{ $topicPdfId }}).trigger('change');
                    $('#upload_pdf_0').hide();
                    var fileName = '{{ $pdfNames[$index] }}';
                    $('#preview_pdf_0').show().find('span').text(fileName);
                    $('#h_pdf_0').val(fileName);
                @else

                    var original = $("#div_pdf_0");
                    var clone = original.clone(true);

                    var idNumber = '{{ $index }}';
                    clone.attr('id', 'div_pdf_' + idNumber);

                    clone.find('[id$=_pdf_0]').each(function() {
                        var newId = $(this).attr('id').replace('_pdf_0', '_pdf_' + idNumber);
                        $(this).attr('id', newId);
                    });

                    var selectedValue = '{{ $topicPdfId }}';
                    clone.find('#topic_pdf_' + idNumber).val(selectedValue).trigger('change');
                    var selectLanguages = clone.find('#topic_pdf_' + idNumber).val(selectedValue);

                    var fileName = '{{ $pdfNames[$index] }}';
                    clone.find('#preview_pdf_' + idNumber).show().find('span').text(fileName);
                    clone.find('#h_pdf_' + idNumber).val(fileName);

                    var deleteButton = $(
                        '<a href="#" class="delete-upload-section"><img src="{{ asset('/assets/images/delete_white.png') }}" class=""></a>'
                    );
                    clone.find('.delete_white_icon').html(deleteButton);

                    selectLanguages.select2();
                    $('.topic-select').last().next().next().remove();

                    var prevIdNumber = idNumber - 1;
                    $('#div_pdf_' + prevIdNumber).find('.add-upload-section-pdf').hide();
                    clone.find('.add-upload-section-pdf').show();

                    $('#dynamicPDF').append(clone);
                @endif
            @endforeach
            $('.topic-select').last().next().next().remove();

            $('.topic-select').select2();
        @endif



        $(document).ready(function() {
            // Add custom validation method to check file extension
            $.validator.addMethod("fileExtension", function(value, element, param) {
                param = typeof param === "string" ? param.replace(/,/g, '|') :
                    "mp4"; // Only allow mp4 files
                return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
            }, "Please select a valid file type.");

            // Add custom validation method to check file size
            $.validator.addMethod("fileSize", function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param); // Check file size
            }, "The video file size should not exceed 100 MB.");

            // Add validation rules to file input fields
            $("input[type='file']").each(function() {
                $(this).rules("add", {
                    fileExtension: "mp4", // Only allow mp4 files
                    fileSize: 100 * 1024 * 1024 // Specify max file size (25 MB)
                });
            });

            $(document).on("change", "input[type='file']", function() {
                var fileType = $(this).attr('accept') === 'pdf' ? 'pdf' : 'mp4';
                $(this).rules("add", {
                    fileExtension: fileType,
                    fileSize: 100 * 1024 * 1024
                });
            });

            // Initialize form validation
            $("form").validate();
        });
        $(document).ready(function() {
            $(document).on("click", ".delete_icon", function() {
                var uploadSection = $(this).closest('.upload-section'); // Find the closest upload section
                var preview = uploadSection.find('.mb-3[id^="preview_"]').attr(
                    'id'); // Find the preview section within the upload section
                var upload = uploadSection.find('.mb-3[id^="upload_video_"]').attr(
                    'id'); // Find the upload video section within the upload section
                var hidden = uploadSection.find('[id^="h_video_"]').attr(
                    'id'); // Find the upload video section within the upload section

                // Hide the preview section and show the upload video section
                $('#' + preview).hide();
                $('#' + upload).show();


                // Clear the file input value and the displayed file name for the upload section
                $('#' + upload).find('input[type="file"]').val('');
                $('#' + preview).find('span').text('');
                $('#' + hidden).val('');

                return false; // Prevent default behavior of the anchor tag
            });

            $(document).on("click", ".delete_icon_pdf", function() {
                var uploadSection = $(this).closest('.upload-section');
                var preview = uploadSection.find('.mb-3[id^="preview_pdf_"]').attr(
                    'id');
                var upload = uploadSection.find('.mb-3[id^="upload_pdf_"]').attr(
                    'id');
                var hidden = uploadSection.find('[id^="h_pdf_"]').attr('id');

                $('#' + preview).hide();
                $('#' + upload).show();

                $('#' + upload).find('input[type="file"]').val('');
                $('#' + preview).find('span').text('');
                $('#' + hidden).val('');

                return false;
            });


            $(document).on('drop', '.drag_upload_photos', function(event) {
                // event.preventDefault();
                var dt = event.originalEvent.dataTransfer;
                var files = dt.files;

                if (files.length > 0) {
                    var file = files[0];
                    // Check if file is valid
                    if ($(this).find('input[type="file"]').valid()) {
                        var $uploadArea = $(this);
                        var $fileInput = $('#video_' + $uploadArea.attr('id').split('_').pop());
                        handleFileSelection($fileInput, file);
                    }
                }
            });

            // Handle file selection via file input field
            $(document).on('change', 'input[type="file"]', function(event) {
                var input = this;
                var file = input.files[0]; // Access the selected file
                // Check if file is valid
                if ($(input).valid()) {
                    handleFileSelection(input, file); // Call handleFileSelection function
                }
            });

            // Handle file selection function
            /*  function handleFileSelection(input, file) {
                 if (file.size > 100 * 1024 * 1024) {
                     return;
                 }
                 var fileName = file.name;
                 var idNumber = $(input).attr('id').split('_')[1]; // Extract the dynamic number from the ID
                 var previewId = '#preview_' + idNumber;
                 var uploadId = '#upload_video_' + idNumber;
                 var h_video = '#h_video_' + idNumber;

                 // Hide upload section and show preview section
                 $(uploadId).hide();
                 $(previewId).show().find('span').text(fileName);
                 $(h_video).val(fileName);
             } */

            function handleFileSelection(input, file) {
                if (file.size > 100 * 1024 * 1024) {
                    return;
                }

                var fileName = file.name;
                var inputId = $(input).attr('id'); // e.g., video_0 or pdf_2

                var isPDF = inputId.startsWith('pdf_');
                var typePrefix = isPDF ? 'pdf' : 'video';

                var idNumber = inputId.split('_')[1];
                if (typePrefix == 'video') {
                    var previewId = '#preview_' + idNumber;
                } else {
                    var previewId = '#preview_' + typePrefix + '_' + idNumber;
                }
                var uploadId = '#upload_' + typePrefix + '_' + idNumber;
                var hiddenInput = '#h_' + typePrefix + '_' + idNumber;

                $(uploadId).hide();
                $(previewId).show().find('span').text(fileName);
                $(hiddenInput).val(fileName);
            }

            // Counter for adding unique IDs to cloned elements
            if (editTimeCount > 0) {
                var cloneCount = editTimeCount - 1;
            } else {
                var cloneCount = 0;
            }

            if (pdfEditTimeCount > 0) {
                var pdfCloneCount = pdfEditTimeCount - 1;
            } else {
                var pdfCloneCount = 0;
            }

            // Function to clone upload section
            $(".add-upload-section").click(function() {

                // Check if the maximum number of topics is reached
                if (cloneCount < {{ count($topic) - 1 }}) {
                    var lastDivId = $('#dynamic .upload-section:last').attr('id');

                    var lastIdNumber = lastDivId.split('_').pop();
                    var idNumber = parseInt(lastIdNumber) + 1;

                    cloneCount++;

                    var original = $("#div_0");
                    var clone = original.clone(true);

                    clone.attr('id', 'div_' + idNumber);
                    clone.find('[id^=topic_]').attr('id', 'topic_' + idNumber);
                    clone.find('[id^=preview_]').attr('id', 'preview_' + idNumber);
                    clone.find('[id^=upload_video_]').attr('id', 'upload_video_' + idNumber);
                    clone.find('[id^=video_]').attr('id', 'video_' + idNumber);
                    clone.find('[id^=h_video_]').attr('id', 'h_video_' + idNumber);

                    clone.find('#preview_' + idNumber).hide();
                    clone.find('#upload_video_' + idNumber).show();
                    clone.find('input[type="file"]').val('');
                    clone.find('#h_video_' + idNumber).val('');
                    clone.find('#preview_' + idNumber + ' span').text('');
                    clone.find('.upload_photo + label.error').remove();
                    clone.find('.upload_photo + label.error').remove();


                    var deleteButton = $(
                        '<a href="#" class="delete-upload-section"><img src="{{ asset('/assets/images/delete_white.png') }}" class=""></a>'
                    );
                    clone.find('.delete_white_icon').html(deleteButton);
                    clone.appendTo("#dynamic").fadeIn();

                    clone.find('[id^=topic_]').select2();
                    clone.find('[id^=topic_]').last().next().next().remove();
                    $('.topic-select').select2();

                    clone.find('.add-upload-section').show();
                    var prevIdNumber = idNumber - 1;
                    $('#div_' + prevIdNumber).find('.add-upload-section').hide();

                } else {
                    return false;
                }
            });

            // Function to remove upload section
            $(document).on("click", ".delete-upload-section", function() {
                var sectionToDelete = $(this).closest('.upload-section');
                sectionToDelete.remove();
                cloneCount--;

                if (cloneCount > 0) {
                    $('#dynamic .upload-section:last').find('.add-upload-section').show();
                } else {
                    $('#div_0 .add-upload-section').show();
                }
            });

            $(".add-upload-section-pdf").click(function() {
                if (pdfCloneCount < {{ count($topic) - 1 }}) {
                    var lastDivId = $('#dynamicPDF .upload-section:last').attr('id');
                    var lastIdNumber = lastDivId.split('_').pop(); // e.g. 'pdf_0' → '0'
                    var idNumber = parseInt(lastIdNumber) + 1;

                    pdfCloneCount++;

                    var original = $("#div_pdf_0");
                    var clone = original.clone(true);

                    clone.attr('id', 'div_pdf_' + idNumber);
                    clone.find('[id^=topic_pdf_]').attr('id', 'topic_pdf_' + idNumber);
                    clone.find('[id^=preview_pdf_]').attr('id', 'preview_pdf_' + idNumber);
                    clone.find('[id^=upload_pdf_]').attr('id', 'upload_pdf_' + idNumber);
                    clone.find('[id^=pdf_]').attr('id', 'pdf_' + idNumber);
                    clone.find('[id^=h_pdf_]').attr('id', 'h_pdf_' + idNumber);

                    clone.find('#preview_pdf_' + idNumber).hide();
                    clone.find('#upload_pdf_' + idNumber).show();
                    clone.find('input[type="file"]').val('');
                    clone.find('#h_pdf_' + idNumber).val('');
                    clone.find('#preview_pdf_' + idNumber + ' span').text('');
                    clone.find('.upload_photo + label.error').remove();

                    var deleteButton = $(
                        '<a href="#" class="delete-upload-section"><img src="{{ asset('/assets/images/delete_white.png') }}" class=""></a>'
                    );
                    clone.find('.delete_white_icon').html(deleteButton);

                    clone.appendTo("#dynamicPDF").fadeIn();

                    clone.find('[id^=topic_pdf_]').select2();
                    clone.find('[id^=topic_pdf_]').last().next().next().remove();
                    $('.topic-select').select2();

                    clone.find('.add-upload-section-pdf').show();
                    var prevIdNumber = idNumber - 1;
                    $('#div_pdf_' + prevIdNumber).find('.add-upload-section-pdf').hide();
                } else {
                    return false;
                }
            });

            // Function to remove PDF upload section
            $(document).on("click", ".delete-upload-section", function() {
                var sectionToDelete = $(this).closest('.upload-section');
                sectionToDelete.remove();
                pdfCloneCount--;

                if (pdfCloneCount > 0) {
                    $('#dynamicPDF .upload-section:last').find('.add-upload-section-pdf').show();
                } else {
                    $('#div_pdf_0 .add-upload-section-pdf').show();
                }
            });

        });

        $("#add_doctor_form").validate({
            ignore: ".ignore",
            rules: {
                doctor_name: {
                    required: true,
                    // minlength: 1,
                    // maxlength: 25,
                    // pattern: /^[a-zA-Z\s]*$/,
                },
                sc_code: {
                    required: true,
                    minlength: 3,
                    maxlength: 10
                },
                speciality: {
                    required: true
                },
                state: {
                    required: true
                },
                clinic_name: {
                    required: true,
                    minlength: 1,
                    maxlength: 30,
                    pattern: /^[a-zA-Z\s]*$/,
                },
                country: {
                    required: true,
                    minlength: 1,
                    maxlength: 40,
                    pattern: /^[a-zA-Z\s]*$/,
                },
                city: {
                    required: true,
                    minlength: 1,
                    maxlength: 40,
                    pattern: /^[a-zA-Z\s]*$/,
                },
                'topic_pdf[]': {
                    required: !isEdit
                },
                'pdf[]': {
                    required: !isEdit
                },
            },
            messages: {
                doctor_name: {
                    required: "Please enter the doctor's name.",
                    minlength: "Doctor's name must be at least 1 character long.",
                    maxlength: "Doctor's name cannot exceed 25 characters.",
                    pattern: "Doctor's name can only contain letters and spaces."
                },
                sc_code: {
                    required: "Please enter the SC code.",
                    minlength: "SC code must be at least 3 characters long.",
                    maxlength: "SC code cannot exceed 10 characters."
                },
                speciality: {
                    required: "Please select a speciality."
                },
                state: {
                    required: "Please select a state."
                },
                clinic_name: {
                    required: "Please enter the clinic name.",
                    minlength: "Clinic name must be at least 1 character long.",
                    maxlength: "Clinic name cannot exceed 30 characters.",
                    pattern: "Clinic name can only contain letters and spaces."
                },
                country: {
                    required: "Please enter the country name.",
                    minlength: "Country name must be at least 1 character long.",
                    maxlength: "Country name cannot exceed 40 characters.",
                    pattern: "Country name can only contain letters and spaces."
                },
                city: {
                    required: "Please enter the city name.",
                    minlength: "City name must be at least 1 character long.",
                    maxlength: "City name cannot exceed 40 characters.",
                    pattern: "City name can only contain letters and spaces."
                },
                'topic_pdf[]': {
                    required: "Please select a topic."
                },
                'pdf[]': {
                    required: "Please upload a pdf."
                },
            },
            errorPlacement: function(error, element) {
                if (element.is("select")) {
                    error.appendTo(element.closest(".mb-3.select_error"));
                } else if (element.is(":file")) {
                    error.appendTo(element.closest(".mb-3.file_error"));
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#submit").attr('disabled', true);
                $(".loader").css('display', 'block');
                $(".progress").show();

                var formData = new FormData($("#add_doctor_form")[0]);

                $.ajax({
                    url: "{{ route('store-doctor') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total * 100;
                                $(".progress-bar").css('width', percentComplete + '%').attr(
                                    'aria-valuenow', percentComplete);
                                $("#progress-text").text(Math.round(percentComplete) + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    success: function(data) {
                        if (data.status == 0) {
                            $.notify('Something went wrong to add doctor!', "error");
                        } else if (data.status == 1) {
                            $.notify(data.message, "success");
                            setTimeout(function() {
                                window.location = "{{ route('manage-doctor') }}";
                            }, 700);
                        }
                        $("#submit").attr('disabled', false);
                        $(".loader").css('display', 'none');
                        $(".progress").hide();
                        $(".progress-bar").css('width', '0%').attr('aria-valuenow', 0);
                        $("#progress-text").text('0%');
                        form.reset();
                        $('#dataTable').DataTable().ajax.reload();
                    },
                    error: function(response) {
                        $("#submit").attr('disabled', false);
                        $(".loader").css('display', 'none');
                        $(".progress").hide();
                        $(".progress-bar").css('width', '0%').attr('aria-valuenow', 0);
                        $("#progress-text").text('0%');
                        if (response.status === 400) {
                            var errors = response.responseJSON;
                            $.each(errors, function(key, value) {
                                $.notify("Error: " + value[0], 'error');
                            });
                        } else if (response.status === 422) {
                            var errors = response.responseJSON.errors;
                            console.log(errors);
                            $.each(errors, function(key, value) {
                                $.notify("Error: " + value[0], 'error');
                            });
                        } else {
                            $.notify("An unexpected error occurred.", 'error');
                        }
                    }
                });
            }
        });
    </script>
@endsection