@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-[calc(100vh-130px)] p-4 flex flex-col">
    <!-- Header Tab -->
    <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl">
        <i class="fa-solid fa-list mr-2"></i>
        <span>Branch Details</span>
    </div>

    <!-- Main Container -->
    <div class="bg-white shadow-sm flex-1 border border-gray-200 border-t-0 p-6">
        <form action="{{ route('branch.store') }}" method="POST" class="max-w-6xl">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">


                <!-- Branch Name -->
                <div>
                    <label class="block text-sm font-bold text-gray-800 mb-1">Branch Name</label>
                    <input type="text" name="name" value="{{ old('name') }}" required
                        class="w-full border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    @error('name') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <!-- Address -->
                <div>
                    <label class="block text-sm font-bold text-gray-800 mb-1">Address</label>
                    <input type="text" name="address" value="{{ old('address') }}"
                        class="w-full border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    @error('address') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <!-- Phone No -->
                <div>
                    <label class="block text-sm font-bold text-gray-800 mb-1">Phone No</label>
                    <input type="text" name="phone" value="{{ old('phone') }}"
                        class="w-full border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    @error('phone') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <!-- Email -->
                <div>
                    <label class="block text-sm font-bold text-gray-800 mb-1">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}"
                        class="w-full border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    @error('email') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mt-8 flex gap-2">
                <button type="submit" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-2 rounded text-sm font-bold shadow">
                    Save Branch
                </button>
                <a href="{{ route('branch.index') }}" class="bg-gradient-to-r from-rose-500 to-rose-600 hover:from-rose-600 hover:to-rose-700 text-white px-6 py-2 rounded text-sm font-bold shadow">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection