@extends('layouts.admin', ['title' => 'Add Branch'])

@section('content')
    <div x-data="addBranchPage()" class="mx-auto max-w-2xl">
        <h1 class="text-2xl font-semibold text-slate-900 mb-6">Add Branch</h1>
        <div x-show="error" x-transition class="rounded-xl bg-red-50 border border-red-200 px-4 py-3 mb-6">
            <p class="text-sm text-red-600" x-text="error"></p>
        </div>

        <form @submit.prevent="submit" class="rounded-2xl border border-slate-200/80 bg-white p-8 shadow-sm space-y-6">
            <div class="grid gap-6 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-slate-700">Branch Name <span class="text-red-500">*</span></label>
                    <input type="text" x-model="form.name" required
                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                           placeholder="e.g. Dhaka Main Branch">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700">City</label>
                    <input type="text" x-model="form.city"
                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                           placeholder="e.g. Dhaka">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700">Manager</label>
                    <input type="text" x-model="form.manager"
                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                           placeholder="Manager name">
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-slate-700">Address</label>
                    <textarea x-model="form.address" rows="2"
                              class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                              placeholder="Branch address"></textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700">Contact Number</label>
                    <input type="text" x-model="form.contact"
                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                           placeholder="Phone number">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700">Status</label>
                    <select x-model="form.status"
                            class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                        <option value="Attention">Attention</option>
                    </select>
                </div>
            </div>

            <div class="flex items-center gap-4 pt-2">
                <button type="submit" :disabled="loading"
                        :class="loading ? 'opacity-50 cursor-not-allowed' : 'hover:-translate-y-0.5 hover:shadow-lg hover:shadow-amber-200'"
                        class="rounded-2xl bg-gradient-to-r from-slate-950 via-slate-900 to-amber-700 px-6 py-3 text-sm font-semibold text-white transition-all">
                    <span x-show="!loading">Create Branch</span>
                    <span x-show="loading">Creating...</span>
                </button>
                <a href="/admin/branches" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Cancel</a>
            </div>
        </form>
    </div>
@endsection