@extends('admin/app/layout')
@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="justify-content-end mb-4">
            <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-9  col-md-9 my-auto">

                                    <meta name="csrf-token" content="{{ csrf_token() }}">

                                    <div class="form-group">
                                        <button class="btn btn-outline-primary w-100">
                                            <input type="file" id="import_file" name="import_file" accept=".xls,.xlsx"
                                                onchange="updateFileName()">
                                            <span id="fileName">Browse</span>
                                            <i class="fa fa-upload ml-1" style="color: #000;"></i>
                                        </button>
                                        <p class="text-danger text-center mt-1">(Max. size 10 MB per file)</p>
                                        <span id="file_message" class="text-danger text-center d-block"></span>
                                    </div>

                                </div>
                                <div class="col-lg-3 col-md-3">
                                    <button id="import_file_button" class="btn btn-primary cess mx-auto d-block">
                                        Upload
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8  ">
                            <div class="row">
                                <div class="col-lg-auto  col-md-auto col-sm-auto my-auto col-12 ms-auto text-center">
                                    <a href="{{ asset('admin-assets/excel/SampleFile.xlsx') }}"
                                        class="btn btn-light download_file" download>
                                        <img src="{{ asset('admin-assets/images/excel.png') }}" class="me-2"> Download
                                        Sample
                                    </a>
                                    {{-- <button class="btn btn-light inport_file ms-2">
                                    <input type="file">
                                    <i class="fa fa-upload me-2" style="color: #4caf50;"></i>Browse
                                </button> --}}

                                </div>
                                <div class="col-lg-auto  col-md-8 col-sm-12 ">
                                    <div class="d-flex align-items-center">
                                        <div id="reportrange" class="daterange">
                                            <i class="fa fa-calendar"></i>&nbsp;
                                            <span>October 25, 2023 - November 23, 2023</span> <i
                                                class="fa fa-caret-down"></i>
                                        </div>
                                        <input type="hidden" name="datefilter" id="datefilter">

                                        <button id="applyfilter" class="btn btn-primary ms-2"><i
                                                class="fa fa-search"></i></button>
                                        <button id="clearfilter" class="btn btn-danger ms-2"><i
                                                class="fa fa-times"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

        <div class="row">
            <div class="col-12">
                <div class="white_table">
                    <table class="table table-striped datatable" id="table_1" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr. No.</th>
                                <th>Valid Import</th>
                                <th>Error Import</th>
                                <th>Total Import</th>
                                <th>Generate </th>
                                {{-- <th>Action</th> --}}
                                <th>Status</th>
                                <th>Remarks </th>
                                <th>Import Date & Time</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $('#applyfilter').click(function() {
            filterData();
        });

        $('#clearfilter').click(function() {
            window.location.reload();
        });


        function filterData() {
            var i = 1;
            var table = $('#table_1').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                language: {
                    searchPlaceholder: "Search"
                },
                ajax: {
                    url: "{{ route('ImportDetailPaginate') }}",
                    data: function(d) {
                        _token: "{{ csrf_token() }}";
                        d.datefilter = $('#datefilter').val();
                    },
                },
                "drawCallback": function(settings) {
                    // new VenoBox({
                    //     selector: ".vbox-item",
                    //     numeration: true,
                    //     infinigall: true,
                    //     share: true,
                    //     spinner: 'plane'
                    // });
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    // {
                    //     data: 'name',
                    //     orderable: false,
                    //     searchable: true
                    // },
                    {
                        data: 'valid_count',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'error_count',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'import_count',
                        orderable: false,
                        searchable: true
                    },

                    {
                        data: 'generate',
                        orderable: false,
                        searchable: true
                    },
                    // {
                    //     data: 'action',
                    //     orderable: false,
                    //     searchable: false
                    // },
                    {
                        data: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'comment',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false,
                        searchable: false
                    },
                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6, 7],
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    },
                }, ],

            });

        }

        function updateFileName() {
            const fileInput = document.getElementById('import_file');
            const fileNameSpan = document.getElementById('fileName');

            if (fileInput.files.length > 0) {
                fileNameSpan.textContent = fileInput.files[0].name;
            } else {
                fileNameSpan.textContent = 'Browse';
            }
        }


        function generate(id) {
            let formData = new FormData();
            formData.append('id', id);
            $('.allGenerateButton').prop('disabled', true);

            $.ajax({
                url: '{{ route('generateImportPoints') }}',
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if(response.status == 1){
                        $.notify(response.message, "success");
                    }else{
                        if(response.message){
                            $.notify(response.message, "warn");
                        }else{
                            $.notify("Failed to generate data", "warn");
                        }
                    }
                    filterData();
                }
            });
        }

        // Not In Use
        // function reset(id) {
        //     let formData = new FormData();
        //     formData.append('id', id);
        //     $('.allResetButton').prop('disabled', true);
        //     $.ajax({
        //         url: '{{ route('resetImportPoint') }}', // Your upload route
        //         method: 'POST',
        //         data: formData,
        //         contentType: false,
        //         processData: false,
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         },
        //         success: function(response) {
        //             if(response.status == 1){
        //                 $.notify(response.message, "success");
        //             }else{
        //                 if(response.message){
        //                     $.notify(response.message, "warn");
        //                 }else{
        //                     $.notify("Failed to generate data", "warn");
        //                 }
        //             }
        //             filterData();
        //         },
        //         error: function(xhr) {
        //             $.notify("Failed to generate data", "error");
        //             filterData();
        //         }
        //     });
        // }

        $(document).ready(function() {
            filterData();

            $('#import_file_button').click(function(e) {
                e.preventDefault();
                var fileInput = $('#import_file')[0];
                var fileMessage = $('#file_message');

                fileMessage.text('');

                if (fileInput.files.length === 0) {
                    fileMessage.text('No file uploaded');
                    return;
                }

                var file = fileInput.files[0];
                var fileName = file.name;
                var fileSize = file.size;
                var fileType = file.type;

                if (!fileName.endsWith('.xls') && !fileName.endsWith('.xlsx')) {
                    fileMessage.text('File should be an Excel file');
                    $('#import_file').val('');
                    $('#fileName').html('Browse');
                    return;
                }

                if (fileSize > 10 * 1024 * 1024) { // 10 MB in bytes
                    fileMessage.text('File size exceeds 10 MB');
                    $('#import_file').val('');
                    $('#fileName').html('Browse');

                    return;
                }

                let formData = new FormData();
                formData.append('import_file', file);

                $.ajax({
                    url: '{{ route('upload.import.file') }}', // Your upload route
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $.notify("File uploaded successfully", "success");
                        filterData();
                        $('#import_file').val('');
                        $('#fileName').html('Browse');
                    }
                });
            });
        });
    </script>
@endsection