@extends('layouts.master')
@section('title')
    @lang('Title')
@endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('/assets/sweetalert2/sweetalert2.min.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
    <style>
        .pac-container {
            z-index: 100000 !important;
        }
    </style>
@endsection
@section('content')
   <div class="page-header">
        <h1>Doctor</h1>
        <div>
            <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('doctor.index') }}">Doctor</a></li>
                <li class="breadcrumb-item active">Create</li>
            </ol>
</div>
    </div><!-- End Page Title -->

        <div class="row">
            <div class="col-lg-12">
                <!-- general form elements disabled -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Doctor</h5>
                        <!-- will be used to show any messages -->
                        @if ($message = Session::has('success'))
                            <div class="alert alert-success alert-block">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                <strong>{{ $message }}</strong>
                            </div>
                        @endif
                        <form enctype="multipart/form-data" class="needs-validation-Doctor" role="form" id="task_add"
                            method="post" name="task_add" action="{{ route('doctor.store') }}" novalidate>
                            {{ csrf_field() }}
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <!-- Bordered Tabs -->
                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="general-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-general" type="button" role="tab"
                                        aria-controls="general" aria-selected="true">General Info</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="innovation-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-innovation" type="button" role="tab"
                                        aria-controls="innovation" aria-selected="false">Innovation & Awards</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-general" role="tabpanel"
                                    aria-labelledby="general-tab">
                                         <div class="row mb-3">
                                        <label for="name" class="col-sm-2 col-form-label">Department</label>
                                        <div class="col-sm-10">
                                               <select required class="form-control select2-show-search form-select" data-placeholder="Choose one" id="department" name="department">
                                                 <!-- <option value="" >Choose one</option> -->
                                                  @foreach($department as $resdepartment)                                                   
                                                    <option value="{{ $resdepartment->id }}">{{ $resdepartment->name }}</option>
                                                  @endforeach                                                                                                       
                                                </select>
                                            @if ($errors->has('department'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('department') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                     
                                    <div class="row mb-3">
                                        <label for="name" class="col-sm-2 col-form-label">Name</label>
                                        <div class="col-sm-10">
                                            <input name="name" id="name" type="text" class="form-control"
                                                placeholder="Doctor Name" required>
                                            @if ($errors->has('name'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('name') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="designation" class="col-sm-2 col-form-label">Designation</label>
                                        <div class="col-sm-10">
                                            <input required name="designation" id="designation" type="text" class="form-control"
                                                placeholder="Designation">
                                            @if ($errors->has('designation'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('designation') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="hospital_location" class="col-sm-2 col-form-label">Hospital / Location</label>
                                        <div class="col-sm-10">
                                            <input required name="hospital_location" id="hospital_location" type="text" class="form-control"
                                                placeholder="Hospital / Location">
                                            @if ($errors->has('hospital_location'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('hospital_location') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="years_experience" class="col-sm-2 col-form-label">Years of Experience</label>
                                        <div class="col-sm-10">
                                            <input name="years_experience" id="years_experience" type="text" class="form-control"
                                                placeholder="Years of Experience">
                                            @if ($errors->has('years_experience'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('years_experience') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="languages_spoken" class="col-sm-2 col-form-label">Languages Spoken</label>
                                        <div class="col-sm-10">
                                            <input name="languages_spoken" id="languages_spoken" type="text" class="form-control"
                                                placeholder="Languages Spoken">
                                            @if ($errors->has('languages_spoken'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('languages_spoken') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="education" class="col-sm-2 col-form-label">Education</label>
                                        <div class="col-sm-10">
                                            <textarea rows="4" name="education" id="education" class="form-control" placeholder="Education" required></textarea>
                                            @if ($errors->has('education'))
                                                <div class="alert alert-danger">{{ $errors->first('education') }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="overview" class="col-sm-2 col-form-label">Overview</label>
                                        <div class="col-sm-10">
                                            <textarea rows="4" name="overview" id="overview" type="text" class="form-control"
                                                placeholder="Overview"></textarea>
                                            @if ($errors->has('overview'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('overview') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="meta_title" class="col-sm-2 col-form-label">Meta Title</label>
                                        <div class="col-sm-10">
                                            <input name="meta_title" id="meta_title" type="text" class="form-control"
                                                placeholder="Meta Title">
                                            @if ($errors->has('meta_title'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('meta_title') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="meta_description" class="col-sm-2 col-form-label">Meta Description</label>
                                        <div class="col-sm-10">
                                            <textarea rows="4" name="meta_description" id="meta_description" type="text" class="form-control"
                                                placeholder="Meta Description"></textarea>
                                            @if ($errors->has('meta_description'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('meta_description') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="document">Upload image (max {{ $gallerycatRes->image_size }} MB), ({{ $gallerycatRes->image_width }} × {{ $gallerycatRes->image_height }} px)</label>
                                        <div class="needsclick dropzone" id="document-dropzone"></div>
                                        <div id="fileLimitMessage" class="text-danger mt-2" style="display: none;">
                                            You can only upload up to 1 files!
                                        </div>
                                    </div>
                                </div>
                          
                                <div class="tab-pane fade" id="bordered-innovation" role="tabpanel"
                                    aria-labelledby="innovation-tab">
                                    <div id="innovations_container">
                                        <div class="row mb-3 innovation-row">
                                            <label class="col-sm-2 col-form-label">Surgical Innovations and Highlights</label>
                                            <div class="col-sm-9">
                                                <textarea rows="2" name="innovations[]" class="form-control" placeholder="Surgical Innovations and Highlights"></textarea>
                                            </div>
                                            <div class="col-sm-1">
                                                <button type="button" class="btn btn-success add-innovation"><i class="ion-plus" data-bs-toggle="tooltip" aria-label="ion-plus" data-bs-original-title="ion-plus"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                @php
                                $awards_recognitions=awards();                                
                                @endphp
                              <div id="awards_container">
    @foreach($awards_recognitions as $key => $label)
        <div class="row mb-3 award-row">
            <label class="col-sm-2 col-form-label">{{ $label }}</label>

            <div class="col-sm-9">
                <textarea rows="2"
                          name="awards[{{ $key }}][]"
                          class="form-control"
                          placeholder="{{ $label }}"></textarea>
            </div>

            <div class="col-sm-1">
                <button type="button" class="btn btn-success add-award">
                    <i class="ion-plus"></i>
                </button>
            </div>
        </div>
    @endforeach
</div>
                                </div>
                            </div><!-- End Bordered Tabs -->

                            <div id="display_announcements"></div>
                            <div class="card-footer">
                                <button type="submit" name="task_submit" id="task_submit"
                                    class="btn btn-primary">Submit</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/tinymce/tinymce.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
    <script>
        $("#formFile").change(function() {
            var file = this.files[0];
            if (file) {
                var fileType = file.type;
                var validImageTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
                if ($.inArray(fileType, validImageTypes) < 0) {
                    $("#fileError").text("Only image files (JPG, PNG, GIF, WEBP) are allowed.").show();
                    $("#previewContainer").hide();
                    this.value = ""; // Reset file input
                    return;
                }
                var reader = new FileReader();
                reader.onload = function(e) {
                    $("#imagePreview").attr("src", e.target.result);
                    $("#previewContainer").show();
                    $("#fileError").hide();
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
    @include('admin.dropzone-single-create')
    <script>
        $('#is_featured').change(function() {
            var is_checked = $('#is_featured').prop('checked');
            // alert(is_checked);
            if (is_checked) {
                $('#parent_cat_div').addClass('d-none');
                $('#parent_id').val('');
            } else {
                $('#parent_cat_div').removeClass('d-none');
            }
        })
    </script>
    <script>
        // tinymce.init({
        //     selector: '#education, #innovations, #awards', // Use the selector for the textarea you want to transform
        //     plugins: 'autoresize lists link', // Added lists for the innovations/awards bullets
        //     toolbar: 'undo redo | bold italic | bullist numlist | link',
        //     menubar: false,
        //     statusbar: false,
        //     autoresize_bottom_margin: 16,
        // });
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
            'use strict'
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.querySelectorAll('.needs-validation-Doctor')
            // Loop over them and prevent submission
            Array.prototype.slice.call(forms)
                .forEach(function(form) {
                    form.addEventListener('submit', function(event) {
                        if (!form.checkValidity() || department.value === "") {
                            event.preventDefault();
                            event.stopPropagation();
                        } else {
                            event.preventDefault();
                            $('#task_add').submit()
                        }
                        form.classList.add('was-validated')
                    }, false)
                })
        })()
        $('#department').on('change', function () {
    if ($(this).val()) {
        $(this).removeClass('is-invalid');
    } else {
        $(this).addClass('is-invalid');
    }
});

    </script>
    <script>
        $(document).ready(function() {
            $('.add-innovation').click(function() {
                var html = '<div class="row mb-3 innovation-row"><label class="col-sm-2 col-form-label"></label><div class="col-sm-9"><textarea rows="2" name="innovations[]" class="form-control" placeholder="Surgical Innovations and Highlights"></textarea></div><div class="col-sm-1"><button type="button" class="btn btn-danger remove-innovation"><i class="ion-minus"></i></button></div></div>';
                $('#innovations_container').append(html);
            });

            $(document).on('click', '.remove-innovation', function() {
                $(this).closest('.innovation-row').remove();
            });

     $(document).on('click', '.add-award', function() {

    let row = $(this).closest('.award-row');
    let textareaName = row.find('textarea').attr('name');
    let labelText = row.find('label').text();
       let lastRow = $(`textarea[name="${textareaName}"]`)
                    .last()
                    .closest('.award-row');

    var html = `
        <div class="row mb-3 award-row">
            <label class="col-sm-2 col-form-label"></label>
            <div class="col-sm-9">
                <textarea rows="2"
                          name="${textareaName}"
                          class="form-control"
                          placeholder="${labelText}"></textarea>
            </div>
            <div class="col-sm-1">
                <button type="button" class="btn btn-danger remove-award">
                    <i class="ion-minus"></i>
                </button>
            </div>
        </div>
    `;
 lastRow.after(html);

});

$(document).on('click', '.remove-award', function() {
    $(this).closest('.award-row').remove();
});

     
        });

        function getSubCategoriesDashboard(parentId, level) {
            var newLevel = level + 1;
            var cat_id = parentId;
            $.ajax({
                type: 'GET',
                url: '/getSubCategories/' + cat_id,
                success: function(response) {

                    $('.subcategory-select-container').each(function() {
                        if (parseInt($(this).attr('data-level')) > level) {
                            $(this).remove();
                        }
                    });
                    var obj = JSON.parse(response);
                    if (obj.result == 1 && obj.htmlContent != '') {
                        console.log(response);
                        var selectTag =
                            '<div class="row mb-3" ><label for="subject_id" class="col-sm-2 col-form-label" >Subcategory ' +
                            newLevel +
                            ' </label><div class="col-sm-10"><div class="subcategory-select-container m-t-5" data-level="' +
                            newLevel +
                            '"><select class="select2 form-control subcategory-select" data-level="' +
                            newLevel +
                            '" name="category_id[]" onchange="getSubCategoriesDashboard(this.value,' +
                            newLevel + ');">' +
                            '<option value="">