@extends('layouts.epelcon')
@section('title', 'Settings')

@section('content')
    <div class="mb-5">
        <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Property settings</h1>
        <p class="text-sm text-slate-500">Identity, billing and loyalty configuration.</p>
    </div>

    @if (session('success'))
        <div class="mb-4 max-w-2xl rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
    @endif
    @if ($errors->any())
        <div class="mb-4 max-w-2xl rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">{{ $errors->first() }}</div>
    @endif

    <div class="mb-5 max-w-2xl rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h2 class="font-bold text-slate-900">Two-factor authentication</h2>
                @if (auth()->user()?->hasTwoFactor())
                    <p class="mt-1 text-sm text-emerald-700">✓ Enabled since {{ auth()->user()->two_factor_confirmed_at->format('M j, Y') }}</p>
                    <p class="mt-1 text-xs text-slate-500">Codes from your authenticator app are required at every sign-in.</p>
                @else
                    <p class="mt-1 text-sm text-slate-500">Not enabled. Add a second step at sign-in with an authenticator app.</p>
                @endif
            </div>
            <div class="flex flex-col items-stretch gap-2 sm:flex-row">
                @if (auth()->user()?->hasTwoFactor())
                    <a href="{{ route('2fa.recovery') }}" class="rounded-xl bg-white px-4 py-2 text-center text-sm font-bold text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50">Recovery codes</a>
                    <form method="POST" action="{{ route('2fa.disable') }}" onsubmit="return confirm('Disable two-factor authentication?');" class="flex items-stretch gap-2">
                        @csrf
                        <input type="password" name="password" required placeholder="Password" class="w-40 rounded-xl border-slate-200 text-sm">
                        <button class="rounded-xl bg-rose-600 px-4 py-2 text-sm font-bold text-white hover:bg-rose-700">Disable</button>
                    </form>
                @else
                    <a href="{{ route('2fa.setup') }}" class="rounded-xl bg-slate-950 px-4 py-2 text-center text-sm font-bold text-white hover:bg-slate-800">Enable 2FA</a>
                @endif
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('epelcon.settings.save') }}" class="max-w-2xl space-y-5">
        @csrf
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-4 font-bold text-slate-900">Property identity</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <label class="sm:col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Hotel name</span>
                    <input name="hotel_name" value="{{ $settings['hotel_name'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="sm:col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Address</span>
                    <input name="address" value="{{ $settings['address'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Phone</span>
                    <input name="phone" value="{{ $settings['phone'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Email</span>
                    <input name="email" value="{{ $settings['email'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
            </div>
        </div>

        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-4 font-bold text-slate-900">Billing & operations</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Currency symbol</span>
                    <input name="currency" value="{{ $settings['currency'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Tax / VAT %</span>
                    <input type="number" step="0.1" name="tax_percent" value="{{ $settings['tax_percent'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Check-in time</span>
                    <input type="time" name="checkin_time" value="{{ $settings['checkin_time'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Check-out time</span>
                    <input type="time" name="checkout_time" value="{{ $settings['checkout_time'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
            </div>
        </div>

        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-4 font-bold text-slate-900">Loyalty & referrals</h2>
            <label class="block max-w-xs"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Points per successful referral</span>
                <input type="number" name="referral_points" value="{{ $settings['referral_points'] }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
        </div>

        <button class="rounded-xl bg-indigo-600 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">Save settings</button>
    </form>
@endsection
