@extends('layouts.super-admin')

@section('title', 'Add New Branch')
@section('page_title', 'Branch Management')

@section('content')
<div class="max-w-xl mx-auto">
    <div class="mb-4">
        <a href="{{ route('branches.index') }}" class="text-[10px] font-bold text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 uppercase tracking-widest flex items-center">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Back to List
        </a>
    </div>

    <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-sm shadow-sm overflow-hidden">
        <div class="p-4 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900">
            <h3 class="text-[11px] font-bold uppercase tracking-widest">Branch Details</h3>
        </div>
        <form action="{{ route('branches.store') }}" method="POST" class="p-4 space-y-4">
            @csrf
            <div>
                <label for="user_id" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Select Client (Brand)</label>
                <select name="user_id" id="user_id" required
                    class="w-full px-3 py-1.5 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all">
                    <option value="">-- Choose Client --</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}" {{ old('user_id') == $client->id ? 'selected' : '' }}>{{ $client->name }} ({{ $client->email }})</option>
                    @endforeach
                </select>
                @error('user_id') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="name" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Branch Name</label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                    class="w-full px-3 py-1.5 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all placeholder-zinc-400" placeholder="e.g. Downtown Express">
                @error('name') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="slug" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Branch Slug (Unique URL segment)</label>
                <input type="text" name="slug" id="slug" value="{{ old('slug') }}" required
                    class="w-full px-3 py-1.5 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all font-mono text-zinc-500" placeholder="e.g. downtown-express">
                @error('slug') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="address" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Physical Address</label>
                <input type="text" name="address" id="address" value="{{ old('address') }}"
                    class="w-full px-3 py-1.5 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all">
                @error('address') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="phone" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Branch Phone</label>
                <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                    class="w-full px-3 py-1.5 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all">
                @error('phone') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div class="flex items-center space-x-2">
                <input type="hidden" name="active" value="0">
                <input type="checkbox" name="active" id="active" value="1" {{ old('active', true) ? 'checked' : '' }}
                    class="w-3 h-3 rounded-xs border-zinc-300 text-amber-600 focus:ring-amber-500">
                <label for="active" class="text-[10px] font-bold text-zinc-500 uppercase">Branch Active</label>
            </div>

            <div class="pt-2">
                <button type="submit" class="w-full py-2 bg-amber-600 hover:bg-amber-500 text-white text-[11px] font-bold uppercase tracking-widest rounded-sm transition-all active:scale-[0.98]">
                    Register Branch
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Simple slug generator
    document.getElementById('name').addEventListener('input', function(e) {
        if (!document.getElementById('slug').dataset.edited) {
            document.getElementById('slug').value = e.target.value
                .toLowerCase()
                .replace(/[^\w ]+/g, '')
                .replace(/ +/g, '-');
        }
    });
    document.getElementById('slug').addEventListener('input', function() {
        this.dataset.edited = true;
    });
</script>
@endsection