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

@section('content')
    <div x-data="branchProfilePage()" class="mx-auto max-w-2xl">
        <h1 class="text-2xl font-semibold text-slate-900 mb-6">Branch Profile</h1>
        <div x-show="loading" class="flex items-center justify-center py-20">
            <div class="h-8 w-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-600"></div>
        </div>

        <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>

        <template x-if="branch">
            <div>
                {{-- View Mode --}}
                <div x-show="!editing" class="rounded-2xl border border-slate-200/80 bg-white shadow-sm overflow-hidden">
                    <div class="px-8 py-6 border-b border-slate-100 flex items-center justify-between">
                        <div>
                            <h2 class="text-xl font-semibold text-slate-900" x-text="branch.name"></h2>
                            <p class="text-sm text-slate-500 mt-0.5" x-text="'ID: ' + branch.id"></p>
                        </div>
                        <div class="flex items-center gap-3">
                            <span x-text="branch.status"
                                  :class="branch.status === 'Active' ? 'bg-green-50 text-green-700 ring-green-600/20' : branch.status === 'Attention' ? 'bg-amber-50 text-amber-700 ring-amber-600/20' : 'bg-slate-50 text-slate-600 ring-slate-500/10'"
                                  class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ring-1 ring-inset"></span>
                        </div>
                    </div>
                    {{-- Stat Cards --}}
                    <div class="grid gap-4 sm:grid-cols-3 px-8 py-6">
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
                            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Employees</p>
                            <p class="mt-2 text-2xl font-semibold text-slate-900" x-text="branch.employees?.length || 0"></p>
                        </div>
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
                            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Address</p>
                            <p class="mt-2 text-lg font-semibold text-slate-900" x-text="branch.address || '—'"></p>
                        </div>
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
                            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Contact</p>
                            <p class="mt-2 text-lg font-semibold text-slate-900" x-text="branch.contact || '—'"></p>
                        </div>
                    </div>

                    {{-- Employee List --}}
                    <div class="px-8 pb-6">
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-5">
                            <p class="text-sm font-semibold text-slate-900" x-text="'Employee list (' + (branch.employees?.length || 0) + ')'"></p>
                            <div class="mt-3 space-y-2" x-show="branch.employees && branch.employees.length">
                                <template x-for="emp in branch.employees" :key="emp.id">
                                    <a :href="'/admin/employees/' + emp.id" class="block rounded-xl border border-slate-200 bg-white px-4 py-3 transition hover:-translate-y-0.5 hover:border-amber-200 hover:shadow-md">
                                        <p class="font-semibold text-slate-900" x-text="emp.name"></p>
                                        <p class="text-sm text-slate-500" x-text="(emp.designation || '—') + ' • ' + (emp.status || '—')"></p>
                                    </a>
                                </template>
                            </div>
                            <p x-show="!branch.employees || branch.employees.length === 0" class="mt-3 text-sm text-slate-400">No employees assigned to this branch yet.</p>
                        </div>
                    </div>
                    <div class="px-8 py-4 bg-slate-50 border-t border-slate-100 flex items-center gap-4">
                        <button @click="editing = true; editForm = {...branch}" class="rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-lg">
                            Edit Branch
                        </button>
                        <button @click="confirmDelete = true" class="rounded-xl border border-red-200 px-5 py-2.5 text-sm font-semibold text-red-600 transition-all hover:bg-red-50">
                            Delete
                        </button>
                    </div>
                </div>

                {{-- Edit Mode --}}
                <div x-show="editing">
                    <div class="mb-4">
                        <a @click="editing = false" class="text-sm font-medium text-slate-500 hover:text-slate-700 cursor-pointer transition-colors">&larr; Back to view</a>
                    </div>
                    <form @submit.prevent="update" 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="editForm.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">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">City</label>
                                <input type="text" x-model="editForm.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">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">Manager</label>
                                <input type="text" x-model="editForm.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">
                            </div>
                            <div class="sm:col-span-2">
                                <label class="block text-sm font-medium text-slate-700">Address</label>
                                <textarea x-model="editForm.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"></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">Contact</label>
                                <input type="text" x-model="editForm.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">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">Status</label>
                                <select x-model="editForm.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="saving"
                                    :class="saving ? '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="!saving">Save Changes</span>
                                <span x-show="saving">Saving...</span>
                            </button>
                            <button @click="editing = false" type="button" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Cancel</button>
                        </div>
                    </form>
                </div>

                {{-- Delete Confirmation --}}
                <div x-show="confirmDelete" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30" @click.self="confirmDelete = false">
                    <div class="rounded-2xl bg-white p-8 shadow-2xl max-w-md w-full mx-4">
                        <h3 class="text-lg font-semibold text-slate-900">Delete Branch?</h3>
                        <p class="mt-2 text-sm text-slate-500">Are you sure you want to delete <strong x-text="branch.name"></strong>? This action cannot be undone.</p>
                        <div class="mt-6 flex items-center gap-4">
                            <button @click="destroy()" :disabled="deleting"
                                    class="rounded-xl bg-red-600 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:bg-red-700">
                                <span x-show="!deleting">Delete</span>
                                <span x-show="deleting">Deleting...</span>
                            </button>
                            <button @click="confirmDelete = false" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
@endsection