@extends('layouts.app')

@section('title', 'Property Settings')
@section('page_title', 'Property Settings')
@section('page_subtitle', 'Configure your hotel profile, operations, and billing defaults')

@section('nav_property', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')

@php
    $s = $settings; // shorthand — $s['key'] ?? 'default'
@endphp

<div class="max-w-3xl">

    @if (session('success'))
    <div class="mb-5 px-4 py-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl text-teal-700 text-sm flex items-center gap-2">
        <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        {{ session('success') }}
    </div>
    @endif

    @if ($errors->any())
    <div class="mb-5 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-red-700 text-sm">
        <p class="font-semibold mb-1">Please fix the following errors:</p>
        <ul class="list-disc list-inside space-y-0.5">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('settings.update') }}" method="POST" class="space-y-4"
          data-confirm="Save property settings?">
        @csrf

        {{-- 1. Property Information --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">1</div>
                <div>
                    <h3 class="text-gray-800 font-semibold text-sm">Property Information</h3>
                    <p class="text-gray-400 text-xs mt-0.5">Displayed on receipts, documents, and the system header</p>
                </div>
            </div>
            <div class="p-6 space-y-4">

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Property Name <span class="text-red-400">*</span></label>
                        <input type="text" name="property_name" value="{{ old('property_name', $s['property_name'] ?? '') }}" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400
                                      @error('property_name') border-red-300 @enderror">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Tagline <span class="text-gray-300 font-normal">(optional)</span></label>
                        <input type="text" name="property_tagline" value="{{ old('property_tagline', $s['property_tagline'] ?? '') }}"
                               placeholder="e.g. Premier Hotel in CDO"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Street Address</label>
                    <input type="text" name="property_address" value="{{ old('property_address', $s['property_address'] ?? '') }}"
                           placeholder="e.g. J.R. Borja St., Cor. Tiano Bros."
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </div>

                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">City</label>
                        <input type="text" name="property_city" value="{{ old('property_city', $s['property_city'] ?? '') }}"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Province</label>
                        <input type="text" name="property_province" value="{{ old('property_province', $s['property_province'] ?? '') }}"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">ZIP Code</label>
                        <input type="text" name="property_zip" value="{{ old('property_zip', $s['property_zip'] ?? '') }}"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Phone</label>
                        <input type="text" name="property_phone" value="{{ old('property_phone', $s['property_phone'] ?? '') }}"
                               placeholder="+63 88 123 4567"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Email</label>
                        <input type="email" name="property_email" value="{{ old('property_email', $s['property_email'] ?? '') }}"
                               placeholder="reservations@hotel.com"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Website</label>
                        <input type="text" name="property_website" value="{{ old('property_website', $s['property_website'] ?? '') }}"
                               placeholder="www.hotel.com"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                </div>

            </div>
        </div>

        {{-- 2. Operations --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">2</div>
                <div>
                    <h3 class="text-gray-800 font-semibold text-sm">Operations</h3>
                    <p class="text-gray-400 text-xs mt-0.5">Check-in/out times and booking window defaults</p>
                </div>
            </div>
            <div class="p-6 space-y-4">

                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Check-in Time <span class="text-red-400">*</span></label>
                        <input type="time" name="checkin_time" value="{{ old('checkin_time', $s['checkin_time'] ?? '14:00') }}" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Check-out Time <span class="text-red-400">*</span></label>
                        <input type="time" name="checkout_time" value="{{ old('checkout_time', $s['checkout_time'] ?? '12:00') }}" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Early Check-in Fee (₱)</label>
                        <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-teal-500/20 focus-within:border-teal-400">
                            <span class="px-2.5 py-2 bg-gray-50 text-gray-400 text-xs border-r border-gray-200">₱</span>
                            <input type="number" name="early_checkin_fee" value="{{ old('early_checkin_fee', $s['early_checkin_fee'] ?? '0') }}" min="0"
                                   class="flex-1 text-sm text-gray-700 px-2.5 py-2 focus:outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Late Check-out Fee (₱)</label>
                        <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-teal-500/20 focus-within:border-teal-400">
                            <span class="px-2.5 py-2 bg-gray-50 text-gray-400 text-xs border-r border-gray-200">₱</span>
                            <input type="number" name="late_checkout_fee" value="{{ old('late_checkout_fee', $s['late_checkout_fee'] ?? '0') }}" min="0"
                                   class="flex-1 text-sm text-gray-700 px-2.5 py-2 focus:outline-none">
                        </div>
                    </div>
                </div>

                <div class="sm:w-1/2">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Max Advance Booking (days)</label>
                    <input type="number" name="max_advance_booking_days"
                           value="{{ old('max_advance_booking_days', $s['max_advance_booking_days'] ?? '365') }}"
                           min="1" max="730"
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    <p class="text-gray-400 text-xs mt-1">How far ahead guests can book (1–730 days)</p>
                </div>

            </div>
        </div>

        {{-- 3. Tax & Charges --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">3</div>
                <div>
                    <h3 class="text-gray-800 font-semibold text-sm">Tax &amp; Charges</h3>
                    <p class="text-gray-400 text-xs mt-0.5">Applied to room folios and invoices</p>
                </div>
            </div>
            <div class="p-6 space-y-4">

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">VAT Rate (%)</label>
                        <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-teal-500/20 focus-within:border-teal-400">
                            <input type="number" name="vat_rate" value="{{ old('vat_rate', $s['vat_rate'] ?? '12') }}"
                                   min="0" max="100" step="0.01"
                                   class="flex-1 text-sm text-gray-700 px-3 py-2 focus:outline-none">
                            <span class="px-2.5 py-2 bg-gray-50 text-gray-400 text-xs border-l border-gray-200">%</span>
                        </div>
                        <p class="text-gray-400 text-xs mt-1">Standard PH rate: 12%</p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Service Charge (%)</label>
                        <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-teal-500/20 focus-within:border-teal-400">
                            <input type="number" name="service_charge" value="{{ old('service_charge', $s['service_charge'] ?? '0') }}"
                                   min="0" max="100" step="0.01"
                                   class="flex-1 text-sm text-gray-700 px-3 py-2 focus:outline-none">
                            <span class="px-2.5 py-2 bg-gray-50 text-gray-400 text-xs border-l border-gray-200">%</span>
                        </div>
                        <p class="text-gray-400 text-xs mt-1">Common range: 0–10%</p>
                    </div>
                    <div class="flex items-start pt-5">
                        <label class="flex items-center gap-3 cursor-pointer group" x-data>
                            <div class="relative">
                                <input type="checkbox" name="tax_inclusive" value="1"
                                       @if(old('tax_inclusive', $s['tax_inclusive'] ?? '0') == '1') checked @endif
                                       class="sr-only peer">
                                <div class="w-10 h-5 bg-gray-200 peer-checked:bg-teal-500 rounded-full transition-colors cursor-pointer
                                            peer-focus:ring-2 peer-focus:ring-teal-500/20"></div>
                                <div class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform
                                            peer-checked:translate-x-5"></div>
                            </div>
                            <div>
                                <p class="text-sm text-gray-700 font-medium">Tax-Inclusive Pricing</p>
                                <p class="text-gray-400 text-xs mt-0.5">Rates already include VAT</p>
                            </div>
                        </label>
                    </div>
                </div>

            </div>
        </div>

        {{-- 4. Billing / BIR --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">4</div>
                <div>
                    <h3 class="text-gray-800 font-semibold text-sm">Billing &amp; BIR</h3>
                    <p class="text-gray-400 text-xs mt-0.5">Printed on official receipts and folios</p>
                </div>
            </div>
            <div class="p-6 space-y-4">

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">BIR Registered Name</label>
                        <input type="text" name="bir_registered_name"
                               value="{{ old('bir_registered_name', $s['bir_registered_name'] ?? '') }}"
                               placeholder="e.g. Parkview Hotel Corporation"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">TIN</label>
                        <input type="text" name="tin" value="{{ old('tin', $s['tin'] ?? '') }}"
                               placeholder="000-000-000-000"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                </div>

                <div class="sm:w-1/4">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">OR Prefix</label>
                    <input type="text" name="or_prefix" value="{{ old('or_prefix', $s['or_prefix'] ?? '') }}"
                           placeholder="e.g. PH"
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    <p class="text-gray-400 text-xs mt-1">Prefixed to official receipt numbers (e.g. PH-00001)</p>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Receipt Footer Message</label>
                    <textarea name="receipt_footer" rows="2"
                              class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                     focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none"
                              placeholder="Thank you for your stay...">{{ old('receipt_footer', $s['receipt_footer'] ?? '') }}</textarea>
                </div>

            </div>
        </div>

        {{-- Actions --}}
        <div class="flex items-center justify-end gap-2">
            <a href="{{ route('settings.index') }}"
               class="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors font-medium">
                Reset
            </a>
            <button type="submit"
                    class="px-5 py-2 text-sm text-white bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors font-semibold">
                Save Settings
            </button>
        </div>

    </form>
</div>

@endsection