@extends('layouts.branch')

@section('title', 'ID Generation Settings')
@section('header', 'Identity Configuration')

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Settings', 'url' => '#'],
            ['name' => 'ID Prefix Generation', 'url' => route('branch.settings.id-generation')]
        ]
    ])

    <div class="max-w-4xl mx-auto">
        <form action="{{ route('branch.settings.id-generation.update') }}" method="POST" class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden">
            @csrf
            <div class="p-10">
                <div class="flex items-center gap-5 mb-10 pb-10 border-b border-slate-50">
                    <div class="h-16 w-16 rounded-[24px] bg-slate-900 flex items-center justify-center text-white shadow-2xl shadow-slate-200">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-slate-800 tracking-tight uppercase leading-none italic">ID Generation Settings</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-2">Configure custom prefixes and automated numbering for branch operations</p>
                    </div>
                </div>

                <div class="bg-indigo-50/50 rounded-3xl p-6 mb-10 border border-indigo-100/50">
                    <div class="flex gap-4">
                        <div class="h-10 w-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center flex-shrink-0">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <h4 class="text-sm font-bold text-indigo-900 uppercase tracking-tight">Identity Structure</h4>
                            <p class="text-xs text-indigo-700/70 mt-1 leading-relaxed">
                                Generated IDs follow the format: <span class="font-black text-indigo-900 underline decoration-indigo-300">{{ auth()->guard('branch')->user()->outlet_code }}</span> + <span class="font-black text-indigo-900 underline decoration-indigo-300">[Prefix]</span> + <span class="font-black text-indigo-900 underline decoration-indigo-300">[Number]</span>.
                                <br>Example: If prefix is <span class="font-bold text-indigo-900 uppercase">PR</span> and number is <span class="font-bold text-indigo-900">1001</span>, the ID will be <span class="font-black text-slate-900 bg-white px-2 py-0.5 rounded shadow-sm">{{ auth()->guard('branch')->user()->outlet_code }}PR1001</span>.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="space-y-8">
                    @foreach($settings as $setting)
                        <div class="group relative bg-slate-50/50 rounded-3xl p-6 border border-slate-100 hover:border-indigo-200 hover:bg-white transition-all">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
                                <div>
                                    <h5 class="text-sm font-black text-slate-800 uppercase tracking-tight">{{ $categories[$setting->category] ?? $setting->category }}</h5>
                                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Configure parameters</p>
                                </div>

                                <div class="space-y-1.5">
                                    <label class="text-[9px] font-black uppercase tracking-widest text-slate-400 ml-1">Custom Prefix</label>
                                    <input type="text" 
                                           name="settings[{{ $setting->category }}][prefix]" 
                                           value="{{ old("settings.{$setting->category}.prefix", $setting->prefix) }}"
                                           placeholder="e.g. PR"
                                           class="w-full px-5 py-3 bg-white border border-slate-200 rounded-xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all font-bold text-xs uppercase tracking-widest text-slate-700">
                                </div>

                                <div class="space-y-1.5">
                                    <label class="text-[9px] font-black uppercase tracking-widest text-slate-400 ml-1">Next Sequential Number</label>
                                    <input type="number" 
                                           name="settings[{{ $setting->category }}][current_number]" 
                                           value="{{ old("settings.{$setting->category}.current_number", $setting->current_number) }}"
                                           required
                                           min="1"
                                           class="w-full px-5 py-3 bg-white border border-slate-200 rounded-xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all font-bold text-xs tracking-widest text-slate-700">
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="p-10 bg-slate-900 flex items-center justify-between italic">
                <p class="text-[10px] text-slate-500 font-black uppercase tracking-widest underline decoration-indigo-500/40">Automated identity generation ensures operational integrity</p>
                <div class="flex items-center gap-6">
                    <button type="submit" class="px-12 py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-[11px] hover:bg-white hover:text-slate-900 shadow-2xl shadow-indigo-500/20 transition-all">
                        Synchronize Settings
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection