@extends('admin.app')

@section('content')

<div class="container-fluid px-3 mt-5">

    <h2 class="mb-3">Contact Messages</h2>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    {{-- Responsive Table --}}
    <div class="table-responsive">

        <table class="table table-bordered align-middle" id="contactsTable">

            <thead class="table-light">

                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Subject</th>
                    <th>Message</th>
                    <th>Date</th>
                    <th width="150">Action</th>
                </tr>

            </thead>

            <tbody>

                @forelse($contacts as $contact)

                <tr>

                    <td>{{ $loop->iteration }}</td>

                    <td style="min-width:180px;">
                        {{ $contact->name }}
                    </td>

                    <td style="min-width:220px;">
                        {{ $contact->email }}
                    </td>

                    <td style="min-width:150px;">
                        {{ $contact->number }}
                    </td>

                    <td style="min-width:180px;">
                        {{ $contact->subject }}
                    </td>

                    <td style="min-width:300px;">
                        {{ $contact->message }}
                    </td>

                    <td style="min-width:180px;">
                        {{ $contact->created_at->format('d-m-Y h:i A') }}
                    </td>

                    <td class="text-nowrap">

                        <form action="{{ route('contacts.destroy', $contact->id) }}"
                              method="POST"
                              class="d-inline"
                              onsubmit="return confirm('Are you sure want to delete this message?')">

                            @csrf
                            @method('DELETE')

                            <button class="btn btn-sm btn-danger mb-1">
                                Delete
                            </button>

                        </form>

                    </td>

                </tr>

                @empty

                <tr>
                    <td colspan="8" class="text-center">
                        No contact messages found
                    </td>
                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

@endsection

@push('styles')

<style>

/* Mobile Responsive */

@media (max-width:768px){

    table th,
    table td{
        font-size:14px;
    }

}

</style>

@endpush

@push('scripts')

<script>

$(document).ready(function () {

    $('#contactsTable').DataTable({
        pageLength:10,
        ordering:true,
        searching:true,
        scrollX:true,
        autoWidth:false
    });

});

</script>

@endpush