@extends('layouts.app')

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

@section('content')
    <div class="page-shell">
        <header class="page-header">
            <div class="page-copy">
                <p class="section-kicker">Portföy Yönetimi</p>
                <h1>Projeler</h1>
                <p>Sistemde kayıtlı projeleri kart görünümünde yönetin ve detaylarını popup içinde açın.</p>
            </div>

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

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

        <section class="entity-modal" id="project-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">Proje Detayı</p>
                        <h2 id="project-modal-title">Proje</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="project">
                    <label class="entity-field">
                        <span>Proje Adı</span>
                        <input type="text" name="name" readonly>
                    </label>
                    <label class="entity-field">
                        <span>Proje Logosu</span>
                        <input type="text" name="logo" readonly>
                    </label>
                    <label class="entity-field">
                        <span>Proje Konumu</span>
                        <input type="text" name="location" readonly>
                    </label>
                    <label class="entity-field">
                        <span>Daire Tipleri</span>
                        <input type="text" name="unit_types_label" readonly>
                    </label>
                    <label class="entity-field">
                        <span>Komisyon Oranı</span>
                        <input type="text" name="commission_rate" readonly>
                    </label>
                </form>

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