@extends('layouts.app')
@section('title', 'Showrooms & Brands')
@section('breadcrumb')<a href="{{ route('settings.index') }}" class="hover:text-white">Settings</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i><span class="text-white">Showrooms &amp; Brands</span>@endsection

@section('content')
<div x-data="{
    showModal: false,
    modalType: '',
    editing: null,
    form: { name: '', is_active: true }
}">

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="mb-1">Showrooms &amp; Brands</h1>
        <p class="text-slate-400 text-sm">Manage the showroom and brand options available when creating leads</p>
    </div>
    <div class="flex gap-2">
        <button @click="modalType='showroom'; editing=null; form={name:'',is_active:true}; showModal=true" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add Showroom
        </button>
        <button @click="modalType='brand'; editing=null; form={name:'',is_active:true}; showModal=true" class="btn btn-secondary">
            <i class="fas fa-plus"></i> Add Brand
        </button>
    </div>
</div>

@if(session('success'))
<div class="card p-4 mb-4 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif

@if($errors->any())
<div class="card p-4 mb-4 border-red-600 bg-red-900/20 text-red-300">
    <ul class="text-sm space-y-1">@foreach($errors->all() as $e)<li><i class="fas fa-exclamation-circle mr-1"></i>{{ $e }}</li>@endforeach</ul>
</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

    {{-- ── Showrooms ──────────────────────────────────────────────────────── --}}
    <div>
        <h3 class="mb-3 text-blue-300 flex items-center gap-2">
            <i class="fas fa-store"></i> Showrooms
            <span class="text-xs font-normal text-slate-400 ml-1">({{ $showrooms->count() }} total)</span>
        </h3>
        <div class="card overflow-hidden">
            <table class="w-full">
                <thead>
                    <tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                        <th class="px-5 py-3 text-left">Name</th>
                        <th class="px-5 py-3 text-left">Status</th>
                        <th class="px-5 py-3"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($showrooms as $showroom)
                    <tr class="table-row">
                        <td class="px-5 py-3 text-sm font-medium text-white">{{ $showroom->name }}</td>
                        <td class="px-5 py-3">
                            <span class="badge {{ $showroom->is_active ? 'badge-green' : 'badge-gray' }}">
                                {{ $showroom->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td class="px-5 py-3">
                            <div class="flex gap-2 justify-end">
                                <button @click="modalType='showroom'; editing={{ $showroom->id }}; form={name:'{{ addslashes($showroom->name) }}',is_active:{{ $showroom->is_active ? 'true' : 'false' }}}; showModal=true"
                                    class="text-slate-400 hover:text-blue-400 text-xs px-2 py-1 rounded hover:bg-slate-700">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <form method="POST" action="{{ route('lead-options.showrooms.destroy', $showroom) }}" onsubmit="return confirm('Delete showroom \'{{ addslashes($showroom->name) }}\'?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="text-slate-400 hover:text-red-400 text-xs px-2 py-1 rounded hover:bg-slate-700">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="px-5 py-8 text-center text-slate-500">
                            <i class="fas fa-store text-2xl mb-2 block"></i> No showrooms yet. Click "Add Showroom" to get started.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- ── Brands ─────────────────────────────────────────────────────────── --}}
    <div>
        <h3 class="mb-3 text-purple-300 flex items-center gap-2">
            <i class="fas fa-tag"></i> Brands
            <span class="text-xs font-normal text-slate-400 ml-1">({{ $brands->count() }} total)</span>
        </h3>
        <div class="card overflow-hidden">
            <table class="w-full">
                <thead>
                    <tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                        <th class="px-5 py-3 text-left">Name</th>
                        <th class="px-5 py-3 text-left">Status</th>
                        <th class="px-5 py-3"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($brands as $brand)
                    <tr class="table-row">
                        <td class="px-5 py-3 text-sm font-medium text-white">{{ $brand->name }}</td>
                        <td class="px-5 py-3">
                            <span class="badge {{ $brand->is_active ? 'badge-green' : 'badge-gray' }}">
                                {{ $brand->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td class="px-5 py-3">
                            <div class="flex gap-2 justify-end">
                                <button @click="modalType='brand'; editing={{ $brand->id }}; form={name:'{{ addslashes($brand->name) }}',is_active:{{ $brand->is_active ? 'true' : 'false' }}}; showModal=true"
                                    class="text-slate-400 hover:text-blue-400 text-xs px-2 py-1 rounded hover:bg-slate-700">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <form method="POST" action="{{ route('lead-options.brands.destroy', $brand) }}" onsubmit="return confirm('Delete brand \'{{ addslashes($brand->name) }}\'?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="text-slate-400 hover:text-red-400 text-xs px-2 py-1 rounded hover:bg-slate-700">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="px-5 py-8 text-center text-slate-500">
                            <i class="fas fa-tag text-2xl mb-2 block"></i> No brands yet. Click "Add Brand" to get started.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

{{-- ── Add / Edit Modal ─────────────────────────────────────────────────── --}}
<div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" style="display:none">
    <div class="card p-6 w-full max-w-sm mx-4">

        {{-- SHOWROOM — Create --}}
        <template x-if="modalType==='showroom' && !editing">
            <form method="POST" action="{{ route('lead-options.showrooms.store') }}" class="space-y-4">
                @csrf
                <h3 class="mb-2 flex items-center gap-2"><i class="fas fa-store text-blue-400"></i> Add Showroom</h3>
                <div>
                    <label>Name *</label>
                    <input type="text" name="name" class="input" x-model="form.name" required placeholder="e.g. Campbelltown">
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" value="1" id="sr_active_c" x-bind:checked="form.is_active" class="w-4 h-4 rounded">
                    <label for="sr_active_c" class="mb-0">Active</label>
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="btn btn-primary flex-1">Create</button>
                    <button type="button" @click="showModal=false" class="btn btn-secondary flex-1">Cancel</button>
                </div>
            </form>
        </template>

        {{-- BRAND — Create --}}
        <template x-if="modalType==='brand' && !editing">
            <form method="POST" action="{{ route('lead-options.brands.store') }}" class="space-y-4">
                @csrf
                <h3 class="mb-2 flex items-center gap-2"><i class="fas fa-tag text-purple-400"></i> Add Brand</h3>
                <div>
                    <label>Name *</label>
                    <input type="text" name="name" class="input" x-model="form.name" required placeholder="e.g. Polytec">
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" value="1" id="br_active_c" x-bind:checked="form.is_active" class="w-4 h-4 rounded">
                    <label for="br_active_c" class="mb-0">Active</label>
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="btn btn-primary flex-1">Create</button>
                    <button type="button" @click="showModal=false" class="btn btn-secondary flex-1">Cancel</button>
                </div>
            </form>
        </template>

        {{-- SHOWROOM — Edit forms --}}
        @foreach($showrooms as $showroom)
        <form x-show="modalType==='showroom' && editing=={{ $showroom->id }}"
              method="POST" action="{{ route('lead-options.showrooms.update', $showroom) }}"
              class="space-y-4" style="display:none">
            @csrf @method('PUT')
            <h3 class="mb-2 flex items-center gap-2"><i class="fas fa-store text-blue-400"></i> Edit Showroom</h3>
            <div>
                <label>Name *</label>
                <input type="text" name="name" class="input" value="{{ $showroom->name }}" required>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" {{ $showroom->is_active ? 'checked' : '' }} class="w-4 h-4 rounded">
                <label class="mb-0">Active</label>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="btn btn-primary flex-1">Save</button>
                <button type="button" @click="showModal=false" class="btn btn-secondary flex-1">Cancel</button>
            </div>
        </form>
        @endforeach

        {{-- BRAND — Edit forms --}}
        @foreach($brands as $brand)
        <form x-show="modalType==='brand' && editing=={{ $brand->id }}"
              method="POST" action="{{ route('lead-options.brands.update', $brand) }}"
              class="space-y-4" style="display:none">
            @csrf @method('PUT')
            <h3 class="mb-2 flex items-center gap-2"><i class="fas fa-tag text-purple-400"></i> Edit Brand</h3>
            <div>
                <label>Name *</label>
                <input type="text" name="name" class="input" value="{{ $brand->name }}" required>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" {{ $brand->is_active ? 'checked' : '' }} class="w-4 h-4 rounded">
                <label class="mb-0">Active</label>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="btn btn-primary flex-1">Save</button>
                <button type="button" @click="showModal=false" class="btn btn-secondary flex-1">Cancel</button>
            </div>
        </form>
        @endforeach

    </div>
</div>

</div>
@endsection