@extends('layouts.master')
@section('title', 'Import Contact')
@section('css')
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    @section('breadcrumbs')
    <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
        <ol class="breadcrumb mb-0 me-1">
            <li class="breadcrumb-item">
                <a href="{{ route('admin.contact.index') }}">Contacts</a>
            </li>
            <li class="breadcrumb-item active">
                Import Contact
            </li>

        </ol>
    </nav>
    @endsection

    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header justify-content-between align-items-center">
                    <h5 class="mb-3">Import Contact</h5>
                    <a href=" {{asset(config('const.contactImportSampleFile'))}}">Template file to be downloaded</a>
                </div>
                <div class="card-body">
                    @include('admin.errors.error')
                    {!! Form::open([
                    'route' => 'admin.contact.import.data',
                    'id' => 'createform',
                    'name' => 'createform',
                    'enctype' => 'multipart/form-data',
                    ]) !!}

                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                {!! Form::label('file_name', 'Upload CSV File', ['class' => 'form-label', 'for' => 'file_name']) !!}
                                <span class="error">*</span>
                                <input class="form-control" type="file" id="file_name" name="file_name" tabindex="2" tabindex="2">
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-6">
                            <button type="button" id="preview_button" class="btn btn-primary submitbutton d-none"><span class="spinner-border me-1 preview-loader-btn d-none" role="status" aria-hidden="true"> </span> Preview</button>
                        </div>
                    </div>


                    <button type="submit" class="btn btn-primary submitbutton"><span class="spinner-border me-1 loader-btn d-none" role="status" aria-hidden="true"> </span> Upload</button>

                    <a href="{{route('admin.contact.index')}}" class="btn btn-secondary">Cancel</a>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    @include('admin.contact.contact-preview-model')
</div>
@endsection

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

        $("#createform").validate({
            rules: {
                file_name: {
                    required: true,
                    extension: "csv"
                },
            },
            messages: {
                file_name: {
                    extension: "Please select a file with a csv extension only"
                },
            },
            submitHandler: function(form) {
                if ($("#createform").validate().checkForm()) {
                    $('.submitbutton').attr('disabled', true);
                    $('.loader-btn').removeClass("d-none");
                    form.submit();
                }
            }
        });

        $('#file_name').on('change', function() {
            if ($(this).val() && $("#createform").valid()) {
                $('#preview_button').removeClass('d-none');
            } else {
                $('#preview_button').addClass('d-none');
            }
        })

        $('#preview_button').on('click', function() {
            $('.preview-loader-btn').removeClass('d-none');

            var data = new FormData();
            var files = $('#file_name')[0].files;
            data.append('file', files[0]);

            $.ajax({
                url: "{{ route('admin.contact.show-preview-data') }}",
                type: "POST",
                data: data,
                cache: false,
                processData: false,
                contentType: false,
                success: function(response) {

                    $("#contact-data-div").html(response.tableData);
                    $("#fileName").html(response.fileName);
                    $("#totalRows").html(response.totalRows);
                    $('#script-view').modal('show');

                    var dataTable = $('#script-view').find('.contact-list').DataTable({
                        lengthMenu: getPageLengthDatatable(),
                        "searching": true,
                        "ordering": false,
                        "bFilter": true,
                        "bInfo": true,
                        "bLengthChange": true,
                    });

                    setTimeout(() => {
                        $('#script-view').modal('show');
                        $.fn.dataTable.tables({
                            visible: true,
                            api: true
                        }).columns.adjust();
                    }, 100);

                },
                error: function(error) {
                    console.log(error);
                    toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                },
                complete: function() {
                    $('.preview-loader-btn').addClass('d-none');
                }
            });
        })


    });
</script>
@endsection