@extends('layouts.app')

@section('subtitle', 'Edit Visi & Misi')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Edit Visi & Misi" 
        subtitle="Ubah visi resmi desa dan kelola butir-butir misi secara dinamis."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Informasi Desa' => route('informasi-desa.index'),
            'Visi & Misi' => route('informasi-desa.edit-visimisi')
        ]"
    >
        <x-slot name="buttons">
            <a href="{{ route('informasi-desa.index') }}" class="btn btn-light border mr-2">
                <i class="fas fa-arrow-left mr-1"></i> Batal
            </a>
        </x-slot>
    </x-page-header>

    <div class="card border-0 shadow-sm rounded-xl mb-4" style="border-radius: 12px; background: #ffffff;">
        <div class="card-body p-4">
            <form action="{{ route('informasi-desa.update-visimisi') }}" method="POST">
                @csrf
                @method('PUT')

                <div class="form-group mb-4">
                    <label for="visi" class="font-weight-bold text-secondary text-sm">Visi Desa <span class="text-danger">*</span></label>
                    <textarea name="visi" id="visi" rows="3" class="form-control @error('visi') is-invalid @enderror" placeholder="Tuliskan visi utama pembangunan desa..." required style="border-radius: 8px; resize: vertical;">{{ old('visi', $informasi->visi) }}</textarea>
                    @error('visi')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <label class="font-weight-bold text-secondary text-sm mb-0">Misi Desa (Dinamis)</label>
                        <button type="button" id="addMisiBtn" class="btn btn-sm btn-success font-weight-bold px-3" style="border-radius: 8px;">
                            <i class="fas fa-plus mr-1"></i> Tambah Misi
                        </button>
                    </div>

                    <div id="misiRepeaterContainer" class="d-flex flex-column" style="gap: 12px;">
                        @php
                            $misiList = old('misi_repeater', $informasi->misi_repeater ?: []);
                        @endphp

                        @if(count($misiList) > 0)
                            @foreach($misiList as $index => $item)
                                <div class="misi-row d-flex align-items-center bg-light p-2 rounded" style="gap: 10px; border-radius: 8px;">
                                    <span class="misi-index-badge badge badge-success d-flex align-items-center justify-content-center font-weight-bold" style="width: 28px; height: 28px; background-color: var(--primary-color);">
                                        {{ $index + 1 }}
                                    </span>
                                    <input type="text" name="misi_repeater[{{ $index }}][misi]" class="form-control" value="{{ $item['misi'] ?? '' }}" placeholder="Tuliskan butir misi..." required style="border-radius: 6px;">
                                    
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-outline-secondary btn-move-up"><i class="fas fa-chevron-up"></i></button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary btn-move-down"><i class="fas fa-chevron-down"></i></button>
                                    </div>
                                    
                                    <button type="button" class="btn btn-sm btn-danger btn-remove-misi"><i class="fas fa-trash-alt"></i></button>
                                </div>
                            @endforeach
                        @else
                            <div class="misi-row d-flex align-items-center bg-light p-2 rounded" style="gap: 10px; border-radius: 8px;">
                                <span class="misi-index-badge badge badge-success d-flex align-items-center justify-content-center font-weight-bold" style="width: 28px; height: 28px; background-color: var(--primary-color);">
                                    1
                                </span>
                                <input type="text" name="misi_repeater[0][misi]" class="form-control" placeholder="Tuliskan butir misi..." required style="border-radius: 6px;">
                                
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary btn-move-up"><i class="fas fa-chevron-up"></i></button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary btn-move-down"><i class="fas fa-chevron-down"></i></button>
                                </div>
                                
                                <button type="button" class="btn btn-sm btn-danger btn-remove-misi"><i class="fas fa-trash-alt"></i></button>
                            </div>
                        @endif
                    </div>
                    @error('misi_repeater')
                        <div class="text-danger text-sm mt-2">{{ $message }}</div>
                    @enderror
                </div>

                <hr class="my-4" style="border-top: 1px solid #f1f5f9;">

                <!-- Submit Buttons -->
                <div class="text-right">
                    <a href="{{ route('informasi-desa.index') }}" class="btn btn-light border mr-2">Batal</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const repeaterContainer = document.getElementById('misiRepeaterContainer');
        const addMisiBtn = document.getElementById('addMisiBtn');

        function reindexMisiRows() {
            const rows = repeaterContainer.querySelectorAll('.misi-row');
            rows.forEach((row, index) => {
                const badge = row.querySelector('.misi-index-badge');
                badge.innerText = index + 1;

                const input = row.querySelector('input');
                input.name = `misi_repeater[${index}][misi]`;

                const btnMoveUp = row.querySelector('.btn-move-up');
                const btnMoveDown = row.querySelector('.btn-move-down');
                
                btnMoveUp.disabled = (index === 0);
                btnMoveDown.disabled = (index === rows.length - 1);
            });
        }

        addMisiBtn.addEventListener('click', function() {
            const rowCount = repeaterContainer.querySelectorAll('.misi-row').length;
            const newRow = document.createElement('div');
            newRow.className = 'misi-row d-flex align-items-center bg-light p-2 rounded';
            newRow.style.gap = '10px';
            newRow.style.borderRadius = '8px';
            newRow.innerHTML = `
                <span class="misi-index-badge badge badge-success d-flex align-items-center justify-content-center font-weight-bold" style="width: 28px; height: 28px; background-color: var(--primary-color);">
                    ${rowCount + 1}
                </span>
                <input type="text" name="misi_repeater[${rowCount}][misi]" class="form-control" placeholder="Tuliskan butir misi..." required style="border-radius: 6px;">
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-move-up"><i class="fas fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-move-down"><i class="fas fa-chevron-down"></i></button>
                </div>
                <button type="button" class="btn btn-sm btn-danger btn-remove-misi"><i class="fas fa-trash-alt"></i></button>
            `;
            repeaterContainer.appendChild(newRow);
            reindexMisiRows();
        });

        repeaterContainer.addEventListener('click', function(e) {
            const target = e.target;
            const btnRemove = target.closest('.btn-remove-misi');
            const btnUp = target.closest('.btn-move-up');
            const btnDown = target.closest('.btn-move-down');

            if (btnRemove) {
                const rowsCount = repeaterContainer.querySelectorAll('.misi-row').length;
                if (rowsCount <= 1) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Misi desa minimal harus diisi satu butir.',
                        confirmButtonColor: '#0F766E'
                    });
                    return;
                }
                const row = btnRemove.closest('.misi-row');
                row.remove();
                reindexMisiRows();
            }

            if (btnUp) {
                const row = btnUp.closest('.misi-row');
                const previous = row.previousElementSibling;
                if (previous) {
                    repeaterContainer.insertBefore(row, previous);
                    reindexMisiRows();
                }
            }

            if (btnDown) {
                const row = btnDown.closest('.misi-row');
                const next = row.nextElementSibling;
                if (next) {
                    repeaterContainer.insertBefore(next, row);
                    reindexMisiRows();
                }
            }
        });

        reindexMisiRows();
    });
</script>
@endpush