@extends('layouts')
@section('main')
    <div class="container-fluid">
        <div class="row">
            <div class="card_me">
                <div class="top_white_header">
                    <div class="row">
                        <div class="col-auto my-auto">
                            <h3 class="title_red"> Doctor Details</h3>
                        </div>
                        <div class="col-lg-2 ms-auto">
                            {{-- <select class="select2 js-example-basic-single select-label br_select form-control w-100"
                                    id="filter_topic_id" name="filter_topic">
                                <option value="" selected="selected">Select Topic</option>

                            </select> --}}
                        </div>
                        <div class="col-lg-auto">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="add_doc">
                                <i class="fa-solid fa-plus mx-2"></i> Add Doctor
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <table id="dataTable" class="table table-striped data-table-dr" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Employee Name</th>
                                <th>Doctor Name</th>
                                <th>SC Code</th>
                                <th>Country</th>
                                <th>City</th>
                                <th>Edit</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add_document" 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="lable_id">Add Doctor</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="add_doctor_form" method="post" class="w-100" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="">
                            <input type="hidden" id="doc_edit_id" name="doc_edit_id">
                            <div class="mb-3">
                                <label for="emp_code" class="form-label">Employee Code<span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="emp_code" name="emp_code"
                                    placeholder="Enter here">
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">Doctor Name<span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Enter here">
                            </div>
                            <div class="mb-3">
                                <label for="sc_code" class="form-label">SC Code<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="sc_code" name="sc_code"
                                    placeholder="Enter here">
                            </div>
                            <div class="mb-3">
                                <label for="country" class="form-label">Country Name<span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="country" name="country"
                                    placeholder="Enter here">
                            </div>
                            <div class="mb-3">
                                <label for="city" class="form-label">City<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="city" name="city"
                                    placeholder="Enter here">
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
                        <button type="submit" id="doc_sub" class="btn btn-primary">Submit</button>
                    </div>
                    </from>

            </div>
        </div>
    </div>


    {{-- <div class="modal fade" id="add_document2" 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="lable_id2">Add Document</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="add_document_form" method="post" class="w-100" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="id" id="doc_edit_id">
                        <div class="drag_area">
                            <div class="mb-3 select_error">
                                <label for="f_topic_id" class="form-label">Select Topic</label>
                                <select class="select2 js-example-basic-single select-label form-control w-100"
                                    name="f_topic" id="f_topic_id">
                                    <option value="" selected="selected">Select Topic</option>

                                </select>
                            </div>
                            <div class="mb-3" id="preview" style="display:none;">
                                <label class="form-label">Uploaded Pdf</label>
                                <div class="uploaded_pdf">
                                    <div class="youtube_black">
                                        <img src="{{ asset('/assets/images/login-left.png') }}" class="youtube_thub"
                                            width="100%">
                                        <a href="#"><img src="{{ asset('/assets/images/close_white.png') }}"
                                                class="delete_icon"></a>
                                    </div>
                                    <span></span>
                                </div>
                            </div>
                            <div class="mb-3" id="upload_pdf">
                                <label for="pdf_id" class="form-label">Upload Pdf</label>
                                <div class="upload_photo">
                                    <span><img src="{{ asset('/assets/images/upload_icon.png') }}" width="45px"></span>
                                    <p class="m-0"><b>Click</b> To Upload Pdf</p>
                                    <span>Drag And Drop Pdf Files To Upload</span>
                                    <input type="file" class="pdf-upload" id="pdf_id" name="pdf"
                                        accept="application/pdf">
                                    <input type="hidden" class="pdf_h-upload" id="pdf_h_id" name="pdf_h">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div> --}}

    <div class="modal fade" id="upload_pdf_preview" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="topic_name"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="modal-body">
                        <iframe id="pdfViewer" src="" style="width: 100%; height: 700px; border: none;"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        function editDocument(id) {
            $('#doc_edit_id').val(id);
            $('#lable_id').text('Update Doctor');
            $('#add_doctor_form').validate().resetForm();

            $.ajax({
                url: "{{ route('get-doc') }}",
                type: 'POST',
                data: {
                    '_token': "{{ csrf_token() }}",
                    edit_id: id,
                },
                dataType: "json",
                error: function(error) {
                    if (response.status === 400 || response.status === 404) {
                        var errors = response.responseJSON;
                        $.each(errors, function(key, value) {
                            $.notify("Error: " + value[0], 'error');
                        });
                    } else if (response.status === 422) {
                        var errors = response.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $.notify("Error: " + value[0], 'error');
                        });
                    } else {
                        $.notify("An unexpected error occurred.", 'error');
                    }
                },
                success: function(data) {
                    $('.select2').each(function() {
                        $(this).select2({
                            dropdownParent: $(this).parent()
                        })
                    })
                    if (data.status = 1) {
                        $('#emp_code').val(data.data.emp_code);
                        $('#name').val(data.data.name);
                        $('#sc_code').val(data.data.sc_code);
                        $('#city').val(data.data.city);
                        $('#country').val(data.data.country);
                        $('#add_document').modal('show');
                    } else {
                        $.notify("Something went wrong!.", 'error');
                    }
                }
            });
        }

        $('#filter_topic_id').on('change', function() {
            var topicId = $(this).val();
            var dataTable = $('#dataTable')
                .DataTable(); // Replace 'your-datatable-id' with the actual ID of your DataTable
            dataTable.column('topic_name:name').search(topicId).draw();
        });

        function openPdfInModal(url, topicName) {
            $('#pdfViewer').attr('src', url);
            $('#topic_name').text(topicName);
            $('#upload_pdf_preview').modal('show');
        }

        function changeDocStatus(id, status) {
            var status_lable = (status == 'active') ? 'Inactive' : 'Active';
            Swal.fire({
                title: 'Are you sure?',
                text: "You want to " + status_lable + " this document?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('document-status') }}",
                        type: 'POST',
                        data: {
                            'pid': id,
                            'status': status,
                            _token: "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1)
                                $.notify(response.message, "success");
                            else
                                $.notify(response.message, "error");
                            $('#dataTable').DataTable().ajax.reload();
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $('#dataTable').DataTable().ajax.reload();
                            if (jqXHR.status == 419) {
                                $.notify("Please refresh the Page", "error");
                            } else if (jqXHR.status == 500) {
                                $.notify("Please try after a few minutes", "error");
                            } else {
                                $.notify(jqXHR.responseJSON.message, "error");
                            }
                        }
                    });
                } else {
                    $('#dataTable').DataTable().ajax.reload();
                }
            })
        }

        $(document).ready(function() {
            $(function() {
                var columns = [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'user_name',
                        name: 'user_name',
                        "orderable": false,
                        searchable: true
                    },
                    {
                        data: 'name',
                        name: 'name',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'sc_code',
                        name: 'sc_code',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'country',
                        name: 'country',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'city',
                        name: 'city',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        default: '-',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        "orderable": false,
                        searchable: false
                    }
                ];
                var columnDefs = [];
                var data = {};
                getdatatable("{{ route('docList') }}", columns, columnDefs, data);
            });


            function getdatatable(url, columns, columnDefs, data) {
                table = $('#dataTable').DataTable({
                    "pageLength": 10,
                    language: {
                        searchPlaceholder: "Search"
                    },
                    processing: true,
                    serverSide: true,
                    bDestroy: true,
                    order: [],
                    "scrollX": true,
                    columns: columns,
                    columnDefs: columnDefs,
                    ajax: {
                        method: 'post',
                        url: url,
                        data: function(d) {
                            d._token = "{{ csrf_token() }}"
                        }
                    },
                });
            }
        });


        $("#add_doc").click(function() {
            $('#emp_code').val('');
            $('#doc_edit_id').val('');
            $('#lable_id').text('Add Doctor');
            $('#name').val('');
            $('#sc_code').val('');
            $('#city').val('');
            $('#country').val('');
            $('#add_doctor_form')[0].reset(); // Reset the form
            $('#add_doctor_form').validate().resetForm();
            $('#add_document').modal('show');
        });

        $(document).ready(function() {
            $(document).on('dragover', '.drag_area', function(event) {
                event.preventDefault();
            });

            $(document).on('drop', '.drag_area', function(event) {
                event.preventDefault();
                var dt = event.originalEvent.dataTransfer;
                var files = dt.files;
                if (files.length > 0) {
                    var file = files[0];
                    $('.pdf-upload').prop('files', files).trigger('change');
                    handleFileSelection(file);
                }
            });

            function handleFileSelection(file) {
                var fileName = file.name;
                var nameWithExtension = fileName.match(/(.+?\.pdf)/)[0];
                $('#upload_pdf').hide();
                $('#preview').show().find('.uploaded_pdf span').text(nameWithExtension);
                $('#pdf_h_id').val(nameWithExtension);
            }


            $(document).on('change', 'input[type="file"]', function(event) {
                var input = this;
                var file = input.files[0];
                handleFileSelection(file);
            });

            $(document).on('click', '.delete_icon', function(event) {
                event.preventDefault();
                $('#preview').hide();
                $('#upload_pdf').show();
                $('#pdf_id').val('');
                $('#pdf_h_id').val('');
            });


            $.validator.addMethod('pdfSize', function(value, element) {
                // Check if a file is selected
                if (element.files && element.files[0]) {
                    // Check file size (5 MB limit)
                    return element.files[0].size <= 5 * 1024 * 1024;
                }
                return true; // No file selected
            }, 'File size exceeds the limit (5MB).');


            $("#add_doctor_form").validate({
                ignore: ".ignore",
                rules: {
                    emp_code: {
                        required: true,
                        minlength: 3,
                        maxlength: 15
                    },
                    name: {
                        required: true,
                        minlength: 2,
                        maxlength: 100
                    },
                    sc_code: {
                        required: true,
                        minlength: 2,
                        maxlength: 15
                    },
                    city: {
                        required: true,
                        minlength: 2,
                        maxlength: 75
                    },
                    country: {
                        required: true,
                        minlength: 2,
                        maxlength: 75
                    }
                },
                messages: {

                },
                errorPlacement: function(error, element) {
                    if (element.is("select")) {
                        error.appendTo(element.closest(".mb-3.select_error"));
                    } else {
                        error.appendTo(element.closest(".mb-3"));
                    }
                },
                submitHandler: function(form) {
                    var formData = new FormData($("#add_doctor_form")[0]);
                    $('#doc_sub').prop('disabled', true);

                    $.ajax({
                        url: "{{ route('add-update-doc') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(data) {
                            if (data.status == 0) {
                                $.notify(data.message, "error");
                            } else if (data.status == 1) {
                                $.notify(data.message, "success");
                                $('#add_document').modal('hide');
                                form.reset();
                                $('#dataTable').DataTable().ajax.reload();

                            }
                            $('#doc_sub').prop('disabled', false);

                        },
                        error: function(response) {
                            if (response.status === 400) {
                                var errors = response.responseJSON;
                                $.each(errors, function(key, value) {
                                    $.notify("Error: " + value[0], 'error');
                                });
                            } else if (response.status === 422) {
                                var errors = response.responseJSON.errors;
                                $.each(errors, function(key, value) {
                                    $.notify("Error: " + value[0], 'error');
                                });
                            } else {
                                $.notify("An unexpected error occurred.", 'error');
                            }
                            $('#doc_sub').prop('disabled', false);

                        }
                    });
                }
            });
        });
    </script>
@endsection