@extends('layouts.app')

@section('title', 'Satışlar | Natura Reom')

@section('content')
    <div class="page-shell">
        <header class="page-header">
            <div class="page-copy">
                <p class="section-kicker">Satış Yönetimi</p>
                <h1>Satışlar</h1>
                <p>Son 20 satışı görüntüleyin, proje, marka, ofis ve danışman filtrelerini kademeli olarak daraltın.</p>
            </div>

            <div class="page-actions">
                <button type="button" class="action-button primary">Satış Ekle</button>
                <button type="button" class="action-button secondary">Satışı Güncelle</button>
                <button type="button" class="action-button danger">Satışı Sil</button>
            </div>
        </header>

        <section class="panel">
            <div class="filters-grid">
                <label class="filter-field">
                    <span>Proje Seçimi</span>
                    <div class="filter-input-wrap">
                        <input type="text" class="sales-filter-input" data-filter="project" list="project-options" placeholder="Proje yaz veya seç">
                        <button type="button" class="clear-filter-button" data-clear-filter="project" aria-label="Proje filtresini temizle">×</button>
                    </div>
                </label>
                <label class="filter-field">
                    <span>Marka Seçimi</span>
                    <div class="filter-input-wrap">
                        <input type="text" class="sales-filter-input" data-filter="brand" list="brand-options" placeholder="Marka yaz veya seç">
                        <button type="button" class="clear-filter-button" data-clear-filter="brand" aria-label="Marka filtresini temizle">×</button>
                    </div>
                </label>
                <label class="filter-field">
                    <span>Ofis Seçimi</span>
                    <div class="filter-input-wrap">
                        <input type="text" class="sales-filter-input" data-filter="office" list="office-options" placeholder="Ofis yaz veya seç">
                        <button type="button" class="clear-filter-button" data-clear-filter="office" aria-label="Ofis filtresini temizle">×</button>
                    </div>
                </label>
                <label class="filter-field">
                    <span>Danışman Seçimi</span>
                    <div class="filter-input-wrap">
                        <input type="text" class="sales-filter-input" data-filter="consultant" list="consultant-options" placeholder="Danışman yaz veya seç">
                        <button type="button" class="clear-filter-button" data-clear-filter="consultant" aria-label="Danışman filtresini temizle">×</button>
                    </div>
                </label>
            </div>

            <datalist id="project-options">
                @foreach ($filterOptions['projects'] as $project)
                    <option value="{{ $project }}"></option>
                @endforeach
            </datalist>
            <datalist id="brand-options">
                @foreach ($filterOptions['brands'] as $brand)
                    <option value="{{ $brand }}"></option>
                @endforeach
            </datalist>
            <datalist id="office-options">
                @foreach ($filterOptions['offices'] as $office)
                    <option value="{{ $office }}"></option>
                @endforeach
            </datalist>
            <datalist id="consultant-options">
                @foreach ($filterOptions['consultants'] as $consultant)
                    <option value="{{ $consultant }}"></option>
                @endforeach
            </datalist>

            <div class="sales-count-bar">
                <strong id="sales-count-indicator">{{ count($recentSales) }} kayıt gösteriliyor</strong>
            </div>

            <div class="table-wrap">
                <table class="sales-table">
                    <thead>
                        <tr>
                            <th>Proje Adı</th>
                            <th>Daire Tipi</th>
                            <th>Marka Adı</th>
                            <th>Ofis Adı</th>
                            <th>Danışman Adı</th>
                            <th>Satış Bedeli</th>
                            <th>Hakediş</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($recentSales as $sale)
                            <tr
                                class="sales-row"
                                data-project="{{ $sale['project_name'] }}"
                                data-brand="{{ $sale['brand_name'] }}"
                                data-office="{{ $sale['office_name'] }}"
                                data-consultant="{{ $sale['consultant_name'] }}">
                                <td>{{ $sale['project_name'] }}</td>
                                <td>{{ $sale['unit_type'] }}</td>
                                <td>{{ $sale['brand_name'] }}</td>
                                <td>{{ $sale['office_name'] }}</td>
                                <td>{{ $sale['consultant_name'] }}</td>
                                <td>{{ number_format($sale['sale_amount'], 0, ',', '.') }} TL</td>
                                <td>{{ number_format($sale['earned_commission'], 0, ',', '.') }} TL</td>
                            </tr>
                        @endforeach
                        <tr id="sales-empty-row" hidden>
                            <td colspan="7" class="empty-state">Seçilen filtrelere uygun satış kaydı bulunamadı.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
@endsection