@extends('admin.layouts.app')

@section('title', 'Inquiries List')

<style>
    /* Make DataTable buttons look like Bootstrap buttons */
    .dt-buttons .dt-button {
        background-color: #045c98;
        border: none;
        color: #fff;
        padding: 8px 14px;
        margin-right: 6px;
        border-radius: 4px;
        font-size: 14px;
        transition: background-color 0.2s ease-in-out;
    }

    .dt-buttons .dt-button:hover {
        background-color: white;
        border:1px solid #045c98;
        color: #045c98;
    }

    /* Optional: Adjust DataTable layout padding */
    #inquiriesTable_wrapper {
        padding: 20px;
    }
    
</style>

@section('content')
<div class="container-fluid">
    <h1 class="mb-4">Signup Inquiries</h1>

    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="inquiriesTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Full Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Submitted At</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($inquiries as $inquiry)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $inquiry->fullName }}</td>
                                <td>{{ $inquiry->email }}</td>
                                <td>{{$inquiry->code}}-{{ $inquiry->phone }}</td>
                                <td>{{ $inquiry->created_at->format('d-m-Y H:i') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
     jQuery 
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
     DataTables JS 
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
     Buttons Extensions 
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#inquiriesTable').DataTable({
                processing: true,
                paging: true,
                searching: true,
                ordering: true,
                dom: 'Bfrtip',
                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
            });
        });
    </script>
@endsection