@extends('backend.layouts.app')

@section('content')


<div class="container p-4 mx-auto">
    <h1 class="mb-4 h2 fw-bold">Contacts</h1>

</div>
<section class="container px-4 mx-auto">
    <div class="table-responsive">
        <table id="contactTable" class="table table-bordered table-hover">
            <thead class="table-light">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Phone Number</th>
                    <th scope="col">Subject</th>
                    <th scope="col">Message</th>
                    <th scope="col" class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($contact_us as $contacts)
                <tr>
                    <td>{{ $contacts->id }}</td>
                    <td>{{ $contacts->name }}</td>
                    <td>{{ $contacts->email }}</td>
                    <td>{{ $contacts->phone_no }}</td>
                    <td>{{ $contacts->subject }}</td>
                    <td>{{ $contacts->message }}</td>
                    <td>
                        <form method="POST" action="{{ route('contacts.destroy', $contacts->id) }}">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</section>

@endsection

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#contactTable').DataTable({
            order: [
                [0, 'desc'] // Order by the first column (Id) descending
            ],

        });
    });
</script>
@endsection