@extends('adminlte::page')
@section('title', $title)
@section('content_header')
    <h1 class="page-title">{{ @$title }}</h1>
    <a class="page-btn" href="{{ url('admin/doctors/') }}"><button
            class="btn btn-block btn-default import-btn">Back</button></a>
@stop

@section('content')
    @include('admin.includes.notification')
    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-primary">

                <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('DOCTOR','Doctors','doctor.xlsx')">Import
                            Doctors <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>
            <!-- /.card -->
        </div>
    </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"></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>


@stop

@section('js')
    <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 '-';
                        }
                    }
                }, ],

            });
        });


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

        function downloadImportData(import_id) {
            id = import_id;
            window.open("{{ route('importDataDownload') }}?import_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>
@stop