@extends('layouts.app', ['title' => term('nav_reminders','Recordatorios')])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-reminder"><i class="fa-solid fa-bell"></i>Nuevo recordatorio</button>
@endsection

@section('content')
<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-bell"></i><div class="metric-val">{{ $reminders->count() }}</div><div class="metric-label">Recordatorios</div></div>
    <div class="metric"><i class="fa-solid fa-paper-plane"></i><div class="metric-val text-success">{{ $reminders->whereNotNull('sent_at')->count() }}</div><div class="metric-label">Enviados</div></div>
    <div class="metric"><i class="fa-solid fa-clock"></i><div class="metric-val text-gold">{{ $reminders->where('status','Programado')->count() }}</div><div class="metric-label">Programados</div></div>
    <div class="metric"><i class="fa-solid fa-money-bill-wave"></i><div class="metric-val text-gold">{{ ($paymentReminders ?? collect())->count() }}</div><div class="metric-label">Cobros hoy</div></div>
</div>


<div class="card" style="margin-bottom:16px">
    <div class="card-head">
        <div><div class="card-title">Cobros de hoy</div><div class="sub">Abonos y vencimientos de apartado detectados automáticamente desde ventas a plazo/apartados</div></div>
        <span class="pill gold">{{ ($paymentReminders ?? collect())->count() }} pendiente(s)</span>
    </div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Concepto</th><th>Cliente</th><th>Terreno</th><th>Monto</th><th>Mensaje</th><th style="width:80px"></th></tr></thead>
            <tbody>
            @forelse(($paymentReminders ?? collect()) as $payReminder)
                <tr>
                    <td><strong>{{ $payReminder->title }}</strong><div class="sub">{{ ucfirst($payReminder->kind) }} · {{ $payReminder->due_date }}</div></td>
                    <td>{{ $payReminder->client }}<div class="sub">{{ $payReminder->phone ?: 'Sin teléfono' }}</div></td>
                    <td>{{ $payReminder->unit }}</td>
                    <td><strong class="text-gold">${{ number_format((float) $payReminder->amount, 2) }}</strong></td>
                    <td style="max-width:380px"><div class="sub">{{ \Illuminate\Support\Str::limit($payReminder->message, 170) }}</div></td>
                    <td>
                        <div class="kebab">
                            <button class="kebab-trigger" type="button" data-kebab data-tip="Más"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                            <div class="kebab-menu">
                                <a target="_blank" href="{{ $payReminder->whatsapp_url }}"><i class="fa-brands fa-whatsapp"></i> Enviar WhatsApp</a>
                                @if($payReminder->client_url)<a href="{{ $payReminder->client_url }}"><i class="fa-solid fa-folder-open"></i> Ver expediente</a>@endif
                            </div>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" style="text-align:center;color:var(--muted);padding:18px">No hay cobros programados para hoy.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="card">
    <div class="card-head"><div><div class="card-title">Programados</div><div class="sub">Enviar directo por WhatsApp con un toque</div></div></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Fecha</th><th>Recordatorio</th><th>Cliente</th><th>Mensaje</th><th>Estado</th><th style="width:50px"></th></tr></thead>
            <tbody>
            @forelse($reminders as $reminder)
                <tr>
                    <td>{{ optional($reminder->remind_at)->format('d/m/Y H:i') }}</td>
                    <td><strong>{{ $reminder->title }}</strong><div class="sub">{{ $reminder->type }}</div></td>
                    <td>{{ $reminder->client?->name }}<div class="sub">{{ $reminder->phone ?: $reminder->client?->phone }}</div></td>
                    <td style="max-width:340px"><div class="sub">{{ \Illuminate\Support\Str::limit($reminder->message,160) }}</div></td>
                    <td><span class="badge {{ $reminder->sent_at ? 'green' : 'amber' }}">{{ $reminder->status }}</span></td>
                    <td>
                        <div class="kebab">
                            <button class="kebab-trigger" type="button" data-kebab data-tip="Más"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                            <div class="kebab-menu">
                                <a target="_blank" href="{{ route('reminders.whatsapp', $reminder) }}"><i class="fa-brands fa-whatsapp"></i> Enviar WhatsApp</a>
                                <button type="button" data-modal-open="modal-edit-reminder-{{ $reminder->id }}"><i class="fa-solid fa-pen"></i> Editar recordatorio</button>
                                <hr>
                                <form method="post" action="{{ route('reminders.destroy', $reminder) }}" onsubmit="return confirm('¿Eliminar recordatorio?')">@csrf @method('DELETE')<button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar</button></form>
                            </div>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" style="text-align:center;color:var(--muted);padding:18px">Sin recordatorios. Crea el primero con "Nuevo recordatorio".</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('modals')
<div class="modal-backdrop" id="modal-add-reminder">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-bell text-gold"></i> Nuevo recordatorio</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('reminders.store') }}" id="reminder-form">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Titulo *<input name="title" id="reminder-title" required></label>
                    <label>Tipo *<select name="type" id="reminder-type" onchange="fillReminderTemplate()">@foreach($templates as $template)<option value="{{ $template->type }}">{{ $template->type }}</option>@endforeach</select></label>
                    <label>Fecha y hora *<input name="remind_at" id="reminder-date" type="datetime-local" required onchange="fillReminderTemplate()"></label>
                    <label>Cliente<select name="client_id" id="reminder-client" onchange="syncClientPhone();fillReminderTemplate()"><option value="">Sin cliente</option>@foreach($clients as $client)<option value="{{ $client->id }}" data-phone="{{ $client->phone }}">{{ $client->name }}</option>@endforeach</select></label>
                    <label>Asesor<select name="advisor_id" id="reminder-advisor" onchange="fillReminderTemplate()"><option value="">Sin asesor</option>@foreach($advisors as $advisor)<option value="{{ $advisor->id }}">{{ $advisor->name }}</option>@endforeach</select></label>
                    <label>Telefono WhatsApp<input name="phone" id="reminder-phone" placeholder="3111234567"></label>
                    <label>Notificar a *<select name="notify_to"><option>Solo yo</option><option>Asesor especifico</option><option>Todo el equipo</option></select></label>
                    <input type="hidden" name="status" value="Programado">
                    <label style="grid-column:1/-1">Mensaje para WhatsApp<textarea name="message" id="reminder-message" rows="4"></textarea></label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-paper-plane"></i>Programar</button>
            </div>
        </form>
    </div>
</div>

@foreach($reminders as $reminder)
<div class="modal-backdrop" id="modal-edit-reminder-{{ $reminder->id }}">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar recordatorio</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('reminders.update', $reminder) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Titulo *<input name="title" value="{{ $reminder->title }}" required></label>
                    <label>Tipo *<select name="type">@foreach($templates as $t)<option value="{{ $t->type }}" @selected($reminder->type === $t->type)>{{ $t->type }}</option>@endforeach</select></label>
                    <label>Fecha y hora *<input name="remind_at" type="datetime-local" value="{{ optional($reminder->remind_at)->format('Y-m-d\TH:i') }}" required></label>
                    <label>Cliente<select name="client_id"><option value="">Sin cliente</option>@foreach($clients as $client)<option value="{{ $client->id }}" @selected($reminder->client_id === $client->id)>{{ $client->name }}</option>@endforeach</select></label>
                    <label>Asesor<select name="advisor_id"><option value="">Sin asesor</option>@foreach($advisors as $advisor)<option value="{{ $advisor->id }}" @selected($reminder->advisor_id === $advisor->id)>{{ $advisor->name }}</option>@endforeach</select></label>
                    <label>Telefono<input name="phone" value="{{ $reminder->phone }}"></label>
                    <label>Notificar a *<select name="notify_to"><option @selected($reminder->notify_to === 'Solo yo')>Solo yo</option><option @selected($reminder->notify_to === 'Asesor especifico')>Asesor especifico</option><option @selected($reminder->notify_to === 'Todo el equipo')>Todo el equipo</option></select></label>
                    <label>Estado<select name="status"><option @selected($reminder->status === 'Programado')>Programado</option><option @selected($reminder->status === 'Enviado')>Enviado</option><option @selected($reminder->status === 'Enviado por WhatsApp')>Enviado por WhatsApp</option><option @selected($reminder->status === 'Cancelado')>Cancelado</option></select></label>
                    <label style="grid-column:1/-1">Mensaje<textarea name="message" rows="4">{{ $reminder->message }}</textarea></label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection

@push('scripts')
<script>
const reminderTemplates = @json($templates->pluck('body','type'));
const reminderOpen = '{' + '{';
const reminderClose = '}' + '}';
function selectedText(id, fallback){const el=document.getElementById(id);if(!el||el.selectedIndex<0)return fallback;return el.options[el.selectedIndex].text||fallback}
function syncClientPhone(){const c=document.getElementById('reminder-client');const phone=c.options[c.selectedIndex]?.dataset.phone||'';if(phone)document.getElementById('reminder-phone').value=phone}
function fillReminderTemplate(){
    const type=document.getElementById('reminder-type')?.value;
    if(!type)return;
    const rawDate=document.getElementById('reminder-date').value;
    const date=rawDate?new Date(rawDate).toLocaleString('es-MX'):'la fecha programada';
    const body=reminderTemplates[type]||'';
    const sh=new Date().getHours();
    const saludo=sh<12?'Buenos días':(sh<19?'Buenas tardes':'Buenas noches');
    document.getElementById('reminder-message').value=body
        .replaceAll(reminderOpen+'saludo'+reminderClose,saludo)
        .replaceAll(reminderOpen+'cliente'+reminderClose,selectedText('reminder-client','cliente'))
        .replaceAll(reminderOpen+'asesor'+reminderClose,selectedText('reminder-advisor','tu asesor'))
        .replaceAll(reminderOpen+'fecha'+reminderClose,date)
        .replaceAll(reminderOpen+'monto'+reminderClose,'$0.00')
        .replaceAll(reminderOpen+'propiedad'+reminderClose,'la propiedad');
}
document.addEventListener('DOMContentLoaded',fillReminderTemplate);
</script>
@endpush