@extends('layouts.admin.theme')
@section('content')
    <div class="container text-start pb-5 mb-5">
        @if($errors->any())
            <div class="alert alert-danger mb-4">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>
        @endif
        <div class="row mb-4">
            <div class="col text-start">
                <h3>Projetos e Ações - Guia de Áreas</h3>
            </div>
            <div class="col text-end d-flex justify-content-end">

                <button type="button" class="btn btn-light bg-mediumGray me-2"
                    onclick="window.location='{{ route('admin.projetosProgramas.index', $projetosListagemReturnQuery ?? []) }}'">
                    <i class="fa fa-list me-1"></i> Início
                </button>
            </div>
        </div>

        @include('admin.projetosProgramas.partials.steps', [
            'current' => 'areas',
            'project' => $project,
            'projetosListagemReturnQuery' => $projetosListagemReturnQuery ?? [],
        ])
        @include('components.projetosProgramas._stickyProjectHeader', ['project' => $project])
        @php
            $selectedOds = old('ods', $project->ods->pluck('id')->toArray());
        @endphp
        <form method="post" action="{{ route('admin.projetosProgramas.areas.store', $project->id) }}" class="text-start">
            @csrf
            @include('components.projetosProgramas._pp_listagem_context_hiddens', ['query' => $projetosListagemReturnQuery ?? []])
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label">Eixo</label>
                    <select name="eixo_id" id="eixo" class="form-select">
                        <option value="">--- Selecione ---</option>
                        @foreach($eixos as $e)
                            <option value="{{ $e->id }}" {{ old('eixo_id', $project->eixo_id) == $e->id ? 'selected' : '' }}>
                                {{ $e->nome }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Área</label>
                    <select name="area_id" id="area" class="form-select">
                        <option value="">--- Selecione ---</option>
                        @foreach($eixos as $e)
                            @foreach($e->areas as $a)
                                <option data-eixo="{{ $e->id }}" value="{{ $a->id }}" {{ old('area_id', $project->area_id) == $a->id ? 'selected' : '' }}>{{ $a->nome }}</option>
                            @endforeach
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="mt-4">
                <label class="form-label">ODS (Seleção múltipla)</label>
                <div class="ods-selector" data-ods-selector>
                    @foreach($ods as $o)
                        @php
                            $isChecked = in_array($o->id, $selectedOds ?? []);
                            $codigo = str_pad($o->codigo, 2, '0', STR_PAD_LEFT);
                            $imagePath = asset("pmar/assets/img/ods/ods-{$codigo}.png");
                        @endphp
                        <label class="ods-card">
                            <input class="visually-hidden" type="checkbox" name="ods[]" value="{{ $o->id }}" {{ $isChecked ? 'checked' : '' }}>
                            <img src="{{ $imagePath }}" alt="ODS {{ $codigo }}" loading="lazy">
                            <span>ODS {{ $codigo }}</span>
                        </label>
                    @endforeach
                </div>
            </div>
            <div class="text-end mt-4 d-flex gap-3">
                <button type="submit" class="btn btn-green">
                    <i class="fa fa-arrow-right me-1"></i> Salvar e Prosseguir
                </button>
            </div>
        </form>
        @once
            <style>
                .ods-selector {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                    gap: .75rem;
                }

                .ods-card {
                    border: 1px solid #e4e7ec;
                    border-radius: .75rem;
                    padding: .75rem;
                    text-align: center;
                    cursor: pointer;
                    background-color: #fff;
                    transition: border-color .2s ease, box-shadow .2s ease;
                }

                .ods-card img {
                    width: 64px;
                    height: 64px;
                    object-fit: contain;
                    filter: grayscale(100%);
                    transition: filter .2s ease, transform .2s ease;
                }

                .ods-card span {
                    display: block;
                    margin-top: .5rem;
                    font-weight: 600;
                    color: #475467;
                }

                .ods-card input:checked+img {
                    filter: none;
                    transform: scale(1.05);
                }

                .ods-card input {
                    display: none;
                }

                .ods-card input:checked~span {
                    color: #0d6efd;
                }

                .ods-card:hover {
                    border-color: #0d6efd;
                    box-shadow: 0 0 0 2px rgba(13, 110, 253, .15);
                }
            </style>
        @endonce
        <script>
            window.addEventListener('load', function () {
                const eixoSelect = document.getElementById('eixo');
                const areaSelect = document.getElementById('area');

                function updateAreas() {
                    const eixo = eixoSelect.value;
                    Array.from(areaSelect.options).forEach(option => {
                        if (!option.value) {
                            option.hidden = false;
                            return;
                        }
                        option.hidden = eixo && option.getAttribute('data-eixo') !== eixo;
                    });
                    if (areaSelect.selectedOptions.length && areaSelect.selectedOptions[0].hidden) {
                        areaSelect.value = '';
                    }
                }

                eixoSelect.addEventListener('change', updateAreas);
                updateAreas();
            });
        </script>

    </div>
@endsection