@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"> Document 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>
                                @foreach($topic as $key => $val)
                                    <option value="{{$val}}">{{$val}}</option>
                                @endforeach
                            </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 Document
                            </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>Topic Name</th>
                            <th>Pdf</th>
                            <th>Active / Inactive</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 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>
                                    @foreach($topic as $key => $val)
                                        <option value="{{$key}}">{{$val}}</option>
                                    @endforeach
                                </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 Document');
            $('#add_document_form').validate().resetForm();
            $('#pdf_id').val('');

            $.ajax({
                url:"{{route('get-document')}}",
                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){
                        if(data.data.topic_id && data.data.topic_id !== ''){
                            $('#f_topic_id').val(data.data.topic_id).trigger('change');
                        }
                        if(data.data.pdf_name && data.data.pdf_name.trim() !== ''){
                            $('#pdf_h_id').val(data.data.pdf_name)
                            $('#preview').show().find('.uploaded_pdf span').text(data.data.pdf_name);
                        }
                        $('#preview').show();
                        $('#upload_pdf').hide();
                        $('#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: 'topic_name',
                        name: 'topic_name',
                        "orderable": false,
                        searchable: true
                    },
                    {
                        data: 'pdf',
                        name: 'pdf',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        default: '-',
                        "orderable": false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        "orderable": false,
                        searchable: false
                    }];
                var columnDefs = [];
                var data = {};
                getdatatable("{{ route('document-list') }}", 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() }}"
                            d.topic_id = $("#filter_topic_id").val()
                        }
                    },
                });
            }
        });


        $("#add_doc").click(function () {
            $('#doc_edit_id').val('');
            $('#lable_id').text('Add Document');
            $('#f_topic_id').val('').trigger('change');
            $('#pdf_h_id').val('');
            $('#pdf_id').val('');
            $('#preview').hide();
            $('#upload_pdf').show();
            $('#add_document_form')[0].reset(); // Reset the form
            $('#add_document_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_document_form").validate({
                ignore: ".ignore",
                rules: {
                    pdf: {
                        required: true,
                        accept: "application/pdf",
                        pdfSize: true // Custom validation for PDF size
                    },
                    // pdf_h: {required: true},
                    f_topic: {required: true},
                },
                messages: {
                    pdf: {
                        accept: "Please select a valid PDF file.",
                        pdfSize: "File size exceeds the limit (5MB)."
                    },
                    pdf_h: {required: "Please select pdf file."},
                    f_topic: {required: "Please select topic."},
                },
                errorPlacement: function (error, element) {
                    if (element.is("select")) {
                        error.appendTo(element.closest(".mb-3.select_error"));
                    } else {
                        error.appendTo(element.closest(".drag_area"));
                    }
                },
                submitHandler: function (form) {
                    var formData = new FormData($("#add_document_form")[0]);

                    $.ajax({
                        url: "{{ route('add-update-document') }}",
                        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");
                            }
                            form.reset();
                            $('#add_document').modal('hide');
                            $('#dataTable').DataTable().ajax.reload();
                        },
                        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');
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection