@include('admin.layout.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row g-2">

        <div class="col-auto col-lg-auto col-md-auto col-sm-auto my-auto">
            <h2 class="main_title">Manage Doctor</h2>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto ms-auto">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#doctorModal">
                <i class="fa-solid fa-plus me-2"></i> Add Doctor
            </button>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto">
            <button id="ExportDoctorData" class="btn btn-success"><i class="fa fa-download me-2"></i>Export </button>
        </div>

    </div>

    <div class="row mb-3">
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_shadow_rs">
                <table id="datatable" name="datatable" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Dr Name</th>
                            <th>DR Code</th>
                            <th>Position Code</th>
                            <th>Team Name</th>
                            <th>Status</th>
                            <th>Edit</th>
                            <th>Date And Time</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</div>

{{-- Doctor Modal --}}
<div class="modal fade" id="doctorModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" 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="doctorOperationStatus">Add Doctor</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'doctorForm',
                'id' => 'doctorForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-body">
                <input type="hidden" name="doctor_id" id="doctor_id">
                <div class="mb-3">
                    <label for="doctor_name" class="form-label">Doctor Name</label>
                    <input type="text" class="form-control" id="doctor_name" name="doctor_name"
                        placeholder="Enter Doctor Name">
                </div>
                <div class="mb-3">
                    <label for="msl_no" class="form-label">Doctor Code</label>
                    <input type="text" class="form-control" id="msl_no" name="msl_no"
                        placeholder="Enter Doctor Code">
                </div>
                <div class="mb-3">
                    <label for="position_code" class="form-label">Position Code</label>
                    <select class="select2 js-example-basic-single select-label form-control w-100" name="position_code"
                        id="position_code">
                        <option value="" selected>Select Position</option>
                        @foreach ($userData as $data)
                            <option value="{{ $data->position_code }}" data-emp-name="{{ $data->emp_name }}">
                                {{ $data->position_code }}</option>
                        @endforeach
                    </select>
                    <label id="position_code-error" class="error" for="position_code" style="display: none;"></label>
                </div>
                <div class="mb-3">
                    <label for="emp_name" class="form-label">BE Name</label>
                    <input type="text" class="form-control" id="emp_name" name="emp_name" disabled>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="submit" class="btn btn-primary" id="doctorFormSubmit">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

@include('admin.layout.footer')
<script src="{{ asset('admin/assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('admin/assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('notify.js') }}"></script>
<script>
    function editDoctorSet(doctor_id, doctor_name, position_code, msl_no, be_name) {
        $("#doctorOperationStatus").text("Edit Doctor");
        $("#doctor_id").val(doctor_id);
        $("#doctor_name").val(doctor_name);
        $("#position_code").val(position_code).trigger('change');
        $("#msl_no").val(msl_no);
        $("#be_name").val(be_name).trigger('change');
        // $("#position_code").prop('disabled', true);
        // Create or update a hidden input to hold the value
        // if (!$('#hidden_position_code').length) {
        //     $('<input>').attr({
        //         type: 'hidden',
        //         id: 'hidden_position_code',
        //         name: 'position_code',
        //         value: position_code
        //     }).appendTo('form'); // Append to the form
        // } else {
        //     $('#hidden_position_code').val(position_code);
        // }
    }

    $('#ExportDoctorData').on('click', function() {

        var url = "{{ route('downloadDataDoctor') }}";

        window.location.replace(url);
    });

    function doctorStatusChange(doctorId, status) {
        $.ajax({
            url: "{{ route('updateDoctorStatus') }}",
            type: 'POST',
            data: {
                'doctor_id': doctorId,
                'status': status,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response) {
                if (response.status == 1) {
                    $.notify(response.msg, "success");
                    $('#datatable').DataTable().ajax.reload();
                } else {
                    $.notify(response.msg, "error");
                }
            },
            error: function(jqXHR) {
                $.notify(jqXHR.responseJSON.msg, "error");
            }
        });
    }

    $(document).ready(function() {
        $('#doctorModal').on('hidden.bs.modal', function() {
            // Reset form fields
            $(this).find('form')[0].reset();

            // Reset select boxes to their default value (usually the first option)
            $(this).find('select').val('').trigger('change');

            // Reset other elements if needed
            $("#doctorOperationStatus").text("Add Doctor"); // Reset the modal title
            $("#position_code").prop('disabled', false);

            // Reset hidden input specifically
            $('#doctor_id').val('');

            // Clear validation error messages and reset the form's validation state
            var form = $(this).find('form');
            form.validate().resetForm(); // Clears error messages
            form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        });

        // When the position_code select is changed
        $('#position_code').on('change', function() {
            // Get the selected option
            var selectedOption = $(this).find('option:selected');
            // Get the corresponding emp_name from the data attribute
            var empName = selectedOption.data('emp-name');

            // Update the emp_name input field
            $('#emp_name').val(empName || '');
        });

        $('#doctorForm').validate({
            ignore: ".ignore",
            rules: {
                doctor_name: {
                    required: true,
                },
                msl_no: {
                    required: true,
                },
                position_code: {
                    required: true,
                },
            },
            messages: {},
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#doctorFormSubmit").attr('disabled', true);
                var formData = new FormData($("#doctorForm")[0]);

                $.ajax({
                    url: '{{ route('upsertDoctor') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        // Handle the status properly (as boolean true/false or string 1/0)
                        if (response.status === true || response.status === 1) {
                            $('#doctorModal').modal('hide');
                            $.notify(response.msg, "success");
                            $('#datatable').DataTable().ajax.reload();
                        } else if (response.status === false || response.status === 0) {
                            $.notify(response.msg, "error");
                        }
                        $("#doctorFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $.notify("An unexpected error occurred. Please try again.",
                            "error");

                        $("#doctorFormSubmit").attr('disabled', false);
                    }
                });
            }
        });

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'doctor_name',
                    name: 'doctor_name'
                },
                {
                    data: 'doctor_code',
                    name: 'doctor_code'
                },
                {
                    data: 'doctor_position_code',
                    name: 'doctor_position_code'
                },
                {
                    data: 'teamName',
                    name: 'teamName'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'edit',
                    name: 'edit'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ];
            var columnDefs = [{
                "width": "150",
                "targets": [5]
            }];
            getdatatable("{{ route('manageDoctorPaginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 25,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                    }
                },
                drawCallback: function(settings) {
                    // Reinitialize Venobox
                    // new VenoBox({
                    //     selector: '.my-video-links',
                    // });
                }
            });
        }
    });
</script>