@extends('layouts.default')
@section('content')
<style>
.pagination {
    margin-top: 20px;
}

.pagination .page-item {
    display: inline-block;
    margin-right: 5px;
}

.pagination .page-link {
    
    padding: 5px 10px;
    
    background-color: #007BFF;
    color: #fff;
    border: 1px solid #007BFF;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.pagination .page-link:hover {
    background-color: #0056b3;
}

.pagination .page-item.disabled .page-link {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #dee2e6;
}
#myTable_wrapper{
      overflow: auto;
    height: 68vh;

}
</style>
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Import Contact</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <br>
    <section class="content">
        <div class="container-fluid">
            <br>
            <br>
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
            @endif
            @if ($message = Session::get('error'))
            <div class="alert alert-danger">
                <p>{{ $message }}</p>
            </div>
            @endif

            <a class="btn btn-sm btn-primary" href="{{ url('/nonverifydatasget') }}" style="float: right;">Get Data</a>


            <label>Only CSV File Uploading</label>
              <br>
              
         <form action="UploadfileforNonV" method="post" enctype="multipart/form-data" style="display: inline-flex;" onsubmit="return validateForm()">
            @csrf
            <input required type="file" id="myFile" name="file" accept=".csv" >
            <input type="submit" class="btn btn-success btn-sm">
        </form>
        
        
        





  <div class="box box-success">
            <div class="box-body">
 
                <table id="myTable" class="table table-bordered">
                    <thead >
                        <tr class="success">
                          <th>ID</th>
                          <th>Created At</th>
                          <th>Upload By</th>
                          <th>Parent File Name</th>
        
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data as $dta)
                        <tr class="success">
                            <td>{{ $dta->id }}</td>
                            <td>{{ $dta->created_at }}</td>
                            <td>Self</td>
                            <td>{{ $dta->parent_file_name }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                
                
            </div>
        </div>                
                
                
                <div class="col-md-12">
                    <ul class="pagination justify-content-center">

                    </div>
                </div>
            </section>
        </div>
        <aside class="control-sidebar control-sidebar-dark"></aside>

        <!--<script src="https://code.jquery.com/jquery-3.7.0.js"></script>-->
        <!--<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>-->
        <!--<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">-->
        <!-- Ensure jQuery and DataTables CSS and JS are included -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
 
        <script>
        
                function validateFileInput() {
            const fileInput = document.getElementById('myFile');
            const filePath = fileInput.value;
            const allowedExtensions = /(\.csv)$/i;

            if (!allowedExtensions.exec(filePath)) {
                alert('Please upload a file with a .csv extension.');
                fileInput.value = ''; // Clear the file input
                return false;
            }

            return true;
        }

        function validateForm() {
            // Additional form validation if needed
            return validateFileInput();
        }
 
	 $(document).ready(function() {
            $('#myTable').DataTable({
                "paging": true,             
                "searching": true,          
                "info": true,               
                "ordering": true,           
                "lengthChange": true,        
                "lengthMenu": [500, 1000],   
            });
            
           
    });
        
         $('#showAll').on('click', function() {
                table.page.len(-1).draw();
            });
 
    let table = new DataTable('#myTable');
    $(document).ready(function() {
        $('#myTable').DataTable();
    });

setTimeout(function() {
    $(".alert").hide();
}, 5000);
</script>

        @stop