@extends('admin.layouts.app')

@section('title', 'নোটিফিকেশন বিস্তারিত')

@section('panel')

@php
    $pageTitle = 'নোটিফিকেশন বিস্তারিত';
@endphp

@push('breadcrumb-plugins')
    <a href="{{ route('admin.notifications.index') }}" class="btn btn-outline--primary btn-sm">
        <i class="las la-arrow-left"></i>
        নোটিফিকেশন তালিকা
    </a>
@endpush

<div class="row">

    <div class="col-xl-8 col-lg-7">

        <div class="card mb-4">

            <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                <h5 class="mb-0">
                    <i class="las la-bell"></i>
                    নোটিফিকেশন
                </h5>

                @if($notice->status === 'sent')
                    <span class="badge badge--success">
                        Sent
                    </span>
                @elseif($notice->status === 'draft')
                    <span class="badge badge--warning">
                        Draft
                    </span>
                @elseif($notice->status === 'queued')
                    <span class="badge badge--info">
                        Queued
                    </span>
                @else
                    <span class="badge badge--danger">
                        Cancelled
                    </span>
                @endif
            </div>

            <div class="card-body">

                @if(session('success'))
                    <div class="alert alert--success">
                        <i class="las la-check-circle"></i>
                        {{ session('success') }}
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert--danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <article class="notice-details">

                    <h1 class="notice-main-title">
                        {{ $notice->title }}
                    </h1>

                    <div class="notice-meta">
                        <span>
                            <i class="las la-users"></i>
                            {{ $notice->audienceText() }}
                        </span>

                        <span>
                            <i class="las la-calendar"></i>
                            {{ optional($notice->sent_at ?? $notice->created_at)->format('d M Y, h:i A') }}
                        </span>
                    </div>

                    @if($notice->hasImage())
                        <div class="notice-image-wrapper">
                            <img
                                src="{{ $notice->imageUrl() }}"
                                alt="{{ $notice->title }}"
                                class="notice-image"
                            >
                        </div>
                    @endif

                    <div class="notice-content">
                        {!! nl2br(e($notice->content)) !!}
                    </div>

                    @if($notice->hasActionLink())
                        <div class="mt-4">
                            <a
                                href="{{ $notice->action_url }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="btn btn--primary"
                            >
                                <i class="las la-external-link-alt"></i>
                                {{ $notice->action_text ?: 'বিস্তারিত দেখুন' }}
                            </a>
                        </div>
                    @endif

                </article>

            </div>

            <div class="card-footer">
                <div class="d-flex flex-wrap gap-2">

                    @if($notice->status === 'draft')
                        <form
                            action="{{ route('admin.notifications.publish', $notice->notice_id) }}"
                            method="POST"
                            onsubmit="return confirm('আপনি কি নোটিফিকেশনটি প্রকাশ করতে চান?');"
                        >
                            @csrf

                            <button type="submit" class="btn btn--success">
                                <i class="las la-paper-plane"></i>
                                নোটিফিকেশন প্রকাশ করুন
                            </button>
                        </form>
                    @endif

                    <form
                        action="{{ route('admin.notifications.destroy', $notice->notice_id) }}"
                        method="POST"
                        onsubmit="return confirm('নোটিফিকেশনটি ডিলিট করলে সকল recipient-এর নোটিফিকেশন মুছে যাবে। আপনি কি নিশ্চিত?');"
                    >
                        @csrf
                        @method('DELETE')

                        <button type="submit" class="btn btn--danger">
                            <i class="las la-trash"></i>
                            নোটিফিকেশন ডিলিট করুন
                        </button>
                    </form>

                </div>
            </div>

        </div>
    </div>

    {{-- Statistics --}}
    <div class="col-xl-4 col-lg-5">

        <div class="card mb-4">

            <div class="card-header">
                <h5 class="mb-0">
                    <i class="las la-chart-bar"></i>
                    রিপোর্ট
                </h5>
            </div>

            <div class="card-body">

                <div class="row g-3">

                    <div class="col-6">
                        <div class="stat-box">
                            <span>মোট Recipient</span>
                            <strong>{{ (int) $statistics->total_recipients }}</strong>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="stat-box stat-success">
                            <span>Read</span>
                            <strong>{{ (int) $statistics->total_read }}</strong>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="stat-box stat-warning">
                            <span>Unread</span>
                            <strong>{{ (int) $statistics->total_unread }}</strong>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="stat-box stat-info">
                            <span>Email Sent</span>
                            <strong>{{ (int) $statistics->email_sent }}</strong>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="stat-box stat-warning">
                            <span>Email Pending</span>
                            <strong>{{ (int) $statistics->email_pending }}</strong>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="stat-box stat-danger">
                            <span>Email Failed</span>
                            <strong>{{ (int) $statistics->email_failed }}</strong>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="stat-box">
                            <span>Email Skipped</span>
                            <strong>{{ (int) $statistics->email_skipped }}</strong>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

</div>

{{-- Recipient List --}}
<div class="row">
    <div class="col-lg-12">

        <div class="card">

            <div class="card-header">
                <h5 class="mb-0">
                    <i class="las la-users"></i>
                    Recipient তালিকা
                </h5>
            </div>

            <div class="card-body p-0">

                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle mb-0 recipient-table">

                        <thead>
                            <tr>
                                <th>ইউজার</th>
                                <th>Referral Code</th>
                                <th>Email</th>
                                <th>Web Status</th>
                                <th>Email Status</th>
                                <th>Read Time</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($recipients as $recipient)
                                <tr>

                                    <td>
                                        <div class="fw-bold">
                                            {{ $recipient->user?->name ?? 'ইউজার পাওয়া যায়নি' }}
                                        </div>

                                        <small class="text-muted">
                                            ID: {{ $recipient->user_id ?? 'N/A' }}
                                        </small>
                                    </td>

                                    <td>
                                        <code>
                                            {{ $recipient->target_referral_code ?: 'N/A' }}
                                        </code>
                                    </td>

                                    <td>
                                        {{ $recipient->recipient_email ?: 'Email নেই' }}
                                    </td>

                                    <td>
                                        @if($recipient->is_read)
                                            <span class="badge badge--success">
                                                Read
                                            </span>
                                        @else
                                            <span class="badge badge--warning">
                                                Unread
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        @if($recipient->email_status === 'sent')
                                            <span class="badge badge--success">
                                                Sent
                                            </span>
                                        @elseif($recipient->email_status === 'pending')
                                            <span class="badge badge--warning">
                                                Pending
                                            </span>
                                        @elseif($recipient->email_status === 'failed')
                                            <span
                                                class="badge badge--danger"
                                                title="{{ $recipient->email_error }}"
                                            >
                                                Failed
                                            </span>
                                        @elseif($recipient->email_status === 'skipped')
                                            <span
                                                class="badge badge--dark"
                                                title="{{ $recipient->email_error }}"
                                            >
                                                Skipped
                                            </span>
                                        @else
                                            <span class="badge badge--info">
                                                Not Requested
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        {{ $recipient->read_at?->format('d M Y, h:i A') ?? '-' }}
                                    </td>

                                </tr>

                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4">
                                        কোনো recipient পাওয়া যায়নি।
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>

                    </table>
                </div>

            </div>

            @if($recipients->hasPages())
                <div class="card-footer">
                    {{ $recipients->links() }}
                </div>
            @endif

        </div>
    </div>
</div>

@endsection

@push('style')
<style>
    .notice-details {
        padding: 5px;
    }

    .notice-main-title {
        margin-bottom: 12px;
        font-size: 30px;
        font-weight: 900;
        line-height: 1.35;
    }

    .notice-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 22px;
        color: #6c757d;
        font-size: 13px;
        font-weight: 700;
    }

    .notice-image-wrapper {
        margin-bottom: 24px;
    }

    .notice-image {
        display: block;
        width: 100%;
        max-height: 500px;
        object-fit: contain;
        border-radius: 12px;
        background-color: #f8f8f8;
    }

    .notice-content {
        font-size: 16px;
        line-height: 1.9;
        word-break: break-word;
    }

    .stat-box {
        height: 100%;
        padding: 15px;
        border: 1px solid rgba(0, 0, 0, 0.07);
        border-radius: 9px;
        background-color: #fafafa;
    }

    .stat-box span {
        display: block;
        color: #6c757d;
        font-size: 12px;
        font-weight: 800;
    }

    .stat-box strong {
        display: block;
        margin-top: 5px;
        font-size: 25px;
        font-weight: 900;
    }

    .stat-success {
        background-color: rgba(40, 199, 111, 0.08);
    }

    .stat-warning {
        background-color: rgba(255, 159, 67, 0.08);
    }

    .stat-danger {
        background-color: rgba(234, 84, 85, 0.08);
    }

    .stat-info {
        background-color: rgba(0, 207, 232, 0.08);
    }

    .recipient-table {
        min-width: 950px;
    }

    .recipient-table th,
    .recipient-table td {
        padding: 13px;
        vertical-align: middle;
    }
</style>
@endpush