@extends('dashboard.admin.layouts.master')

@php
    $whatsappNumber = preg_replace('/\D+/', '', (string) $contact->phone);
    // Egyptian local numbers (01xxxxxxxxx) need the country code for wa.me links.
    if (str_starts_with($whatsappNumber, '01') && strlen($whatsappNumber) === 11) {
        $whatsappNumber = '2' . $whatsappNumber;
    }
@endphp

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack flex-wrap gap-3">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('dash_site.contact_messages') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('dash_site.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.contact.index') }}" class="text-muted text-hover-primary">{{ trans('dash_site.contact_messages') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">#{{ $contact->id }}</li>
            </ul>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ $previous ? route('admin.contact.show', $previous) : '#' }}" class="btn btn-sm btn-light {{ $previous ? '' : 'disabled' }}"><i class="bi bi-chevron-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }}"></i>{{ trans('dash_site.contact_previous') }}</a>
            <a href="{{ $next ? route('admin.contact.show', $next) : '#' }}" class="btn btn-sm btn-light {{ $next ? '' : 'disabled' }}">{{ trans('dash_site.contact_next') }}<i class="bi bi-chevron-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }} ms-1"></i></a>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxxl">
        <div class="row g-7">
            <div class="col-xl-8">
                <div class="card card-flush h-100">
                    <div class="card-header pt-7">
                        <div class="card-title flex-column">
                            <h2 class="fw-bold mb-1">{{ $contact->subject ?: trans('dash_site.contact_no_subject') }}</h2>
                            <span class="text-muted fs-7"><i class="bi bi-clock me-1"></i>{{ $contact->created_at?->format('Y-m-d h:i A') }} · {{ $contact->created_at?->diffForHumans() }}</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="text-gray-500 fw-semibold fs-7 text-uppercase mb-3">{{ trans('dash_site.contact_message_body') }}</div>
                        <div class="bg-light rounded p-7 fs-6 text-gray-800 lh-lg" style="white-space: pre-line;">{{ $contact->message ?: '—' }}</div>
                    </div>
                    <div class="card-footer d-flex flex-wrap justify-content-between gap-3">
                        <a href="{{ route('admin.contact.index') }}" class="btn btn-light"><i class="bi bi-arrow-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }}"></i>{{ trans('dash_site.contact_back') }}</a>
                        <div class="d-flex gap-2">
                            <form action="{{ route('admin.contact.unread', $contact) }}" method="POST">
                                @csrf @method('PATCH')
                                <button type="submit" class="btn btn-light-warning"><i class="bi bi-envelope"></i>{{ trans('dash_site.contact_mark_unread') }}</button>
                            </form>
                            <form action="{{ route('admin.contact.destroy', $contact) }}" method="POST" id="deleteContactForm">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-light-danger"><i class="bi bi-trash"></i>{{ trans('forms.delete_btn') }}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card card-flush">
                    <div class="card-header pt-7">
                        <div class="card-title"><h3 class="fw-bold">{{ trans('dash_site.contact_info') }}</h3></div>
                    </div>
                    <div class="card-body pt-2">
                        <div class="d-flex align-items-center mb-7">
                            <div class="symbol symbol-60px symbol-circle me-4">
                                <span class="symbol-label bg-light-primary text-primary fw-bold fs-2">{{ mb_strtoupper(mb_substr((string) $contact->name, 0, 1)) ?: '?' }}</span>
                            </div>
                            <div class="fs-4 fw-bold text-gray-900">{{ $contact->name ?: '—' }}</div>
                        </div>

                        <table class="table table-row-dashed gy-3 fs-6 mb-7">
                            <tr>
                                <td class="text-muted"><i class="bi bi-envelope me-2"></i>{{ trans('dash_site.Email') }}</td>
                                <td class="text-end fw-semibold text-break">{{ $contact->email ?: '—' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted"><i class="bi bi-telephone me-2"></i>{{ trans('dash_site.Phone') }}</td>
                                <td class="text-end fw-semibold" dir="ltr">{{ $contact->phone ?: '—' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted"><i class="bi bi-check2-circle me-2"></i>{{ trans('dash_site.contact_read_at') }}</td>
                                <td class="text-end fw-semibold">{{ $contact->read_at?->format('Y-m-d h:i A') ?? '—' }}</td>
                            </tr>
                        </table>

                        <div class="d-grid gap-3">
                            @include('dashboard.admin.crm.leads.partials.source-link', ['row' => $contact, 'block' => true])
                            @if ($contact->email)
                                <a href="mailto:{{ $contact->email }}?subject={{ rawurlencode('Re: ' . $contact->subject) }}" class="btn btn-primary"><i class="bi bi-reply"></i>{{ trans('dash_site.contact_reply_email') }}</a>
                            @endif
                            @if ($contact->phone)
                                <div class="d-flex gap-3">
                                    <a href="tel:{{ preg_replace('/[^\d+]/', '', $contact->phone) }}" class="btn btn-light-primary flex-grow-1"><i class="bi bi-telephone"></i>{{ trans('dash_site.contact_call') }}</a>
                                    @if ($whatsappNumber)
                                        <a href="https://wa.me/{{ $whatsappNumber }}" target="_blank" rel="noopener" class="btn btn-light-success flex-grow-1"><i class="bi bi-whatsapp"></i>{{ trans('dash_site.contact_whatsapp') }}</a>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.getElementById('deleteContactForm').addEventListener('submit', function (event) {
            var form = this;
            if (form.dataset.confirmed) {
                return;
            }
            event.preventDefault();
            Swal.fire({
                text: "{{ trans('dash_site.contact_delete_confirm') }}",
                icon: 'warning',
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "{{ trans('forms.delete_btn') }}",
                cancelButtonText: "{{ trans('dash_site.Cancel') }}",
                customClass: {confirmButton: 'btn btn-danger', cancelButton: 'btn btn-light'}
            }).then(function (result) {
                if (result.isConfirmed) {
                    form.dataset.confirmed = '1';
                    form.submit();
                }
            });
        });
    </script>
@endsection