@extends('admin.layouts.app')

@section('title', 'নোটিফিকেশন ম্যানেজমেন্ট')

@section('panel')

@php
    $pageTitle = 'নোটিফিকেশন ম্যানেজমেন্ট';
@endphp

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

<div class="row">
    <div class="col-lg-12">

        {{-- Filter Card --}}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="las la-filter"></i>
                    নোটিফিকেশন খুঁজুন
                </h5>
            </div>

            <div class="card-body">
                <form method="GET" action="{{ route('admin.notifications.index') }}">
                    <div class="row g-3">

                        <div class="col-lg-4 col-md-6">
                            <label class="form-label fw-bold">সার্চ</label>

                            <input
                                type="text"
                                name="search"
                                class="form-control"
                                value="{{ request('search') }}"
                                placeholder="শিরোনাম, কনটেন্ট অথবা Notice ID"
                            >
                        </div>

                        <div class="col-lg-3 col-md-6">
                            <label class="form-label fw-bold">Audience</label>

                            <select name="audience_type" class="form-control">
                                <option value="">সকল Audience</option>

                                @foreach($audienceOptions as $value => $label)
                                    <option
                                        value="{{ $value }}"
                                        {{ request('audience_type') === $value ? 'selected' : '' }}
                                    >
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-lg-3 col-md-6">
                            <label class="form-label fw-bold">স্ট্যাটাস</label>

                            <select name="status" class="form-control">
                                <option value="">সকল স্ট্যাটাস</option>

                                @foreach($statusOptions as $value => $label)
                                    <option
                                        value="{{ $value }}"
                                        {{ request('status') === $value ? 'selected' : '' }}
                                    >
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-lg-2 col-md-6 d-flex align-items-end">
                            <div class="d-flex gap-2 w-100">
                                <button type="submit" class="btn btn--primary flex-fill">
                                    <i class="las la-search"></i>
                                    খুঁজুন
                                </button>

                                <a
                                    href="{{ route('admin.notifications.index') }}"
                                    class="btn btn-outline--dark"
                                >
                                    <i class="las la-redo-alt"></i>
                                </a>
                            </div>
                        </div>

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

        {{-- Notification List --}}
        <div class="card">

            <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>

                <a href="{{ route('admin.notifications.create') }}" class="btn btn--primary btn-sm">
                    <i class="las la-plus"></i>
                    নতুন নোটিফিকেশন
                </a>
            </div>

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

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

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

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

                        <thead>
                            <tr>
                                <th>শিরোনাম</th>
                                <th>Audience</th>
                                <th class="text-center">Recipient</th>
                                <th>Read Progress</th>
                                <th>Email রিপোর্ট</th>
                                <th>স্ট্যাটাস</th>
                                <th>পাঠানোর সময়</th>
                                <th class="text-center">অ্যাকশন</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($notices as $notice)

                                @php
                                    $totalRecipients = (int) $notice->total_recipients;
                                    $totalRead = (int) $notice->total_read;

                                    $readPercentage = $totalRecipients > 0
                                        ? min(100, ($totalRead / $totalRecipients) * 100)
                                        : 0;
                                @endphp

                                <tr>

                                    <td>
                                        <div class="notice-title">
                                            {{ $notice->title }}
                                        </div>

                                        <small class="text-muted">
                                            ID: {{ $notice->notice_id }}
                                        </small>
                                    </td>

                                    <td>
                                        <span class="badge badge--info">
                                            {{ $audienceOptions[$notice->audience_type] ?? $notice->audience_type }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <span class="fw-bold">
                                            {{ number_format($totalRecipients) }}
                                        </span>
                                    </td>

                                    <td>
                                        <div class="notice-progress-wrapper">
                                            <div class="d-flex justify-content-between mb-1">
                                                <small class="fw-bold">
                                                    {{ $totalRead }}/{{ $totalRecipients }}
                                                </small>

                                                <small class="text-muted">
                                                    {{ number_format($readPercentage, 0) }}%
                                                </small>
                                            </div>

                                            <div class="progress notice-progress">
                                                <div
                                                    class="progress-bar"
                                                    style="width: {{ number_format($readPercentage, 2, '.', '') }}%;"
                                                ></div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>
                                        @if((bool) $notice->send_email)
                                            <div class="small">
                                                <span class="text--success fw-bold">
                                                    Sent: {{ (int) $notice->email_sent }}
                                                </span>

                                                <br>

                                                <span class="text--warning fw-bold">
                                                    Pending: {{ (int) $notice->email_pending }}
                                                </span>

                                                <br>

                                                <span class="text--danger fw-bold">
                                                    Failed: {{ (int) $notice->email_failed }}
                                                </span>
                                            </div>
                                        @else
                                            <span class="badge badge--dark">
                                                Email বন্ধ
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        @if($notice->status === 'sent')
                                            <span class="badge badge--success">
                                                <i class="las la-check-circle"></i>
                                                Sent
                                            </span>
                                        @elseif($notice->status === 'draft')
                                            <span class="badge badge--warning">
                                                <i class="las la-file"></i>
                                                Draft
                                            </span>
                                        @elseif($notice->status === 'queued')
                                            <span class="badge badge--info">
                                                <i class="las la-clock"></i>
                                                Queued
                                            </span>
                                        @else
                                            <span class="badge badge--danger">
                                                <i class="las la-ban"></i>
                                                Cancelled
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        @if($notice->sent_at)
                                            <div class="fw-bold">
                                                {{ \Illuminate\Support\Carbon::parse($notice->sent_at)->format('d M Y') }}
                                            </div>

                                            <small class="text-muted">
                                                {{ \Illuminate\Support\Carbon::parse($notice->sent_at)->format('h:i A') }}
                                            </small>
                                        @else
                                            <span class="text-muted">এখনো পাঠানো হয়নি</span>
                                        @endif
                                    </td>

                                    <td>
                                        <div class="d-flex flex-wrap justify-content-center gap-2">

                                            <a
                                                href="{{ route('admin.notifications.show', $notice->notice_id) }}"
                                                class="btn btn-sm btn--primary"
                                            >
                                                <i class="las la-eye"></i>
                                                দেখুন
                                            </a>

                                            @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-sm btn--success">
                                                        <i class="las la-paper-plane"></i>
                                                        Publish
                                                    </button>
                                                </form>
                                            @endif

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

                                                <button type="submit" class="btn btn-sm btn--danger">
                                                    <i class="las la-trash"></i>
                                                    ডিলিট
                                                </button>
                                            </form>

                                        </div>
                                    </td>

                                </tr>

                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-5">
                                        <i class="las la-bell-slash empty-icon"></i>

                                        <h6 class="mt-2 mb-1">
                                            কোনো নোটিফিকেশন পাওয়া যায়নি
                                        </h6>

                                        <p class="text-muted mb-3">
                                            নতুন একটি নোটিফিকেশন তৈরি করুন।
                                        </p>

                                        <a
                                            href="{{ route('admin.notifications.create') }}"
                                            class="btn btn--primary btn-sm"
                                        >
                                            <i class="las la-plus"></i>
                                            নতুন নোটিফিকেশন
                                        </a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>

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

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

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

@endsection

@push('style')
<style>
    .notice-table {
        min-width: 1200px;
    }

    .notice-table th,
    .notice-table td {
        padding: 13px;
        vertical-align: middle;
    }

    .notice-table thead th {
        white-space: nowrap;
        font-weight: 800;
    }

    .notice-title {
        max-width: 280px;
        font-weight: 900;
    }

    .notice-progress-wrapper {
        width: 160px;
    }

    .notice-progress {
        height: 7px;
        border-radius: 20px;
    }

    .notice-progress .progress-bar {
        background-color: #28c76f;
        border-radius: 20px;
    }

    .empty-icon {
        color: #b7b7b7;
        font-size: 52px;
    }
</style>
@endpush