@extends('layouts.admin')
@section('title', 'Contact Management')
@section('header', 'Contact Management')

@section('content')
<div style="display:grid; grid-template-columns: 1fr 2fr; gap: 24px;">
    <!-- Settings Form -->
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:20px; color:var(--navy);">Contact Details (Frontend)</h2>
        <form id="settings-form" style="display:flex; flex-direction:column; gap:16px;">
            <div>
                <label style="font-size:13px; font-weight:600; display:block; margin-bottom:6px;">Phone</label>
                <input type="text" name="phone" value="{{ $settings['phone'] ?? '+233 244 271 418' }}" style="width:100%; padding:10px; border:1px solid var(--border); border-radius:4px;">
            </div>
            <div>
                <label style="font-size:13px; font-weight:600; display:block; margin-bottom:6px;">Email</label>
                <input type="email" name="email" value="{{ $settings['email'] ?? 'info@paytellcompanylimited.com' }}" style="width:100%; padding:10px; border:1px solid var(--border); border-radius:4px;">
            </div>
            <div>
                <label style="font-size:13px; font-weight:600; display:block; margin-bottom:6px;">Address</label>
                <textarea name="address" rows="3" style="width:100%; padding:10px; border:1px solid var(--border); border-radius:4px;">{{ $settings['address'] ?? "Tweneboah House\nEast Legon, Accra\nAccra, Ghana" }}</textarea>
            </div>
            <div>
                <label style="font-size:13px; font-weight:600; display:block; margin-bottom:6px;">Office Hours</label>
                <textarea name="office_hours" rows="3" style="width:100%; padding:10px; border:1px solid var(--border); border-radius:4px;">{{ $settings['office_hours'] ?? "Monday – Saturday\n8:00 am – 6:00 pm" }}</textarea>
            </div>
            <div style="margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border);">
                <label style="font-size:13px; font-weight:600; display:block; margin-bottom:6px; color:var(--crimson);">Contact Form Receiving Email</label>
                <p style="font-size:12px; color:var(--text-light); margin-bottom:8px;">Submissions from the frontend contact form will be forwarded to this email address.</p>
                <input type="email" name="receiving_email" value="{{ $settings['receiving_email'] ?? '' }}" placeholder="e.g. admin@example.com" style="width:100%; padding:10px; border:1px solid var(--border); border-radius:4px;">
            </div>
            <button type="submit" class="btn">Save Details</button>
        </form>
    </div>

    <!-- Messages Table -->
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:20px; color:var(--navy);">Form Submissions</h2>
        <div style="overflow-x:auto;">
            <table class="table" style="width:100%;">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Name</th>
                        <th>Service</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($messages as $msg)
                        <tr>
                            <td>{{ $msg->created_at->format('M d, Y H:i') }}</td>
                            <td>{{ $msg->name }}</td>
                            <td>{{ $msg->service_interested ?? '-' }}</td>
                            <td>
                                @if($msg->is_read)
                                    <span class="badge completed">Read</span>
                                @else
                                    <span class="badge pending" id="status-{{ $msg->id }}">Unread</span>
                                @endif
                            </td>
                            <td>
                                <button onclick="viewMessage({{ $msg->id }})" class="btn" style="padding:4px 10px; font-size:12px; margin-right:5px;">View</button>
                                <button onclick="deleteMessage({{ $msg->id }})" class="btn" style="padding:4px 10px; font-size:12px; background:#e11d48;">Delete</button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="text-align:center; padding:20px; color:var(--text-light);">No messages found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- View Message Modal -->
<div id="msgModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center;">
    <div style="background:#fff; width:100%; max-width:500px; border-radius:8px; padding:24px; position:relative;">
        <h3 style="margin-bottom:16px; color:var(--navy);">Message Details</h3>
        <button onclick="document.getElementById('msgModal').style.display='none'" style="position:absolute; top:20px; right:20px; background:none; border:none; font-size:20px; cursor:pointer;">&times;</button>
        <div style="display:flex; flex-direction:column; gap:12px; font-size:14px;">
            <div><strong>From:</strong> <span id="msgName"></span> (<span id="msgEmail"></span>)</div>
            <div><strong>Phone:</strong> <span id="msgPhone"></span></div>
            <div><strong>Company:</strong> <span id="msgCompany"></span></div>
            <div><strong>Service:</strong> <span id="msgService"></span></div>
            <div style="margin-top:10px;"><strong>Message:</strong><p id="msgContent" style="margin-top:5px; background:var(--bg-color); padding:12px; border-radius:4px; white-space:pre-wrap;"></p></div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.getElementById('settings-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        
        fetch('{{ route("admin.contact.settings") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                Swal.fire('Saved!', data.message, 'success');
            } else {
                Swal.fire('Error', 'Failed to save settings', 'error');
            }
        });
    });

    function viewMessage(id) {
        fetch(`/admin/contact/messages/${id}`, {
            headers: { 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            document.getElementById('msgName').innerText = data.name;
            document.getElementById('msgEmail').innerText = data.email;
            document.getElementById('msgPhone').innerText = data.phone || '-';
            document.getElementById('msgCompany').innerText = data.company || '-';
            document.getElementById('msgService').innerText = data.service_interested || '-';
            document.getElementById('msgContent').innerText = data.message;
            
            document.getElementById('msgModal').style.display = 'flex';
            
            const statusBadge = document.getElementById('status-' + id);
            if (statusBadge) {
                statusBadge.className = 'badge completed';
                statusBadge.innerText = 'Read';
            }
        });
    }

    function deleteMessage(id) {
        Swal.fire({
            title: 'Delete Message?',
            text: "This cannot be undone.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e11d48',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/admin/contact/messages/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if(data.success) {
                        Swal.fire('Deleted!', data.message, 'success')
                        .then(() => window.location.reload());
                    }
                });
            }
        });
    }
</script>
@endpush
@endsection