@extends('layouts.user_type.auth')

@section('contactUs')
    <div class="row">
        <div class="col-12">
            @include('components.alert')

            <div class="card mb-4 mx-4">
                <div class="card-header pb-0">
                    <h5 class="mb-0">Contact Us</h5>
                </div>

                <!-- Contact Us Table -->
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">ID</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Name</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Email</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Contact Number</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Company Name</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Subject</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Status</th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($contactUs as $index => $contact)
                                    <tr>
                                        <td class="ps-4">
                                            <p class="text-xs font-weight-bold mb-0">{{ $contactUs->firstItem() + $index }}
                                            </p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $contact->name }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $contact->email }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $contact->contact_number }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $contact->company_name }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p class="text-xs font-weight-bold mb-0">{{ $contact->subject }}</p>
                                        </td>
                                        <td class="text-center">
                                            <p
                                                class="font-weight-bold mb-0 
                                                @if ($contact->status == 'open') badge badge-sm bg-gradient-success
                                                @elseif($contact->status == 'close')
                                                    badge badge-sm bg-gradient-danger @endif">
                                                {{ ucfirst($contact->status) }}
                                            </p>
                                        </td>
                                        <td class="text-center">
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#contactModal"
                                                onclick="openContactModal({{ $contact }})" class="text-secondary">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-5">
                                            <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                style="width: 200px; opacity: 0.6;">
                                            <p class="mt-2 text-muted">No data Found</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        @include('components.pagination', ['paginator' => $contactUs])
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Modal -->
    <div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Contact Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row mb-2">
                            <div class="col-md-3"><strong>Name:</strong></div>
                            <div class="col-md-9 text-break" id="contact-name"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3"><strong>Email:</strong></div>
                            <div class="col-md-9 text-break" id="contact-email"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3"><strong>Contact Number:</strong></div>
                            <div class="col-md-9 text-break" id="contact-contact-number"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3"><strong>Company Name:</strong></div>
                            <div class="col-md-9 text-break" id="contact-company-name"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3"><strong>Subject:</strong></div>
                            <div class="col-md-9 text-break" id="contact-subject"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3"><strong>Message:</strong></div>
                            <div class="col-md-9 text-break" id="contact-message"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3"><strong>Hear About Us:</strong></div>
                            <div class="col-md-9 text-break" id="contact-hear_about_us"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3"><strong>Status:</strong></div>
                            <div class="col-md-9 text-break" id="contact-status"></div>
                        </div>
                         <div class="row mb-2">
                            <div class="col-md-3"><strong>Date:</strong></div>
                            <div class="col-md-9 text-break" id="contact-created_at"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <a href="#" id="close-connection-button" class="btn btn-primary">Mark as Contacted</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openContactModal(contact) {
            document.getElementById('contact-name').innerText = contact.name;
            document.getElementById('contact-email').innerText = contact.email;
            document.getElementById('contact-contact-number').innerText = contact.contact_number;
            document.getElementById('contact-company-name').innerText = contact.company_name;
            document.getElementById('contact-subject').innerText = contact.subject;
            document.getElementById('contact-message').innerText = contact.message;
            document.getElementById('contact-hear_about_us').innerText = contact.hear_about_us ?? 'NULL';
            document.getElementById('contact-status').innerText = contact.status;
            document.getElementById('contact-created_at').innerText = "{{ $contact->created_at->format('d M Y, h:i A') }}";

            const closeButton = document.getElementById('close-connection-button');

            closeButton.href = `/contactUs/contacted/${contact.id}`;

            if (contact.status === 'close') {
                closeButton.style.display = 'none';
            } else {
                closeButton.style.display = 'inline-block';
            }
        }
    </script>
@endsection