@extends('layouts.superadmin')

@section('title','الأوتو-كوتش - ProMission')
@section('page-title','الأوتو-كوتش - ProMission')

@section('content')
@php
    $btn = fn($cls)=> "w-full rounded-xl px-3 py-2 text-xs font-bold border transition {$cls}";
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
<div class="max-w-6xl mx-auto px-4 rtl text-white">

    {{-- Header --}}
    <div class="mb-6 flex items-start justify-between gap-3">
        <div class="flex items-center gap-3">
            <div class="h-11 w-11 rounded-2xl bg-slate-800 grid place-items-center ring-2 ring-purple-500/60 shadow-lg shadow-purple-500/30">
                <i class="fa-solid fa-wand-magic-sparkles text-purple-300 text-xl"></i>
            </div>
            <div>
                <h1 class="text-xl sm:text-2xl font-bold">الأوتو-كوتش</h1>
                <p class="text-sm text-slate-300/80">خطة تنفيذ + رسائل واتساب جاهزة حسب المتبقي للوصول لأهداف التيم.</p>
            </div>
        </div>
        <div class="text-right text-[11px] text-slate-300/80">
            الفترة: <span class="font-bold text-white">{{ $from }}</span> → <span class="font-bold text-white">{{ $to }}</span>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('superadmin.promission.coach.index') }}"
          class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">
        <div class="grid gap-4 md:grid-cols-6 grid-cols-1">
            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">من</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
            </div>
            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">إلى</label>
                <input type="date" name="to" value="{{ $to }}"
                       class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
            </div>
            <div class="flex flex-col gap-1">
                <label class="text-xs text-slate-300">أفق الخطة (أيام)</label>
                <select name="horizon"
                        class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                    @foreach([3,5,7,10,14] as $d)
                        <option value="{{ $d }}" {{ (int)$horizon===$d?'selected':'' }}>{{ $d }}</option>
                    @endforeach
                </select>
            </div>

            <div class="md:col-span-3 flex items-end gap-2">
                <button class="rounded-xl bg-purple-500 px-4 py-2 text-sm font-bold text-slate-950 hover:bg-purple-400 transition">
                    <i class="fa-solid fa-filter ml-2 text-xs"></i> تطبيق
                </button>
                <a href="{{ route('superadmin.promission.coach.index') }}"
                   class="rounded-xl border border-slate-600 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800/80 transition">
                    إعادة ضبط
                </a>
            </div>
        </div>
    </form>

    {{-- KPIs --}}
    <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 mb-6">
        <div class="rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-4">
            <div class="text-[11px] text-emerald-200/80">الحالي (إجمالي)</div>
            <div class="text-2xl font-bold text-emerald-100 mt-1">{{ $cur['total_hours'] }}س</div>
        </div>
        <div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4">
            <div class="text-[11px] text-sky-200/80">لايف</div>
            <div class="text-2xl font-bold text-sky-100 mt-1">{{ $cur['live_hours'] }}س</div>
        </div>
        <div class="rounded-2xl border border-purple-500/20 bg-purple-500/5 p-4">
            <div class="text-[11px] text-purple-200/80">سهرة</div>
            <div class="text-2xl font-bold text-purple-100 mt-1">{{ $cur['sahra_hours'] }}س</div>
        </div>
        <div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4">
            <div class="text-[11px] text-amber-200/80">قست</div>
            <div class="text-2xl font-bold text-amber-100 mt-1">{{ $cur['guest_count'] }}</div>
        </div>
    </div>

    {{-- AI box --}}
    <div class="mb-6 rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-4">
        <div class="text-sm font-extrabold text-emerald-100 mb-2">
            <i class="fa-solid fa-brain ml-2"></i>تحليل ذكي + خطة
        </div>
        <ul class="space-y-1.5 text-[12px] text-emerald-100/90">
            @foreach(($ai['tips'] ?? []) as $t)
                <li>• {{ $t }}</li>
            @endforeach
        </ul>
        @if(!empty($ai['plan']))
            <div class="mt-3 rounded-xl border border-slate-700 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-300 mb-2">خطة تنفيذ مقترحة</div>
                <ol class="list-decimal pr-4 space-y-1 text-[12px] text-slate-100/90">
                    @foreach(($ai['plan'] ?? []) as $p)
                        <li>{{ $p }}</li>
                    @endforeach
                </ol>
            </div>
        @endif
    </div>

    {{-- WhatsApp actions --}}
    <div class="mb-6 rounded-2xl border border-white/10 bg-white/5 p-4">
        <div class="flex items-center justify-between gap-2 mb-3">
            <div class="text-sm font-extrabold text-white">
                <i class="fa-brands fa-whatsapp ml-2"></i> رسائل واتساب جاهزة (5 أوضاع)
            </div>
            <div class="text-[11px] text-slate-300">الإرسال عبر 127.0.0.1:3000</div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-5 gap-2 mb-4">
            @foreach([
                'motivate' => ['🔥 تحفيز', 'bg-emerald-500/15 border-emerald-500/20 hover:bg-emerald-500/20'],
                'warning'  => ['⚠️ تحذير', 'bg-rose-500/15 border-rose-500/20 hover:bg-rose-500/20'],
                'plan'     => ['🧩 خطة', 'bg-sky-500/15 border-sky-500/20 hover:bg-sky-500/20'],
                'leaders'  => ['👑 قيادة', 'bg-amber-500/15 border-amber-500/20 hover:bg-amber-500/20'],
                'daily'    => ['📌 هدف اليوم', 'bg-white/10 border-white/10 hover:bg-white/15'],
            ] as $mode => $meta)
                <form method="POST" action="{{ route('superadmin.promission.coach.send') }}">
                    @csrf
                    <input type="hidden" name="mode" value="{{ $mode }}">
                    <input type="hidden" name="from" value="{{ $from }}">
                    <input type="hidden" name="to" value="{{ $to }}">
                    <input type="hidden" name="horizon" value="{{ $horizon }}">
                    <button class="{{ $btn($meta[1]) }}">{{ $meta[0] }}</button>
                </form>
            @endforeach
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
            <div class="rounded-xl border border-slate-700 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-300 mb-2">معاينة (تحفيز)</div>
                <textarea rows="9" class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-xs text-slate-100">{{ $previews['motivate'] ?? '' }}</textarea>
            </div>
            <div class="rounded-xl border border-slate-700 bg-slate-950/40 p-3">
                <div class="text-[11px] text-slate-300 mb-2">معاينة (خطة)</div>
                <textarea rows="9" class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-xs text-slate-100">{{ $previews['plan'] ?? '' }}</textarea>
            </div>
        </div>
    </div>

</div>
</div>
@endsection