@extends('layout')
@section('content')

    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row justify-content-end mb-2 mt-2 g-2">
            <div class="col-lg-auto  col-md-auto col-sm-auto col-12 my-auto me-auto">
                <h2 class="main_title m-0">Manage Doctor</h2>
            </div>
            @if (Auth::user()->role == 'HO')
                <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ms-auto my-auto">
                    <div class="form-group mb-0">
                        <select id="SMFilter" name="SMFilter" onchange="getRSMfilterDAta()"
                            class="select2 js-example-basic-single select-label form-control w-100">
                            <option value="">Select SM </option>
                            @foreach ($UserFilterData as $key => $value)
                                <option value="{{ $value->position_code }}">{{ $value->emp_name }}
                                </option>
                            @endforeach

                        </select>
                    </div>

                </div>
            @endif
            @if (Auth::user()->role == 'SM')
                <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                    <div class="form-group mb-0">
                        <select id="RSMFilter" name="RSMFilter" onchange="getAMfilterDAta()"
                            class="select2 js-example-basic-single select-label form-control w-100">
                            <option value="">Select RSM </option>
                            @foreach ($UserFilterData as $key => $value)
                                <option value="{{ $value->position_code }}">{{ $value->emp_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            @else
                @if (Auth::user()->role != 'RSM' && Auth::user()->role != 'AM' && Auth::user()->role != 'TM')
                    <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                        <select id="RSMFilter" name="RSMFilter" onchange="getAMfilterDAta()"
                            class="select2 js-example-basic-single select-label form-control w-100">
                            <option value="">Select RSM</option>

                        </select>
                    </div>
                @endif
            @endif

            @if (Auth::user()->role == 'RSM')
                <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                    <select class="select2 js-example-basic-single select-label form-control w-100" id="AMFilter"
                        name="AMFilter" onchange="getTMfilterDAta()">
                        <option value="" selected>Select AM</option>
                        @foreach ($UserFilterData as $key => $value)
                            <option value="{{ $value->position_code }}">{{ $value->emp_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @else
                @if (Auth::user()->role != 'AM' && Auth::user()->role != 'TM')
                    <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                        <select class="select2 js-example-basic-single select-label form-control w-100" id="AMFilter"
                            name="AMFilter" onchange="getTMfilterDAta()">
                            <option value="">Select AM</option>
                        </select>
                    </div>
                @endif
            @endif

            @if (Auth::user()->role == 'AM')
                <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                    <select class="select2 js-example-basic-single select-label form-control w-100" id="TMFilter"
                        name="TMFilter" onchange="">
                        <option value="" selected>Select TM</option>
                        @foreach ($UserFilterData as $key => $value)
                            <option value="{{ $value->position_code }}">{{ $value->emp_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @else
                @if (Auth::user()->role != 'TM')
                    <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                        <select class="select2 js-example-basic-single select-label form-control w-100" id="TMFilter"
                            name="TMFilter" onchange="">
                            <option value="">Select TM</option>
                        </select>
                    </div>
                @endif
            @endif


            <div class="col-lg-auto col-md-auto col-sm-auto col-auto my-auto">
                <div class="d-flex align-items-center">
                    <div id="reportrange" class="daterange">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span>January 11, 2024 - February 9, 2024</span> <i class="fa fa-caret-down"></i>
                        <input type="hidden" name="dtFrom" id="dtFrom">
                        <input type="hidden" name="dtTo" id="dtTo">
                    </div>
                    <a id="applyButton" class="btn btn-primary ms-2"><i class="fa fa-search"></i></a>
                    <a id="clearButton" class="btn btn-danger ms-2"><i class="fa fa-times"></i></a>
                </div>
            </div>
            @if (auth()->user()->role === 'TM')
                <div class="col-lg-auto col-md-auto col-sm-auto col-auto my-auto">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enroll_doctor">
                        <i class="fa-solid fa-plus me-2"></i> Enroll Doctor
                    </button>
                </div>
            @endif
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                <a id="exportButton" class="btn btn-success"><i class="fa fa-download me-2"></i>Export </a>
            </div>


        </div>

        <div class="row mb-3">


        </div>

        <div class="row">


            <div class="col-12">
                <div class="white_shadow_rs">
                    <table id="datatable" class="table table-striped data-table-dr" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Action</th>
                                <th>TM Name</th>
                                <th>Doctor Name</th>
                                <th>Doctor Images</th>
                                <th>Unique Code</th>
                                <th>Speciality</th>
                                <th>Occasion 1 & Date</th>
                                <th>Occasion 1 Video</th>
                                <th>Occasion 2 & Date</th>
                                <th>Occasion 2 Video</th>
                                <th> B-29 Tab (Qty)</th>
                                <th> B-29 AQ PFS (Qty)</th>
                                <th>Link</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>

    </div>

    <!-- Modal -->
    <div class="modal fade" id="enroll_doctor" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="enrollDoctorForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="enrollEditDoctor">Enroll Doctor</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                                class="fa-solid fa-xmark"></i></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="doctor_id" name="doctor_id">
                        <div id="removeprofile" class="mb-3 d-none">
                            <input type="hidden" id="upload_image" name="upload_image">
                            <label for="imageProfile" class="form-label text-center d-block">Upload Doctor's
                                Image
                                <span class="text-danger d-inline">*</span>
                            </label>
                            <input type="hidden" id="uploadPhoto" name="uploadPhoto">
                            <div class="occ_upload">
                                <div class="upload_photo">
                                    <span>
                                        <img src="{{ asset('user/assets/images/upload.png') }}" alt="Uploaded Image"
                                            style="max-width: 100%; height: auto;">
                                    </span>
                                    <div class="upload_images">
                                        <img id="uploaded_image" src="">
                                    </div>
                                    <p class="m-0">Drop Files Here Or Browse Files</p>
                                    <span class="format_view">(Upload image in JPG or PNG only.)</span>
                                    <input type="file" id="imageProfile" name="imageProfile" accept="image/*"
                                        tabindex="0">
                                    <button class="btn remove-btn" type="button" tabindex="0" id="remove-btn">
                                        <i class="fa-solid fa-trash-can"></i>
                                    </button>
                                </div>
                                <label id="imageProfile-error" class="error" for="imageProfile"></label>
                            </div>

                        </div>

                        <div class="mb-3">
                            <label for="doctor_name" class="form-label">Doctor Name</label>
                            <div class="input-group">
                                <span class="input-group-text" id="basic-addon1">Dr.</span>
                                <input type="text" class="form-control" id="doctor_name" name="doctor_name"
                                    placeholder="Enter Doctor Name">
                            </div>
                            <label id="doctor_name-error" class="error" for="doctor_name"></label>
                        </div>
                        <div class="mb-3">
                            <label for="doctor_unique_code" class="form-label">Unique Code</label>
                            <input type="text" class="form-control" id="doctor_unique_code" name="doctor_unique_code"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                placeholder="Enter Unique Code">
                        </div>
                        <div class="mb-3">
                            <label for="b_29_tab_qty" class="form-label">Current support for B-29 Tab (Qty)</label>
                            <input type="text" class="form-control" id="b_29_tab_qty" name="b_29_tab_qty"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                placeholder="Enter Current support for B-29 Tab (Qty)">
                        </div>
                        <div class="mb-3">
                            <label for="b_29_aq_pfs_qty" class="form-label">Current support for B-29 AQ PFS (Qty)</label>
                            <input type="text" class="form-control" id="b_29_aq_pfs_qty" name="b_29_aq_pfs_qty"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                placeholder="Enter Current support for B-29 AQ PFS (Qty)">
                        </div>

                        <div class="mb-3" style="display: none">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="Enter Email">
                        </div>
                        <div class="mb-3">
                            <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" id="speciality_id">
                                <option value="" selected disabled>Select Speciality</option>
                                @foreach ($data as $speciality)
                                    <option value="{{ $speciality->speciality_id }}">{{ $speciality->speciality_name }}
                                    </option>
                                @endforeach
                            </select>
                            <label id="speciality_id-error" class="error" for="speciality_id"></label>
                        </div>
                        <div class="mb-3 email-input" style="display:none">
                            <input type="text" class="form-control" id="speciality_other" name="speciality_other"
                                placeholder="Enter Speciality here">
                        </div>

                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="editDoctorCropModal" class="modal" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="d-flex justify-content-end border-bottom-0 py-3 px-3">
                    <button class="btn-close z-index-1" type="button" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <div id="img_show" class="responsive"></div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="-90" type="button">
                        <i class="fas fa-undo" aria-hidden="true"></i>
                    </button>
                    <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="90" type="button">
                        <i class="fas fa-redo" aria-hidden="true"></i>
                    </button>
                    <button class="btn btn-primary mt-3 croped_image p-3">Save</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="clone_link" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h1 class="text-center fs-6">Dear <span id="doctor-name" class="text-primary"></span>,</h1>
                    <h2 class="modal-title fs-6 pb-3 text-center">
                        The personalized URL has been generated for a doctor to proceed with the event registration.
                    </h2>
                    {{-- <h4 class="fs-3 text-#A7A7A7">Note: Kindly click on the below link to enter Event details</h4> --}}
                    <div class="input-group mb-1">
                        <input type="text" class="form-control" id="doctor_genrated_link" name="doctor_genrated_link"
                            placeholder="abc.com" disabled>
                        <span class="input-group-text" id="copy_link"
                            onclick="copyToClipboardUrl($('#doctor_genrated_link').val())">
                            <i class="fa-regular fa-copy"></i>
                        </span>
                    </div>
                    <!-- Notification -->
                    <div id="copy_notification" class="text-center mt-3" style="display:none; color: green;">
                        URL copied to clipboard!
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    @include('videomodal')
@endsection
@section('js')
    <script>
        var uploadCroppedImageUrl = "{{ url('upload-cropped-image-all-occasions') }}";
        var uploadImageUrl = "{{ url('uploadimages') }}";
        var getuploadedimages = "{{ url('get-uploaded-images') }}";
        var csrfToken = "{{ csrf_token() }}";
    </script>

    <script>
        $(document).ready(function() {
            $(function() {
                $("#reportrange").daterangepicker({
                    autoUpdateInput: false,
                    ranges: {
                        Today: [moment(), moment()],
                        Yesterday: [
                            moment().subtract(1, "days"),
                            moment().subtract(1, "days"),
                        ],
                        "Last 7 Days": [moment().subtract(6, "days"), moment()],
                        "Last 30 Days": [moment().subtract(29, "days"), moment()],
                        "This Month": [
                            moment().startOf("month"),
                            moment().endOf("month"),
                        ],
                        "Last Month": [
                            moment().subtract(1, "month").startOf("month"),
                            moment().subtract(1, "month").endOf("month"),
                        ],
                    },
                });

                $("#reportrange").on("apply.daterangepicker", function(ev, picker) {
                    $(this)
                        .find("span")
                        .html(
                            picker.startDate.format("MMMM D, YYYY") +
                            " - " +
                            picker.endDate.format("MMMM D, YYYY")
                        );
                    $("#dtFrom").val(picker.startDate.format("YYYY-MM-DD"));
                    $("#dtTo").val(picker.endDate.format("YYYY-MM-DD"));
                    userTable.ajax.reload();
                });

            });
        });
    </script>
    <script>

        function getRSMfilterDAta() {
            $.ajax({
                url: "{{ route('getChidUserData') }}",
                type: "POST",
                data: {
                    position_code: $('#SMFilter option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {

                    $('#RSMFilter').html('<option value="" default selected disabled>Select RSM</option>');
                    $('#AMFilter').html('<option value="" default selected disabled>Select AM</option>');
                    $('#TMFilter').html('<option value="" default selected disabled>Select TM</option>');
                    $.each(result.data, function(key, value) {
                        $("#RSMFilter").append('<option value="' + value.position_code + '">' + value
                            .emp_name + '</option>');
                    });
                }
            })
        }

        function getAMfilterDAta() {
            $.ajax({
                url: "{{ route('getChidUserData') }}",
                type: "POST",
                data: {
                    position_code: $('#RSMFilter option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#AMFilter').html('<option value="" default selected disabled>Select AM</option>');
                    $('#TMFilter').html('<option value="" default selected disabled>Select TM</option>');
                    $.each(result.data, function(key, value) {
                        $("#AMFilter").append('<option value="' + value.position_code + '">' + value
                            .emp_name + '</option>');
                    });
                }
            })

        }

        function getTMfilterDAta() {
            $.ajax({
                url: "{{ route('getChidUserData') }}",
                type: "POST",
                data: {
                    position_code: $('#AMFilter option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#TMFilter').html('<option value="" default selected disabled>Select TM</option>');
                    $.each(result.data, function(key, value) {
                        $("#TMFilter").append('<option value="' + value.position_code + '">' + value
                            .emp_name + '</option>');
                    });
                }
            })
        }
    </script>
    <script>
        var $image_crops = $('#img_show').croppie({
            viewport: {
                width: 200,
                height: 200
            },
            boundary: {
                width: 300,
                height: 300
            },
            showZoomer: true,
            enableExif: true,
            enableOrientation: true
        });

        $('#imageProfile').on('change', function() {
            var file = this.files[0];
            var ext = file.name.split('.').pop().toLowerCase();
            var maxSize = 10 * 1024 * 1024;
            if (['png', 'jpg', 'jpeg'].indexOf(ext) === -1) {
                alert('Invalid file type. Please upload an image in JPG or PNG format.');
                return;
            }

            // Validate file size
            if (file.size > maxSize) {
                alert('File size exceeds 10MB. Please upload a smaller file.');
                return;
            }

            var reader = new FileReader();
            reader.onload = function(event) {
                $image_crops.croppie('bind', {
                    url: event.target.result
                }).then(function() {
                    console.log('Croppie bind complete');
                });
            };
            reader.readAsDataURL(file);
            $('#editDoctorCropModal').modal('show');
        });

        $('.imgRotate').on('click', function() {
            var rotate = parseInt($(this).data('rotate'), 10);
            $image_crops.croppie('rotate', rotate);
        });

        $('.croped_image').on('click', function() {
            $(this).html('Uploading...').attr('disabled', true);

            $image_crops.croppie('result', {
                type: 'canvas',
                size: {
                    height: 1000,
                    width: 1000
                }
            }).then(function(response) {
                $.ajax({
                    url: "{{ url('upload-cropped-image') }}",
                    type: "POST",
                    data: {
                        image: response,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            $('#uploaded_image').attr('src',
                                '{{ asset('storage/profile_images/') }}/' + response.image);
                            $('#uploadPhoto').val(response
                                .image);

                            $('#upload_image').val(response.image);
                            $('#editDoctorCropModal').modal('hide');
                        } else {
                            $.notify(response.message, "error");
                        }
                        $('.croped_image').html('Save').attr('disabled', false);
                    },
                    error: function() {
                        $('.croped_image').html('Save').attr('disabled', false);
                    }
                });
            });
        });
        var userTable;
        $(function() {

            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action'
                },
                {
                    data: 'emp_name',
                    name: 'emp_name'
                },
                {
                    data: 'doctor_name',
                    name: 'doctor_name'
                },
                {
                    data: 'upload_image',
                    name: 'upload_image'
                },
                {
                    data: 'doctor_unique_code',
                    name: 'doctor_unique_code'
                },
                {
                    data: 'speciality',
                    name: 'speciality'
                },
                {
                    data: 'occasion_date',
                    name: 'occasion_date'
                },
                {
                    data: 'occasion_video_status',
                    name: 'occasion_video_status'
                },
                {
                    data: 'occasion_date2',
                    name: 'occasion_date2'
                },
                {
                    data: 'occasion_video_status2',
                    name: 'occasion_video_status2'
                },
                {
                    data: 'b_29_tab_qty',
                    name: 'b_29_tab_qty'
                },
                {
                    data: 'b_29_aq_pfs_tab_qty',
                    name: 'b_29_aq_pfs_tab_qty'
                },
                {
                    data: 'genrated_link',
                    name: 'genrated_link'
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                }
            ];

            var columnDefs = [];

            userTable = getdatatable("{{ route('enrolldoctoepeginate') }}", columns, columnDefs);
            $('#applyButton').click(function() {
                userTable.draw();
            });

            $("#clearButton").click(function() {
                @if (Auth::user()->role == 'HO')
                    $("#SMFilter").val('').change();
                    $('#RSMFilter').html('<option value="" default selected disabled>Select RSM</option>');
                    $('#AMFilter').html('<option value="" default selected disabled>Select AM</option>');
                    $('#TMFilter').html('<option value="" default selected disabled>Select TM</option>');
                @else
                    @if (Auth::user()->role == 'SM')
                        $("#RSMFilter").val('').change();
                        $('#AMFilter').html(
                            '<option value="" default selected disabled>Select AM</option>');
                        $('#TMFilter').html(
                            '<option value="" default selected disabled>Select TE</option>');
                    @else
                        @if (Auth::user()->role == 'RSM')
                            $("#AMFilter").val('').change();
                            $('#TMFilter').html(
                                '<option value="" default selected disabled>Select TM</option>');
                        @else
                            @if (Auth::user()->role == 'AM')
                                $("#TMFilter").val('').change();
                            @else
                            @endif
                        @endif
                    @endif
                @endif
                $("#dtFrom").val('');
                $("#dtTo").val('');
                $('#reportrange span').html('');
                userTable.draw();
            });
        });

        function getdatatable(url, columns, columnDefs) {
            return $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                fixedHeader: true,
                order: [],
                scrollX: true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'POST',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                            d.dtFrom = $("#dtFrom").val(),
                            d.dtTo = $("#dtTo").val();
                        d.smPositionCode = $('#SMFilter option:selected').val(),
                            d.rsmPositionCode = $('#RSMFilter option:selected').val(),
                            d.amPositionCode = $('#AMFilter option:selected').val(),
                            d.tmPositionCode = $('#TMFilter option:selected').val()
                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: ".my-image-links",
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'plane'
                    });
                    new VenoBox({
                        selector: '.my-video-links',
                    });
                },
            });
        }



        $.validator.addMethod("noSpaces", function(value, element) {
            return this.optional(element) || $.trim(value).length > 0;
        }, "Please enter valid text, not just spaces.");
        $('#enrollDoctorForm').validate({
            rules: {
                doctor_name: {
                    required: true,
                    noSpaces: true,
                    maxlength: 45
                },
                doctor_unique_code: {
                    required: true,
                    maxlength: 8,
                    number: true,
                    minlength: 8
                },
                b_29_tab_qty: {
                    required: true,
                    number: true
                },
                b_29_aq_pfs_qty: {
                    required: true,
                    number: true
                },
                email: {
                    required: false,
                },
                speciality_other: {
                    required: function(element) {
                        return $('#speciality_id').val() == '6';
                    }

                },
                speciality_id: {
                    required: true,
                }
            },
            messages: {
                doctor_unique_code: {
                    required: "This field is required",
                    maxlength: "Please enter 8 digit",
                    number: "Please enter valid number",
                    minlength: "Please enter 8 digit"
                }

            },
            submitHandler: function(form) {
                var formData = new FormData(form);

                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);
                $.ajax({
                    url: '{{ route('enrolldoctor') }}',
                    type: 'POST',
                    data: formData,
                    dataType: "json",
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            $('#enroll_doctor').modal('hide');
                            $("#doctor_genrated_link").val(response.data.genrated_link);
                            $('#doctor-name').text('Dr. ' + response.data.doctor_name);

                            $("#clone_link").modal('show');
                            $('#dataTable').DataTable().ajax.reload();

                        } else {
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.notify(jqXHR.responseJSON.message, "error");
                    }
                });
            }
        });

        function getDoctorDetails(doctor_id) {
            $.ajax({
                url: "{{ route('getdoctordetails') }}",
                type: 'POST',
                data: {
                    'doctor_id': doctor_id,
                    _token: "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.status == 1) {
                        $('#uploadPhoto').val(response.data.upload_image);
                        $('#doctor_name').val(response.data.doctor_name);
                        $('#doctor_unique_code').val(response.data.doctor_unique_code);
                        $('#b_29_tab_qty').val(response.data.b_29_tab_qty);
                        $('#b_29_aq_pfs_qty').val(response.data.b_29_aq_pfs_tab_qty);
                        $('#speciality_id').val(response.data.speciality_id).trigger('change');
                        if (response.data.speciality_id == '6') {
                            $('.email-input').show();
                            $('#speciality_other').val(response.data.speciality_other);
                        } else {
                            $('.email-input').hide();
                            $('#speciality_other').val('');
                        }
                        $('#doctor_id').val(response.data.doctor_id);
                        var newImageUrl = '{{ asset('storage/profile_images/') }}' + '/' + response.data
                            .upload_image;
                        $('#uploaded_image').attr('src', newImageUrl);
                        $('#removeprofile').removeClass('d-none');
                        $('#enrollEditDoctor').text('Edit doctor');
                        $('#enroll_doctor').modal('show');
                    } else {
                        $.notify(response.message, "error");
                    }
                },
                error: function(jqXHR) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }


        $('#enroll_doctor').on('hidden.bs.modal', function() {
            $('#enrollDoctorForm')[0].reset();
            $('#enrollDoctorForm').validate().resetForm();
            $('#doctor_id').val('');
            $('#enrollEditDoctor').text('Enroll Doctor');
            $('#speciality_id').val('').trigger('change');
            $('#uploadPhoto').val('');
            $('#removeprofile').attr('src', '').addClass('d-none');
        });

        function copyToClipboardUrl(url) {
            if (url) {
                navigator.clipboard.writeText(url).then(function() {
                    $.notify("URL copied to clipboard!", "success");
                }, function(err) {
                    $.notify("Failed to copy URL.", "error");
                    console.error('Could not copy text: ', err);
                });
            } else {
                $.notify("No URL to copy.", "error");
            }
        }

        $('#speciality_other').on('input', function() {
            $(this).val($(this).val().replace(/[0-9]/g, ''));
        });

        $('#clone_link').on('hidden.bs.modal', function() {
            $('#datatable').DataTable().ajax.reload();
        });
        $(document).ready(function() {
            $('.select2').select2();
            $('#speciality_id').on('change', function() {
                if ($(this).val() == '6') {
                    $('.email-input').show();
                } else {
                    $('.email-input').hide();
                    $('#speciality_other').val('');
                }
            });
        });

        $('#exportButton').click(function() {
            $.ajax({
                url: "{{ route('export.doctors') }}",
                type: 'GET',
                data: {},
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(response) {
                    var blob = new Blob([response], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    });
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = 'doctors_export.xlsx';
                    link.click();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    </script>
@endsection