{{-- resources/views/admin/competitors/create.blade.php --}}
@extends('admin.layouts.app')

@section('content')
<div class="page-inner">
    
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="card card-profile card-secondary border-0 shadow-sm mb-0">
                <div class="card-header position-relative" style="background-image: url('{{ asset('assets/img/blogpost.jpg') }}'); background-size: cover; background-position: center; height: 180px;">
                    <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(0,0,0,0.3);"></div>
                    
                    <div class="position-absolute" style="bottom: -40px; left: 30px; z-index: 10;">
                        <div class="avatar avatar-xxl position-relative">
                            <img id="preview-photo" src="{{ asset('assets/img/user.jpg') }}" alt="Profile Photo" 
                                 class="avatar-img rounded-circle border-4 border-white shadow bg-white">
                            
                            <label for="photo_input" class="btn btn-primary btn-sm rounded-circle position-absolute bottom-0 end-0 shadow-sm border-2 border-white" 
                                   style="width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;"
                                   title="Pilih Foto Profil">
                                <i class="fas fa-camera text-white"></i>
                            </label>
                            
                            <input type="file" id="photo_input" name="photo" form="form-create" class="d-none" onchange="previewImage(this)" accept="image/*">
                        </div>
                    </div>

                    <div class="position-absolute" style="bottom: 15px; left: 170px; text-shadow: 0 2px 4px rgba(0,0,0,0.7);">
                        <h2 class="text-white fw-bold mb-0">Tambah Kompetitor Baru</h2>
                        <p class="text-white-50 mb-0">Silakan lengkapi data diri pesaing di bawah ini.</p>
                    </div>
                </div>
                <div class="card-body pt-5 pb-3 px-4">
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-md-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom">
                    <h5 class="fw-bold mb-0 text-primary"><i class="fas fa-id-card me-2"></i>Form Identitas & Kategori</h5>
                </div>
                
                <form action="{{ route('admin.competitors.store') }}" method="POST" enctype="multipart/form-data" id="form-create">
                    @csrf
                    <div class="card-body">
                        <div class="row g-4">
                            
                            <div class="col-md-12">
                                <label class="fw-bold mb-1">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control fw-bold" placeholder="Masukkan nama lengkap atlet" required>
                            </div>

                            <div class="col-md-4">
                                <label class="fw-bold mb-1">Jenis Kelamin <span class="text-danger">*</span></label>
                                <select name="gender" id="gender_select" class="form-select" required>
                                    <option value="male">Putra</option>
                                    <option value="female">Putri</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="fw-bold mb-1">Tanggal Lahir <span class="text-danger">*</span></label>
                                <input type="date" name="date_of_birth" class="form-control" required>
                            </div>
                            
                            <div class="col-md-4">
                                <label class="fw-bold mb-1">Negara / Country Code <span class="text-danger">*</span></label>
                                <select name="country_code" class="form-select select2" required style="width: 100%">
                                    <option value="">-- Pilih Negara --</option>
                                    @if(isset($countries))
                                        @foreach($countries as $code => $data)
                                            <option value="{{ $code }}">{{ $data['flag'] ?? '' }} {{ $code }} - {{ $data['name'] ?? '' }}</option>
                                        @endforeach
                                    @endif
                                    <option value="OTHER">🏳️ Lainnya</option>
                                </select>
                            </div>

                            <div class="col-md-12">
                                <label class="fw-bold mb-1">Afiliasi / Tim / Klub</label>
                                <input type="text" name="affiliation" class="form-control" placeholder="Contoh: Timnas Jepang, Klub Dragon, dll">
                            </div>

                            <div class="col-md-12">
                                <hr class="my-3">
                                <label class="fw-bold text-primary mb-2">Kategori Usia (PASI) <span class="text-danger">*</span></label>
                                <div class="d-flex flex-wrap gap-2">
                                    @php $ages = ['U-16', 'U-18', 'U-20', 'Elite', 'Master']; @endphp
                                    @foreach($ages as $age)
                                        <input type="checkbox" class="btn-check" name="age_category[]" id="age_{{ $age }}" value="{{ $age }}" autocomplete="off">
                                        <label class="btn btn-outline-primary btn-sm mb-0 px-4 py-2" for="age_{{ $age }}" style="min-width: 80px;">
                                            {{ $age }}
                                        </label>
                                    @endforeach
                                </div>
                                <small class="text-muted mt-1 d-block"><i class="fas fa-info-circle me-1"></i> Dapat memilih lebih dari satu kategori.</small>
                            </div>

                            <div class="col-md-12 mt-2">
                                <hr class="my-3">
                                <label class="fw-bold text-primary mb-3"><i class="fas fa-layer-group me-1"></i> Pilih Kategori Utama & Nomor Spesialisasi <span class="text-danger">*</span></label>
                                
                                <div class="category-wrapper">
                                    @foreach($disciplines->groupBy('competition_category_id') as $catId => $catDisciplines)
                                        @php 
                                            $category = $catDisciplines->first()->category; 
                                            if(!$category) continue;
                                        @endphp
                                        
                                        <div class="card bg-light border-1 shadow-none mb-3" style="border-color: #e2e8f0 !important;">
                                            <div class="card-body p-3">
                                                <div class="form-check mb-0 d-flex align-items-center">
                                                    <input class="form-check-input category-checkbox" type="checkbox" id="cat_{{ $category->id }}" value="{{ $category->id }}" style="width: 1.5em; height: 1.5em; margin-top: 0; cursor: pointer;">
                                                    <label class="form-check-label fw-bold text-dark ms-2" for="cat_{{ $category->id }}" style="font-size: 1.1rem; cursor: pointer;">
                                                        {{ $category->name }}
                                                    </label>
                                                </div>

                                                <div class="disciplines-container mt-3 ms-4" id="disciplines_cat_{{ $category->id }}" style="display: none; border-left: 2px dashed #cbd5e1; padding-left: 15px;">
                                                    <p class="text-muted small mb-2 fw-bold"><i class="fas fa-caret-right me-1"></i> Pilih Nomor Spesialisasi:</p>
                                                    <div class="d-flex flex-wrap gap-2">
                                                        @foreach($catDisciplines as $disc)
                                                            <div class="discipline-item" data-gender="{{ $disc->gender }}">
                                                                <input type="checkbox" name="discipline_ids[]" value="{{ $disc->id }}" id="disc_{{ $disc->id }}" class="d-none discipline-checkbox-input">
                                                                <label for="disc_{{ $disc->id }}" class="discipline-label shadow-sm">
                                                                    <i class="fas {{ $disc->gender == 'male' ? 'fa-mars text-primary' : ($disc->gender == 'female' ? 'fa-venus text-danger' : 'fa-venus-mars text-muted') }}"></i>
                                                                    {{ $disc->name }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                    <div class="no-discipline-msg text-danger small mt-2" style="display: none;">
                                                        <i class="fas fa-exclamation-triangle"></i> Tidak ada nomor spesialisasi untuk gender yang dipilih pada kategori ini.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="card-footer text-end bg-white border-top pb-4 pe-4">
                        <a href="{{ route('admin.competitors.index') }}" class="btn btn-black me-2 fw-bold">
                            <i class="fas fa-arrow-left me-1"></i> Batal
                        </a>
                        <button type="submit" class="btn btn-success px-4 fw-bold">
                            <i class="fas fa-save me-1"></i> Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) { $('#preview-photo').attr('src', e.target.result); }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $(document).ready(function() {
        if ($.fn.select2) {
            $('.select2').select2({ theme: "bootstrap" });
        }

        function updateDisciplineView(animate = true) {
            const selectedGender = $('#gender_select').val();

            $('.discipline-item').each(function() {
                const itemGender = $(this).data('gender');
                if (itemGender === selectedGender || itemGender === 'mixed' || itemGender === 'any') {
                    $(this).show();
                } else {
                    $(this).hide();
                    $(this).find('.discipline-checkbox-input').prop('checked', false);
                }
            });

            $('.category-checkbox').each(function() {
                const catId = $(this).val();
                const container = $('#disciplines_cat_' + catId);
                
                if ($(this).is(':checked')) {
                    if (animate) container.slideDown(200); else container.show();
                    
                    let visibleCount = container.find('.discipline-item').filter(function() {
                        return $(this).css('display') !== 'none';
                    }).length;
                    
                    if(visibleCount === 0) {
                        container.find('.no-discipline-msg').show();
                    } else {
                        container.find('.no-discipline-msg').hide();
                    }
                } else {
                    if (animate) container.slideUp(200); else container.hide();
                    container.find('.discipline-checkbox-input').prop('checked', false);
                }
            });
        }

        $('.category-checkbox').on('change', function() { updateDisciplineView(true); });
        $('#gender_select').on('change', function() { updateDisciplineView(true); });
        
        updateDisciplineView(false);
    });
</script>

<style>
    .discipline-checkbox-input:checked + .discipline-label {
        background-color: #1572e8 !important; color: white !important; border-color: #1572e8 !important;
    }
    .discipline-label {
        background: white; border: 1px solid #ced4da; padding: 8px 15px; border-radius: 4px;
        cursor: pointer; font-weight: 500; transition: all 0.15s ease-in-out;
        display: flex; align-items: center; gap: 6px; margin-bottom: 0; font-size: 13px;
    }
    .discipline-label:hover { background-color: #f8f9fa; border-color: #adb5bd; }
    
    .btn-check:checked + .btn-outline-primary {
        background-color: #1572e8 !important; 
        color: white !important; 
        border-color: #1572e8 !important;
    }
    
    .select2-container--bootstrap .select2-selection { border-radius: 4px !important; }
</style>
@endpush