@extends('layouts.page')

@section('title', 'All Imports')

@section('custom-css')
    <link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap5.min.css') }}">
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="content-header ">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">All Imports</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active">All Imports</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                @include('layouts.error')
                                <div class="row mb-3">
                                    <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                        <button class="btn btn-danger js-usr-import"
                                            onclick="showImportModal('USER','Employees','import-user-details.xlsx')">Import
                                            Employees <i class="fa fa-upload ml-2"></i></button>
                                    </div>

                                    <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                        <button class="btn btn-danger js-usr-import"
                                            onclick="showImportModal('DOCTOR','Doctors','import-doctor-all-details.xlsx')">Import
                                            Doctors <i class="fa fa-upload ml-2"></i></button>
                                    </div>

                                    <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                        <button class="btn btn-danger js-usr-import"
                                            onclick="showImportModal('GROUPDOCTOR','Doctor Product','doctor-product-selection.xlsx')">Import
                                            Doctor Products <i class="fa fa-upload ml-2"></i></button>
                                    </div>

                                    <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                        <button class="btn btn-danger js-usr-import"
                                            onclick="showImportModal('DELETEDOCTOR','Doctor Delete','doctor-remove.xlsx')">Import
                                            Doctor Delete <i class="fa fa-upload ml-2"></i></button>
                                    </div>
                                </div>

                                <div class="col-md-12 mt-1 card py-2 table-main-wrap">
                                    <table id="importDataTable" class="table  table-striped">
                                        <thead>
                                            <tr>
                                                <th>No.</th>
                                                <th>File Name</th>
                                                <th class="text-center"> Action</th>
                                                <th>Import Status</th>
                                                <th>Import Type</th>
                                                <th>Total Count</th>
                                                <th>Insert Count</th>
                                                <th>Update Count</th>
                                                <th>Error Count</th>
                                                <th>Comment</th>
                                                <th>Date and Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>
    </div>

    <div class="modal fade" id="importModal" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-light">
                <div class="modal-header">
                    <h4 class="modal-title" id="ImportModalTitle">Import Employee</h4>
                    <button type="button" class="close" onclick="hideImportModal()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form enctype="multipart/form-data" action="javascript:;" id="importFileForm">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-danger" style="display:none;"></div>
                        <div class="custom-file mt-2">
                            <input type="file" class="custom-file-input" id="import" name="import"
                                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                            <label class="custom-file-label" for="import">Choose file</label>
                        </div>
                        <a id="sampleExcelDownload" href="{{ url('import/user.xlsx') }}" class=""> Download Sample <i
                                class="fa fa-download ms-1"></i></a>
                    </div>
                    <input type="hidden" name="importType" id="importType">
                    <div class="modal-footer">
                        <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('custom-js')
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap5.min.js') }}"></script>

    <script>
        $(document).ready(function() {

            $('#importFileForm').validate({
                ignore: ".ignore",
                rules: {
                    import: {
                        required: true,
                        // filesize: 15728640
                    },
                    importType: {
                        required: true,
                        // filesize: 15728640
                    }
                },
                messages: {
                    import: {
                        // filesize: "File size must be less than 15 MB."
                    }
                },
                submitHandler: function(form) {
                    // return false;
                    $("#submit").html('<span> Processing...</span>');
                    $("#submit").attr('disabled', true);

                    var formData = new FormData($("#importFileForm")[0]);
                    $.ajax({
                        url: "{{ route('saveImport') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            var flag = 0;
                            if (response.status == 2) {

                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                $.each(response.errors, function(index, data) {
                                    if (flag == 0) {
                                        $('input[name="' + index + '"]')
                                            .focus();
                                        flag = 1;
                                    }
                                    if (document.getElementsByName(index)[0]
                                        .tagName == "INPUT" && document
                                        .getElementsByName(index)[0].type !=
                                        'radio'
                                    ) {
                                        $('input[name="' + index + '"]').after(
                                            '<label id="' + index +
                                            '-error" class="error" for="' +
                                            index + '">' + data + '</label>'
                                        );
                                    } else if (document.getElementsByName(
                                            index)[0]
                                        .tagName == "SELECT") {
                                        $('select[name="' + index + '"]').after(
                                            '<label id="' + index +
                                            '-error" class="error" for="' +
                                            index + '">' + data + '</label>'
                                        );
                                    } else if (document.getElementsByName(
                                            index)[0]
                                        .tagName == "TEXTAREA") {
                                        $('textarea[name="' + index + '"]')
                                            .after(
                                                '<label id="' + index +
                                                '-error" class="error" for="' +
                                                index + '">' + data + '</label>'
                                            );
                                    } else if (document.getElementsByName(
                                            index)[0]
                                        .tagName == "INPUT" && document
                                        .getElementsByName(index)[0].type ==
                                        'radio'
                                    ) {
                                        $('div .' + index).after('<label id="' +
                                            index +
                                            '-error" class="error" for="' +
                                            index + '">' + data + '</label>'
                                        );
                                    }
                                });
                            } else if (response.status == 0) {

                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                // $.notify(response.message, "error");
                            } else {
                                // $.notify(response.message, "success");
                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', true);
                                $("#importModal").modal('show');
                                setTimeout(function() {
                                    location.reload();
                                }, 200);
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 419 || jqXHR.status == 422) {
                                var flag = 0;
                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                $.each(jqXHR.responseJSON.errors, function(index,
                                    data) {
                                    if (flag == 0) {
                                        $('input[name="' + index + '"]')
                                            .focus();
                                        flag = 1;
                                    }
                                    if ($('#' + index + '-error').length != 0) {
                                        $('#' + index + '-error').html(data)
                                            .show();
                                    } else {
                                        if (document.getElementsByName(index)[0]
                                            .tagName == "INPUT" && document
                                            .getElementsByName(index)[0].type !=
                                            'radio'
                                        ) {
                                            $('input[name="' + index + '"]')
                                                .after(
                                                    '<label id="' + index +
                                                    '-error" class="error" for="' +
                                                    index + '">' + data +
                                                    '</label>');
                                        } else if (document.getElementsByName(
                                                index)[0].tagName == "SELECT") {
                                            $('select[name="' + index + '"]')
                                                .after(
                                                    '<label id="' + index +
                                                    '-error" class="error" for="' +
                                                    index + '">' + data +
                                                    '</label>');
                                        } else if (document.getElementsByName(
                                                index)[0].tagName ==
                                            "TEXTAREA") {
                                            $('textarea[name="' + index + '"]')
                                                .after('<label id="' + index +
                                                    '-error" class="error" for="' +
                                                    index + '">' + data +
                                                    '</label>');
                                        } else if (document.getElementsByName(
                                                index)[0].tagName == "INPUT" &&
                                            document.getElementsByName(index)[0]
                                            .type == 'radio'
                                        ) {
                                            $('input[name="' + index + '"]')
                                                .after(
                                                    '<label id="' + index +
                                                    '-error" class="error" for="' +
                                                    index + '">' + data +
                                                    '</label>');
                                        }
                                    }
                                });
                            } else {
                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                // $.notify(jqXHR.responseJSON.message, "error");
                            }
                        }
                    }); //ajax
                }
            });

            var i = 1;
            var table = $('#importDataTable').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: false,
                ajax: {
                    url: "{{ route('importPaginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                    },
                },
                "drawCallback": function(settings) {

                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'fileName',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'action',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'status',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'fileType',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'totalCount',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'insertCount',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'updateCount',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'errorCount',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'comment',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'dateTime',
                        searchable: true,
                        orderable: false
                    }

                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // Column to target
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    }
                }, ],

            });
        });
    </script>
    <script>
        function showImportModal(importType, title, sampleExcelFileName) {
            $("#ImportModalTitle").html("Import " + title);
            $("#sampleExcelDownload").attr('href', "{{ url('import') . '/' }}" + sampleExcelFileName)
            $("#importType").val(importType);
            $("#importModal").modal('show');
        }

        function downloadImportData(import_id) {
            id = btoa(import_id);
            // window.open("{{ route('importDataDownload') }}?id=" + id, '_blank');
        }

        function hideImportModal() {
            $("#importModal").modal('hide');
            $("#import").val("");
            $("#importType").val("");
            $("#importFileForm").trigger("reset");
            $("#importFileForm")[0].reset();
            $("#importFileForm").validate().resetForm();
            window.location.reload();
        }
    </script>
@endsection