@extends('layouts.app')

@section('title', 'Upload DNC File')

@section('page-specific-style')
<!-- DataTables -->
<link href="{{asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

<link href="{{asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
{{-- <link href="{{asset('assets/libs/datatables/datatables.bundle.css')}}" rel="stylesheet"
    type="text/css" /> --}}

<style>
    /* Style for the file input and button container */
.file-upload-container {
    display: flex; /* Use flexbox to align items horizontally */
    align-items: center; /* Vertically align items in the center */
    gap: 10px; /* Adds space between the file input and the button */
}

/* Style for the file input */
.file-input {
    padding: 10px; /* Adjust padding to match the button */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex-grow: 1; /* Make the file input expand to take up remaining space */
}

/* Style for the upload button */
.upload-btn {
    padding: 10px 20px; /* Add padding for a larger clickable area */
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.upload-btn:hover {
    background-color: #45a049; /* Darker green on hover */
}

</style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="mb-0">DNC</h4>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @elseif(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @can('Upload dnc file')
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <form action="{{ route('upload-dnc-file') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="file-upload-container">
                                <!-- File Input -->
                                <input type="file" name="file" class="form-control" id="file" class="file-input" required>

                                <!-- Upload Button -->
                                <button type="submit" class="btn btn-primary bg-success border-0">Upload</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endcan

        @can('View dnc')
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-container">
                            <table id="dnc-datatable" class="table table-bordered dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Phone Number</th>
                                        <th>Created on</th>
                                        <th>Violation Date</th>
                                        <th>Consumer city</th>
                                        <th>Consumer state</th>
                                        <th>Consumer area code</th>
                                        <th>Subject</th>
                                        <th>Recorded message or robocall</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endcan
    </div>
@endsection

@section('page-specific-script')
<script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>

<script src="{{asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('assets/libs/jszip/jszip.min.js')}}"></script>
<script src="{{asset('assets/libs/pdfmake/build/pdfmake.min.js')}}"></script>
<script src="{{asset('assets/libs/pdfmake/build/vfs_fonts.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js')}}"></script>

<script src="{{asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>

    <script>

    var leadTable = $('#dnc-datatable').DataTable({
            lengthChange: true,
            pageLength: 10,
            order: [],
            searching: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('fetch-dnc-data') }}",
                data: function (d) {
                    // Add custom filters to the data object
                        // d.created_at_filter = $('#created_at').val();
                        // d.updated_at_filter = $('#updated_at').val();
                        // d.lead_tag_search = $('#lead-tag-search').val();
                        // d.assigned_to_filter = $('#assigned_to').val();
                }
            },
            columns: [
                { "data": "id" },
                { "data": "company_phone_number" },
                { "data": "created_on" },
                { "data": "violation_date" },
                { "data": "consumer_city" },
                { "data": "consumer_state" },
                { "data": "consumer_area_code" },
                { "data": "subject" },
                { "data": "recorded_message_or_robocall" }
            ],
            columnDefs: [
                { targets: [7], orderable: false }, // Disable sorting for specific column
            ],
            order: [[0, 'desc']],
            // stateSave: true,
            // scrollX: true,
            searchDelay: 500,
            // dom: 'Bfrtip',
            buttons: [
                "excel",
                {
                    extend: "colvis",
                    text: "List",
                    columns: ':not(:last-child)'
                }
            ]
        });
// using the default search field in datatable search from id company phone number
        $('#dnc-datatable_filter input').unbind().bind('keyup', function() {
            leadTable.search(this.value).draw();
        });
    </script>
@endsection