@extends('layouts.admin')
@section('title', 'Appointments')
@section('lede', 'The public scan page books these hours. Letters go out through the SMTP account in Global settings.')
@section('content')
@php
    $tab = $tab ?? 'calendar';
    $days = array_map('intval', explode(',', (string) ($values['booking_days'] ?? '1,2,3,4,5')));
    $zones = array_values(array_unique(array_merge(['Asia/Karachi', 'UTC'], timezone_identifiers_list(\DateTimeZone::ASIA))));
    sort($zones);
    $letters = app(\App\Services\BookingMail::class);
@endphp
<div class="mb-5 flex flex-wrap gap-2">
    @foreach(['calendar' => 'Calendar', 'hours' => 'Hours', 'mail' => 'Letters'] as $key => $label)
        <a href="{{ route('admin.appointments.index', ['tab' => $key, 'month' => $board['month']]) }}" class="rounded-full border border-line px-3 py-1 text-sm {{ $tab === $key ? 'bg-ink text-cream' : 'bg-white' }}">{{ $label }}</a>
    @endforeach
</div>

@if($tab === 'calendar')
    @if($newCount)
        <p class="desk-note">{{ $newCount }} new {{ $newCount === 1 ? 'booking needs' : 'bookings need' }} a reply. The same notice is emailed when SMTP is set.</p>
    @endif
    @unless($smtpReady)
        <p class="desk-note">SMTP is not set. Bookings still land here, but nobody receives an email until the host and from address are saved under Global settings.</p>
    @endunless
    <div class="mt-4 grid gap-6 lg:grid-cols-[280px_1fr]">
        <section class="appt p-5 sm:p-6">
            <div class="appt-nav">
                <a class="appt-arrow" href="{{ route('admin.appointments.index', ['month' => $board['prev'], 'tab' => 'calendar']) }}" aria-label="Previous month"><i data-lucide="arrow-left" class="h-4 w-4"></i></a>
                <p class="appt-month">{{ $board['label'] }}</p>
                <a class="appt-arrow" href="{{ route('admin.appointments.index', ['month' => $board['next'], 'tab' => 'calendar']) }}" aria-label="Next month"><i data-lucide="arrow-right" class="h-4 w-4"></i></a>
            </div>
            <div class="appt-week" aria-hidden="true"><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span></div>
            <div class="appt-grid">
                @foreach($board['cells'] as $cell)
                    @if(!$cell)
                        <span class="appt-day"></span>
                    @else
                        <a href="{{ route('admin.appointments.index', ['month' => $board['month'], 'day' => $cell['date'], 'tab' => 'calendar']) }}" class="appt-day {{ $cell['open'] || $cell['count'] ? 'is-open' : '' }} {{ $day === $cell['date'] ? 'is-on' : '' }}">
                            {{ $cell['day'] }}
                            @if($cell['count'])<i>{{ $cell['count'] }}</i>@endif
                        </a>
                    @endif
                @endforeach
            </div>
            <p class="mt-3 text-xs text-muted">Times in {{ $board['timezone'] }}. A number is a held booking. Cancel a booking to free the time.</p>
        </section>
        <section>
            <h2 class="text-lg font-semibold">{{ $day ? \Illuminate\Support\Carbon::parse($day)->format('l j F') : 'This month' }}</h2>
            <ol class="book-line mt-3">
                @forelse($shown as $lead)
                    <li>
                        <time>{{ $lead->starts_at->timezone($board['timezone'])->format('H:i') }}</time>
                        <div>
                            <p class="font-semibold">{{ $lead->school }}</p>
                            <p class="text-sm text-muted">{{ $lead->name }} · {{ $lead->role }} · {{ $lead->phone }} · {{ $lead->email }}</p>
                            <p class="mt-1 text-sm">{{ $lead->pain }}@if($lead->message) — {{ $lead->message }}@endif</p>
                            <div class="mt-2 flex flex-wrap items-center gap-3">
                                <a class="text-sm text-brass-deep underline" href="{{ $letters->googleUrl($lead) }}" target="_blank" rel="noopener">Google Calendar</a>
                                <form method="post" action="{{ route('admin.leads.update', $lead) }}">@csrf @method('PUT')
                                    <select name="status" onchange="this.form.submit()">
                                        @foreach(['new','contacted','qualified','closed','cancelled'] as $status)
                                            <option value="{{ $status }}" @selected($lead->status === $status)>{{ $status }}</option>
                                        @endforeach
                                    </select>
                                </form>
                            </div>
                        </div>
                    </li>
                @empty
                    <li class="text-sm text-muted">No bookings on this view.</li>
                @endforelse
            </ol>
        </section>
    </div>
@elseif($tab === 'hours')
    <form method="post" action="{{ route('admin.appointments.hours') }}" class="desk-card max-w-3xl">
        @csrf
        <h2>Open hours</h2>
        <p class="mt-1 text-sm text-muted">These are the only times an owner can choose on Book a Scan.</p>
        @if($errors->any())<p class="mt-3 text-sm text-red-700">{{ $errors->first() }}</p>@endif
        <p class="desk-k mt-5">Days</p>
        <div class="mt-2 flex flex-wrap gap-2">
            @foreach([1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri', 6 => 'Sat', 7 => 'Sun'] as $num => $name)
                <label class="day-toggle">
                    <input type="checkbox" name="days[]" value="{{ $num }}" @checked(in_array($num, $days, true))>
                    <span>{{ $name }}</span>
                </label>
            @endforeach
        </div>
        <div class="mt-5 grid gap-4 sm:grid-cols-2">
            <label class="text-sm"><span class="desk-k">First time</span><input type="time" name="booking_start" value="{{ $values['booking_start'] ?? '10:00' }}" required class="mt-1"></label>
            <label class="text-sm"><span class="desk-k">Last time must finish by</span><input type="time" name="booking_end" value="{{ $values['booking_end'] ?? '17:00' }}" required class="mt-1"></label>
            <label class="text-sm"><span class="desk-k">Length, minutes</span><input type="number" name="booking_slot" min="15" max="180" value="{{ $values['booking_slot'] ?? 45 }}" required class="mt-1"></label>
            <label class="text-sm"><span class="desk-k">Gap after each booking</span><input type="number" name="booking_buffer" min="0" max="120" value="{{ $values['booking_buffer'] ?? 15 }}" required class="mt-1"></label>
            <label class="text-sm"><span class="desk-k">Minimum notice, hours</span><input type="number" name="booking_notice_hours" min="0" max="168" value="{{ $values['booking_notice_hours'] ?? 4 }}" required class="mt-1"></label>
            <label class="text-sm"><span class="desk-k">How far ahead, days</span><input type="number" name="booking_horizon_days" min="1" max="180" value="{{ $values['booking_horizon_days'] ?? 60 }}" required class="mt-1"></label>
            <label class="text-sm sm:col-span-2"><span class="desk-k">Timezone</span>
                <select name="booking_timezone" class="mt-1">
                    @foreach($zones as $zone)
                        <option value="{{ $zone }}" @selected(($values['booking_timezone'] ?? 'Asia/Karachi') === $zone)>{{ $zone }}</option>
                    @endforeach
                </select>
            </label>
            <label class="text-sm"><span class="desk-k">Event title</span><input name="booking_title" value="{{ $values['booking_title'] ?? 'School Health Scan' }}" required class="mt-1"></label>
            <label class="text-sm"><span class="desk-k">Location on the calendar</span><input name="booking_location" value="{{ $values['booking_location'] ?? 'Lahore' }}" class="mt-1"></label>
            <label class="text-sm sm:col-span-2"><span class="desk-k">Closed dates</span><textarea name="booking_blocked" rows="4" class="mt-1" placeholder="2026-10-24">{{ $values['booking_blocked'] ?? '' }}</textarea><span class="mt-1 block text-xs text-muted">One date per line, year-month-day. Those days offer no times.</span></label>
        </div>
        <button class="desk-btn mt-5">Save hours</button>
    </form>
@else
    <div class="grid gap-6 xl:grid-cols-2" x-data="{
        guestSubject: @js($templates['guest_subject']),
        guestHtml: @js($templates['guest_html']),
        adminSubject: @js($templates['admin_subject']),
        adminHtml: @js($templates['admin_html']),
        sample: @js($sample),
        which: 'guest',
        fill(html) {
            let out = html || '';
            Object.entries(this.sample).forEach(([key, value]) => { out = out.split('[['+key+']]').join(value); });
            return out;
        }
    }">
        <form method="post" action="{{ route('admin.appointments.templates') }}" class="desk-card">
            @csrf
            <h2>Letters</h2>
            <p class="mt-1 text-sm text-muted">The owner letter must keep [[google_url]]. That is the Add to Google Calendar button. Placeholders: [[name]] [[school]] [[date]] [[time]] [[end]] [[timezone]] [[phone]] [[email]] [[role]] [[city]] [[pain]] [[offer]] [[message]] [[google_url]] [[admin_url]]</p>
            @if($errors->any())<p class="mt-3 text-sm text-red-700">{{ $errors->first() }}</p>@endif
            <label class="mt-4 block text-sm"><span class="desk-k">Owner subject</span><input name="mail_tpl_guest_subject" x-model="guestSubject" required class="mt-1"></label>
            <label class="mt-4 block text-sm"><span class="desk-k">Owner letter</span><textarea name="mail_tpl_guest_html" rows="14" x-model="guestHtml" required class="mt-1 font-mono text-xs"></textarea></label>
            <label class="mt-4 block text-sm"><span class="desk-k">Admin subject</span><input name="mail_tpl_admin_subject" x-model="adminSubject" required class="mt-1"></label>
            <label class="mt-4 block text-sm"><span class="desk-k">Admin letter</span><textarea name="mail_tpl_admin_html" rows="12" x-model="adminHtml" required class="mt-1 font-mono text-xs"></textarea></label>
            <button class="desk-btn mt-5">Save letters</button>
        </form>
        <div>
            <div class="mb-3 flex gap-2">
                <button type="button" class="rounded-full border border-line px-3 py-1 text-sm" :class="which === 'guest' ? 'bg-ink text-cream' : 'bg-white'" @click="which = 'guest'">Owner preview</button>
                <button type="button" class="rounded-full border border-line px-3 py-1 text-sm" :class="which === 'admin' ? 'bg-ink text-cream' : 'bg-white'" @click="which = 'admin'">Admin preview</button>
            </div>
            <p class="mb-2 text-sm" x-text="which === 'guest' ? guestSubject : adminSubject"></p>
            <iframe class="h-[36rem] w-full rounded-xl border border-line bg-white" :srcdoc="fill(which === 'guest' ? guestHtml : adminHtml)" title="Letter preview"></iframe>
            <form method="post" action="{{ route('admin.appointments.templates') }}" class="mt-4" onsubmit="return confirm('Restore the original letters?')">
                @csrf
                <input type="hidden" name="restore" value="1">
                <button class="desk-quiet">Restore original letters</button>
            </form>
        </div>
    </div>
@endif
@endsection