{{-- resources/views/admin/athletes/edit.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="{{ $athlete->photo_url }}" alt="Profile Photo" 
                                 class="avatar-img rounded-circle border-4 border-white shadow bg-white">
                            
                            @if($activeTab == 'profile')
                                <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="Ganti Foto">
                                    <i class="fas fa-camera text-white"></i>
                                </label>
                                <input type="file" id="photo_input" name="photo" form="form-edit" class="d-none" onchange="previewImage(this)" accept="image/*">
                            @endif
                        </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">{{ $athlete->name }}</h2>
                        <p class="text-white-50 mb-0">{{ $athlete->province_name }} • {{ $athlete->gender == 'male' ? 'Putra' : 'Putri' }}</p>
                    </div>
                </div>
                <div class="card-body pt-5 pb-3 px-4"></div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card shadow-none border">
                <div class="card-body py-2">
                    <div class="d-flex flex-column flex-md-row align-items-center justify-content-between">
                        <ul class="nav nav-pills nav-secondary">
                            
                            <li class="nav-item">
                                <a class="nav-link {{ $activeTab == 'grafik' ? 'active fw-bold' : '' }}" 
                                   href="{{ route('admin.athletes.edit.grafik', $athlete->id) }}">
                                    <i class="fas fa-chart-area me-2"></i> Grafik Atlet
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link {{ $activeTab == 'profile' ? 'active fw-bold' : '' }}" 
                                   href="{{ route('admin.athletes.edit.profile', $athlete->id) }}">
                                    <i class="fas fa-user-edit me-2"></i> Biodata
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link {{ $activeTab == 'honours' ? 'active fw-bold' : '' }}" 
                                   href="{{ route('admin.athletes.edit.honours', $athlete->id) }}">
                                    <i class="fas fa-medal me-2"></i> Prestasi
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link {{ $activeTab == 'rankings' ? 'active fw-bold' : '' }}" 
                                   href="{{ route('admin.athletes.edit.rankings', $athlete->id) }}">
                                    <i class="fas fa-chart-line me-2"></i> Ranking
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $activeTab == 'record' ? 'active fw-bold' : '' }}" 
                                href="{{ route('admin.athletes.edit.record', $athlete->id) }}">
                                    <i class="fas fa-trophy me-2"></i> Record
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $activeTab == 'history' ? 'active fw-bold' : '' }}" 
                                   href="{{ route('admin.athletes.edit.history', $athlete->id) }}">
                                    <i class="fas fa-stopwatch me-2"></i> Results
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            
            @if($activeTab == 'grafik')
                @include('admin.athletes._edit_grafik')

            @elseif($activeTab == 'profile')
                @include('admin.athletes._edit_profile')
            
            @elseif($activeTab == 'honours')
                @include('admin.athletes._edit_honours')
            
            @elseif($activeTab == 'rankings')
                @include('admin.athletes._edit_rankings')
            
            @elseif($activeTab == 'record')
                @include('admin.athletes._edit_record')
            
            @elseif($activeTab == 'history')
                @include('admin.athletes._edit_history')
            
            @endif

        </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" }); }

        if($('#category_select').length > 0 && typeof rawData !== 'undefined') {
            $('#category_select').select2({ theme: "bootstrap" });
            const existingDisciplines = @json($athlete->performances ? $athlete->performances->pluck('discipline_id') : []);
            
            function updateDisciplineView() {
                const selectedCat = $('#category_select').val();
                const selectedGender = $('#gender_select').val();
                const $section = $('#discipline_section');
                const $list = $('#discipline_list');
                const $msg = $('#no_data_message');

                $list.empty();
                if (!selectedCat) { $section.addClass('d-none'); return; }
                $section.removeClass('d-none');

                const filtered = rawData.filter(d => 
                    String(d.categoryId) === String(selectedCat) && 
                    (d.gender === selectedGender || d.gender === 'mixed' || d.gender === 'any')
                );

                if (filtered.length > 0) {
                    $msg.addClass('d-none');
                    filtered.forEach(d => {
                        let iconClass = d.gender === 'male' ? 'fa-mars text-primary' : (d.gender === 'female' ? 'fa-venus text-danger' : 'fa-venus-mars text-muted');
                        const isChecked = existingDisciplines.includes(parseInt(d.id)) ? 'checked' : '';
                        const html = `
                            <div class="discipline-item">
                                <input type="checkbox" name="discipline_ids[]" value="${d.id}" id="disc_${d.id}" class="btn-check" ${isChecked}>
                                <label for="disc_${d.id}" class="btn btn-outline-secondary btn-sm mb-0 d-flex align-items-center gap-2">
                                    <i class="fas ${iconClass}"></i> ${d.name}
                                </label>
                            </div>`;
                        $list.append(html);
                    });
                } else {
                    $msg.removeClass('d-none');
                }
            }
            
            $('#category_select').on('change.select2 change', updateDisciplineView);
            $('#gender_select').on('change', updateDisciplineView);
            updateDisciplineView();
        }
    });
</script>
<style>
    .btn-check:checked + .btn-outline-secondary { background-color: #1572e8 !important; color: white !important; border-color: #1572e8 !important; }
    .btn-check:checked + .btn-outline-secondary i { color: white !important; }
</style>
@endpush