@extends('layouts.app')

@section('title', 'Add New Service')

@section('content')
<div class="max-w-2xl mx-auto space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Add Service to Master Catalog</h1>
            <p class="text-xs text-slate-500">Configure service fees (Government Fee, Typing Fee, Service Charge, VAT).</p>
        </div>
        <a href="{{ route('app.settings.services.index') }}" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs rounded-xl">Cancel</a>
    </div>

    <form action="{{ route('app.settings.services.store') }}" method="POST" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
        @csrf

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-semibold mb-1">Service Code *</label>
                <input type="text" name="service_code" required placeholder="VISA-RES-NEW" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-mono uppercase">
            </div>

            <div>
                <label class="block font-semibold mb-1">Category</label>
                <select name="category_id" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                    <option value="">-- General Services --</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name_en }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-semibold mb-1">Service Name (English) *</label>
                <input type="text" name="name_en" required placeholder="Residence Visa New Application" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
            </div>
            <div>
                <label class="block font-semibold mb-1">Service Name (Arabic)</label>
                <input type="text" name="name_ar" dir="rtl" placeholder="طلب إقامة جديد" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-bold">
            </div>
        </div>

        <!-- Pricing Breakdown (Requirement 43) -->
        <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 space-y-3">
            <h4 class="font-bold text-slate-800 dark:text-slate-200">Price Component Breakdown (AED)</h4>

            <div class="grid grid-cols-3 gap-3">
                <div>
                    <label class="block font-semibold text-[11px] mb-1">Gov Fee (Exempt)</label>
                    <input type="number" name="gov_fee" step="0.01" value="350.00" class="w-full px-3 py-2 bg-white dark:bg-slate-800 border rounded-xl font-bold">
                </div>
                <div>
                    <label class="block font-semibold text-[11px] mb-1">Typing Fee</label>
                    <input type="number" name="typing_fee" step="0.01" value="100.00" class="w-full px-3 py-2 bg-white dark:bg-slate-800 border rounded-xl font-bold">
                </div>
                <div>
                    <label class="block font-semibold text-[11px] mb-1">Service Charge</label>
                    <input type="number" name="service_charge" step="0.01" value="50.00" class="w-full px-3 py-2 bg-white dark:bg-slate-800 border rounded-xl font-bold">
                </div>
            </div>

            <div class="pt-2">
                <label class="flex items-center space-x-2 rtl:space-x-reverse cursor-pointer">
                    <input type="checkbox" name="vat_applicable" value="1" checked class="w-4 h-4 text-sky-600 rounded">
                    <span class="font-semibold">Apply UAE 5% VAT on Typing & Service Fee</span>
                </label>
            </div>
        </div>

        <div class="flex justify-end pt-4">
            <button type="submit" class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl shadow-sm">Save Service to Catalog</button>
        </div>
    </form>
</div>
@endsection