@extends('admin.layouts.app')

@section('title', 'Maç Yazısı Düzenle - CBL Admin Panel')
@section('breadcrumbs')
    <a href="{{ route('admin.dashboard') }}" class="hover:underline">Dashboard</a>
    <span class="mx-2">/</span>
    <a href="{{ route('admin.match-reports') }}" class="hover:underline">Maç Yazıları</a>
    <span class="mx-2">/</span>
    <span class="text-slate-700">Düzenle</span>
@endsection
@section('content')
<div class="space-y-6">
    <!-- Page header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Maç Yazısı Düzenle</h1>
                    <p class="mt-1 text-sm text-gray-500">Maç yazısı bilgilerini güncelleyin.</p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('admin.match-reports') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Geri Dön
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-white shadow rounded-lg">
        <form action="{{ route('admin.match-reports.update', $report->haberID) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')
            <div class="px-4 py-5 sm:p-6">
                <div class="grid grid-cols-1 gap-6">
                    <div>
                        <label for="hBaslik" class="block text-sm font-medium text-gray-700">Başlık</label>
                        <input type="text" name="hBaslik" id="hBaslik" value="{{ old('hBaslik', $report->hBaslik) }}" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        @error('hBaslik')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="hKisa" class="block text-sm font-medium text-gray-700">Kısa Açıklama</label>
                        <textarea name="hKisa" id="hKisa" rows="3" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ old('hKisa', $report->hKisa) }}</textarea>
                        @error('hKisa')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="haber" class="block text-sm font-medium text-gray-700">İçerik</label>
                        <textarea name="haber" id="haber" rows="10" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ old('haber', $report->haber) }}</textarea>
                        @error('haber')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>



                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div>
                            <label for="tarih" class="block text-sm font-medium text-gray-700">Tarih</label>
                            <input type="datetime-local" name="tarih" id="tarih" value="{{ old('tarih', date('Y-m-d\TH:i', $report->tarih)) }}" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            @error('tarih')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="sezon" class="block text-sm font-medium text-gray-700">Sezon</label>
                            <input type="number" name="sezon" id="sezon" value="{{ old('sezon', $report->sezon) }}" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            @error('sezon')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Mevcut Görsel Önizleme -->
                    @if($report->resim)
                    <div class="mb-4 p-4 bg-gray-50 rounded-lg">
                        <div class="text-center">
                            <img src="{{ asset('assets/media/macyazi/' . $report->resim) }}"
                                 alt="{{ $report->hBaslik }}"
                                 class="mx-auto max-w-md rounded-lg object-contain border border-gray-200">
                            <div class="mt-3">
                                <p class="text-sm font-medium text-gray-900">Mevcut Görsel</p>
                                <p class="text-sm text-gray-500">{{ $report->resim }}</p>
                                <p class="text-xs text-gray-400 mt-1">Yeni görsel yüklerseniz bu görsel değiştirilecek.</p>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="mb-4 p-4 bg-gray-50 rounded-lg">
                        <div class="text-center">
                            <div class="mx-auto h-20 w-20 rounded-lg bg-gray-200 flex items-center justify-center">
                                <i class="fas fa-image text-gray-400 text-xl"></i>
                            </div>
                            <div class="mt-3">
                                <p class="text-sm font-medium text-gray-900">Görsel Yok</p>
                                <p class="text-sm text-gray-500">Bu maç yazısı için henüz görsel yüklenmemiş.</p>
                                <p class="text-xs text-gray-400 mt-1">Aşağıdaki alanı kullanarak görsel yükleyebilirsiniz.</p>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Görsel Yükleme Alanı -->
                    <div>
                        <label for="resim_file" class="block text-sm font-medium text-gray-700">Yeni Görsel Yükle</label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-primary-400 transition-colors duration-200">
                            <div class="space-y-1 text-center">
                                <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
                                <div class="flex text-sm text-gray-600">
                                    <label for="resim_file" class="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
                                        <span>Görsel Seç</span>
                                        <input id="resim_file" name="resim_file" type="file" class="sr-only" accept="image/*" onchange="previewImage(this)">
                                    </label>
                                    <p class="pl-1">veya sürükleyip bırakın</p>
                                </div>
                                <p class="text-xs text-gray-500">PNG, JPG, GIF, WebP (Maksimum 2MB)</p>
                            </div>
                        </div>
                        <div id="imagePreview" class="mt-2 hidden">
                            <img id="previewImg" class="max-w-xs rounded-md" alt="Önizleme">
                        </div>
                        @error('resim_file')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="resim" class="block text-sm font-medium text-gray-700">Görsel Dosya Adı (Manuel)</label>
                        <input type="text" name="resim" id="resim" value="{{ old('resim', $report->resim) }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="ornek.jpg">
                        <p class="mt-1 text-xs text-gray-500">Görsel yüklemezseniz manuel olarak dosya adını girebilirsiniz.</p>
                        @error('resim')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="hFlash" id="hFlash" value="1" {{ old('hFlash', $report->hFlash) ? 'checked' : '' }} class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
                        <label for="hFlash" class="ml-2 block text-sm text-gray-900">
                            Yayınla
                        </label>
                    </div>
                </div>
            </div>

            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-save mr-2"></i>
                    Güncelle
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function previewImage(input) {
    const preview = document.getElementById('imagePreview');
    const previewImg = document.getElementById('previewImg');
    const resimInput = document.getElementById('resim');

    if (input.files && input.files[0]) {
        const reader = new FileReader();

        reader.onload = function(e) {
            previewImg.src = e.target.result;
            preview.classList.remove('hidden');
        };

        reader.readAsDataURL(input.files[0]);
    } else {
        preview.classList.add('hidden');
    }
}
</script>
@endsection