@extends('admin.layout.layout')

@section('content')
    <div class="container-fluid">
        <div class="top_bar">
            <div class="row">
                <div class="col-lg-auto col-auto my-auto">
                    <div class="main_title">
                        <h3>Manage Import</h3>
                    </div>
                </div>
                <div class="col-lg-auto col-auto ms-auto my-auto">
                    <div class="main_title">
                    </div>
                </div>
            </div>
        </div>
        <!--  Row 1 -->


        <div class="row">
            <div class="col-12">
                <div class="view_output">
                    <div id="tab-1" class="tab-content current">
                        <div class="white_round">
                            <div class="row">
                                <div class="col-lg-auto col-md-auto col-auto my-auto">
                                    {{-- <div class="main_title">
                                        <h2>Manage Import</h2>
                                    </div> --}}
                                </div>
                            </div>
                            <div class="row">
                                @if (auth()->user()->role == 'super_admin' && auth()->user()->can('master-import'))
                                    <div>
                                        <button class="btn btn-primary ms-2"
                                            onclick="get_import_data('add','employee_data')">Employee Import</button>
                                        <a href="{{ asset('import_file_sample/employee_v2_Sample.xlsx') }}"
                                            class="btn btn-primary ms-2" download>
                                            Download Sample Import File
                                        </a>
                                        {{--  <button class="btn btn-primary ms-2"
                                            onclick="get_import_data('add','project_mapping')">Project Import</button> --}}
                                    </div>
                                @endif

                                <div class="col-12">
                                    <div class="table_specing">
                                        <table id="importDataTable" class="table table-striped data-table-dr"
                                            style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>Sr No</th>
                                                    <th>File Name</th>
                                                    <th>Insert Count</th>
                                                    <th>Error Count</th>
                                                    <th>Total Count</th>
                                                    {{-- <th>Upload/Change File</th> --}}
                                                    <th>Import Type</th>
                                                    <th>Status</th>
                                                    <th>Date And Time</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            <tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>

    <!-- Modal Upload -->
    <div class="modal fade" id="ImportModal" tabindex="-1" aria-labelledby="ImportModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="ImportModalLabel">Upload Import file</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {!! Form::open([
                        'url' => '#',
                        'name' => 'importForm',
                        'id' => 'importForm',
                        'enctype' => 'multipart/form-data',
                    ]) !!}
                    <input type="hidden" name="importFormType" id="importFormType">
                    <input type="hidden" name="import_type" id="import_type">
                    <input type="hidden" id="importId" name="importId">
                    <div class="">
                        <div class="mb-3 file_icon">
                            {{-- <span> <img src="{{ asset('assets/images/file.png') }}" class="me-2"> files-2.xls</span> --}}
                            <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%">
                                </div>
                            </div>
                            <p>Uploaded file</p>
                        </div>
                        <div class="pdf_detiles">
                            <div class="view__pdf_de">
                                <input type="file" id="importFile" name="importFile" accept=".csv, text/csv">

                                 <div class="add_pdf_icon">
                                    <img src="{{ asset('assets/images/upload.png') }}">
                                </div>
                                <h5>Drop Files Here Or Browse Files</h5>
                                <label id="importFile-error" class="error" for="importFile"></label>
                            </div>
                        </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="submit" class="btn btn-primary">Upload</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <!-- Modal Change -->
    <div class="modal fade" id="change" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="exampleModalLabel">Change SAP Dump file</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="">
                        <div class="mb-3 file_icon">
                            <span> <img src="{{ asset('assets/images/file.png') }}" class="me-2"> files-2.xls</span>
                            <div class="progress" role="progressbar" aria-label="Animated striped example"
                                aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%">
                                </div>
                            </div>
                            <p>Uploaded file</p>
                        </div>
                        <div class="pdf_detiles">
                            <!-- <label class="form_label">Upload Thumbnail</label> -->
                            <div class="view__pdf_de">
                                <input type="file">
                                <div class="add_pdf_icon">
                                    <img src="{{ asset('assets/images/upload.png') }}">
                                </div>
                                <h5>Drop Files Here Or Browse Files</h5>
                            </div>
                        </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="button" class="btn btn-primary">Change</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customJs')
    <script>
        $(document).ready(function() {
            var table = $('#importDataTable').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: true,
                ajax: {
                    url: "{{ route('admin.import.paginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                        // d.month_id = $("#monthIdFilter option:selected").val(),
                        // d.year_id = $("#yearIdFilter option:selected").val()
                    },
                },
                "drawCallback": function(settings) {

                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'file_name',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'insert_count',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'error_count',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'total_count',
                        searchable: true,
                        orderable: false
                    },

                    // {
                    //     data: 'update_count',
                    //     searchable: true,
                    //     orderable: false
                    // },

                    // {
                    //     data: 'file_upload',
                    //     searchable: true,
                    //     orderable: false
                    // },
                    {
                        data: 'import_type',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'status',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'dateTime',
                        searchable: true,
                        orderable: false
                    }

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

            });

            $('#importForm').validate({
                ignore: ".ignore",
                rules: {
                    import_type: {
                        required: true
                    },
                    importFormType: {
                        required: true
                    },
                    importFile: {
                        required: true
                    }
                },
                messages: {},
                errorPlacement: function(error, element) {
                    var placement = $(element).data('error');
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    // return false;
                    $("#submit").html('<span> Processing...</span>');
                    $("#submit").attr('disabled', true);
                    $('.progress .progress-bar').css('width', '0%').attr(
                        'aria-valuenow', 0);

                    var formData = new FormData($("#importForm")[0]);
                    $.ajax({
                        url: "{{ route('admin.save.import.file') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        xhr: function() {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function(evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = evt.loaded / evt.total;
                                    var percentage = Math.round(percentComplete *
                                        100);
                                    $('.progress .progress-bar').css('width',
                                        percentage + '%').attr('aria-valuenow',
                                        percentage);
                                }
                            }, false);
                            return xhr;
                        },
                        success: function(response, textStatus, xhr) {
                            $("#submit").html('Upload');
                            $("#submit").attr('disabled', false);
                            if (response.status == 1) {
                                $.notify(response.message, "success");
                                // $("#ImportModal").modal('hide');
                                $("#importForm")[0].reset();
                                $("#importForm").validate().resetForm();

                                $("#importDataTable")
                                    .DataTable()
                                    .ajax.reload(null, false);
                                // $('.progress .progress-bar').css('width', '0%').attr(
                                //     'aria-valuenow', 0);
                                setTimeout(function() {
                                    $("#ImportModal").modal('hide');
                                }, 1000);

                            } else {
                                $.notify(response.message, "error");
                                $('.progress .progress-bar').css('width', '0%').attr(
                                    'aria-valuenow', 0);
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $("#submit").html('Upload');
                            $("#submit").attr('disabled', false);
                            $.notify(jqXHR.responseJSON.message, "error");
                            $('.progress .progress-bar').css('width', '0%').attr(
                                'aria-valuenow', 0);
                        }
                    }); //ajax
                }
            });

            // var message = $('.success__msg');
            // $('#UploadfileID').ajaxForm({
            //     beforeSend: function() {
            //         var percentage = '0';
            //     },
            //     uploadProgress: function(event, position, total, percentComplete) {
            //         var percentage = percentComplete;
            //         $('.progress .progress-bar').css("width", percentage + '%',
            //             function() {
            //                 return $(this).attr("aria-valuenow",
            //                     percentage) + "%";
            //             })
            //     },
            //     complete: function(xhr) {
            //         console.log('File has uploaded');
            //         message.fadeIn().removeClass('alert-danger').addClass(
            //             'alert-success');
            //         message.text("File Uploaded successfully.");
            //         setTimeout(function() {
            //             message.fadeOut();
            //         }, 2000);
            //         form.find('input:not([type="submit"]), textarea').val('');
            //         var percentage = '0';
            //     }
            // });

        });
    </script>

    <script>
        function get_import_data(type, importType, importId = null) {
            $("#importForm")[0].reset();
            $("#importForm").validate().resetForm();
            // $("#importId").val(importId);
            // $("#ImportModal").modal('show');
            $('.progress .progress-bar').css('width', '0%').attr(
                'aria-valuenow', 0);

            $.ajax({
                url: "{{ route('admin.get.import.file.data') }}",
                type: "POST",
                data: {
                    type: type,
                    importId: importId,
                    _token: "{{ csrf_token() }}",
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        if (type == "edit") {
                            // $("#addEditDoctorModalLabel").html("Edit Import");
                            $("#importId").val(importId);
                        } else {
                            // $("#addEditDoctorModalLabel").html("Add Import");
                        }
                        $("#importFormType").val(type);
                        $("#import_type").val(importType);
                        $("#ImportModal").modal("show");
                    } else $.notify(response.message, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                },
            }); //ajax
        }
    </script>
@endsection