@extends('backend.app')

@section('title', 'Contact Details')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Contact Details</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.contact.index') }}">Contacts</a></li>
            <li class="breadcrumb-item active" aria-current="page">Details</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-10 offset-md-1">
        <div class="card overflow-hidden">
            <div class="card-header bg-primary-transparent border-bottom">
                <div class="card-title">
                    <i class="fe fe-mail me-2"></i> Message Details
                </div>
                <div class="card-options">
                    <span class="badge {{ $contact->status === 'read' ? 'bg-success' : 'bg-warning' }} px-3 py-2">
                        {{ ucfirst($contact->status) }}
                    </span>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="row g-0">
                    <!-- Sender Sidebar -->
                    <div class="col-lg-4 border-end bg-light p-5">
                        <div class="text-center mb-4">
                            <div class="avatar avatar-xxl brround bg-primary-transparent text-primary mb-3">
                                {{ strtoupper(substr($contact->name, 0, 1)) }}
                            </div>
                            <h4 class="mb-1 fw-bold text-dark">{{ $contact->name }}</h4>
                            <p class="text-muted small mb-0">{{ $contact->created_at->format('M d, Y') }} at {{ $contact->created_at->format('h:i A') }}</p>
                        </div>

                        <div class="contact-info-item mb-4">
                            <label class="text-muted small text-uppercase fw-bold mb-1 d-block">Email Address</label>
                            <p class="mb-0"><a href="mailto:{{ $contact->email }}" class="text-primary">{{ $contact->email }}</a></p>
                        </div>

                        <div class="contact-info-item mb-4">
                            <label class="text-muted small text-uppercase fw-bold mb-1 d-block">Phone Number</label>
                            <p class="mb-0 text-dark">{{ $contact->phone ?? 'Not Provided' }}</p>
                        </div>

                        <div class="contact-info-item">
                            <label class="text-muted small text-uppercase fw-bold mb-1 d-block">Reference ID</label>
                            <p class="mb-0 text-muted small">#CNT-{{ str_pad($contact->id, 5, '0', STR_PAD_LEFT) }}</p>
                        </div>
                    </div>

                    <!-- Message Body -->
                    <div class="col-lg-8 p-5">
                        <div class="mb-5 pb-3 border-bottom">
                            <label class="text-muted small text-uppercase fw-bold mb-2 d-block">Subject</label>
                            <h3 class="fw-bold text-dark">{{ $contact->subject ?? 'General Inquiry' }}</h3>
                        </div>

                        <div class="message-content">
                            <label class="text-muted small text-uppercase fw-bold mb-3 d-block">Message Content</label>
                            <div class="message-bubble p-4 bg-light br-7 position-relative">
                                <i class="fa fa-quote-left position-absolute text-primary-transparent" style="top: 10px; left: 10px; font-size: 24px; opacity: 0.2;"></i>
                                <div class="text-dark fs-15 lh-base" style="white-space: pre-line;">{{ $contact->message }}</div>
                            </div>
                        </div>

                        <div class="mt-5 pt-4 border-top text-end">
                            <a href="{{ route('admin.contact.index') }}" class="btn btn-outline-secondary px-5 me-2">
                                <i class="fe fe-arrow-left me-1"></i> Back to List
                            </a>
                            <button type="button" onclick="deleteContact({{ $contact->id }})" class="btn btn-danger px-5">
                                <i class="fe fe-trash-2 me-1"></i> Delete Permanent
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function deleteContact(id) {
        Swal.fire({
            title: 'Confirm Deletion',
            text: "This message will be removed permanently. This action cannot be undone.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e74c3c',
            cancelButtonColor: '#7f8c8d',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('admin.contact.destroy', ':id') }}".replace(':id', id),
                    type: 'DELETE',
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function (resp) {
                        if (resp.success) {
                            toastr.success(resp.message);
                            window.location.href = "{{ route('admin.contact.index') }}";
                        } else {
                            toastr.error(resp.message);
                        }
                    },
                    error: function () {
                        toastr.error('Something went wrong!');
                    }
                });
            }
        });
    }
</script>
@endpush

@push('style')
<style>
    .avatar-xxl {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 32px;
        font-weight: bold;
    }
    .bg-primary-transparent {
        background-color: rgba(var(--primary-rgb), 0.1);
    }
    .message-bubble {
        border-left: 4px solid var(--primary-bg-color);
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .br-7 {
        border-radius: 7px;
    }
    .text-primary-transparent {
        color: var(--primary-bg-color);
    }
    .contact-info-item p {
        font-size: 15px;
        font-weight: 500;
    }
</style>
@endpush