@extends('layouts.app')

@section('content')

<div class="card-header"><span><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></span> >
    <span>{{ __('Employee Data') }}</span></div>
<div class="card-body dashboard-card">
   
    {{-- <!------- File upload----->
    <div class="row">
        <div class="col-md-10">

            <form action="{{ route('importdata.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="ml-2">
                        <span>Select file for importing</span>
                    </div>
                    <div class="ml-2">
                        <input type="file" name="file" id="file" class="form-control" required />
                    </div>
                    <div class="ml-2">
                        <button type="submit" class="btn">Upload</button>
                    </div>
                </div>
            </form>

        </div>
        
    </div> --}}

    <!------- Filter data by Datewise----->
    <div class="row search-form mt-4">
        <div class="col-md-8">

            <form id="search_form" action="{{ route('importdata.search') }}" method="POST" style="display: none">
                @csrf
                <div class="row">
                    <div class="ml-2">
                        <span>Select Range</span>
                    </div>
                    <div class="ml-2">
                        <input type="date" name="from_date" id="from_date" class="form-control"
                            value="{{ $from_date??'' }}"  />
                    </div>

                    <div class="ml-2">
                        <input type="date" name="to_date" id="to_date" class="form-control" value="{{ $to_date??'' }}"
                             />
                    </div>
                    <div class="ml-2">
                        <button type="submit" class="btn">Search</button>
                    </div>
                    <div class="ml-2">
                        <button type="button" class="btn refresh_btn"><i class="fa fa-refresh" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </form>

        </div>
        <!------- Export data in table----->
        <div class="col-md-4">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12">
                    <a class="btn" href="#" data-toggle="modal" data-target="#importModal">Import</a>
                </div>
                <div class="col-lg-6 col-md-6 col-12">

                    <form id="form" action="{{ route('importdata.export') }}" method="get">
                        @csrf
                    <input type="hidden" name="from_date" id="export_from_date" class="form-control"
                                    value="{{ $from_date??'' }}"  />
                    <input type="hidden" name="to_date" id="export_to_date" class="form-control" value="{{ $to_date??'' }}"
                                    />
                    <button type="submit" class="btn" id="export_btn">Export</button>
                    </form>
                </div>
                
            </div>
        </div>
    </div>

    <!------- Data table----->
    <div class="row mt-4">
        <div class="col-12 table-responsive">
            <table class="table table-bordered datatable">
                <thead>
                    <tr>
                        <th class="text-center" width="2%">Sl.No</th>
                        <th width="5%">Employee ID</th>
                        <th width="24%">Name</th>
                        <th width="10%">Phone</th>
                        <th width="10%">Email</th>
                        <th width="13%">Q-ID</th>
                        <th width="15%">Designation</th>
                        <th width="16%">Created At</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!---- Import modal --->
<div class="modal" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Verified data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="importForm" name="importForm" class="form-horizontal" enctype="multipart/form-data" action="{{ route('importdata.import') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Select file for uploading</label>
                        <input type="file" name="file" id="file" class="form-control" accept=".xlsx, .xls, .csv" required />
                    </div>
                    <div class="alert alert-danger mt-2 error_import_file" style="display: none">Please enter
                        correct data</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="uploadBtn">Upload File</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script type="text/javascript">
    var _token = $('meta[name="csrf-token"]').attr('content');
    var s_message = "{{session('success')}}";
    var e_message = "{{session('error')}}";

    $(function () {

        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();

        var table = $('.datatable').DataTable({
            processing: true,
            serverSide: true,

            ajax: {
                "url": "{{ route('importdata.post') }}",
                "dataType": "json",
                method: "POST",
                data: {
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    _token: _token
                },
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'employee_id',
                    name: 'employee_id'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'q_id',
                    name: 'q_id'
                },
                {
                    data: 'designation',
                    name: 'designation'
                },
                {
                    data: 'created_date',
                    name: 'created_date'
                },
                // {
                //     data: 'action',
                //     name: 'action',
                //     orderable: false,
                //     searchable: false
                // },
            ],
            'columnDefs': [
                    {
                        "targets": 0, 
                        "className": "text-center"
                }
            ]
        });

        // //Show success message
        // if (s_message)
        //     Swal.fire({
        //         text: s_message,
        //         type: 'success',
        //         confirmButtonText: 'Ok',
        //         confirmButtonColor: "rgb(174,46,184)"

        //     });
        // if (e_message)
        //     Swal.fire({
        //         text: e_message,
        //         type: 'error',
        //         confirmButtonText: 'Ok',
        //         confirmButtonColor: "rgb(174,46,184)"

        //     });



            // Import data modal submit

        $('#importForm').submit(function(e) {

            e.preventDefault();
            $('#uploadBtn').html('Uploading..');

            let formData = new FormData(this);

            $.ajax({
                type: "POST",
                url: "{{ route('importdata.import') }}",
                data:formData,
                contentType: false,
                processData:false,
                success: function (data) {
                    if (data.status == "success") {
                        $('#importForm').trigger("reset");
                        $('#uploadBtn').html('Upload file');
                        $(".error_import_file").hide();

                        $('#importModal').modal('hide');
                        Swal.fire({
                            text: data.message,
                            type: 'success',
                            confirmButtonText: 'Ok',
                            confirmButtonColor: "#0F61A5"

                        }).then((result) => {
                        // Reload the Page
                        location.reload();
                        });
                    } else {

                        $(".error_import_file").text(data.message);
                        $(".error_import_file").show();
                        $('#uploadBtn').html('Upload file');
                    }

                },
                error: function (data) {
                    // console.log('Error:', data);
                    $('#uploadBtn').html('Upload file');
                }
            });
        });
        // Refresh date range
        $( ".refresh_btn" ).on( "click", function() {
            
            $('#from_date').val("");
            $('#to_date').val("");
           
        });
        
    });

</script>
@endsection