@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" />
@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">Specialty</label>
                                <div class="col-sm-10">

                                    <!-- Specialty -->
                                    <select required
                                        class="form-control select2-show-search form-select mt-2"
                                        id="specialty"
                                        name="specialty">
                                        <option value="">Choose Specialty</option>
                                    </select>
                                </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 required 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 required 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 (for SEO purpose)</label>
                                <div class="col-sm-10">
                                    <input name="meta_title" id="meta_title" type="text" class="form-control"
                                        placeholder="Meta Title (for SEO purpose)">
                                    @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 (for SEO purpose)</label>
                                <div class="col-sm-10">
                                    <textarea rows="4" name="meta_description" id="meta_description" type="text" class="form-control"
                                        placeholder="Meta Description (for SEO purpose)"></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>
    (function() {
        'use strict';

        var forms = document.querySelectorAll('.needs-validation-Doctor');

        Array.prototype.slice.call(forms).forEach(function(form) {

            form.addEventListener('submit', function(event) {

                var department = $('#department');
                var select2Container = department
                    .parent()
                    .find('.select2-selection');

                if (!department.val()) {
                    event.preventDefault();
                    event.stopPropagation();

                    select2Container.addClass('is-invalid');
                } else {
                    select2Container.removeClass('is-invalid');
                }

                        var specialty = $('#specialty');
                var select2Container = specialty
                    .parent()
                    .find('.select2-selection');

                if (!specialty.val()) {
                    event.preventDefault();
                    event.stopPropagation();

                    select2Container.addClass('is-invalid');
                } else {
                    select2Container.removeClass('is-invalid');
                }

                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }

                form.classList.add('was-validated');

            }, false);
        });

        // Remove error on select
        $('#department').on('change.select2', function() {

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

            // Remove validation error
            if (departmentId) {
                $(this)
                    .parent()
                    .find('.select2-selection')
                    .removeClass('is-invalid');
            }

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

            if (departmentId) {
                $.ajax({
                    url: "{{ route('specialty.getSpecialties') }}",
                    type: "GET",
                    data: {
                        department_id: departmentId
                    },
                    success: function(response) {

                        $('#specialty')
                            .empty()
                            .append('<option value="">Choose Specialty</option>');

                        $.each(response, function(key, value) {
                            $('#specialty').append(
                                `<option value="${value.id}">${value.name}</option>`
                            );
                        });

                        $('#specialty').trigger('change');
                    }
                });
            } else {
                $('#specialty').html('<option value="">Choose Specialty</option>');
            }
        });

    })();
</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="">