@extends('layouts.app')

@section('title', 'Ofisler | Natura Reom')

@section('content')
    <div class="page-shell">
        <header class="page-header">
            <div class="page-copy">
                <p class="section-kicker">Ofis Yönetimi</p>
                <h1>Ofisler</h1>
                <p>Önce marka seçin, ardından ofisleri kart görünümünde filtreleyip popup içinde yönetin.</p>
            </div>

            <div class="page-actions">
                <button type="button" class="action-button primary" data-open-entity-modal="office" data-entity-mode="create">Ofis Ekle</button>
            </div>
        </header>

        <section class="panel">
            <div class="office-filter-bar">
                @foreach ($brands as $brand)
                    <button type="button" class="brand-filter-button" data-office-brand="{{ $brand['name'] }}">{{ $brand['name'] }}</button>
                @endforeach
                <button type="button" class="brand-filter-button clear" data-office-brand-clear>Tümünü Temizle</button>
            </div>

            <div id="office-empty-state" class="selection-placeholder">
                Bir marka seçildiğinde ilgili ofisler burada gösterilir.
            </div>

            <div class="office-grid compact-office-grid" id="offices-grid">
                @foreach ($offices as $officeIndex => $office)
                    <button
                        type="button"
                        class="office-card compact-office-card interactive-card office-detail-card"
                        data-office-brand-card="{{ $office['brand_name'] }}"
                        data-entity-card="office"
                        data-entity-index="{{ $officeIndex }}"
                        hidden>
                        <span class="logo-badge logo-badge-side">{{ $office['brand_logo'] }}</span>
                        <div class="entity-card-copy">
                            <strong>{{ $office['name'] }}</strong>
                            <span>{{ $office['brand_name'] }}</span>
                        </div>
                    </button>
                @endforeach
            </div>
        </section>

        <section class="entity-modal" id="office-modal" hidden>
            <div class="entity-modal-backdrop" data-close-entity-modal></div>
            <div class="entity-modal-panel">
                <div class="entity-modal-head">
                    <div>
                        <p class="section-kicker">Ofis Detayı</p>
                        <h2 id="office-modal-title">Ofis</h2>
                    </div>
                    <button type="button" class="icon-button" data-close-entity-modal aria-label="Pencereyi kapat">×</button>
                </div>

                <form class="entity-form" data-entity-form="office">
                    <label class="entity-field">
                        <span>Marka</span>
                        <select name="brand_name" disabled>
                            @foreach ($brands as $brand)
                                <option value="{{ $brand['name'] }}">{{ $brand['name'] }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="entity-field">
                        <span>Ofis Adı</span>
                        <input type="text" name="name" readonly>
                    </label>
                    <label class="entity-field">
                        <span>Broker/Owner Bilgisi</span>
                        <input type="text" name="broker_name" readonly>
                    </label>
                    <label class="entity-field">
                        <span>İletişim</span>
                        <input type="text" name="contact" readonly>
                    </label>
                </form>

                <div class="entity-modal-actions">
                    <button type="button" class="action-button secondary" data-entity-toggle-edit="office">Ofis Güncelle</button>
                    <button type="button" class="action-button danger" data-entity-delete="office">Ofis Sil</button>
                </div>
            </div>
        </section>
    </div>
@endsection