@extends('layouts.admin')

@section('title', 'Add Branch')
@section('header', 'Create New Branch')

@section('content')
<div class="space-y-6" x-data="{
    outletCode: '{{ old('outlet_code') }}',
    password: '{{ old('password') }}',
    showPassword: false,
    
    generateCode() {
        const prefix = 'OUT';
        const random = Math.random().toString(36).substring(2, 8).toUpperCase();
        this.outletCode = prefix + '-' + random;
    },
    
    generatePassword() {
        const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
        let retVal = '';
        for (let i = 0, n = charset.length; i < 12; ++i) {
            retVal += charset.charAt(Math.floor(Math.random() * n));
        }
        this.password = retVal;
    }
}">
    @include('partials.admin._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Masters', 'url' => '#'],
            ['name' => 'Branches', 'url' => route('admin.masters.outlets.index')],
            ['name' => 'Create', 'url' => route('admin.masters.outlets.create')]
        ]
    ])

    <form action="{{ route('admin.masters.outlets.store') }}" method="POST" class="max-w-4xl mx-auto 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

        <!-- General Information -->
        <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">General Information</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2 md:col-span-2">
                    <label for="name" class="block text-sm font-medium text-slate-700">Branch Name <span class="text-red-500">*</span></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. Downtown Foodie Hub">
                    @error('name') <p class="text-xs text-red-500">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label for="reporting_manager" class="block text-sm font-medium text-slate-700">Reporting Manager <span class="text-red-500">*</span></label>
                    <input type="text" name="reporting_manager" id="reporting_manager" value="{{ old('reporting_manager') }}" 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"
                        placeholder="Manager Name">
                </div>

                <div class="space-y-2">
                    <label for="phone" class="block text-sm font-medium text-slate-700">Phone <span class="text-red-500">*</span></label>
                    <input type="text" name="phone" id="phone" value="{{ old('phone') }}" 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"
                        placeholder="+1 234 567 890">
                </div>

                <div class="space-y-2">
                    <label for="email" class="block text-sm font-medium text-slate-700">Email (Optional)</label>
                    <input type="email" name="email" id="email" value="{{ old('email') }}"
                        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"
                        placeholder="branch@example.com">
                </div>
            </div>
        </div>

        <!-- Address Information -->
        <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">Location Settings</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2 md:col-span-2">
                    <label for="address_1" class="block text-sm font-medium text-slate-700">Address Line 1 <span class="text-red-500">*</span></label>
                    <input type="text" name="address_1" id="address_1" value="{{ old('address_1') }}" 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">
                </div>

                <div class="space-y-2 md:col-span-2">
                    <label for="address_2" class="block text-sm font-medium text-slate-700">Address Line 2 (Optional)</label>
                    <input type="text" name="address_2" id="address_2" value="{{ old('address_2') }}"
                        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">
                </div>

                <div class="space-y-2">
                    <label for="city" class="block text-sm font-medium text-slate-700">City <span class="text-red-500">*</span></label>
                    <input type="text" name="city" id="city" value="{{ old('city') }}" 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">
                </div>

                <div class="space-y-2">
                    <label for="state" class="block text-sm font-medium text-slate-700">State / Province <span class="text-red-500">*</span></label>
                    <input type="text" name="state" id="state" value="{{ old('state') }}" 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">
                </div>

                <div class="space-y-2">
                    <label for="zip" class="block text-sm font-medium text-slate-700">ZIP / Postal Code <span class="text-red-500">*</span></label>
                    <input type="text" name="zip" id="zip" value="{{ old('zip') }}" 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">
                </div>

                <div class="space-y-2">
                    <label for="country" class="block text-sm font-medium text-slate-700">Country <span class="text-red-500">*</span></label>
                    <input type="text" name="country" id="country" value="{{ old('country', 'India') }}" 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">
                </div>

                <div class="space-y-2 md:col-span-2">
                    <label for="map_iframe" class="block text-sm font-medium text-slate-700">Map Iframe (Embed Code)</label>
                    <textarea name="map_iframe" id="map_iframe" rows="3"
                        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 font-mono text-xs"
                        placeholder='<iframe src="..."></iframe>'>{{ old('map_iframe') }}</textarea>
                </div>

                <div class="space-y-2 md:col-span-2 pt-4 border-t border-slate-100">
                    <div class="flex items-center justify-between p-4 bg-indigo-50 rounded-xl border border-indigo-100">
                        <div class="space-y-0.5">
                            <label for="enable_token_system" class="text-sm font-bold text-slate-800">Enable Token System</label>
                            <p class="text-xs text-slate-500 font-medium tracking-tight">Generate medical tokens for appointments at this branch.</p>
                        </div>
                        <select name="enable_token_system" id="enable_token_system" required
                            class="px-4 py-2 bg-white border border-indigo-200 rounded-lg text-xs font-black uppercase tracking-widest text-indigo-600 focus:ring-2 focus:ring-indigo-500 outline-none transition-all cursor-pointer">
                            <option value="1" {{ old('enable_token_system', '1') == '1' ? 'selected' : '' }}>Enabled</option>
                            <option value="0" {{ old('enable_token_system') == '0' ? 'selected' : '' }}>Disabled</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Security -->
        <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">Credentials & Access</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 border-b border-slate-100">
                <!-- Outlet Code -->
                <div class="space-y-2">
                    <label for="outlet_code" class="block text-sm font-medium text-slate-700 flex justify-between">
                        Branch Code <span class="text-red-500">*</span>
                        <button type="button" @click="generateCode()" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">Autogenerate</button>
                    </label>
                    <input type="text" name="outlet_code" id="outlet_code" x-model="outletCode" 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 font-mono @error('outlet_code') border-red-500 @enderror">
                    @error('outlet_code') <p class="text-xs text-red-500">{{ $message }}</p> @enderror
                </div>

                <!-- Password -->
                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-slate-700 flex justify-between">
                        Branch Password <span class="text-red-500">*</span>
                        <button type="button" @click="generatePassword()" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">Autogenerate</button>
                    </label>
                    <div class="relative">
                        <input :type="showPassword ? 'text' : 'password'" name="password" id="password" x-model="password" required
                            class="w-full pl-4 pr-10 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all @error('password') border-red-500 @enderror">
                        <button type="button" @click="showPassword = !showPassword" class="absolute right-3 top-2.5 text-slate-400 hover:text-slate-600">
                            <svg x-show="!showPassword" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                            <svg x-show="showPassword" 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.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7 1.274-4.057 5.064-7 9.542-7 1.225 0 2.395.21 3.484.594M9.88 9.88l4.24 4.24M10.73 5.08A10.43 10.43 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21M3 3l3.59 3.59m0 0A9.956 9.956 0 0112 5c1.225 0 2.395.21 3.484.594m-9.074 4.14a3 3 0 114.24 4.24l-4.24-4.24z"/>
                            </svg>
                        </button>
                    </div>
                    @error('password') <p class="text-xs text-red-500">{{ $message }}</p> @enderror
                </div>

                <!-- Status -->
                <div class="space-y-2 md:col-span-2">
                    <label for="status" class="block text-sm font-medium text-slate-700">Display 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' : '' }}>Active</option>
                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Deactivated</option>
                    </select>
                </div>
            </div>

            <div class="px-6 py-4 bg-slate-50 flex items-center justify-end gap-3">
                <a href="{{ route('admin.masters.outlets.index') }}" class="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200 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 Branch
                </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">
                    Create Branch
                </button>
            </div>
        </div>
    </form>
</div>
@endsection