@extends('layouts.app')

@section('title', 'Pengaturan Reminder')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <!-- Header -->
    <div>
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">
            Pengaturan Reminder WhatsApp
        </h1>
        <p class="text-sm text-gray-600 mt-1">
            Atur pengingat otomatis untuk montir sebelum inspeksi alat dilakukan
        </p>
    </div>

    <!-- Card -->
    <form method="POST" action="{{ route('reminder.store') }}"
          class="bg-white rounded-xl shadow p-6 space-y-6">
        @csrf

        <!-- Status Reminder -->
        <div class="flex items-center justify-between">
            <div>
                <p class="font-semibold text-gray-800">Status Reminder</p>
                <p class="text-sm text-gray-500">
                    Aktifkan atau nonaktifkan pengiriman reminder WhatsApp
                </p>
            </div>

            <label class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" name="status" checked class="sr-only peer">
                <div class="w-11 h-6 bg-gray-200 rounded-full peer
                    peer-checked:bg-green-600 transition-colors
                    after:absolute after:top-[2px] after:left-[2px]
                    after:h-5 after:w-5 after:bg-white after:rounded-full
                    after:transition-transform peer-checked:after:translate-x-full">
                </div>
            </label>
        </div>

        <hr>

        <!-- Waktu & Target -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

            <!-- Time -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Waktu Reminder
                </label>
                <input type="time" name="time" value="08:00"
                    class="w-full border-gray-300 rounded-lg shadow-sm
                    focus:ring-blue-500 focus:border-blue-500">
                <p class="text-xs text-gray-500 mt-1">
                    Reminder dikirim setiap hari pada jam ini
                </p>
            </div>

            <!-- Target -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Tujuan Reminder
                </label>
                <select name="target"
                    class="w-full border-gray-300 rounded-lg shadow-sm
                    focus:ring-blue-500 focus:border-blue-500">
                    <option value="all">
                        Semua Montir ({{ $montirCount }})
                    </option>
                    <option value="incomplete">
                        Montir Belum Lengkap Alat
                    </option>
                </select>
            </div>

        </div>

        <!-- Template Pesan -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
                Template Pesan WhatsApp
            </label>

            <textarea name="message" rows="4"
                class="w-full border-gray-300 rounded-lg shadow-sm
                focus:ring-blue-500 focus:border-blue-500">
Halo {{ '{nama_montir}' }}, mohon pastikan alat inspeksi Anda sudah lengkap sebelum bertugas hari ini. Terima kasih.
            </textarea>

            <p class="text-xs text-gray-500 mt-1">
                Gunakan <span class="font-semibold">{{ '{nama_montir}' }}</span>
                untuk menampilkan nama montir otomatis
            </p>
        </div>

        <!-- Info -->
        <div class="flex items-start gap-3 bg-blue-50 border border-blue-200
            rounded-lg p-4 text-sm text-blue-700">
            <span class="text-lg">ℹ️</span>
            <div>
                Reminder akan dikirim otomatis via WhatsApp (Fontee API).
                <br>
                <span class="italic text-xs">
                    Saat ini masih simulasi / dummy
                </span>
            </div>
        </div>

        <!-- Action -->
        <div class="flex justify-between items-center pt-4">
            <a href="{{ route('dashboard') }}"
               class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm">
                ← Kembali
            </a>

            <button type="submit"
                class="px-6 py-2 bg-blue-600 hover:bg-blue-700
                text-white rounded-lg text-sm font-semibold">
                Simpan Pengaturan
            </button>
        </div>

    </form>

</div>
@endsection