@extends('layouts.app')

@section('title', 'Medya Yükle')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div>
        <div class="mb-6">
            <a href="{{ route('sites.media.index', $site) }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left"></i> Medya listesine dön
            </a>
        </div>

        <h1 class="text-3xl font-semibold text-gray-900 mb-6">Medya Yükle</h1>

        <form action="{{ route('sites.media.store', $site) }}" method="POST" enctype="multipart/form-data" class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            @csrf

            <div class="px-4 py-6 sm:p-8">
                <div class="grid grid-cols-1 gap-x-6 gap-y-8">
                    <div>
                        <label for="files" class="block text-sm font-medium leading-6 text-gray-900">Dosyalar</label>
                        <div class="mt-2">
                            <input type="file" name="files[]" id="files" multiple required accept="image/*,.pdf,.doc,.docx" class="block w-full text-sm text-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                            <p class="mt-1 text-xs text-gray-500">JPEG, PNG, GIF, SVG, PDF, DOC, DOCX (Max: 10MB)</p>
                            @error('files.*')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-medium leading-6 text-gray-900">Açıklama</label>
                        <div class="mt-2">
                            <textarea name="description" id="description" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">{{ old('description') }}</textarea>
                            @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="alt_text" class="block text-sm font-medium leading-6 text-gray-900">Alt Metin</label>
                        <div class="mt-2">
                            <input type="text" name="alt_text" id="alt_text" value="{{ old('alt_text') }}" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
                            <p class="mt-1 text-xs text-gray-500">Görseller için alternatif metin</p>
                            @error('alt_text')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                <a href="{{ route('sites.media.index', $site) }}" class="text-sm font-semibold leading-6 text-gray-900">İptal</a>
                <button type="submit" class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500">
                    Yükle
                </button>
            </div>
        </form>
    </div>
</div>
@endsection