@extends('admin.layouts.app')

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

@section('content')

<style>
    /* ============================================
       ENQUIRY DETAILS - CUSTOM STYLES
    ============================================ */

    .detail-section {
        background: #FAFBFC;
        border-radius: 14px;
        padding: 20px 24px;
        border: 1px solid #F0F0F0;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .detail-section:hover {
        border-color: rgba(193, 18, 31, 0.08);
    }

    .detail-section .section-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
    }

    .detail-section .section-header i {
        font-size: 18px;
        color: #C1121F;
    }

    .detail-section .section-header h6 {
        font-size: 14px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .detail-row {
        display: flex;
        padding: 6px 0;
        border-bottom: 1px solid #F0F0F0;
    }

    .detail-row:last-child {
        border-bottom: none;
    }

    .detail-row .label {
        width: 140px;
        font-weight: 600;
        color: #1A1A2E;
        font-size: 13px;
        flex-shrink: 0;
    }

    .detail-row .value {
        flex: 1;
        color: #4A5568;
        font-size: 13px;
        word-break: break-word;
    }

    .detail-row .value a {
        color: #3B82F6;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .detail-row .value a:hover {
        color: #C1121F;
        text-decoration: underline;
    }

    .message-box {
        background: #F8F9FA;
        border-radius: 10px;
        padding: 16px 20px;
        border: 1px solid #E8E8E8;
        font-size: 14px;
        color: #1A1A2E;
        line-height: 1.6;
        min-height: 80px;
        white-space: pre-wrap;
    }

    .notes-box {
        background: #FEFCE8;
        border-radius: 10px;
        padding: 16px 20px;
        border: 1px solid #FDE68A;
        font-size: 14px;
        color: #1A1A2E;
        line-height: 1.6;
        min-height: 60px;
        white-space: pre-wrap;
    }

    /* Status Badge */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .status-badge.unread {
        background: rgba(220, 38, 38, 0.08);
        color: #DC2626;
    }

    .status-badge.read {
        background: rgba(245, 158, 11, 0.08);
        color: #F59E0B;
    }

    .status-badge.responded {
        background: rgba(34, 197, 94, 0.08);
        color: #22C55E;
    }

    .status-badge i {
        font-size: 14px;
    }

    .meta-text {
        font-size: 12px;
        color: #6B7280;
    }

    .meta-text strong {
        color: #1A1A2E;
    }

    .sidebar-card {
        background: #FFFFFF;
        border-radius: 14px;
        border: 1px solid #E8E8E8;
        overflow: hidden;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02);
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .sidebar-card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
    }

    .sidebar-card .sidebar-header {
        padding: 14px 20px;
        background: #FAFBFC;
        border-bottom: 1px solid #E8E8E8;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sidebar-card .sidebar-header h6 {
        font-size: 14px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .sidebar-card .sidebar-header i {
        font-size: 16px;
        color: #C1121F;
    }

    .sidebar-card .sidebar-body {
        padding: 20px;
    }

    .sidebar-card .sidebar-footer {
        padding: 14px 20px;
        border-top: 1px solid #E8E8E8;
        background: #FAFBFC;
    }

    .sidebar-card .form-group-custom {
        margin-bottom: 16px;
    }

    .sidebar-card .form-group-custom:last-child {
        margin-bottom: 0;
    }

    .sidebar-card .form-group-custom label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #1A1A2E;
        margin-bottom: 6px;
    }

    .sidebar-card .form-group-custom label .required {
        color: #DC2626;
        margin-left: 2px;
    }

    .form-control-custom {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid #E8E8E8;
        border-radius: 10px;
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        color: #1A1A2E;
        background: #FFFFFF;
        transition: all 0.3s ease;
        outline: none;
    }

    .form-control-custom:focus {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .form-control-custom.is-invalid {
        border-color: #DC2626;
    }

    .form-control-custom.is-invalid:focus {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.06);
    }

    .form-control-custom::placeholder {
        color: #9CA3AF;
        font-size: 13px;
    }

    textarea.form-control-custom {
        resize: vertical;
        min-height: 80px;
    }

    select.form-control-custom {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }

    .btn-submit-sm {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: linear-gradient(135deg, #C1121F, #780000);
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(193, 18, 31, 0.25);
    }

    .btn-submit-sm:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(193, 18, 31, 0.35);
    }

    .btn-submit-sm:active {
        transform: scale(0.96);
    }

    .btn-back-sm {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #F8F9FA;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
    }

    .btn-back-sm:hover {
        background: #E8E8E8;
        border-color: #D1D5DB;
    }

    .btn-reply-sm {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #3B82F6;
        border: none;
        color: #FFFFFF;
        text-decoration: none;
    }

    .btn-reply-sm:hover {
        background: #2563EB;
        transform: translateY(-2px);
        color: #FFFFFF;
    }

    .btn-reply-sm:active {
        transform: scale(0.96);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .detail-row {
            flex-direction: column;
            padding: 8px 0;
        }

        .detail-row .label {
            width: 100%;
            margin-bottom: 2px;
        }

        .detail-row .value {
            width: 100%;
        }

        .detail-section {
            padding: 16px 18px;
        }

        .sidebar-card .sidebar-body {
            padding: 16px;
        }

        .btn-submit-sm,
        .btn-back-sm,
        .btn-reply-sm {
            width: 100%;
            justify-content: center;
        }

        .card-footer-custom {
            flex-direction: column;
            gap: 8px;
        }
    }

    @media (max-width: 576px) {
        .detail-section {
            padding: 12px 14px;
            border-radius: 10px;
        }

        .message-box {
            padding: 12px 14px;
            font-size: 13px;
        }

        .notes-box {
            padding: 12px 14px;
            font-size: 13px;
        }

        .sidebar-card .sidebar-body {
            padding: 12px 14px;
        }

        .sidebar-card .sidebar-header {
            padding: 10px 14px;
        }
    }
</style>

<!-- ============================================
   ENQUIRY DETAILS - REDSPIDER THEME
============================================ -->

<div class="pages-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-house-door"></i> Dashboard
                </a>
            </li>
            <li>
                <a href="{{ route('admin.enquiries.index') }}">
                    <i class="bi bi-envelope"></i> Enquiries
                </a>
            </li>
            <li class="active">Enquiry Details</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Enquiry Details</h1>
            <p>
                <i class="bi bi-person"></i> From {{ $enquiry->name }}
                <span style="margin-left: 12px;">
                    {!! $enquiry->status_badge !!}
                </span>
            </p>
        </div>
        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
            <a href="{{ route('admin.enquiries.index') }}" class="btn-back-sm">
                <i class="bi bi-arrow-left"></i> Back to List
            </a>
            <a href="mailto:{{ $enquiry->email }}" class="btn-reply-sm">
                <i class="bi bi-reply"></i> Reply via Email
            </a>
        </div>
    </div>

    <div class="row">
        <!-- ===== LEFT COLUMN ===== -->
        <div class="col-lg-8">

            <!-- Enquiry Details -->
            <div class="detail-section">
                <div class="section-header">
                    <i class="bi bi-person"></i>
                    <h6>Contact Information</h6>
                </div>

                <div class="detail-row">
                    <span class="label">Name</span>
                    <span class="value">{{ $enquiry->name }}</span>
                </div>
                <div class="detail-row">
                    <span class="label">Email</span>
                    <span class="value">
                        <a href="mailto:{{ $enquiry->email }}">{{ $enquiry->email }}</a>
                    </span>
                </div>
                <div class="detail-row">
                    <span class="label">Phone</span>
                    <span class="value">{{ $enquiry->phone ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="label">Subject</span>
                    <span class="value">{{ $enquiry->subject ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="label">Service Interest</span>
                    <span class="value">{{ $enquiry->service_interest ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="label">Received</span>
                    <span class="value">{{ $enquiry->created_at->format('d M Y, h:i A') }}</span>
                </div>
            </div>

            <!-- Message -->
            <div class="detail-section">
                <div class="section-header">
                    <i class="bi bi-chat-text"></i>
                    <h6>Message</h6>
                </div>
                <div class="message-box">
                    {{ $enquiry->message }}
                </div>
            </div>

            <!-- Admin Notes -->
            <div class="detail-section">
                <div class="section-header">
                    <i class="bi bi-sticky"></i>
                    <h6>Admin Notes</h6>
                </div>
                @if($enquiry->notes)
                <div class="notes-box">
                    {{ $enquiry->notes }}
                </div>
                @else
                <p class="text-muted" style="margin: 0; font-size: 14px;">
                    <i class="bi bi-info-circle"></i> No notes added yet.
                </p>
                @endif
            </div>

            <!-- Meta Info -->
            <div class="detail-section" style="margin-bottom: 0;">
                <div class="section-header">
                    <i class="bi bi-info-circle"></i>
                    <h6>Additional Information</h6>
                </div>
                <div class="meta-text">
                    <strong>IP Address:</strong> {{ $enquiry->ip_address ?? 'N/A' }}
                    <span style="margin-left: 16px;">
                        <strong>User Agent:</strong> {{ $enquiry->user_agent ?? 'N/A' }}
                    </span>
                </div>
            </div>

        </div>

        <!-- ===== RIGHT COLUMN ===== -->
        <div class="col-lg-4">

            <!-- Update Status -->
            <div class="sidebar-card">
                <div class="sidebar-header">
                    <i class="bi bi-pencil"></i>
                    <h6>Update Status</h6>
                </div>
                <form action="{{ route('admin.enquiries.update', $enquiry->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="sidebar-body">
                        <!-- Status -->
                        <div class="form-group-custom">
                            <label>Status <span class="required">*</span></label>
                            <select name="status" class="form-control-custom">
                                <option value="unread" {{ $enquiry->status == 'unread' ? 'selected' : '' }}>Unread</option>
                                <option value="read" {{ $enquiry->status == 'read' ? 'selected' : '' }}>Read</option>
                                <option value="responded" {{ $enquiry->status == 'responded' ? 'selected' : '' }}>Responded</option>
                            </select>
                        </div>

                        <!-- Notes -->
                        <div class="form-group-custom">
                            <label>Admin Notes</label>
                            <textarea name="notes" rows="4" class="form-control-custom" placeholder="Add notes about this enquiry...">{{ old('notes', $enquiry->notes) }}</textarea>
                        </div>

                        <!-- Assign To -->
                        <div class="form-group-custom" style="margin-bottom: 0;">
                            <label>Assign To</label>
                            <select name="assigned_to" class="form-control-custom">
                                <option value="">Unassigned</option>
                                @php
                                $admins = App\Models\Admin::select('id', 'name')->get();
                                @endphp
                                @foreach($admins as $admin)
                                <option value="{{ $admin->id }}" {{ $enquiry->assigned_to == $admin->id ? 'selected' : '' }}>
                                    {{ $admin->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="sidebar-footer">
                        <button type="submit" class="btn-submit-sm" style="width: 100%; justify-content: center;">
                            <i class="bi bi-save"></i> Update Enquiry
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // AUTO DISMISS ALERTS
        // ============================================
        document.querySelectorAll('.alert-custom .alert-close').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const alert = this.closest('.alert-custom');
                if (alert) {
                    alert.style.transition = 'all 0.3s ease';
                    alert.style.transform = 'translateX(40px)';
                    alert.style.opacity = '0';
                    setTimeout(function() {
                        if (alert.parentNode) alert.remove();
                    }, 300);
                }
            });
        });

        console.log('✅ Enquiry Details loaded successfully!');
    });
</script>

@endsection