@extends('admin.layout.app')
@section('title', __('د پیغام تفصیلات'))

@section('body')
<section class="section pt-4">
    <div class="container-fluid">

        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="fw-bold mb-0 text-dark">
                            <i class="fas fa-envelope me-2 text-primary"></i>
                            {{ __('د پیغام تفصیلات') }}
                        </h4>
                        <p class="text-muted mb-0">
                            <i class="fas fa-hashtag me-1"></i>
                            {{ __('front.id') }} <span class="badge bg-light text-dark">{{ $contact->id }}</span>
                            @if(!$contact->is_read)
                            | <span class="badge bg-danger">
                                <i class="fas fa-circle me-1"></i> {{ __('نېغ') }}
                            </span>
                            @endif
                        </p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('contacts.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-arrow-left me-1"></i> {{ __('بیرته') }}
                        </a>
                        @if(!$contact->is_read)
                        <form method="POST" action="" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-success btn-sm">
                                <i class="fas fa-envelope-open me-1"></i> {{ __('لوستل په نښه کړه') }}
                            </button>
                        </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Card -->
        <div class="card border-0 shadow-lg rounded-3 overflow-hidden">
            <div class="card-header bg-gradient-info text-white py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-user-circle me-2"></i>
                        {{ __('د لیږونکی معلومات') }}
                    </h5>
                    <div class="small">
                        <i class="fas fa-calendar-alt me-1"></i>
                        {{ $contact->created_at?->format('Y-m-d h:i A') }}
                    </div>
                </div>
            </div>

            <div class="card-body p-4">
                <div class="row g-4">
                    <!-- Sender Info Card -->
                    <div class="col-lg-4">
                        <div class="card h-100 border">
                            <div class="card-header bg-light">
                                <h6 class="mb-0">
                                    <i class="fas fa-id-card me-2 text-primary"></i>
                                    {{ __('لیږونکی') }}
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="text-center mb-4">
                                    <div class="avatar-circle-lg bg-primary text-white mx-auto mb-3">
                                        {{ strtoupper(substr($contact->name, 0, 1)) }}
                                    </div>
                                    <h5 class="mb-1">{{ $contact->name }}</h5>
                                    @if($contact->email)
                                    <div class="text-muted">
                                        <i class="fas fa-envelope me-1"></i>
                                        <a href="mailto:{{ $contact->email }}" class="text-decoration-none">
                                            {{ $contact->email }}
                                        </a>
                                    </div>
                                    @endif
                                </div>

                                <div class="list-group list-group-flush">
                                    @if($contact->phone)
                                    <div class="list-group-item d-flex align-items-center px-0">
                                        <div class="icon-circle bg-primary-light text-primary me-3">
                                            <i class="fas fa-phone"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted d-block">{{ __('تلیفون') }}</small>
                                            <a href="tel:{{ $contact->phone }}" class="text-decoration-none">
                                                {{ $contact->phone }}
                                            </a>
                                        </div>
                                    </div>
                                    @endif

                                    @if($contact->subject)
                                    <div class="list-group-item d-flex align-items-center px-0">
                                        <div class="icon-circle bg-info-light text-info me-3">
                                            <i class="fas fa-tag"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted d-block">{{ __('موضوع') }}</small>
                                            <strong>{{ $contact->subject }}</strong>
                                        </div>
                                    </div>
                                    @endif

                                    <div class="list-group-item d-flex align-items-center px-0">
                                        <div class="icon-circle bg-warning-light text-warning me-3">
                                            <i class="fas fa-clock"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted d-block">{{ __('نیټه') }}</small>
                                            <div>
                                                {{ $contact->created_at?->format('Y-m-d') }}
                                                <br>
                                                <small class="text-muted">{{ $contact->created_at?->format('h:i A') }}</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="list-group-item d-flex align-items-center px-0">
                                        <div class="icon-circle {{ $contact->is_read ? 'bg-success-light text-success' : 'bg-danger-light text-danger' }} me-3">
                                            <i class="fas fa-{{ $contact->is_read ? 'envelope-open' : 'envelope' }}"></i>
                                        </div>
                                        <div>
                                            <small class="text-muted d-block">{{ __('حالت') }}</small>
                                            <strong class="{{ $contact->is_read ? 'text-success' : 'text-danger' }}">
                                                {{ $contact->is_read ? __('لوستل شوی') : __('نېغ') }}
                                            </strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Message Content Card -->
                    <div class="col-lg-8">
                        <div class="card h-100 border">
                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">
                                    <i class="fas fa-comment-alt me-2 text-success"></i>
                                    {{ __('پیغام') }}
                                </h6>
                                <div class="text-muted small">
                                    <i class="fas fa-clock me-1"></i>
                                    {{ __('موده') }}: {{ $contact->created_at?->diffForHumans() }}
                                </div>
                            </div>
                            <div class="card-body">
                                @if($contact->message)
                                <div class="message-content p-4 bg-light rounded">
                                    <div class="d-flex mb-3">
                                        <div class="icon-circle bg-primary text-white me-3">
                                            <i class="fas fa-quote-left"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-1">{{ __('پیغام متن') }}</h6>
                                            <small class="text-muted">{{ __('د لیږونکی لخوا') }}</small>
                                        </div>
                                    </div>

                                    <div class="bg-white p-4 rounded border">
                                        <div style="white-space: pre-wrap; line-height: 1.6;">{{ $contact->message }}</div>
                                    </div>

                                    <div class="mt-4 pt-3 border-top">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="fas fa-hashtag text-muted me-2 fa-sm"></i>
                                                    <small class="text-muted">{{ __('د کلماتو شمیر') }}: {{ str_word_count($contact->message) }}</small>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="fas fa-font text-muted me-2 fa-sm"></i>
                                                    <small class="text-muted">{{ __('د حروفو شمیر') }}: {{ strlen($contact->message) }}</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @else
                                <div class="text-center py-5">
                                    <i class="fas fa-comment-slash fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted">{{ __('پیغام نشته') }}</h5>
                                    <p class="text-muted small">{{ __('دغه اړیکې پیغام کوم متن نلري') }}</p>
                                </div>
                                @endif

                                <!-- Technical Info -->
                                <div class="mt-4">
                                    <div class="card border">
                                        <div class="card-header bg-light py-2">
                                            <h6 class="mb-0 small">
                                                <i class="fas fa-info-circle me-2"></i>
                                                {{ __('تخنیکی معلومات') }}
                                            </h6>
                                        </div>
                                        <div class="card-body py-3">
                                            <div class="row g-2">
                                                <div class="col-md-6">
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-laptop text-muted me-2 fa-sm"></i>
                                                        <small class="text-muted">{{ __('IP پته') }}: {{ $contact->ip ?? '—' }}</small>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-globe text-muted me-2 fa-sm"></i>
                                                        <small class="text-muted">{{ __('براوزر') }}: {{ Str::limit($contact->user_agent ?? '—', 40) }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="text-muted small">
                                <i class="fas fa-info-circle me-1"></i>
                                {{ __('آخری تازه') }}: {{ $contact->updated_at?->diffForHumans() }}
                            </div>
                            <div class="d-flex gap-2">
                                <!-- Reply Button -->
                                @if($contact->email)
                                <a href="mailto:{{ $contact->email }}?subject=Re: {{ $contact->subject ?? 'Contact Message' }}"
                                   class="btn btn-primary btn-sm">
                                    <i class="fas fa-reply me-1"></i> {{ __('ځواب ورکړه') }}
                                </a>
                                @endif

                                <!-- Read/Unread Toggle -->
                                <form method="POST" action="" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-{{ $contact->is_read ? 'warning' : 'success' }} btn-sm">
                                        <i class="fas fa-{{ $contact->is_read ? 'envelope' : 'envelope-open' }} me-1"></i>
                                        {{ $contact->is_read ? __('نېغ په نښه کړه') : __('لوستل په نښه کړه') }}
                                    </button>
                                </form>

                                <!-- Print Button -->
                                <button class="btn btn-outline-info btn-sm" onclick="window.print()">
                                    <i class="fas fa-print me-1"></i> {{ __('چاپ') }}
                                </button>

                                <!-- Delete Button -->
                                <form method="POST" action="{{ route('contacts.destroy', $contact->id) }}"
                                      onsubmit="return confirm('{{ __('آیا تاسو ډاډه یاست چې دا پیغام حذف کړئ؟') }}')"
                                      class="d-inline">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-outline-danger btn-sm">
                                        <i class="fas fa-trash-alt me-1"></i> {{ __('حذف') }}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Custom CSS -->
<style>
    .avatar-circle-lg {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
    }
    .icon-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .bg-primary-light { background-color: rgba(13, 110, 253, 0.1); }
    .bg-info-light { background-color: rgba(13, 202, 240, 0.1); }
    .bg-warning-light { background-color: rgba(255, 193, 7, 0.1); }
    .bg-success-light { background-color: rgba(25, 135, 84, 0.1); }
    .bg-danger-light { background-color: rgba(220, 53, 69, 0.1); }

    .bg-gradient-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    }

    .message-content {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .list-group-item {
        border: none;
        padding-left: 0;
        padding-right: 0;
    }

    @media print {
        .btn, .no-print {
            display: none !important;
        }
        .card {
            border: 1px solid #ddd !important;
            box-shadow: none !important;
        }
        .card-header {
            background: #f8f9fa !important;
            color: #000 !important;
        }
    }
</style>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Tooltip initialization
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });


        // Copy message text to clipboard
        document.getElementById('copyMessage')?.addEventListener('click', function() {
            const messageText = `{{ addslashes($contact->message) }}`;
            navigator.clipboard.writeText(messageText).then(() => {
                alert('{{ __("پیغام کلیپ بورډ ته کاپي شو") }}');
            });
        });
    });
</script>
@endsection