@extends('layouts.master')

@section('content')
    <div class="container-xxl">

        <x-breadcrumb model="Contact Us"></x-breadcrumb>

        <div class="card">

            <div class="card-body">
                <div class="d-flex justify-content-end mb-3">
                    {{-- <a href="{{ route('admin.contacts.export') }}" class="btn btn-primary">
                        Export Contact
                    </a> --}}
                </div>
                <div class="table-responsive no-wrap">
                    <table class="table" id="datatable">

                        <x-table.header :headers="['name', 'email', 'Received on', 'visibility', 'Actions']" />

                        <tbody>
                            @forelse ($contacts as $contact)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <x-table.td>{{ $contact->first_name . ' ' . $contact->last_name }}</x-table.td>
                                    <x-table.td>{{ $contact->email }}</x-table.td>
                                    <x-table.td>{{ $contact->created_at->toDateString() }}</x-table.td>
                                    <x-table.td>{{ $contact->seen ? 'viewed' : 'not viewed' }}</x-table.td>
                                    <td style="width:150px">
                                        <div class="actions d-flex">
                                            <a href="#" class="btn btn-sm btn-default" title="View"
                                                data-bs-toggle="modal" data-bs-target="#viewContact{{ $contact->id }}"
                                                data-contact-id="{{ $contact->id }}">
                                                <i class='bx bx-show-alt'></i>
                                            </a>
                                            <x-table.delete_btn
                                                route-destroy="{{ route('admin.contacts.destroy', $contact->id) }}" />
                                        </div>
                                    </td>
                                </tr>

                                <div class="modal fade" id="viewContact{{ $contact->id }}" tabindex="-1"
                                    style="display: none;" aria-hidden="true">
                                    <div class="modal-dialog modal-xl" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Contact Detail</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body"></div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                            @endforelse

                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    <script>
        $(document).on('show.bs.modal', '.modal', function(event) {
            let button = $(event.relatedTarget);
            let contactId = button.data('contact-id');
            let modal = $(this);

            let url = "{{ route('admin.contacts.show', ':id') }}".replace(':id', contactId);

            $.ajax({
                url: url,
                type: 'get',
                dataType: 'html',
                success: function(response) {
                    modal.find('.modal-body').html(response);
                }
            });
        });
    </script>

    @include('_helpers.datatable')
    @include('_helpers.swal_delete')
@endpush