@extends('admin.layout')
@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row justify-content-end g-2 mb-3">
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto my-auto">
                <h2 class="main_title">Manage Doctor</h2>
            </div>

            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ms-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="" selected default disabled>Select SM</option>
                        @foreach ($UserFilterData as $userskey => $UserFilterData)
                            <option value="{{ $UserFilterData->position_code }}">{{ $UserFilterData->emp_name }}</option>
                        @endforeach
                    </select>
                </div>

            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ">
                <div class="form-group mb-0">
                    <select class="select2 js-example-basic-single select-label form-control w-100" id="RSMFilter"
                        name="RSMFilter" onchange="getAMfilterDAta()">
                        <option value="" selected default disabled>Select RSM</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ">
                <div class="form-group mb-0">
                    <select class="select2 js-example-basic-single select-label form-control w-100" id="AMFilter"
                        name="AMFilter" onchange="getTMfilterDAta()">
                        <option value="" selected default disabled>Select AM</option>
                    </select>
                </div>
            </div>

            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto ">
                <div class="form-group mb-0">
                    <select class="select2 js-example-basic-single select-label form-control w-100" id="TMFilter"
                        name="TMFilter">
                        <option value="" selected default disabled>Select TM</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto  col-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>
            <div class="col-lg-auto  col-md-auto col-sm-auto col-auto">
                <a id="exportButton" class="btn btn-success"><i class="fa fa-download me-2"></i>Export </a>
            </div>


        </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>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>Dr.Customized URL</th>
                                <th>Status</th>
                                <th>Action</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>

    </div>

    </div>
    <div class="modal fade" id="edit_doctor" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="editDoctorForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="editDoctor">Edit Doctor</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="doctor_id" name="doctor_id">

                        <div class="mb-3">
                            <label for="doctor_unique_code" class="form-label">Emp SAP Code</label>
                            <input type="text" class="form-control" id="position_code" name="position_code"
                                placeholder="Enter Emp SAP Code">
                        </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>
@endsection
@section('js')
    <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 userTable;
        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false
                },
                {
                    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: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action'
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                }
            ];

            var columnDefs = [];

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

            $("#clearButton").click(function() {
                $("#dtFrom").val('');
                $("#dtTo").val('');
                $('#reportrange span').html('');
                $("#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>');
                userTable.draw();
            });
        });



        function getdatatable(url, columns, columnDefs) {
            return $('#datatable').DataTable({
                scrollX: true,
                processing: true,
                serverSide: true,
                bDestroy: true,
                fixedHeader: 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').val();
                        d.rsmPositionCode = $('#RSMFilter').val();
                        d.amPositionCode = $('#AMFilter').val();
                        d.tmPositionCode = $('#TMFilter').val();

                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: ".my-image-links",
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'plane'
                    });
                    new VenoBox({
                        selector: '.my-video-links',
                    });
                },
            });
        }

        function doctor_status_change(doctor_id, status) {
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to activate your status?",
                icon: 'success',
                showDenyButton: true,
                confirmButtonColor: '#3085d6',
                denyButtonColor: '#d33',
                denyButtonText: 'No',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('manageDoctorStatus') }}",
                        type: 'POST',
                        data: {
                            'doctor_id': doctor_id,
                            'status': status,
                            '_token': "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1) {
                                $.notify(response.message, "success");
                                userTable.draw();
                            } else {
                                $.notify(response.message, "error");
                            }
                        },
                        error: function(jqXHR) {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                    });
                } else {
                    $.notify("The status remains unchanged.", "info");
                    userTable.draw();
                }
            });
        }

        function copyToClipboard(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);
            });
        }


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

        $('#clone_link').on('hidden.bs.modal', function() {
            $('#datatable').DataTable().ajax.reload();
        });


        $('#editDoctorForm').validate({
            rules: {
                position_code: {
                    required: true,
                }
            },
            submitHandler: function(form) {
                var formData = new FormData(form);

                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);
                $.ajax({
                    url: '{{ route('editdoctor') }}',
                    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");
                            $('#edit_doctor').modal('hide');
                            $('#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 getDoctorDetail(doctor_id) {
            $.ajax({
                url: "{{ route('getdoctordetail') }}",
                type: 'POST',
                data: {
                    'doctor_id': doctor_id,
                    _token: "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.status == 1) {
                        $('#position_code').val(response.data.position_code);
                        $('#doctor_id').val(response.data.doctor_id);
                        $('#edit_doctor').modal('show');
                    } else {
                        $.notify(response.message, "error");
                    }
                },
                error: function(jqXHR) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        $('#edit_doctor').on('hidden.bs.modal', function() {
            $('#editDoctorForm')[0].reset();
            $('#editDoctor').text('Edit Doctor');
        });

        function deleteDoctor(doctor_id) {
            Swal.fire({
                title: "Are you sure ?",
                text: "You want to delete this !",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('doctor.delete') }}",
                        type: 'POST',
                        data: {
                            'doctor_id': doctor_id,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            if (response.status == 1) {
                                Swal.fire("Deleted!", "Doctor deleted successfully.", "success");

                                $('#datatable').DataTable().ajax.reload();
                            } else {
                                // Show error notification
                                Swal.fire("Error!", response.message, "error");
                            }
                        },
                        error: function(xhr) {
                            Swal.fire("Error!", "Error deleting doctor: " + xhr.responseJSON.message,
                                "error");
                        }
                    });
                }
            });
        }
    </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>
        $('#exportButton').click(function() {
            $.ajax({
                url: "{{ route('admin.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