@extends('zarzadzanie.dzialy.layout')

@section('dzialy-content')
    <h3 class="mb-4">Edytuj strukturę działów</h3>

    @if($dzialy->isEmpty())
        <p>Brak zdefiniowanych działów.</p>
    @else
        <ul class="list-group">
            @foreach($dzialy as $dzial)
                @include('zarzadzanie.dzialy.partials.dzial_edit', ['dzial' => $dzial, 'wszystkieDzialy' => $wszystkieDzialy])
            @endforeach
        </ul>
    @endif

    <!-- Modal -->
    <div class="modal fade" id="editDzialModal" tabindex="-1" aria-labelledby="editDzialModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="modal-content-placeholder">
                <!-- Treść formularza ładowana przez JS -->
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .list-group-item > ul {
        margin-left: 1.5rem;
        margin-top: 0.5rem;
    }
    .deleted {
        opacity: 0.5;
        filter: grayscale(0.4);
        pointer-events: none;
    }
    .deleted .btn {
        pointer-events: all;
    }
</style>
@endpush

@push('scripts')
<script>
    function openEditModal(id) {
        fetch(`{{ url('/zarzadzanie/dzialy') }}/${id}/edit`)
            .then(res => res.text())
            .then(html => {
                document.getElementById('modal-content-placeholder').innerHTML = html;
                new bootstrap.Modal(document.getElementById('editDzialModal')).show();
            });
    }
</script>
@endpush