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

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title">Tambah Pelatih Baru</h3>
            <a href="{{ route('admin.coaches.index') }}" class="btn btn-secondary btn-sm">Kembali</a>
        </div>
        
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong><i class="fas fa-exclamation-triangle"></i> Gagal Menyimpan!</strong>
                    <br>Mohon periksa kembali inputan Anda di semua Tab:
                    <ul class="mb-0 ps-3 mt-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('admin.coaches.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <ul class="nav nav-tabs mb-4" id="coachTab" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" id="biodata-tab" data-bs-toggle="tab" data-bs-target="#biodata" type="button">
                            <i class="fas fa-user me-1"></i> 1. Biodata Pribadi
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" id="alamat-tab" data-bs-toggle="tab" data-bs-target="#alamat" type="button">
                            <i class="fas fa-map-marker-alt me-1"></i> 2. Alamat & Domisili
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" id="dokumen-tab" data-bs-toggle="tab" data-bs-target="#dokumen" type="button">
                            <i class="fas fa-file-alt me-1"></i> 3. Dokumen & Sertifikasi
                        </button>
                    </li>
                </ul>

                <div class="tab-content" id="coachTabContent">
                    @include('admin.coaches._form-biodata')
                    @include('admin.coaches._form-alamat')
                    @include('admin.coaches._form-dokumen')
                </div>
            </form>
        </div>
    </div>
</div>

{{-- SCRIPT JAVASCRIPT --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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]);
        }
    }

    let specIndex = 0;
    
    const categories = @json($categories ?? []); 
    
    const savedDisciplines = @json(isset($coach) ? $coach->disciplines->groupBy('competition_category_id')->map(function($items) {
        return $items->pluck('id');
    }) : []);

    function addSpecializationRow(selectedCatId = null, selectedDiscs = []) {
        let categoryOptions = '<option value="">-- Pilih Spesialisasi --</option>';
        categories.forEach(cat => {
            let isSelected = (selectedCatId && cat.id == selectedCatId) ? 'selected' : '';
            categoryOptions += `<option value="${cat.id}" ${isSelected}>${cat.name}</option>`;
        });

        let html = `
            <tr id="row-spec-${specIndex}">
                {{-- KOLOM 1: KATEGORI --}}
                <td style="vertical-align: top;">
                    <select class="form-select category-select mb-1 form-select-sm" 
                            id="select-cat-${specIndex}" 
                            onchange="loadDisciplines(this, ${specIndex})" 
                            required>
                        ${categoryOptions}
                    </select>
                    <div class="discipline-loading-${specIndex} text-primary d-none small mt-1">
                        <i class="fas fa-spinner fa-spin"></i> Memuat...
                    </div>
                </td>

                {{-- KOLOM 2: NOMOR PUTRA --}}
                <td style="vertical-align: top; background-color: #f8f9fa;">
                    <div id="container-male-${specIndex}" class="d-flex flex-column gap-1">
                        <em class="text-muted small">- Pilih Kategori -</em>
                    </div>
                </td>

                {{-- KOLOM 3: NOMOR PUTRI --}}
                <td style="vertical-align: top;">
                    <div id="container-female-${specIndex}" class="d-flex flex-column gap-1">
                        <em class="text-muted small">- Pilih Kategori -</em>
                    </div>
                </td>

                {{-- KOLOM 4: HAPUS --}}
                <td class="text-center" style="vertical-align: middle;">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeSpecializationRow(${specIndex})">
                        <i class="fa fa-times"></i>
                    </button>
                </td>
            </tr>
        `;
        
        $('#specialization-wrapper').append(html);
        
        if(selectedCatId) {
            loadDisciplines({value: selectedCatId}, specIndex, selectedDiscs);
        }
        specIndex++;
    }

    function loadDisciplines(selectElement, index, preSelectedIds = []) {
        let categoryId = selectElement.value;
        let containerMale = $(`#container-male-${index}`);
        let containerFemale = $(`#container-female-${index}`);
        let loading = $(`.discipline-loading-${index}`);

        containerMale.html('');
        containerFemale.html('');
        
        if (categoryId) {
            loading.removeClass('d-none'); 

            $.get('/admin/coaches/get-disciplines/' + categoryId, function(data) {
                loading.addClass('d-none'); 

                if(data.length === 0) {
                    let emptyMsg = '<small class="text-danger">Tidak ada data.</small>';
                    containerMale.html(emptyMsg);
                    containerFemale.html(emptyMsg);
                    return;
                }

                let hasMale = false;
                let hasFemale = false;

                $.each(data, function(key, item) {
                    let isChecked = preSelectedIds.map(Number).includes(item.id) ? 'checked' : '';

                    let checkboxHtml = `
                        <div class="form-check m-0 p-0 mb-1">
                            <input class="form-check-input ms-1" type="checkbox" name="disciplines[]" value="${item.id}" id="disc-${index}-${item.id}" ${isChecked}>
                            <label class="form-check-label small cursor-pointer ms-1" for="disc-${index}-${item.id}">
                                <strong>${item.name}</strong> <span class="text-muted" style="font-size: 0.75rem;">(${item.code})</span>
                            </label>
                        </div>
                    `;

                    if(item.gender === 'male') {
                        containerMale.append(checkboxHtml);
                        hasMale = true;
                    } else if(item.gender === 'female') {
                        containerFemale.append(checkboxHtml);
                        hasFemale = true;
                    } else {
                        let mixedHtml = checkboxHtml.replace('<strong>', '<strong class="text-purple">');
                        containerMale.append(mixedHtml); 
                        containerFemale.append(mixedHtml.replace(`id="disc-`, `id="disc-f-`)); // Ubah ID agar unik di DOM
                        hasMale = true; 
                        hasFemale = true;
                    }
                });

                if(!hasMale) containerMale.html('<small class="text-muted">-</small>');
                if(!hasFemale) containerFemale.html('<small class="text-muted">-</small>');

            }).fail(function() {
                loading.addClass('d-none');
                alert('Gagal mengambil data nomor pertandingan.');
            });

        } else {
            let msg = '<em class="text-muted small">- Pilih Kategori -</em>';
            containerMale.html(msg);
            containerFemale.html(msg);
        }
    }

    function removeSpecializationRow(index) {
        $('#row-spec-' + index).remove();
    }

    let docIndex = 0;
    const savedDocuments = @json($coach->documents ?? []);

    function addDocumentRow(data = null) {
        let valName = data ? data.document_name : '';
        let valOrg = data ? (data.organizer || '') : '';
        let valDate = data ? (data.valid_until || '') : ''; 
        
        let fileHtml = '';
        if (data && data.file_path) {
            fileHtml = `
                <div class="mb-1">
                    <a href="/storage/${data.file_path}" target="_blank" class="btn btn-sm btn-info text-white">
                        <i class="fa fa-file-download"></i> Lihat
                    </a>
                </div>
                <input type="file" name="documents[${docIndex}][file]" class="form-control form-control-sm">
            `;
        } else {
            fileHtml = `<input type="file" name="documents[${docIndex}][file]" class="form-control">`;
        }

        let html = `
            <tr id="row-doc-${docIndex}">
                <td>
                    <select name="documents[${docIndex}][type]" class="form-select" id="doc-type-${docIndex}">
                        <option value="KTP">KTP</option>
                        <option value="Ijazah">Ijazah Terakhir</option>
                        <option value="Sertifikat">Sertifikat Pelatih</option>
                        <option value="Piagam">Piagam Penghargaan</option>
                        <option value="Lainnya">Lainnya</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="documents[${docIndex}][name]" class="form-control mb-1" value="${valName}" placeholder="Nama Dokumen">
                    <input type="text" name="documents[${docIndex}][organizer]" class="form-control form-control-sm" value="${valOrg}" placeholder="Penerbit">
                </td>
                <td>
                    <input type="date" name="documents[${docIndex}][valid_until]" class="form-control" value="${valDate}">
                </td>
                <td>${fileHtml}</td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeDocumentRow(${docIndex})"><i class="fa fa-trash"></i></button>
                </td>
            </tr>
        `;
        $('#document-wrapper').append(html);

        if(data && data.document_type) {
            $(`#doc-type-${docIndex}`).val(data.document_type);
        }
        docIndex++;
    }

    function removeDocumentRow(index) {
        if(confirm('Hapus dokumen ini?')) {
            $('#row-doc-' + index).remove();
        }
    }

    $(document).ready(function() {
        let hasSpecData = false;
        
        if (!Array.isArray(savedDisciplines)) {
            Object.keys(savedDisciplines).forEach(function(catId) {
                let discIds = savedDisciplines[catId];
                addSpecializationRow(catId, discIds);
                hasSpecData = true;
            });
        }
        
        if(!hasSpecData) addSpecializationRow();

        if(savedDocuments.length > 0) {
            savedDocuments.forEach(function(doc) {
                addDocumentRow(doc);
            });
        } else {
        }

        $('#province').change(function() {
            let provinceCode = $(this).val();
            $('#city').html('<option value="">Memuat...</option>').prop('disabled', true);
            $('#district').html('<option value="">-- Pilih Kota Dulu --</option>').prop('disabled', true);
            $('#village').html('<option value="">-- Pilih Kecamatan Dulu --</option>').prop('disabled', true);

            if (provinceCode) {
                $.get('/admin/wilayah/cities/' + provinceCode, function(data) {
                    $('#city').html('<option value="">-- Pilih Kota --</option>');
                    $.each(data, function(key, value) {
                        $('#city').append('<option value="'+ value.kode +'">' + value.nama + '</option>');
                    });
                    $('#city').prop('disabled', false);
                });
            }
        });
        
        $('#city').change(function() {
            let cityCode = $(this).val();
            $('#district').html('<option value="">Memuat...</option>').prop('disabled', true);
            if (cityCode) {
                $.get('/admin/wilayah/districts/' + cityCode, function(data) {
                    $('#district').html('<option value="">-- Pilih Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#district').append('<option value="'+ value.kode +'">' + value.nama + '</option>');
                    });
                    $('#district').prop('disabled', false);
                });
            }
        });

        $('#district').change(function() {
            let districtCode = $(this).val();
            $('#village').html('<option value="">Memuat...</option>').prop('disabled', true);
            if (districtCode) {
                $.get('/admin/wilayah/villages/' + districtCode, function(data) {
                    $('#village').html('<option value="">-- Pilih Desa --</option>');
                    $.each(data, function(key, value) {
                        $('#village').append('<option value="'+ value.kode +'">' + value.nama + '</option>');
                    });
                    $('#village').prop('disabled', false);
                });
            }
        });
    });
</script>
@endsection