@extends('layouts.app')
@section('title', 'SMS & WhatsApp')
@section('page-title', 'Notifications')

@section('content')
<div class="space-y-6">

    {{-- Header --}}
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-xl font-bold text-stone-800">
                <i class="fas fa-paper-plane text-amber-500 mr-2"></i>SMS & WhatsApp
            </h2>
            <p class="text-sm text-stone-500 mt-0.5">Send notifications to students, parents, and teachers</p>
        </div>
        <div class="flex items-center gap-2">
            @if($smsEnabled)
            <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold"><i class="fas fa-check-circle mr-1"></i>{{ ucfirst($provider) }} Connected</span>
            @else
            <span class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold"><i class="fas fa-info-circle mr-1"></i>Log Mode (Configure .env)</span>
            @endif
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <div class="bg-white rounded-xl ring-1 ring-stone-200/60 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-graduate text-blue-500"></i>
                </div>
                <div>
                    <p class="text-xl font-bold text-stone-800">{{ $stats['students_with_phone'] }}</p>
                    <p class="text-[10px] text-stone-400">Students with phone <span class="text-stone-300">({{ $stats['total_students'] }} total)</span></p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl ring-1 ring-stone-200/60 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-amber-50 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-friends text-amber-500"></i>
                </div>
                <div>
                    <p class="text-xl font-bold text-stone-800">{{ $stats['parents_with_phone'] }}</p>
                    <p class="text-[10px] text-stone-400">Parents with phone <span class="text-stone-300">({{ $stats['total_parents'] }} total)</span></p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl ring-1 ring-stone-200/60 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-green-50 rounded-xl flex items-center justify-center">
                    <i class="fas fa-chalkboard-teacher text-green-500"></i>
                </div>
                <div>
                    <p class="text-xl font-bold text-stone-800">{{ $stats['teachers_with_phone'] }}</p>
                    <p class="text-[10px] text-stone-400">Teachers with phone <span class="text-stone-300">({{ $stats['total_teachers'] }} total)</span></p>
                </div>
            </div>
        </div>
    </div>

    {{-- Send Message Form --}}
    <form method="POST" action="{{ route('sms.send') }}" class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden" x-data="{ audience: 'all_parents', channel: 'sms' }">
        @csrf
        <div class="px-6 py-4 border-b border-stone-100 bg-stone-50">
            <h3 class="font-bold text-stone-800"><i class="fas fa-envelope text-amber-500 mr-2"></i>Compose Message</h3>
        </div>
        <div class="p-6 space-y-5">

            {{-- Audience --}}
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-2">Send To</label>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                    @foreach([
                        'all_parents' => ['Parents (All)', 'fa-user-friends', 'amber'],
                        'all_students' => ['Students (All)', 'fa-user-graduate', 'blue'],
                        'all_teachers' => ['Teachers (All)', 'fa-chalkboard-teacher', 'green'],
                        'class_students' => ['Class Students', 'fa-users', 'purple'],
                        'class_parents' => ['Class Parents', 'fa-users', 'pink'],
                        'custom' => ['Custom Numbers', 'fa-phone-alt', 'stone'],
                    ] as $val => [$label, $icon, $color])
                    <label class="cursor-pointer">
                        <input type="radio" name="audience" value="{{ $val }}" x-model="audience" class="hidden peer">
                        <div class="p-3 rounded-xl ring-1 ring-stone-200 text-center transition peer-checked:ring-2 peer-checked:ring-amber-500 peer-checked:bg-amber-50 hover:bg-stone-50">
                            <i class="fas {{ $icon }} text-{{ $color }}-400 text-lg"></i>
                            <p class="text-xs font-medium text-stone-700 mt-1">{{ $label }}</p>
                        </div>
                    </label>
                    @endforeach
                </div>
            </div>

            {{-- Class selector --}}
            <div x-show="audience === 'class_students' || audience === 'class_parents'" x-cloak>
                <label class="block text-sm font-medium text-stone-700 mb-1">Select Class</label>
                <select name="class_id" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                    <option value="">Choose class...</option>
                    @foreach($classes as $cls)
                    <option value="{{ $cls->id }}">{{ $cls->full_name }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Custom phones --}}
            <div x-show="audience === 'custom'" x-cloak>
                <label class="block text-sm font-medium text-stone-700 mb-1">Phone Numbers <span class="text-stone-400 text-xs">(comma separated)</span></label>
                <textarea name="custom_phones" rows="2" placeholder="9876543210, 9876543211, ..."
                          class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm resize-none"></textarea>
            </div>

            {{-- Channel --}}
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-2">Channel</label>
                <div class="flex gap-3">
                    <label class="cursor-pointer flex-1">
                        <input type="radio" name="channel" value="sms" x-model="channel" class="hidden peer">
                        <div class="p-3 rounded-xl ring-1 ring-stone-200 text-center transition peer-checked:ring-2 peer-checked:ring-blue-500 peer-checked:bg-blue-50 hover:bg-stone-50">
                            <i class="fas fa-sms text-blue-500 text-xl"></i>
                            <p class="text-xs font-medium text-stone-700 mt-1">SMS</p>
                        </div>
                    </label>
                    <label class="cursor-pointer flex-1">
                        <input type="radio" name="channel" value="whatsapp" x-model="channel" class="hidden peer">
                        <div class="p-3 rounded-xl ring-1 ring-stone-200 text-center transition peer-checked:ring-2 peer-checked:ring-green-500 peer-checked:bg-green-50 hover:bg-stone-50">
                            <i class="fab fa-whatsapp text-green-500 text-xl"></i>
                            <p class="text-xs font-medium text-stone-700 mt-1">WhatsApp</p>
                        </div>
                    </label>
                    <label class="cursor-pointer flex-1">
                        <input type="radio" name="channel" value="both" x-model="channel" class="hidden peer">
                        <div class="p-3 rounded-xl ring-1 ring-stone-200 text-center transition peer-checked:ring-2 peer-checked:ring-amber-500 peer-checked:bg-amber-50 hover:bg-stone-50">
                            <i class="fas fa-paper-plane text-amber-500 text-xl"></i>
                            <p class="text-xs font-medium text-stone-700 mt-1">Both</p>
                        </div>
                    </label>
                </div>
            </div>

            {{-- Message --}}
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Message</label>
                <textarea name="message" required maxlength="1000" rows="4" placeholder="Type your message here..."
                          class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm resize-none"
                          x-ref="msgBox" @input="$refs.charCount.textContent = $refs.msgBox.value.length"></textarea>
                <p class="text-[10px] text-stone-400 mt-1 text-right"><span x-ref="charCount">0</span>/1000 characters</p>
            </div>

            {{-- Quick Templates --}}
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-2">Quick Templates</label>
                <div class="flex flex-wrap gap-2">
                    @foreach([
                        'Holiday Notice' => 'Dear Parents, please note that the school will remain closed on [DATE] for [REASON]. Classes resume on [DATE].',
                        'PTM Reminder' => 'Dear Parents, Parent-Teacher Meeting is scheduled for [DATE] at [TIME]. Please book your slots on the portal.',
                        'Fee Reminder' => 'Dear Parents, this is a gentle reminder that the fee for [TERM] is due on [DATE]. Please clear the dues at the earliest.',
                        'Exam Schedule' => 'Dear Students, exams begin from [DATE]. Please check the timetable on the portal and prepare well.',
                        'Event Notice' => 'Dear Parents, [EVENT NAME] will be held on [DATE] at [VENUE]. All are welcome to attend.',
                    ] as $name => $template)
                    <button type="button" onclick="document.querySelector('[name=message]').value='{{ $template }}'; document.querySelector('[x-ref=charCount]').textContent='{{ strlen($template) }}'"
                            class="px-2.5 py-1 bg-stone-100 text-stone-600 rounded-lg text-xs font-medium hover:bg-amber-50 hover:text-amber-700 transition">
                        {{ $name }}
                    </button>
                    @endforeach
                </div>
            </div>

            {{-- Send --}}
            <div class="flex items-center justify-between pt-2 border-t border-stone-100">
                @if(!$smsEnabled)
                <p class="text-xs text-amber-600"><i class="fas fa-info-circle mr-1"></i>Messages will be logged only. Enable SMS in .env to send real messages.</p>
                @else
                <p class="text-xs text-green-600"><i class="fas fa-check-circle mr-1"></i>Connected via {{ ucfirst($provider) }}</p>
                @endif
                <button type="submit" class="px-6 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm"
                        onclick="return confirm('Send this message?')">
                    <i class="fas fa-paper-plane mr-1.5"></i> Send Message
                </button>
            </div>
        </div>
    </form>

    {{-- Setup Guide --}}
    @if(!$smsEnabled)
    <div class="bg-stone-50 rounded-2xl ring-1 ring-stone-200/60 p-6">
        <h3 class="font-bold text-stone-800 text-sm mb-3"><i class="fas fa-cog text-amber-500 mr-1.5"></i>Setup Guide</h3>
        <div class="space-y-3 text-sm text-stone-600">
            <div class="bg-white rounded-xl p-4 ring-1 ring-stone-100">
                <p class="font-semibold text-stone-700 mb-1"><i class="fas fa-1 text-amber-500 w-5"></i> Choose Provider</p>
                <p class="text-xs text-stone-500">Add to <code class="bg-stone-100 px-1 rounded">.env</code>:</p>
                <pre class="bg-stone-800 text-green-400 text-xs p-3 rounded-lg mt-2 overflow-x-auto">SMS_ENABLED=true
SMS_PROVIDER=msg91  # or 'twilio'</pre>
            </div>
            <div class="bg-white rounded-xl p-4 ring-1 ring-stone-100">
                <p class="font-semibold text-stone-700 mb-1"><i class="fas fa-2 text-amber-500 w-5"></i> MSG91 Setup</p>
                <pre class="bg-stone-800 text-green-400 text-xs p-3 rounded-lg mt-2 overflow-x-auto">MSG91_AUTH_KEY=your_auth_key
MSG91_SENDER_ID=SCHOOL
MSG91_ROUTE=4</pre>
            </div>
            <div class="bg-white rounded-xl p-4 ring-1 ring-stone-100">
                <p class="font-semibold text-stone-700 mb-1"><i class="fas fa-3 text-amber-500 w-5"></i> Twilio Setup</p>
                <pre class="bg-stone-800 text-green-400 text-xs p-3 rounded-lg mt-2 overflow-x-auto">TWILIO_SID=your_account_sid
TWILIO_TOKEN=your_auth_token
TWILIO_FROM=+1234567890</pre>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection