@extends('layouts.admin')

@section('title', 'Add Tax Rate')
@section('header', 'Create Tax Rate')

@section('content')
<div class="space-y-6">
    @include('partials.admin._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Masters', 'url' => '#'],
            ['name' => 'Tax Rates', 'url' => route('admin.masters.tax-rates.index')],
            ['name' => 'Create', 'url' => route('admin.masters.tax-rates.create')]
        ]
    ])

    <div class="max-w-2xl mx-auto">
        <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
            <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                <h3 class="text-lg font-semibold text-slate-800">Tax Rate Details</h3>
                <p class="text-sm text-slate-500">Define a new tax rate for the system.</p>
            </div>

            <form action="{{ route('admin.masters.tax-rates.store') }}" method="POST" class="p-6 space-y-6">
                @csrf

                @if(session('status'))
                    <div class="p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
                        {{ session('status') }}
                    </div>
                @endif

                <div class="space-y-2">
                    <label for="name" class="block text-sm font-medium text-slate-700">Tax Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name') }}" required
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all @error('name') border-red-500 @enderror"
                        placeholder="e.g. GST, VAT, Service Tax">
                    @error('name')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="space-y-2">
                    <label for="rate" class="block text-sm font-medium text-slate-700">Rate (%)</label>
                    <div class="relative">
                        <input type="number" step="0.01" name="rate" id="rate" value="{{ old('rate') }}" required
                            class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all @error('rate') border-red-500 @enderror"
                            placeholder="0.00">
                        <div class="absolute right-3 top-2 text-slate-400 font-medium">%</div>
                    </div>
                    @error('rate')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="space-y-2">
                    <label for="status" class="block text-sm font-medium text-slate-700">Status</label>
                    <select name="status" id="status" required
                        class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                        <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Activate</option>
                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Deactivate</option>
                    </select>
                </div>

                <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
                    <a href="{{ route('admin.masters.tax-rates.index') }}" class="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
                        Cancel
                    </a>
                    <button type="submit" name="create_another" value="1" class="px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 hover:bg-indigo-100 rounded-lg transition-colors">
                        Save and Create Another
                    </button>
                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors shadow-sm shadow-indigo-200">
                        Save Tax Rate
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection