@extends('admin.layouts.app')

@section('title', 'Yeni Oyuncu - CBL Admin Panel')
@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">Yeni Oyuncu</h1>
                    <p class="mt-1 text-sm text-gray-500">Yeni bir oyuncu oluşturun.</p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('admin.players') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-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.players.store') }}" method="POST" enctype="multipart/form-data" onsubmit="showLoading(); showProgress();">
            @csrf
            <div class="px-4 py-5 sm:p-6 space-y-6">
                <!-- TC Kimlik -->
                <div>
                    <label for="tckimlik" class="block text-sm font-medium text-gray-700">TC Kimlik No</label>
                    <input type="text" name="tckimlik" id="tckimlik" value="{{ old('tckimlik') }}" maxlength="11"
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('tckimlik') border-red-300 @enderror"
                           placeholder="TC Kimlik numarasını girin">
                    @error('tckimlik')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Name -->
                <div>
                    <label for="isim" class="block text-sm font-medium text-gray-700">Oyuncu Adı</label>
                    <input type="text" name="isim" id="isim" value="{{ old('isim') }}" required
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('isim') border-red-300 @enderror"
                           placeholder="Oyuncu adını girin">
                    @error('isim')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Position -->
                <div>
                    <label for="pozisyon" class="block text-sm font-medium text-gray-700">Pozisyon</label>
                    <select name="pozisyon" id="pozisyon" required
                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('pozisyon') border-red-300 @enderror">
                        <option value="">Pozisyon seçin</option>
                        <option value="PG" {{ old('pozisyon') == 'PG' ? 'selected' : '' }}>PG (Point Guard)</option>
                        <option value="SG" {{ old('pozisyon') == 'SG' ? 'selected' : '' }}>SG (Shooting Guard)</option>
                        <option value="SF" {{ old('pozisyon') == 'SF' ? 'selected' : '' }}>SF (Small Forward)</option>
                        <option value="PF" {{ old('pozisyon') == 'PF' ? 'selected' : '' }}>PF (Power Forward)</option>
                        <option value="C" {{ old('pozisyon') == 'C' ? 'selected' : '' }}>C (Center)</option>
                    </select>
                    @error('pozisyon')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Team -->
                <div>
                    <label for="takimID" class="block text-sm font-medium text-gray-700">Takım</label>
                    <select name="takimID" id="takimID" required
                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('takimID') border-red-300 @enderror">
                        <option value="">Takım seçin</option>
                        @foreach($teams as $team)
                            <option value="{{ $team->takimID }}" {{ old('takimID') == $team->takimID ? 'selected' : '' }}>
                                {{ $team->takim }}
                            </option>
                        @endforeach
                    </select>
                    @error('takimID')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Number -->
                <div>
                    <label for="oyuncuNo" class="block text-sm font-medium text-gray-700">Numara</label>
                    <input type="number" name="oyuncuNo" id="oyuncuNo" value="{{ old('oyuncuNo') }}" min="0" max="99"
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('oyuncuNo') border-red-300 @enderror"
                           placeholder="Oyuncu numarasını girin">
                    @error('oyuncuNo')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Email -->
                <div>
                    <label for="eposta" class="block text-sm font-medium text-gray-700">E-posta</label>
                    <input type="email" name="eposta" id="eposta" value="{{ old('eposta') }}"
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('eposta') border-red-300 @enderror"
                           placeholder="E-posta adresi girin">
                    @error('eposta')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Season -->
                <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', date('Y')) }}" required
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('sezon') border-red-300 @enderror"
                           placeholder="Sezon bilgisi girin">
                    @error('sezon')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Height -->
                <div>
                    <label for="boy" class="block text-sm font-medium text-gray-700">Boy (cm)</label>
                    <input type="number" name="boy" id="boy" value="{{ old('boy') }}" min="150" max="250"
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('boy') border-red-300 @enderror"
                           placeholder="Boy bilgisi girin">
                    @error('boy')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Weight -->
                <div>
                    <label for="kilo" class="block text-sm font-medium text-gray-700">Kilo (kg)</label>
                    <input type="number" name="kilo" id="kilo" value="{{ old('kilo') }}" min="50" max="150"
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('kilo') border-red-300 @enderror"
                           placeholder="Kilo bilgisi girin">
                    @error('kilo')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Blood Type -->
                <div>
                    <label for="kangrubu" class="block text-sm font-medium text-gray-700">Kan Grubu</label>
                    <select name="kangrubu" id="kangrubu"
                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('kangrubu') border-red-300 @enderror">
                        <option value="">Kan grubu seçin</option>
                        <option value="A Rh+" {{ old('kangrubu') == 'A Rh+' ? 'selected' : '' }}>A Rh+</option>
                        <option value="A Rh-" {{ old('kangrubu') == 'A Rh-' ? 'selected' : '' }}>A Rh-</option>
                        <option value="B Rh+" {{ old('kangrubu') == 'B Rh+' ? 'selected' : '' }}>B Rh+</option>
                        <option value="B Rh-" {{ old('kangrubu') == 'B Rh-' ? 'selected' : '' }}>B Rh-</option>
                        <option value="AB Rh+" {{ old('kangrubu') == 'AB Rh+' ? 'selected' : '' }}>AB Rh+</option>
                        <option value="AB Rh-" {{ old('kangrubu') == 'AB Rh-' ? 'selected' : '' }}>AB Rh-</option>
                        <option value="0 Rh+" {{ old('kangrubu') == '0 Rh+' ? 'selected' : '' }}>0 Rh+</option>
                        <option value="0 Rh-" {{ old('kangrubu') == '0 Rh-' ? 'selected' : '' }}>0 Rh-</option>
                    </select>
                    @error('kangrubu')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Birth Date -->
                <div>
                    <label for="dogumTarihi" class="block text-sm font-medium text-gray-700">Doğum Tarihi</label>
                    <input type="date" name="dogumTarihi" id="dogumTarihi" value="{{ old('dogumTarihi') }}"
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('dogumTarihi') border-red-300 @enderror">
                    @error('dogumTarihi')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Photo (existing filename entry) -->
                <div>
                    <label for="resim" class="block text-sm font-medium text-gray-700">Fotoğraf Dosya Adı (opsiyonel)</label>
                    <input type="text" name="resim" id="resim" value="{{ old('resim') }}"
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm @error('resim') border-red-300 @enderror"
                           placeholder="Örn: oyuncu-foto.jpg (public/assets/media/oyuncu/ klasöründen)">
                    <p class="mt-1 text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Alternatif olarak aşağıdan yeni fotoğraf yükleyebilirsiniz
                    </p>
                    @error('resim')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Photo Upload -->
                <div>
                    <label class="block text-sm font-medium text-gray-700">Oyuncu Fotoğrafı</label>
                    <div class="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-4 items-start">
                        <div class="sm:col-span-1">
                            <div class="text-xs text-gray-500 mb-2">Önizleme</div>
                            <div class="h-28 w-28 border border-gray-200 rounded-md bg-white flex items-center justify-center overflow-hidden">
                                <img id="player-image-preview" src="" alt="Önizleme" class="hidden h-full w-full object-contain">
                                <div id="player-image-preview-fallback" class="h-full w-full flex items-center justify-center">
                                    <i class="fas fa-user text-gray-400 text-3xl"></i>
                                </div>
                            </div>
                        </div>
                        <div class="sm:col-span-2">
                            <div id="player-image-dropzone" class="flex flex-col items-center justify-center px-6 py-8 border-2 border-dashed rounded-md cursor-pointer transition text-center border-gray-300 hover:border-gray-400 bg-gray-50">
                                <input id="resim_file" name="resim_file" type="file" accept="image/*" class="hidden">
                                <i class="fas fa-cloud-upload-alt text-2xl text-gray-500"></i>
                                <p class="mt-2 text-sm text-gray-700">Görseli buraya sürükleyin veya tıklayın</p>
                                <p class="text-xs text-gray-500">Desteklenen türler: JPG, PNG, GIF, WEBP • Maks 2MB</p>
                                <p id="player-image-filename" class="mt-2 text-xs text-gray-600"></p>
                            </div>
                            @error('resim_file')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-2 text-xs text-gray-500">Dosya seçtiğinizde üstteki "Fotoğraf Dosya Adı" alanı otomatik doldurulur.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form actions -->
            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 rounded-b-lg">
                <div class="flex items-center justify-between">
                    <div class="text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Oyuncu adı, pozisyon ve takım zorunludur
                    </div>
                    <div class="flex space-x-3">
                        <a href="{{ route('admin.players') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
                            İptal
                        </a>
                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
                            <i class="fas fa-save mr-2"></i>
                            Kaydet
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

<!-- Sayfaya özel JS -->
<script src="{{ asset('assets/js/player-image-upload.js') }}"></script>