@include('admin.layouts.header')
<div class="container-fluid pt-4 px-4">
    @if ($message = Session::get('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fa fa-exclamation-circle me-2"></i> {{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
 
</div>
<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-12">
            <div class=" bg-light text-center rounded p-4">
                <div class="row g-3 mb-3">
                    <div class="col-sm-6 col-md-3 d-flex align-items-center mb-0">
                        <h6 class="text-start">Contact Messages</h6>
                    </div>
                </div>
                <style>
                    th {
                        white-space: nowrap 
                    }
                </style>
                <div class="table-responsive">
                    <table class="table text-start align-middle table-bordered table-hover mb-0">
                        <thead>
                            <tr class="text-dark">
                                <th scope="col">Message</th>
                                <th scope="col">Customer Name</th>
                                <th scope="col">Mobile Number</th>
                                <th scope="col">Email</th>
                                <th scope="col">Delete</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($contacts as $contact)
                                <tr>
                                    <td style="text-align: justify">{{ $contact->message }}</td>
                                    <td><span>{{ $contact->user_name }}</span></td>
                                    <td>{{ $contact->mobile_number }}</td>
                                    <td>{{ $contact->user_email }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                            data-bs-target="#contactDeleteModal"
                                            onclick="getcontactId()">Delete</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <div class="modal fade" id="contactDeleteModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p class="modal-title" id="exampleModalLabel">Are You sure ?</p>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="{{ route('admin.delete-contact') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="contactId" name="contactId">
                            <button type="submit" class="btn btn-primary">Confirm Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function getcontactId(id) {
                document.querySelector('#contactId').value = id;
            }
        </script>
    </div>
    {{ $contacts->links('pagination.custom') }}
</div>
@include('admin.layouts.footer')