@extends('layouts.user_type.auth')
@section('contactUs')
<div class="container-fluid py-4 px-4">
    @include('components.alert')

    <div id="tableView">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div><h5 class="mb-0" style="font-weight:700;">Contact Us</h5><p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Incoming contact and inquiry requests.</p></div>
                <span class="badge bg-gradient-light" style="font-size:0.7rem;">{{ $contactUs->total() ?? 0 }} Records</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="border:none; max-height:calc(100vh - 280px); overflow-y:auto;">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th style="padding-left:1.25rem; width:4%;">#</th>
                                <th class="text-center">Name</th><th class="text-center">Email</th>
                                <th class="text-center">Contact No.</th><th class="text-center">Company</th>
                                <th class="text-center">Subject</th><th class="text-center">Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($contactUs as $index => $contact)
                                <tr>
                                    <td style="padding-left:1.25rem;"><span class="mono" style="font-size:0.72rem;color:var(--grey);">{{ str_pad($contactUs->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span></td>
                                    <td class="text-center"><span style="font-weight:600;color:var(--heading);">{{ $contact->name }}</span></td>
                                    <td class="text-center" style="color:var(--grey-mid);">{{ $contact->email }}</td>
                                    <td class="text-center" style="color:var(--grey-mid);">{{ $contact->contact_number }}</td>
                                    <td class="text-center" style="color:var(--grey-mid);">{{ $contact->company_name }}</td>
                                    <td class="text-center" style="color:var(--grey-mid);">{{ \Illuminate\Support\Str::limit($contact->subject, 30) }}</td>
                                    <td class="text-center">
                                        <span class="badge {{ $contact->status=='open' ? 'bg-gradient-success' : 'bg-gradient-danger' }}">{{ ucfirst($contact->status) }}</span>
                                    </td>
                                    <td class="text-center">
                                        <a href="#" class="ia-view" onclick="openContactModal({{ $contact }}); toggleView('form');" title="View">
                                            <i class="fas fa-eye" style="font-size:0.72rem;"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="8"><div class="empty-state"><i class="fas fa-envelope"></i><p>No contact requests found</p></div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="px-4 py-3" style="border-top:1px solid var(--border);">@include('components.pagination', ['paginator' => $contactUs])</div>
            </div>
        </div>
    </div>

    <div id="formView" class="d-none">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="mb-0" style="font-weight:700;">Contact Details</h5>
                <button class="btn btn-light btn-sm mb-0" onclick="toggleView('table')"><i class="fas fa-arrow-left me-1" style="font-size:0.72rem;"></i> Back</button>
            </div>
            <div class="card-body">
                @php
                    $fields = [
                        ['label' => 'Name',           'id' => 'contact-name'],
                        ['label' => 'Email',          'id' => 'contact-email'],
                        ['label' => 'Contact Number', 'id' => 'contact-contact-number'],
                        ['label' => 'Company Name',   'id' => 'contact-company-name'],
                        ['label' => 'Subject',        'id' => 'contact-subject'],
                        ['label' => 'Message',        'id' => 'contact-message'],
                        ['label' => 'Hear About Us',  'id' => 'contact-hear_about_us'],
                        ['label' => 'Status',         'id' => 'contact-status'],
                        ['label' => 'Date',           'id' => 'contact-created_at'],
                    ];
                @endphp
                <div class="row g-3">
                    @foreach($fields as $field)
                        <div class="col-md-6">
                            <p class="mb-1" style="font-size:0.72rem;color:var(--grey);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;">{{ $field['label'] }}</p>
                            <div id="{{ $field['id'] }}" style="font-size:0.85rem;color:var(--heading);font-weight:500;@if($field['id']==='contact-message') background:var(--smoke);border:1px solid var(--border);border-radius:var(--r-md);padding:0.75rem; @endif"></div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="card-footer d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-light mb-0" onclick="toggleView('table')">Close</button>
                <a href="#" id="close-connection-button" class="btn bg-gradient-primary mb-0">Mark as Contacted</a>
            </div>
        </div>
    </div>
</div>
<script>
    function toggleView(view){if(view==='form'){document.getElementById('tableView').classList.add('d-none');document.getElementById('formView').classList.remove('d-none');}else{document.getElementById('tableView').classList.remove('d-none');document.getElementById('formView').classList.add('d-none');}}
    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 ?? 'N/A';
        document.getElementById('contact-status').innerText = contact.status;
        if (contact.created_at) {
            let date = new Date(contact.created_at);
            document.getElementById('contact-created_at').innerText = date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true });
        } else {
            document.getElementById('contact-created_at').innerText = 'N/A';
        }
        const btn = document.getElementById('close-connection-button');
        btn.href = `/contactUs/contacted/${contact.id}`;
        btn.style.display = contact.status === 'close' ? 'none' : 'inline-flex';
    }
</script>
@endsection