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

@section('content')
<div class="page-inner">
    
    <div class="row mb-4">
        <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.4);"></div>
                    <div class="position-absolute" style="bottom: -40px; left: 30px; z-index: 10;">
                        <div class="avatar avatar-xxl position-relative">
                            <img src="{{ $athlete->photo_url }}" alt="Profile Photo" 
                                 class="avatar-img rounded-circle border-4 border-white shadow bg-white" style="object-fit: cover;">
                        </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 d-flex justify-content-between align-items-end">
                    <div>
                        <h4 class="card-title text-primary fw-bold mb-0">
                            <i class="fas {{ isset($history) ? 'fa-edit text-warning' : 'fa-plus-circle text-success' }} me-2"></i> 
                            {{ isset($history) ? 'Edit Hasil Lomba' : 'Input Hasil Lomba Baru' }}
                        </h4>
                    </div>
                    <a href="{{ route('admin.athletes.edit.history', [$athlete->id, 'filter'=>'all']) }}" class="btn btn-outline-warning btn-sm fw-bold">
                        <i class="fas fa-arrow-left me-1"></i> Kembali ke Riwayat
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-sm border-0">
                <form id="historyForm" action="{{ isset($history) ? route('admin.athletes.history.update', [$athlete->id, $history->id]) : route('admin.athletes.history.store', $athlete->id) }}" method="POST">
                    @csrf
                    @if(isset($history)) @method('PUT') @endif

                    <div class="card-body p-4 p-md-5">
                        
                        <h6 class="text-uppercase fw-bold text-secondary small mb-3 border-bottom pb-2">
                            <i class="fas fa-map-marker-alt me-1"></i> Informasi Kejuaraan
                        </h6>
                        <div class="row g-4 mb-5">
                            <div class="col-md-12">
                                <label class="form-label fw-bold text-dark">Nama Kejuaraan <span class="text-danger">*</span></label>
                                <input type="text" name="competition_name" class="form-control form-control-lg bg-light" value="{{ old('competition_name', $history->competition_name ?? '') }}" required>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fw-bold text-dark">Lokasi (Venue)</label>
                                <input type="text" name="venue" class="form-control form-control-lg bg-light" value="{{ old('venue', $history->venue ?? '') }}" required>
                            </div>
                            
                            <div class="col-md-4">
                                <label class="form-label fw-bold text-dark">Negara</label>
                                <select name="country_code" class="form-select form-select-lg select2 bg-light" required style="width: 100%">
                                    <option value="">Pilih Negara</option>
                                    @foreach($countries as $code => $data)
                                        <option value="{{ $code }}" {{ old('country_code', $history->country_code ?? '') == $code ? 'selected' : '' }}>
                                            {{ $data['flag'] }} {{ $code }} - {{ $data['name'] }}
                                        </option>
                                    @endforeach
                                    <option value="OTHER">🏳️ Other / Tidak Tercantum</option>
                                </select>
                            </div>
                            
                            <div class="col-md-3">
                                <label class="form-label fw-bold text-dark">Tanggal <span class="text-danger">*</span></label>
                                <input type="date" name="date" class="form-control form-control-lg bg-light fw-bold" value="{{ old('date', isset($history) ? \Carbon\Carbon::parse($history->date)->format('Y-m-d') : date('Y-m-d')) }}" required>
                            </div>
                        </div>

                        <h6 class="text-uppercase fw-bold text-secondary small mb-3 border-bottom pb-2">
                            <i class="fas fa-certificate me-1"></i> Status & Prestasi
                        </h6>
                        <div class="bg-light p-4 rounded border border-light mb-5">
                            <div class="row g-4">
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-dark">Kategori Ranking Kejuaraan</label>
                                    <select name="ranking_category_id" class="form-select form-select-lg" required>
                                        <option value="">-- Pilih --</option>
                                        @foreach($rankingCategories as $cat)
                                            <option value="{{ $cat->id }}" {{ old('ranking_category_id', $history->ranking_category_id ?? '') == $cat->id ? 'selected' : '' }}>
                                                [{{ $cat->code }}] {{ $cat->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-8 border-start">
                                    <label class="form-label fw-bold text-dark mb-3">Catatan Prestasi & Pemecahan Rekor</label>
                                    
                                    @php
                                        $ownedRemarks = isset($history) ? $history->performanceRemarks->pluck('id')->toArray() : [];
                                        
                                        $nrRemarks = $performanceRemarks->filter(fn($r) => str_starts_with($r->code, 'NR'));
                                        $generalRemarks = $performanceRemarks->filter(fn($r) => !str_starts_with($r->code, 'NR'));
                                    @endphp
                                    
                                    <div class="d-flex flex-wrap gap-3 mb-3">
                                        @foreach($generalRemarks as $rem)
                                            <div class="form-check form-check-inline me-3">
                                                <input class="form-check-input" type="checkbox" name="performance_remark_ids[]" value="{{ $rem->id }}" id="remark_{{ $rem->id }}" {{ in_array($rem->id, $ownedRemarks) ? 'checked' : '' }} style="width: 1.2em; height:1.2em;">
                                                <label class="form-check-label fw-medium mt-1" for="remark_{{ $rem->id }}">
                                                    <span class="badge bg-{{ $rem->badge_color }} me-1">{{ $rem->code }}</span>
                                                    {{ $rem->name }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="d-flex flex-wrap gap-3 p-3 bg-white border border-danger rounded shadow-sm">
                                        <div class="w-100 fw-bold text-danger small mb-1"><i class="fas fa-trophy me-1"></i> National Records (NR)</div>
                                        @foreach($nrRemarks as $rem)
                                            <div class="form-check form-check-inline me-3">
                                                <input class="form-check-input border-danger" type="checkbox" name="performance_remark_ids[]" value="{{ $rem->id }}" id="remark_{{ $rem->id }}" {{ in_array($rem->id, $ownedRemarks) ? 'checked' : '' }} style="width: 1.2em; height:1.2em;">
                                                <label class="form-check-label fw-medium mt-1" for="remark_{{ $rem->id }}">
                                                    <span class="badge bg-{{ $rem->badge_color }} me-1">{{ $rem->code }}</span>
                                                    {{ str_replace('National Record', '', $rem->name) }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>

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

                        <h6 class="text-uppercase fw-bold text-secondary small mb-3 border-bottom pb-2">
                            <i class="fas fa-running me-1"></i> Detail Lomba & Hasil
                        </h6>
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold text-dark">Filter Kategori Disiplin</label>
                                <select id="filter_category_id" class="form-select form-select-lg select2" style="width: 100%">
                                    <option value="">-- Semua Kategori --</option>
                                    @foreach($competitionCategories as $cat)
                                        @php
                                            $isSelected = isset($history) && $history->discipline->competition_category_id == $cat->id ? 'selected' : '';
                                        @endphp
                                        <option value="{{ $cat->id }}" {{ $isSelected }}>{{ $cat->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold text-dark">Nomor Lomba (Disiplin) <span class="text-danger">*</span></label>
                                <select name="discipline_id" id="discipline_id" class="form-select form-select-lg select2 border-primary" required style="width: 100%">
                                    <option value="">-- Pilih Nomor Lomba --</option>
                                </select>
                            </div>

                            <div id="single_input_section" class="col-12 mt-4" style="display: none;">
                                <div class="p-4 bg-white border border-primary rounded shadow-sm">
                                    <div class="row g-4 align-items-end">
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold text-primary">Hasil Lomba / Waktu <span class="text-danger">*</span></label>
                                            <input type="text" name="result_mark" id="result_mark" class="form-control form-control-lg border-primary text-primary fw-bold" placeholder="Misal: 10.03" value="{{ old('result_mark', $history->result_mark ?? '') }}">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label fw-bold text-dark">Wind (Angin)</label>
                                            <input type="number" step="0.1" name="wind" id="wind" class="form-control form-control-lg" placeholder="+0.0" value="{{ old('wind', $history->wind ?? '') }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold text-dark">Babak / Round</label>
                                            <div class="input-group input-group-lg">
                                                @php
                                                    $rType = 'F'; $rNum = '';
                                                    if(isset($history) && $history->round) {
                                                        $rType = preg_replace('/[0-9]/', '', $history->round);
                                                        $rNum = preg_replace('/\D/', '', $history->round);
                                                    }
                                                @endphp
                                                <select name="round_type" id="round_type" class="form-select fw-bold">
                                                    <option value="F" {{ $rType == 'F' ? 'selected' : '' }}>Final (F)</option>
                                                    <option value="SF" {{ $rType == 'SF' ? 'selected' : '' }}>Semi (SF)</option>
                                                    <option value="H" {{ $rType == 'H' ? 'selected' : '' }}>Heat (H)</option>
                                                    <option value="Q" {{ $rType == 'Q' ? 'selected' : '' }}>Qual (Q)</option>
                                                    <option value="CE" {{ $rType == 'CE' ? 'selected' : '' }}>Gabungan (CE)</option> 
                                                </select>
                                                <input type="number" name="round_number" id="round_number" class="form-control" placeholder="#" min="1" value="{{ $rNum }}">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label fw-bold text-dark">Juara / Pos</label>
                                            <input type="number" name="place" id="place" class="form-control form-control-lg fw-bold" placeholder="1" value="{{ old('place', $history->place ?? '') }}">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label fw-bold text-dark">Skor WA</label>
                                            <input type="number" name="score" id="score" class="form-control form-control-lg text-success fw-bold" placeholder="1150" value="{{ old('score', $history->score ?? '') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="combined_input_section" class="col-md-12 mt-4" style="display: none;">
                                <div class="alert alert-warning p-4 mb-4 border-warning shadow-sm">
                                    <div class="d-flex">
                                        <i class="fas fa-list-ol fa-3x me-4 text-warning opacity-75 mt-2"></i>
                                        <div>
                                            <h5 class="fw-bold mb-2 text-dark" id="ce_title">Input Form Massal Combined Events</h5>
                                            <p class="text-dark mb-0">Baris pertama yang berwarna kuning adalah hasil akhir (Total Poin Keseluruhan). Baris-baris putih di bawahnya adalah rincian lomba individualnya.<br><i>Anda boleh mengosongkan baris rincian jika datanya belum tersedia. Sistem hanya akan menyimpan baris yang diisi Hasil-nya.</i></p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="table-responsive bg-white p-3 rounded border shadow-sm">
                                    <table class="table table-bordered table-hover align-middle">
                                        <thead class="bg-dark text-white text-center">
                                            <tr>
                                                <th width="20%">Nama Disiplin Lomba</th>
                                                <th width="25%">Hasil & Catatan Rekor</th>
                                                <th width="15%">Wind (+/-)</th>
                                                <th width="15%">Babak (Round)</th>
                                                <th width="10%">Juara</th>
                                                <th width="15%">Skor WA</th>
                                            </tr>
                                        </thead>
                                        <tbody id="ce_tbody">

                                        </tbody>
                                    </table>
                                </div>
                                <input type="hidden" name="is_combined_submission" id="is_combined_submission" value="0">
                            </div>

                            <div class="col-md-12 d-flex align-items-end mt-4">
                                <div class="form-check form-switch p-3 bg-light rounded border w-100 d-flex justify-content-between align-items-center">
                                    <label class="form-check-label fw-bold text-dark ms-2" for="is_indoor">
                                        <i class="fas fa-warehouse text-primary me-2"></i> Tandai ini sebagai Perlombaan Indoor (i)
                                    </label>
                                    <input class="form-check-input ms-0" type="checkbox" name="is_indoor" id="is_indoor" style="width: 3em; height: 1.5em; cursor:pointer;" {{ (isset($history) && $history->is_indoor) ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>

                    </div>
                    
                    <div class="card-footer bg-light border-top p-4 text-end">
                        <button type="submit" class="btn {{ isset($history) ? 'btn-warning' : 'btn-success' }} btn-lg px-5 fw-bold shadow-sm">
                            <i class="fas fa-save me-2"></i> {{ isset($history) ? 'Simpan Perubahan Data' : 'Simpan Data Lomba Baru' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    const allDisciplines = @json($disciplines);
    const athleteGender = "{{ $athlete->gender }}";
    
    const isEditMode = {{ isset($history) ? 'true' : 'false' }};
    const mainHistoryData = @json($history ?? null);
    const relatedChildrenData = @json(isset($relatedChildren) ? $relatedChildren : []);
    
    const allRemarksData = @json($performanceRemarks); 

    document.addEventListener("DOMContentLoaded", function() {
        $('.select2').select2({ theme: "bootstrap" });

        const disciplineSelect = $('#discipline_id');

        function populateDisciplines(categoryId = null, selectedDisciplineId = null) {
            disciplineSelect.empty();
            disciplineSelect.append('<option value="">-- Pilih Nomor Lomba --</option>');

            let filtered = allDisciplines.filter(d => 
                (d.gender === athleteGender || d.gender === 'mixed' || d.gender === 'any')
            );

            if (categoryId) {
                filtered = filtered.filter(d => String(d.competition_category_id) === String(categoryId));
            }

            filtered.forEach(opt => {
                let option = new Option(opt.name + (opt.gender === 'mixed' ? ' (Campuran)' : ''), opt.id);
                if (selectedDisciplineId && String(opt.id) === String(selectedDisciplineId)) {
                    option.selected = true;
                }
                disciplineSelect.append(option);
            });
            disciplineSelect.trigger('change.select2');
        }

        $('#filter_category_id').on('change', function() {
            populateDisciplines($(this).val());
        });

        $('#discipline_id').on('change', function() {
            checkCombinedEvents();
        });

        if (isEditMode && mainHistoryData) {
            populateDisciplines(mainHistoryData.discipline.competition_category_id, mainHistoryData.discipline_id);
            setTimeout(() => { checkCombinedEvents(); }, 100);
        } else {
            populateDisciplines();
            $('#single_input_section').show();
        }
    });

    function buildRowHTML(index, discName, defaultRound, isMainEvent, existingData = null) {
        let cleanName = discName.trim().toUpperCase();
        let disc = allDisciplines.find(d => d.name.trim().toUpperCase() === cleanName && (d.gender === athleteGender || d.gender === 'mixed'));
        let discId = disc ? disc.id : '';
        
        let rowClass = isMainEvent ? 'table-warning fw-bold fs-6' : '';
        let label = isMainEvent ? `⭐ ${discName} (TOTAL POIN)` : `<i class="fas fa-level-up-alt fa-rotate-90 text-muted ms-3 me-2"></i> ${discName}`;
        let placeholder = isMainEvent ? 'Misal: 7500' : 'Misal: 10.05';

        let valId = existingData ? existingData.id : '';
        let valMark = existingData ? (existingData.result_mark || '') : '';
        let valWind = existingData ? (existingData.wind || '') : '';
        let valRound = existingData && existingData.round ? existingData.round : defaultRound;
        let valPlace = existingData ? (existingData.place || '') : '';
        let valScore = existingData ? (existingData.score || '') : '';

        let existingRemarkIds = [];
        if (existingData && existingData.performance_remarks) {
            existingRemarkIds = existingData.performance_remarks.map(r => r.id);
        }

        let remarkCheckboxes = `<div class="d-flex flex-wrap gap-1 mt-2">`;
        allRemarksData.forEach(rem => {
            let isChecked = existingRemarkIds.includes(rem.id) ? 'checked' : '';
            remarkCheckboxes += `
                <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center pe-2">
                    <input class="form-check-input m-0 me-1 border-secondary" type="checkbox" name="combined_results[${index}][remark_ids][]" value="${rem.id}" id="rem_${index}_${rem.id}" ${isChecked} style="width: 14px; height: 14px; cursor:pointer;">
                    <label class="form-check-label" for="rem_${index}_${rem.id}" style="cursor:pointer;">
                        <span class="badge bg-${rem.badge_color} py-0 px-1" style="font-size: 0.65rem;">${rem.code}</span>
                    </label>
                </div>
            `;
        });
        remarkCheckboxes += `</div>`;

        return `
        <tr class="${rowClass}">
            <td class="align-middle">
                <input type="hidden" name="combined_results[${index}][history_id]" value="${valId}">
                <input type="hidden" name="combined_results[${index}][discipline_id]" value="${discId}">
                ${label}
                ${!discId ? '<br><small class="text-danger">Belum ada di database</small>' : ''}
            </td>
            <td>
                <input type="text" name="combined_results[${index}][result_mark]" class="form-control form-control-sm border-primary fw-bold" placeholder="${placeholder}" value="${valMark}" ${isMainEvent ? 'required' : ''}>
                ${remarkCheckboxes}
            </td>
            <td class="align-top pt-3">
                <input type="number" step="0.1" name="combined_results[${index}][wind]" class="form-control form-control-sm" placeholder="+0.0" value="${valWind}">
            </td>
            <td class="align-top pt-3">
                <select name="combined_results[${index}][round_type]" class="form-select form-select-sm">
                    <option value="F" ${valRound.includes('F') ? 'selected' : ''}>Final</option>
                    <option value="CE" ${valRound.includes('CE') ? 'selected' : ''}>CE</option>
                </select>
            </td>
            <td class="align-top pt-3">
                <input type="number" name="combined_results[${index}][place]" class="form-control form-control-sm text-center" placeholder="#" value="${valPlace}">
            </td>
            <td class="align-top pt-3">
                <input type="number" name="combined_results[${index}][score]" class="form-control form-control-sm text-success fw-bold" placeholder="Pts" value="${valScore}">
            </td>
        </tr>
        `;
    }

    function checkCombinedEvents() {
        let selectedDiscName = $('#discipline_id').find("option:selected").text().toUpperCase();
        let catText = $('#filter_category_id').find("option:selected").text().toUpperCase();

        if(selectedDiscName.includes('DECATHLON') || catText.includes('DASA LOMBA')) {
            renderCombinedTable('DECATHLON (Putra - 10 Lomba)', ['DECATHLON', '100 M', 'LONG JUMP', 'SHOT PUT', 'HIGH JUMP', '400 M', '110 M HURDLES', 'DISCUSS THROW', 'POLE VAULT', 'JAVELIN THROW', '1500 M']);
        } 
        else if(selectedDiscName.includes('HEPTATHLON') || catText.includes('SAPTA LOMBA')) {
            renderCombinedTable('HEPTATHLON (Putri - 7 Lomba)', ['HEPTATHLON', '100 M HURDLES', 'HIGH JUMP', 'SHOT PUT', '200 M', 'LONG JUMP', 'JAVELIN THROW', '800 M']);
        }
        else {
            $('#combined_input_section').hide();
            $('#ce_tbody').html(''); 
            $('#is_combined_submission').val('0');
            
            $('#single_input_section').fadeIn();
            $('#result_mark').attr('required', true); 
        }
    }

    function renderCombinedTable(title, eventList) {
        $('#single_input_section').hide();
        $('#result_mark').removeAttr('required');
        $('#is_combined_submission').val('1');
        $('#ce_title').html('<i class="fas fa-layer-group me-2"></i> Mode ' + (isEditMode ? 'Edit' : 'Input') + ' Massal: ' + title);

        let html = '';
        
        eventList.forEach((name, idx) => {
            let isMain = (idx === 0);
            let defRound = isMain ? 'F' : 'CE';
            
            let matchedData = null;
            
            if (isEditMode) {
                if (isMain) {
                    matchedData = mainHistoryData; 
                } else {
                    let cleanName = name.trim().toUpperCase();
                    let childDisc = allDisciplines.find(d => d.name.trim().toUpperCase() === cleanName && (d.gender === athleteGender || d.gender === 'mixed'));
                    
                    if(childDisc && relatedChildrenData.length > 0) {
                        matchedData = relatedChildrenData.find(c => String(c.discipline_id) === String(childDisc.id));
                    }
                }
            }

            html += buildRowHTML(idx, name, defRound, isMain, matchedData);
        });
        
        $('#ce_tbody').html(html);
        $('#combined_input_section').fadeIn();
    }
</script>
@endpush