{{-- resources/views/admin/athletes/_edit_profile.blade.php --}}
<div class="card shadow-sm border-0">
    <div class="card-header bg-light border-bottom">
        <h5 class="fw-bold mb-0 text-primary"><i class="fas fa-user me-2"></i>Identitas & Kategori</h5>
    </div>
    
    <form action="{{ route('admin.athletes.update', $athlete->id) }}" method="POST" enctype="multipart/form-data" id="form-edit">
        @csrf @method('PUT')
        
        <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" value="{{ old('name', $athlete->name) }}" required>
                </div>
                
                <div class="col-md-4">
                    <label class="fw-bold mb-1">Jenis Kelamin</label>
                    <select name="gender" id="gender_select" class="form-select" required>
                        <option value="male" {{ $athlete->gender == 'male' ? 'selected' : '' }}>Putra</option>
                        <option value="female" {{ $athlete->gender == 'female' ? 'selected' : '' }}>Putri</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="fw-bold mb-1">Tanggal Lahir</label>
                    <input type="date" name="date_of_birth" class="form-control" value="{{ $athlete->date_of_birth->format('Y-m-d') }}" required>
                </div>
                
                <div class="col-md-4">
                    <label class="fw-bold mb-1">Status Atlet</label>
                    <select name="status" class="form-select" required>
                        <option value="active" {{ $athlete->status == 'active' ? 'selected' : '' }}>Aktif</option>
                        <option value="inactive" {{ $athlete->status == 'inactive' ? 'selected' : '' }}>Nonaktif / Pensiun</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="fw-bold mb-1">Asal Provinsi</label>
                    <select name="province_name" class="form-select select2" required>
                        @foreach($provinces as $prov)
                            <option value="{{ $prov->nama }}" {{ $athlete->province_name == $prov->nama ? 'selected' : '' }}>{{ $prov->nama }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="fw-bold mb-1">Pelatih</label>
                    <select name="coach_id" class="form-select select2">
                        <option value="">-- Mandiri --</option>
                        @foreach(\App\Models\Coach::all() as $coach)
                            <option value="{{ $coach->id }}" {{ $athlete->coach_id == $coach->id ? 'selected' : '' }}>{{ $coach->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="fw-bold mb-1">Status Pelatnas <span class="text-danger">*</span></label>
                    <select name="training_origin" class="form-select" required>
                        <option value="Non Pelatnas" {{ $athlete->training_origin == 'Non Pelatnas' || empty($athlete->training_origin) ? 'selected' : '' }}>Non Pelatnas</option>
                        <option value="Pelatnas PPON" {{ $athlete->training_origin == 'Pelatnas PPON' ? 'selected' : '' }}>Pelatnas PPON</option>
                        <option value="Pelatnas Mandiri" {{ $athlete->training_origin == 'Pelatnas Mandiri' ? 'selected' : '' }}>Pelatnas Mandiri</option>
                    </select>
                </div>
                
                <div class="col-md-12">
                    <hr class="my-2">
                    <label class="fw-bold text-primary mb-2">Kategori Usia</label>
                    <div class="d-flex flex-wrap gap-2">
                        @php 
                            $ages = ['U-16', 'U-18', 'U-20', 'Elite', 'Master']; 
                            $selectedAges = is_string($athlete->age_category) ? json_decode($athlete->age_category, true) : (is_array($athlete->age_category) ? $athlete->age_category : []);
                        @endphp
                        @foreach($ages as $age)
                            <input type="checkbox" class="btn-check" name="age_category[]" id="age_{{ $age }}" value="{{ $age }}" 
                                   {{ in_array($age, $selectedAges ?? []) ? 'checked' : '' }} autocomplete="off">
                            <label class="btn btn-outline-primary btn-sm" for="age_{{ $age }}">{{ $age }}</label>
                        @endforeach
                    </div>
                </div>

                @php
                    $ownedIds = $athlete->performances->pluck('discipline_id')->toArray();
                    $ownedCatIds = $athlete->performances->pluck('discipline.competition_category_id')->unique()->toArray();
                @endphp

                <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;
                                $isCatChecked = in_array($category->id, $ownedCatIds);
                            @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 }}" {{ $isCatChecked ? 'checked' : '' }} 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: {{ $isCatChecked ? 'block' : '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)
                                                @php
                                                    $isDiscChecked = in_array($disc->id, $ownedIds);
                                                @endphp
                                                <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" {{ $isDiscChecked ? 'checked' : '' }}>
                                                    <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">
            <a href="{{ route('admin.athletes.index') }}" class="btn btn-black me-2 fw-bold"><i class="fas fa-arrow-left me-1"></i> Kembali</a>
            <button type="submit" class="btn btn-primary px-4 fw-bold"><i class="fas fa-save me-1"></i> Simpan</button>
        </div>
    </form>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    if (window.jQuery && $.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();
                
                
            }
        });
    }

    $('.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>