@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Modern Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb modern-breadcrumb-show">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}" class="breadcrumb-link">
                    <i class="bx bx-home"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('notifications.index') }}" class="breadcrumb-link">
                    <i class="bx bx-bell"></i>
                    <span>Notifications</span>
                </a>
            </li>
            <li class="breadcrumb-item active">
                <i class="bx bx-info-circle"></i>
                <span>Details</span>
            </li>
        </ol>
    </nav>

    <!-- Modern Header with Back Button -->
    <div class="page-header-show mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <a href="{{ route('notifications.index') }}" class="btn-back me-4">
                    <i class="bx bx-arrow-back"></i>
                </a>
                <div>
                    <h1 class="page-title mb-0">Notification Details</h1>
                    <p class="page-subtitle mb-0">Complete information about this notification</p>
                </div>
            </div>
            <div>
                @if(!$notification->is_read)
                    <span class="badge-unread">
                        <i class="bx bx-envelope"></i> Unread
                    </span>
                @else
                    <span class="badge-read">
                        <i class="bx bx-envelope-open"></i> Read
                    </span>
                @endif
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Main Notification Card -->
            <div class="notification-detail-card mb-4">
                <div class="notification-header-detail">
                    <div class="d-flex align-items-center">
                        <div class="notification-icon-large me-4">
                            @php
                                $iconMap = [
                                    'loan_application' => ['icon' => 'bx-credit-card', 'color' => 'success', 'bg' => '#dcfce7'],
                                    'payment' => ['icon' => 'bx-money', 'color' => 'info', 'bg' => '#dbeafe'],
                                    'membership' => ['icon' => 'bx-user-plus', 'color' => 'primary', 'bg' => '#e0e7ff'],
                                    'withdrawal' => ['icon' => 'bx-log-out', 'color' => 'danger', 'bg' => '#fee2e2'],
                                ];
                                $enquiryType = $notification->enquiry->type ?? 'default';
                                $icon = $iconMap[$enquiryType] ?? ['icon' => 'bx-bell', 'color' => 'primary', 'bg' => '#e0e7ff'];
                            @endphp
                            <i class="bx {{ $icon['icon'] }} text-{{ $icon['color'] }}" style="background: {{ $icon['bg'] }}"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h3 class="notification-title-large">{{ $notification->title }}</h3>
                            <div class="notification-meta-header">
                                @php
                                    $typeColors = [
                                        'enquiry_registered' => 'info',
                                        'enquiry_assigned' => 'primary',
                                        'status_changed' => 'warning',
                                        'payment_initiated' => 'info',
                                        'payment_approved' => 'success',
                                        'payment_rejected' => 'danger',
                                        'payment_paid' => 'success',
                                        'loan_processed' => 'info',
                                        'loan_approved' => 'success',
                                        'loan_rejected' => 'danger',
                                    ];
                                    $color = $typeColors[$notification->type] ?? 'secondary';
                                @endphp
                                <span class="badge badge-type bg-{{ $color }}">
                                    {{ ucwords(str_replace('_', ' ', $notification->type)) }}
                                </span>
                                <span class="notification-time">
                                    <i class="bx bx-time-five"></i>
                                    {{ $notification->created_at->format('d M Y, H:i') }}
                                    <small class="text-muted ms-1">({{ $notification->created_at->diffForHumans() }})</small>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="notification-body-detail">
                    <div class="message-container">
                        <h5 class="message-label">Message</h5>
                        <p class="message-content">{{ $notification->message }}</p>
                    </div>

                    @if($notification->meta_data)
                        <div class="meta-data-section">
                            <h5 class="meta-label">
                                <i class="bx bx-info-circle"></i> Additional Information
                            </h5>
                            <div class="row g-3">
                                @foreach($notification->meta_data as $key => $value)
                                    <div class="col-md-6">
                                        <div class="meta-item-card">
                                            <div class="meta-key">{{ ucwords(str_replace('_', ' ', $key)) }}</div>
                                            <div class="meta-value">{{ $value }}</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Enquiry Details Card -->
            @if($notification->enquiry)
                <div class="sidebar-card mb-4">
                    <div class="sidebar-card-header">
                        <i class="bx bx-file"></i>
                        <span>Related Enquiry</span>
                    </div>
                    <div class="sidebar-card-body">
                        <div class="info-item">
                            <span class="info-label">Check Number</span>
                            <span class="info-value">{{ $notification->enquiry->check_number }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Member Name</span>
                            <span class="info-value">{{ $notification->enquiry->full_name }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Enquiry Type</span>
                            <span class="info-value">
                                <span class="badge bg-info">{{ ucwords(str_replace('_', ' ', $notification->enquiry->type)) }}</span>
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Status</span>
                            <span class="info-value">
                                @php
                                    $statusColors = [
                                        'pending' => 'warning',
                                        'assigned' => 'info',
                                        'approved' => 'success',
                                        'rejected' => 'danger',
                                        'paid' => 'success',
                                        'completed' => 'primary',
                                    ];
                                    $statusColor = $statusColors[$notification->enquiry->status] ?? 'secondary';
                                @endphp
                                <span class="badge bg-{{ $statusColor }}">{{ ucfirst($notification->enquiry->status) }}</span>
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">
                                <i class="bx bx-map"></i> Location
                            </span>
                            <span class="info-value">
                                {{ $notification->enquiry->region->name ?? 'N/A' }}, {{ $notification->enquiry->district->name ?? 'N/A' }}
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">
                                <i class="bx bx-building"></i> Branch
                            </span>
                            <span class="info-value">{{ $notification->enquiry->branch->name ?? 'N/A' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">
                                <i class="bx bx-user"></i> Registered By
                            </span>
                            <span class="info-value">{{ $notification->enquiry->registeredBy->name ?? 'N/A' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">
                                <i class="bx bx-calendar"></i> Date Received
                            </span>
                            <span class="info-value">{{ $notification->enquiry->date_received ?? 'N/A' }}</span>
                        </div>
                    </div>
                    <div class="sidebar-card-footer">
                        <a href="{{ route('enquiries.show', $notification->enquiry_id) }}" class="btn btn-primary w-100">
                            <i class="bx bx-show"></i> View Full Enquiry
                        </a>
                    </div>
                </div>

                <!-- Payment Details (if exists) -->
                @if($notification->enquiry->payment)
                    <div class="sidebar-card mb-4">
                        <div class="sidebar-card-header">
                            <i class="bx bx-money"></i>
                            <span>Payment Details</span>
                        </div>
                        <div class="sidebar-card-body">
                            <div class="info-item">
                                <span class="info-label">Amount</span>
                                <span class="info-value amount-highlight">Tsh {{ number_format($notification->enquiry->payment->amount) }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">Status</span>
                                <span class="info-value">
                                    @php
                                        $paymentStatusColors = [
                                            'initiated' => 'info',
                                            'approved' => 'success',
                                            'rejected' => 'danger',
                                            'paid' => 'success',
                                        ];
                                        $paymentColor = $paymentStatusColors[$notification->enquiry->payment->status] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $paymentColor }}">{{ ucfirst($notification->enquiry->payment->status) }}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">Initiated By</span>
                                <span class="info-value">{{ $notification->enquiry->payment->initiatedBy->name ?? 'N/A' }}</span>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Loan Application Details (if exists) -->
                @if($notification->enquiry->loanApplication)
                    <div class="sidebar-card mb-4">
                        <div class="sidebar-card-header">
                            <i class="bx bx-credit-card"></i>
                            <span>Loan Application</span>
                        </div>
                        <div class="sidebar-card-body">
                            <div class="info-item">
                                <span class="info-label">Loan Type</span>
                                <span class="info-value">{{ $notification->enquiry->loanApplication->loan_type ?? 'N/A' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">Requested Amount</span>
                                <span class="info-value amount-highlight">Tsh {{ number_format($notification->enquiry->loanApplication->requested_amount ?? 0) }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">Loan Amount</span>
                                <span class="info-value amount-highlight">Tsh {{ number_format($notification->enquiry->loanApplication->loan_amount ?? 0) }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">Duration</span>
                                <span class="info-value">{{ $notification->enquiry->loanApplication->loan_duration ?? 'N/A' }} months</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">Status</span>
                                <span class="info-value">
                                    @php
                                        $loanStatusColors = [
                                            'pending' => 'warning',
                                            'processed' => 'info',
                                            'approved' => 'success',
                                            'rejected' => 'danger',
                                            'paid' => 'success',
                                        ];
                                        $loanColor = $loanStatusColors[$notification->enquiry->loanApplication->status] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $loanColor }}">{{ ucfirst($notification->enquiry->loanApplication->status) }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                @endif
            @endif

            <!-- Actions Card -->
            <div class="sidebar-card actions-card">
                <div class="sidebar-card-header">
                    <i class="bx bx-cog"></i>
                    <span>Actions</span>
                </div>
                <div class="sidebar-card-body">
                    @if(!$notification->is_read)
                        <button class="btn btn-success w-100 mb-3" onclick="markAsRead({{ $notification->id }})">
                            <i class="bx bx-check-double"></i> Mark as Read
                        </button>
                    @endif
                    <form action="{{ route('notifications.destroy', $notification->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this notification?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger w-100">
                            <i class="bx bx-trash"></i> Delete Notification
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Breadcrumb */
.modern-breadcrumb-show {
    background: white;
    padding: 14px 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    animation: slideUp 0.4s ease-out;
}

.modern-breadcrumb-show .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s;
}

.modern-breadcrumb-show .breadcrumb-link:hover {
    color: #17479E;
    transform: translateX(3px);
}

/* Page Header */
.page-header-show {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    padding: 32px;
    border-radius: 6px;
    color: white;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.35);
    animation: slideUp 0.5s ease-out 0.1s backwards;
}

.btn-back {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}

.btn-back:hover {
    background: rgba(255,255,255,0.3);
    transform: translateX(-5px);
    color: white;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.page-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

.badge-unread {
    background: rgba(239, 68, 68, 0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
}

.badge-read {
    background: rgba(34, 197, 94, 0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
}

/* Main Notification Card */
.notification-detail-card {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    animation: slideUp 0.5s ease-out 0.2s backwards;
}

.notification-header-detail {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    padding: 32px;
    border-bottom: 2px solid #e5e7eb;
}

.notification-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.notification-icon-large i {
    font-size: 40px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.notification-detail-card:hover .notification-icon-large {
    transform: rotate(-5deg) scale(1.05);
}

.notification-title-large {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.notification-meta-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.badge-type {
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
}

.notification-time {
    color: #6b7280;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-body-detail {
    padding: 32px;
}

.message-container {
    margin-bottom: 28px;
}

.message-label {
    font-size: 16px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-label::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #17479E 0%, #87CEEB 100%);
    border-radius: 4px;
}

.message-content {
    font-size: 16px;
    line-height: 1.8;
    color: #4b5563;
    padding: 20px;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-radius: 4px;
    border-left: 4px solid #17479E;
}

.meta-data-section {
    padding-top: 28px;
    border-top: 2px dashed #e5e7eb;
}

.meta-label {
    font-size: 16px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-item-card {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    padding: 16px;
    border-radius: 4px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
}

.meta-item-card:hover {
    border-color: #17479E;
    transform: translateY(-2px);
    box-shadow: 0 1px 3px rgba(102, 126, 234, 0.15);
}

.meta-key {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 600;
}

.meta-value {
    font-size: 15px;
    color: #111827;
    font-weight: 600;
}

/* Sidebar Cards */
.sidebar-card {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
    animation: slideInLeft 0.5s ease-out backwards;
}

.sidebar-card:hover {
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
    border-color: #17479E;
    transform: translateY(-3px);
}

.sidebar-card-header {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    padding: 16px 20px;
    color: white;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-card-header i {
    font-size: 20px;
}

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

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 12px;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-value {
    font-size: 14px;
    color: #111827;
    font-weight: 600;
    text-align: right;
}

.amount-highlight {
    color: #17479E;
    font-size: 15px;
}

.sidebar-card-footer {
    padding: 16px 20px;
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
}

.sidebar-card-footer .btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 12px;
    transition: all 0.3s;
}

.sidebar-card-footer .btn-primary {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    border: none;
}

.sidebar-card-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.4);
}

/* Actions Card */
.actions-card .btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 12px;
    transition: all 0.3s;
    border-width: 2px;
}

.actions-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.actions-card .btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
}

.actions-card .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
}

/* Badge Enhancements */
.badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .notification-header-detail {
        padding: 20px;
    }

    .notification-icon-large {
        width: 60px;
        height: 60px;
    }

    .notification-icon-large i {
        font-size: 30px;
    }

    .notification-title-large {
        font-size: 20px;
    }

    .notification-body-detail {
        padding: 20px;
    }
}
</style>
@endpush

@push('scripts')
<script>
function markAsRead(notificationId) {
    fetch(`/notifications/${notificationId}/mark-read`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    });
}
</script>
@endpush
@endsection