@extends('User/layout/app')
@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row justify-content-end mb-4">
            <div class="col-lg-auto  col-md-6 col-sm-auto">
                <div class="d-flex align-items-center">
                    <div>
                        <a href="#" class="btn btn-primary ms-2 px-5" data-bs-toggle="modal"
                            data-bs-target="#importModal">
                            <i class="fa-solid fa-file-import" style="color: #ffffff;"></i> Import
                        </a>
                        <a href="{{ asset('import/ImportUser.xlsx') }}" download="ImportUser.xlsx"
                            class="btn btn-danger ms-2 px-5">
                            <i class="fa-solid fa-download" style="color: #ffffff;"></i> Download
                        </a>
                    </div>
                </div>

            </div>



            <div class="row">
                <div class="col-12">
                    <div class="white_table">
                        <table class="table table-striped datatable" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>File</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Import Count</th>
                                    <th>Insert Count</th>
                                    <th>Update Count</th>
                                    <th>Error Count</th>
                                    <th>Comments</th>
                                    <th>Date and Time</th>
                                </tr>
                            </thead>
                            <tbody>

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


        <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title fs-5" id="importModalLabel">Import Users</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                                class="fa-solid fa-xmark"></i></button>
                    </div>
                    {{ Form::open(['url' => '#', 'name' => 'importModalForm', 'id' => 'importModalForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="hospital_name" class="form-label">Import File <span
                                            class="red_star">*</span></label>
                                    <div class="input_pre">
                                        <input type="file" name="import_file" id="import_file"
                                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 text-center">
                                <div class="mb-3">
                                    <button type="submit" id="importModalSubmit"
                                        class=" btn btn-primary mt-4">Submit</button>
                                </div>
                            </div>
                        </div>

                    </div>

                    {{ Form::close() }}

                </div>
            </div>
        </div>
    @endsection


    @section('js')
        <script>
            function status(id) {
                $.ajax({
                    url: "{{ route('ChangeEnrolledDoctorStatus') }}",
                    type: 'POST',
                    data: {
                        'id': id,
                        '_token': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        if (response.status == 1) {
                            $.notify(response.msg, "success");
                        } else
                            $.notify(response.msg, "error");
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $.notify(jqXHR.responseJSON.message, "error");
                    }
                });
            }


            $(document).ready(function() {
                $('#importModalForm').validate({
                    ignore: ".ignore",
                    rules: {
                        import_file: {
                            required: true,
                        },
                    },
                    messages: {},
                    submitHandler: function(form) {
                        $("#importModalSubmit").attr('disabled', true);

                        var formData = new FormData($("#importModalForm")[0]);
                        $.ajax({
                            url: "{{ route('AddImportFile') }}",
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            dataType: "json",
                            success: function(response) {
                                // console.log(response);
                                if (response.status == 1) {
                                    // Success message
                                    refreshDataTable();
                                    $("#importModalSubmit").attr('disabled', false);
                                    $('#importModal').modal('hide');
                                    $.notify(response.msg, "success");
                                } else {
                                    // Error message
                                    $("#importModalSubmit").attr('disabled', false);
                                    $.notify(response.msg, "error");
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                // Error in request
                                $("#importModalSubmit").attr('disabled', false);
                                $.notify("An error occurred", "error");
                            }
                        })
                    }

                });
                filterData();

                $('#applyfilter').click(function() {
                    filterData();
                });

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

                function filterData() {
                    var i = 1;
                    var table = $('.table').DataTable({
                        scrollX: true,
                        destroy: true,
                        processing: true,
                        serverSide: true,
                        responsive: true,
                        autoWidth: false,
                        ajax: {
                            url: "{{ route('ImportUserPaginate') }}",
                            data: function(d) {
                                _token: "{{ csrf_token() }}";
                            },
                        },
                        "drawCallback": function(settings) {
                            new VenoBox({
                                selector: ".venobox_img",
                                numeration: true,
                                infinigall: true,
                                share: true,
                                spinner: 'plane'
                            });
                        },
                        columns: [{
                                data: 'DT_RowIndex',
                                name: 'DT_RowIndex',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'file_name',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'file_type',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'file_status',
                                orderable: false,
                                searchable: true
                            },
                            {
                                data: 'import_count',
                                orderable: false,
                                searchable: false

                            },
                            {
                                data: 'insert_count',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'update_count',
                                orderable: false,
                                searchable: true
                            },
                            {
                                data: 'error_count',
                                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, 8, 9],
                            "mRender": function(data, type, full) {
                                if (data != null) {
                                    return data;
                                } else {
                                    return '-';
                                }
                            },
                        }, ],

                    });

                }




                function refreshDataTable() {
                    $('.table').DataTable().ajax.reload();
                }
            });
        </script>
    @endsection