@extends('admin.layout.layout')

@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row">

            <div class="col-auto my-auto">
                <h2 class="main_title">Import File</h2>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto col-auto ms-auto">
                <a href="{{ url('import_sample/vector_genie_rst.xlsx') }}" class="btn btn-primary"> <i
                        class="fa-regular fa-file-lines me-2"></i> RST Data Sample</a>
            </div>
            {{-- <div class="col-lg-auto col-md-auto col-sm-auto col-auto">
                <button type="button" class="btn btn-primary"> <i class="fa-regular fa-file-lines me-2"></i> Import input
                    utilization</button>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto col-auto">
                <button type="button" class="btn btn-primary"> <i class="fa-regular fa-file-lines me-2"></i> Import RST
                    data</button>
            </div> --}}
            <div class="col-lg-auto col-md-auto col-sm-auto col-auto">
                <a href="{{ url('import_sample/vector_genie_visit.xlsx') }}" class="btn btn-primary"> <i
                        class="fa-regular fa-file-lines me-2"></i> Visit Data Sample</a>
            </div>

        </div>

        <div class="row mb-3">

        </div>

        <div class="row">
            <div class="col-12 p-0">
                <div class="card">
                    <div class="card-datatable p-3">

                        <div class="row">
                            <div class="col-lg-4 my-auto">
                                <div class="row">
                                    <div class="col-lg-10  col-md-6 my-auto">
                                        {!! Form::open([
                                            'url' => '#',
                                            'name' => 'importFileForm',
                                            'id' => 'importFileForm',
                                            'enctype' => 'multipart/form-data',
                                        ]) !!}

                                        <div class="col-lg-12 col-12 mb-2">
                                            <select id="importType" name="importType"
                                                class="select2 js-example-basic-single select-label form-control w-100">
                                                <option value="" selected disabled>Select Type</option>
                                                <option value="rst"> Import RST</option>
                                                {{-- <option value="input_utilization"> Import input utilization </option>
                                                <option value="rst_data"> Import RST data</option> --}}
                                                <option value="visit"> Import visit data</option>
                                            </select>
                                            <label id="importType-error" class="error" for="importType"></label>
                                        </div>
                                        <div id="monthDiv" class="col-lg-12 col-12 mb-2">
                                            <select id="month" name="month"
                                                class="select2 js-example-basic-single select-label form-control w-100">
                                                <option value="" selected disabled>Select Month</option>
                                                <option value="january">January</option>
                                                <option value="february">February</option>
                                                <option value="march">March</option>
                                                <option value="april">April</option>
                                                <option value="may">May</option>
                                                <option value="june">June</option>
                                                <option value="july">July</option>
                                                <option value="august">August</option>
                                                <option value="september">September</option>
                                                <option value="october">October</option>
                                                <option value="november">November</option>
                                                <option value="december">December</option>
                                            </select>
                                            <label id="month-error" class="error" for="month"></label>
                                        </div>
                                        <div class="form-group mt-2">

                                            <button type="button" class="btn btn-outline-primary w-100" id="fileButton">
                                                <input type="file" id="import" name="import"
                                                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                                                <span id="fileName">Browse</span>
                                                <i class="fa fa-upload ml-1" style="color: #07529b;"></i>
                                            </button>
                                            <label id="import-error" class="error" for="import"></label>
                                            <p class="text-danger text-center mt-1">(Max. size 10 MB per file)</p>
                                        </div>

                                        <button type="submit" id="submit"
                                            class="btn btn-primary cess mx-auto d-block mt-1">
                                            Upload
                                        </button>
                                        {!! Form::close() !!}
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8  my-auto">
                                <h4 class="mb-4" style="text-decoration:underline">Instructions for Import File:</h4>
                                <p><i class="fa fa-angle-double-right me-1"></i>Please use Date Format in dd/mm/yyyy (Eg.,
                                    31/03/2024)</p>
                                <p><i class="fa fa-angle-double-right me-1"></i>Please ensure that you save and close the
                                    excel sheet in
                                    your computer before you upload the file.</p>
                            </div>
                        </div>

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

            <div class="white_shadow1">
                <div class="col-12">
                    <table id="importDataTable" class="table data-table-dr w-100">
                        <thead>
                            <tr>
                                <th>Sr. No.</th>
                                <th>File Name</th>
                                <th>Insert Count</th>
                                <th>Update Count</th>
                                <th>Error Count</th>
                                <th>Total Count</th>
                                <th>Status</th>
                                <th>Type</th>
                                <th>Remarks </th>
                                <th>Import Date & Time</th>
                            </tr>
                        </thead>
                        <tbody>

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

        </div>

    </div>

    </div>
    <div class="modal fade" id="download" 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="exampleModalLabel">Download</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="item_green">
                        <button class="btn"><i class="fa-regular fa-file-excel me-2"></i> Import RST</button>
                    </div>
                    <div class="item_green">
                        <button class="btn"><i class="fa-regular fa-file-excel me-2"></i> Import input
                            utilization/reporting in given format</button>
                    </div>
                    <div class="item_green">
                        <button class="btn"><i class="fa-regular fa-file-excel me-2"></i> Import RST data</button>
                    </div>
                    <div class="item_green">
                        <button class="btn"><i class="fa-regular fa-file-excel me-2"></i> Import visit data - Month
                            selection </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customJs')
    <script>
        $(document).ready(function() {

            $.validator.addMethod('filesize', function(value, element, param) {
                // param is the value we pass in the rule definition (10485760 for 10 MB)
                return this.optional(element) || (element.files[0].size <= param);
            }, function(param) {
                // Display file size in MB
                var maxSizeInMB = param / 1048576;
                return 'File size must be less than ' + maxSizeInMB.toFixed(2) + ' MB.';
            });

            $('#importFileForm').validate({
                ignore: ".ignore",
                rules: {
                    import: {
                        required: true,
                        filesize: 10485760 // Max 10 MB in bytes
                    },
                    month: {
                        required: true,
                    },
                    importType: {
                        required: true,
                    }
                },
                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('save.import') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            var flag = 0;
                            if (response.status == 2) {

                                $("#submit").html('Upload');
                                $("#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('Upload');
                                $("#submit").attr('disabled', false);
                                // $.notify(response.message, "error");
                            } else {
                                // $.notify(response.message, "success");
                                $("#submit").html('Upload');
                                $("#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('Upload');
                                $("#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('Upload');
                                $("#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('import.paginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                    },
                    error: function(jqxhr, textStatus, errorThrown) {
                        window.location.reload();
                    }
                },
                "drawCallback": function(settings) {

                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'fileName',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'insertCount',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'updateCount',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'errorCount',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'totalCount',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'status',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'fileType',
                        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], // Column to target
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    }
                }, ],

            });

            $("#importType").on("change", function() {
                if ($(this).val() == 'visit') {
                    $("#monthDiv").show();
                    $("#month").rules("add", {
                        required: true,
                        messages: {
                            required: "This field is required.",
                        },
                    });
                } else {
                    $("#month").rules("remove", "required");
                    $("#month").val('').trigger('change');
                    $("#monthDiv").hide();
                }
            });

            $('#import').on('change', function() {
                var fileName = $(this).val().split('\\').pop();
                console.log(fileName);
                if (fileName == null || fileName == '') {
                    $('#fileName').text("Browse");
                } else {
                    $('#fileName').text(fileName);
                }
            });
        });
    </script>

    <script>
        function downloadImportData(id, importType, status) {
            window.open(
                "{{ route('import.data.download') }}?id=" +
                id +
                "&importType=" +
                importType +
                "&status=" +
                status,
                "_blank"
            );
        }
    </script>
@endsection