@extends('admin.layouts.app')

@section('title', 'Medya | LikaWEB CMS')

@section('content')
    <div class="page-head page-head-actions">
        <div>
            <h1>Medya</h1>
            <p>Görsel, doküman ve site varlıklarını klasörlerle yönetin.</p>
        </div>
        @if (auth()->user()->yetkisiVar('medya.yukle'))
            <div class="row-actions" style="margin: 0; align-self: end;">
                <button class="btn btn-primary" type="button" data-toggle-drawer="upload-drawer">Dosya Yükle</button>
                <button class="btn btn-secondary" type="button" data-toggle-drawer="folder-drawer">Klasör Oluştur</button>
            </div>
        @endif
    </div>

    @if (auth()->user()->yetkisiVar('medya.yukle'))
        <!-- Dosya Yükleme Çekmecesi -->
        <div id="upload-drawer" class="toggle-drawer">
            <form class="card" action="{{ route('admin.medya.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <h2>Dosya Yükle</h2>
                <div class="form-grid">
                    <div class="field">
                        <label for="dosya">Dosya Seçin</label>
                        <input id="dosya" name="dosya" type="file" required>
                        @error('dosya')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label for="medya_klasor_id_upload">Klasör</label>
                        <select id="medya_klasor_id_upload" name="medya_klasor_id">
                            <option value="">Klasörsüz</option>
                            @foreach ($klasorler as $klasor)
                                <option value="{{ $klasor->medya_klasor_id }}">{{ $klasor->ad }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label for="baslik">Başlık</label>
                        <input id="baslik" name="baslik" type="text" placeholder="Görsel veya dosya başlığı..." maxlength="255">
                    </div>
                    <div class="field">
                        <label for="alt_metin">Alternatif Metin (Alt Tag)</label>
                        <input id="alt_metin" name="alt_metin" type="text" placeholder="SEO için alt metin..." maxlength="255">
                    </div>
                    <div class="field full-span">
                        <label for="aciklama">Açıklama</label>
                        <textarea id="aciklama" name="aciklama" rows="3" placeholder="Dosya hakkında kısa açıklama..."></textarea>
                    </div>
                </div>
                <div class="form-actions">
                    <button class="btn btn-primary" type="submit">Yüklemeyi Başlat</button>
                    <button class="btn btn-secondary" type="button" onclick="document.getElementById('upload-drawer').classList.remove('is-open')">İptal</button>
                </div>
            </form>
        </div>

        <!-- Klasör Oluşturma Çekmecesi -->
        <div id="folder-drawer" class="toggle-drawer">
            <form class="card" action="{{ route('admin.medya.klasorler.store') }}" method="POST">
                @csrf
                <h2>Yeni Klasör Oluştur</h2>
                <div class="form-grid">
                    <div class="field">
                        <label for="klasor_ad">Klasör Adı</label>
                        <input id="klasor_ad" name="ad" type="text" placeholder="Klasör ismi..." maxlength="160" required>
                    </div>
                    <div class="field">
                        <label for="klasor_slug">Slug Adresi</label>
                        <input id="klasor_slug" name="slug" type="text" placeholder="Otomatik oluşturulur..." maxlength="180">
                    </div>
                    <div class="field">
                        <label for="ust_klasor_id">Üst Klasör</label>
                        <select id="ust_klasor_id" name="ust_klasor_id">
                            <option value="">Yok (Ana Dizin)</option>
                            @foreach ($klasorler as $klasor)
                                <option value="{{ $klasor->medya_klasor_id }}">{{ $klasor->ad }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label for="klasor_sira">Sıralama</label>
                        <input id="klasor_sira" name="sira" type="number" min="0" value="0">
                    </div>
                </div>
                <div class="form-actions">
                    <button class="btn btn-primary" type="submit">Klasör Oluştur</button>
                    <button class="btn btn-secondary" type="button" onclick="document.getElementById('folder-drawer').classList.remove('is-open')">İptal</button>
                </div>
            </form>
        </div>
    @endif

    <form class="card filter-bar section-space" action="{{ route('admin.medya.index') }}" method="GET">
        <div class="field">
            <label for="arama">Arama</label>
            <input id="arama" name="arama" type="search" value="{{ $arama }}" placeholder="Dosya adı, başlık veya açıklama...">
        </div>
        <div class="field">
            <label for="medya_klasor_id">Klasör</label>
            <select id="medya_klasor_id" name="medya_klasor_id">
                <option value="">Tüm klasörler</option>
                @foreach ($klasorler as $klasor)
                    <option value="{{ $klasor->medya_klasor_id }}" @selected((string) $klasorId === (string) $klasor->medya_klasor_id)>{{ $klasor->ad }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label for="tip">Dosya Tipi</label>
            <select id="tip" name="tip">
                <option value="">Tüm tipler</option>
                <option value="gorsel" @selected($tip === 'gorsel')>Görsel</option>
                <option value="dokuman" @selected($tip === 'dokuman')>Doküman</option>
            </select>
        </div>
        <div class="filter-actions">
            <button class="btn btn-secondary" type="submit">Filtrele</button>
            <a class="btn btn-link" href="{{ route('admin.medya.index') }}">Temizle</a>
        </div>
    </form>

    <section class="media-grid section-space">
        @forelse ($medyalar as $medya)
            <article class="media-card" style="border-radius: 12px; overflow: hidden;">
                <a class="media-thumb" href="{{ route('admin.medya.edit', $medya) }}">
                    @if (! $medya->dosyaVarMi())
                        <span style="font-weight: 800; color: var(--admin-danger);">Eksik Dosya</span>
                    @elseif ($medya->gorselMi())
                        <img src="{{ route('admin.medya.dosya', $medya) }}" alt="{{ $medya->alt_metin ?: $medya->dosya_adi }}">
                    @else
                        <span style="font-size: 16px; font-weight: 900; letter-spacing: 0.05em; color: var(--admin-muted);">
                            {{ strtoupper(pathinfo($medya->dosya_adi, PATHINFO_EXTENSION) ?: 'DOSYA') }}
                        </span>
                    @endif
                </a>
                <div class="media-meta">
                    <strong>{{ $medya->baslik ?: $medya->dosya_adi }}</strong>
                    <span style="margin-bottom: 10px; display: block;">
                        <code>{{ $medya->klasor?->ad ?? 'Klasörsüz' }}</code> • {{ number_format(((int) $medya->dosya_boyutu) / 1024, 1) }} KB
                    </span>
                    <div class="row-actions" style="margin-top: auto;">
                        <a class="btn btn-secondary" href="{{ route('admin.medya.edit', $medya) }}" style="width: 100%; min-height: 34px; padding: 6px 12px; font-size: 12px; border-radius: 8px;">Düzenle</a>
                    </div>
                </div>
            </article>
        @empty
            <div class="card empty full-span" style="text-align: center; padding: 40px 20px;">
                <p>Bu filtrelere uygun medya bulunamadı.</p>
            </div>
        @//forelse
        @endforelse
    </section>

    {{ $medyalar->links() }}
@endsection