@extends('layouts.owner')

@section('breadcrumb')
    <span class="text-text-muted">Lainnya</span>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Pengaturan</span>
@endsection

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Pengaturan Sistem</h1>
        <p class="text-text-secondary">Konfigurasi notifikasi WhatsApp, penagihan, dan preferensi aplikasi.</p>
    </div>

    <form action="{{ route('owner.settings.update') }}" method="POST" class="space-y-8">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Column: WhatsApp Config -->
            <div class="space-y-6">
                <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-border bg-surface/30">
                        <h3 class="text-base font-bold text-text-primary flex items-center gap-2">
                            <svg class="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.414 0 .006 5.408 0 12.045c0 2.123.554 4.197 1.604 6.035L0 24l6.105-1.602a11.832 11.832 0 005.937 1.603h.005c6.634 0 12.043-5.408 12.048-12.047a11.85 11.85 0 00-3.484-8.498z"/></svg>
                            WhatsApp Engine
                        </h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div>
                            <label class="block text-[10px] font-bold text-text-muted uppercase mb-1">X-API-Key</label>
                            <input type="text" name="wa_api_key" value="{{ $settings['wa_api_key'] ?? '' }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 outline-none transition-all font-mono" placeholder="API Key dari Railway">
                        </div>
                        <div class="p-3 bg-emerald-50 rounded-xl border border-emerald-100">
                            <p class="text-[10px] text-emerald-800 leading-relaxed italic">
                                Key ini digunakan untuk koneksi ke Engine WhatsApp di Railway.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-border bg-surface/30">
                        <h3 class="text-base font-bold text-text-primary">Preferensi Aplikasi</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div>
                            <label class="block text-[10px] font-bold text-text-muted uppercase mb-1">Nama Aplikasi</label>
                            <input type="text" name="app_name" value="{{ $settings['app_name'] ?? 'Roomly' }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm outline-none transition-all">
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-text-muted uppercase mb-1">Hari Jatuh Tempo</label>
                            <div class="flex items-center gap-3">
                                <input type="number" name="due_date_day" value="{{ $settings['due_date_day'] ?? '10' }}" class="w-24 border border-border rounded-xl px-4 py-2.5 text-sm outline-none transition-all">
                                <span class="text-xs text-text-secondary">Tiap bulan</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: WA Templates -->
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-border bg-surface/30">
                        <h3 class="text-base font-bold text-text-primary">Template Pesan WhatsApp</h3>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="md:col-span-2">
                            <label class="block text-xs font-bold text-text-primary mb-2">Tagihan Baru Dibuat</label>
                            <textarea name="wa_template_invoice_generated" rows="3" class="w-full border border-border rounded-2xl px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-primary-500/10 transition-all">{{ $settings['wa_template_invoice_generated'] ?? '' }}</textarea>
                            <p class="mt-1 text-[9px] text-text-muted">Variabel: {nama}, {nominal}, {bulan}, {tahun}, {jatuh_tempo}, {kamar}</p>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-text-primary mb-2">Pembayaran Dikonfirmasi</label>
                            <textarea name="wa_template_payment_confirmed" rows="3" class="w-full border border-border rounded-2xl px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-emerald-500/10 transition-all">{{ $settings['wa_template_payment_confirmed'] ?? '' }}</textarea>
                            <p class="mt-1 text-[9px] text-text-muted">Variabel: {nama}, {invoice_number}</p>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-text-primary mb-2">Pembayaran Ditolak</label>
                            <textarea name="wa_template_payment_rejected" rows="3" class="w-full border border-border rounded-2xl px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-red-500/10 transition-all">{{ $settings['wa_template_payment_rejected'] ?? '' }}</textarea>
                            <p class="mt-1 text-[9px] text-text-muted">Variabel: {nama}, {invoice_number}, {alasan}</p>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-text-primary mb-2">Reminder Tunggakan</label>
                            <textarea name="wa_template_reminder" rows="3" class="w-full border border-border rounded-2xl px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-amber-500/10 transition-all">{{ $settings['wa_template_reminder'] ?? '' }}</textarea>
                            <p class="mt-1 text-[9px] text-text-muted">Variabel: {nama}, {nominal}, {jatuh_tempo}</p>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-text-primary mb-2">Kontrak Akan Berakhir</label>
                            <textarea name="wa_template_contract_ending" rows="3" class="w-full border border-border rounded-2xl px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-blue-500/10 transition-all">{{ $settings['wa_template_contract_ending'] ?? '' }}</textarea>
                            <p class="mt-1 text-[9px] text-text-muted">Variabel: {nama}, {tanggal_akhir}, {kamar}</p>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-text-primary mb-2">Undangan Akun Baru</label>
                            <textarea name="wa_template_invitation" rows="3" class="w-full border border-border rounded-2xl px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-purple-500/10 transition-all">{{ $settings['wa_template_invitation'] ?? '' }}</textarea>
                            <p class="mt-1 text-[9px] text-text-muted">Variabel: {nama}, {link_aktivasi}</p>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="bg-primary-500 text-white px-8 py-3 rounded-2xl font-bold hover:bg-primary-600 shadow-xl shadow-primary-500/20 transition-all active:scale-[0.98]">
                        Simpan Semua Pengaturan
                    </button>
                </div>
            </div>
        </div>
    </form>
@endsection