{{-- resources/views/admin/competitors/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="{{ $competitor->photo_url }}" alt="Profile Photo" 
                                 class="avatar-img rounded-circle border-4 border-white shadow bg-white" style="width: 100%; height: 100%; object-fit: cover;">
                            
                            @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">{{ $competitor->name }}</h2>
                        <p class="text-white-50 mb-0">
                            {{ $competitor->country_code }} • {{ $competitor->gender == 'male' ? 'Putra' : 'Putri' }} 
                            @if($competitor->affiliation) • {{ $competitor->affiliation }} @endif
                        </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.competitors.edit.grafik', $competitor->id) }}" style="border-radius: 4px; margin-right: 5px;">
                                    <i class="fas fa-chart-area me-2"></i> Grafik Kompetitor
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link {{ $activeTab == 'profile' ? 'active fw-bold' : '' }}" 
                                   href="{{ route('admin.competitors.edit.profile', $competitor->id) }}" style="border-radius: 4px; margin-right: 5px;">
                                    <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.competitors.edit.honours', $competitor->id) }}" style="border-radius: 4px; margin-right: 5px;">
                                    <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.competitors.edit.rankings', $competitor->id) }}" style="border-radius: 4px; margin-right: 5px;">
                                    <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.competitors.edit.record', $competitor->id) }}" style="border-radius: 4px; margin-right: 5px;">
                                    <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.competitors.edit.history', $competitor->id) }}" style="border-radius: 4px;">
                                    <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.competitors._edit_grafik')

            @elseif($activeTab == 'profile')
                @include('admin.competitors._edit_profile')
            
            @elseif($activeTab == 'honours')
                @include('admin.competitors._edit_honours')

            @elseif($activeTab == 'rankings')
                @include('admin.competitors._edit_rankings')

            @elseif($activeTab == 'record')
                @include('admin.competitors._edit_record')
            
            @elseif($activeTab == 'history')
                @include('admin.competitors._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($competitor->performances ? $competitor->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="d-none discipline-checkbox-input" ${isChecked}>
                                <label for="disc_${d.id}" class="discipline-label shadow-sm">
                                    <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>
    .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; }
</style>
@endpush