@include('division.layout.header')
<style>
    label#file_name-error {
        display: flex !important;
        justify-content: center;
    }
</style>
<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row">

        <div class="col-auto my-auto">
            <h2 class="main_title">Import Rsm Details</h2>
        </div>
        <div class="col-lg-auto  col-md-auto col-sm-auto ms-auto">
            <a href="{{ asset('samples/rsmDetailsUpdateImportSample.xlsx') }}" class="btn btn-primary"><i
                    class="fa fa-download me-2"></i>Download Sample </a>
        </div>

    </div>

    <div class="row mb-3">
    </div>

    <div class="row">

        <div class="col-12">
            <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">
                                    <div class="col-lg-auto  col-md-6 col-sm-6">

                                    </div>
                                    {!! Form::open([
                                        'url' => '#',
                                        'name' => 'fileImportForm',
                                        'id' => 'fileImportForm',
                                        'enctype' => 'multipart/form-data',
                                    ]) !!}
                                    <div class="form-group mt-2">
                                        <p class="text-center"><b>Import Rsm Details</b></p>
                                        <p class="text-center mb-1">Add File</p>
                                        <input type="hidden" id="import_type" name="import_type"
                                            value="rsm_details_update">
                                        <button class="btn btn-outline-primary w-100">
                                            <input type="file" id="file_name" name="file_name" class="upload-file"
                                                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                            <span class="filename">Browse</span>
                                            <i class="fa fa-upload ml-1" style="color: #07529b;"></i>
                                        </button>
                                        <label id="file_name-error" class="error" for="file_name"></label>
                                        <label id="import_type-error" class="error" for="import_type"></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 Contracts:</h4>
                            {{-- <p><i class="fa fa-angle-double-right me-1"></i>1. Please use date format in dd-mm-yyyy(Eg., 31-03-2024)</p> --}}
                            <p><i class="fa fa-angle-double-right me-1"></i>1. Please ensure that you save and close the
                                excel sheet in your computer before you upload the file.</p>
                            <p><i class="fa fa-angle-double-right me-1"></i>2. System can process 1000 records in 10
                                minutes to check all the necessary validations. So, please wait for appropriate time
                                based on the records imported in Excel sheet and refresh the page to check the status.
                            </p>
                            <p><i class="fa fa-angle-double-right me-1"></i>3. Please remove all formulas from excel
                                sheet before importing. Please copy all data and paste as value before importing Excel
                                sheet.</p>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-datatable p-3">
                    <div class=" table-responsive">

                        <table id="rsmDetailsImportDataTable" class="table data-table-dr w-100">
                            <thead>
                                <tr>
                                    <th>Sr. No.</th>
                                    <th>Updated Contracts</th>
                                    <th>Error Contracts</th>
                                    <th>Total Contracts</th>
                                    <th>Status</th>
                                    <th>Remarks </th>
                                    <th>Import Date & Time</th>
                                </tr>
                            </thead>
                            <tbody>

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

</div>

</div>

@include('division.layout.footer')

<script>
    $(document).ready(function() {
        $.validator.addMethod('filesize', function(value, element, param) {
            return this.optional(element) || (element.files[0].size <= param)
        });

        $('#fileImportForm').validate({
            ignore: ".ignore",
            rules: {
                file_name: {
                    required: true,
                    filesize: 10485760 // 10485760 (10 mb)
                },
                import_type: {
                    required: true
                }
            },
            messages: {
                file_name: {
                    filesize: "File size must be less than 10 MB."
                },
                import_type: {
                    required: "Something went wrong. Please reload the page."
                }
            },
            submitHandler: function(form) {
                // Display SweetAlert2 confirmation dialog
                Swal.fire({
                    title: 'Are you sure?',
                    text: 'You are about to upload the file.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, upload it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('.filename').html('Browse');

                        // Proceed with the AJAX request
                        $("#submit").html('<span> Processing...</span>');
                        $("#submit").attr('disabled', true);

                        var formData = new FormData($("#fileImportForm")[0]);
                        $.ajax({
                            url: "{{ route('adminSaveImportFile') }}",
                            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");
                                    $("#fileImportForm")[0].reset();
                                    $("#fileImportForm").validate().resetForm();
                                    $("#submit").html('Upload');
                                    $("#submit").attr('disabled', false);
                                    $("#rsmDetailsImportDataTable")
                                        .DataTable()
                                        .ajax.reload(null, false);
                                    // setTimeout(function() {
                                    //     location.reload();
                                    // }, 2000);
                                }
                            },
                            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 = $('#rsmDetailsImportDataTable').DataTable({
            scrollX: true,
            destroy: true,
            processing: true,
            serverSide: true,
            responsive: false,
            autoWidth: false,
            ajax: {
                url: "{{ route('importRsmDetailsPaginate') }}",
                data: function(d) {
                    d._token = "{{ csrf_token() }}",
                    d.import_type = "rsm_details_update"
                },
            },
            "drawCallback": function(settings) {

            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'update_count',
                    searchable: true,
                    // orderable: false
                },
                {
                    data: 'error_count',
                    searchable: true,
                    // orderable: false
                },
                {
                    data: 'total_count',
                    searchable: true,
                    // orderable: false
                },
                {
                    data: 'status',
                    searchable: true,
                    // orderable: false
                },
                {
                    data: 'comment',
                    searchable: true,
                    // orderable: false
                },
                {
                    data: 'created_at',
                    searchable: true,
                    // orderable: false
                }

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

    });

    $('.upload-file').change(function() {
        var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
        // console.log(filename);
        $(this).siblings('span').html(filename);
    });
</script>