@extends('layouts.app')

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

@section('content')
    <div class="page-shell">
        <header class="page-header">
            <div class="page-copy">
                <p class="section-kicker">Marka Yönetimi</p>
                <h1>Markalar</h1>
                <p>Markaları kare kartlar halinde görüntüleyin, logolarını yönetin ve detaylarını popup içinde düzenleyin.</p>
            </div>

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

        <section class="panel">
            <div class="project-grid compact-project-grid" id="brands-grid">
                @foreach ($brands as $brandIndex => $brand)
                    <button
                        type="button"
                        class="project-card compact-project-card interactive-card"
                        data-entity-card="brand"
                        data-entity-index="{{ $brandIndex }}">
                        <div class="entity-card-copy">
                            <strong>{{ $brand['name'] }}</strong>
                            <span>{{ $brand['office_count'] }} ofis</span>
                        </div>
                        <span class="logo-badge logo-badge-large">{{ $brand['logo'] }}</span>
                    </button>
                @endforeach
            </div>
        </section>

        <section class="entity-modal" id="brand-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">Marka Detayı</p>
                        <h2 id="brand-modal-title">Marka</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="brand">
                    <label class="entity-field">
                        <span>Marka Adı</span>
                        <input type="text" name="name" readonly>
                    </label>
                    <label class="entity-field">
                        <span>Marka Logosu</span>
                        <input type="text" name="logo" readonly>
                    </label>
                </form>

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