@section('page-content')
<div class="page-wrapper">
    <div class="page-content">
        <form method="POST" action="">
            @csrf
            <div class="card">
                <div class="card-body">
                    <div class="d-lg-flex align-items-center mb-2 gap-3">
                        <div class="position-relative">
                            <div class="breadcrumb-title pe-3">Adicionar Página</div>
                        </div>
                    </div>
                    <hr style="width:100%; border-top:1px solid #ddd; margin-top:0px; margin-bottom:25px;">
                    <div>
                        <div class="mb-3 row align-items-center">
                            <label for="active" class="col-5 col-form-label text-start pe-3">Página Activa</label>
                            <div class="col-7">
                                <div class="form-check form-switch d-flex align-items-center" style="transform:scale(1.3); transform-origin:left center; margin-left:3rem;">
                                    <input class="form-check-input" type="checkbox" id="active" name="active">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row align-items-center">
                            <label for="hide" class="col-5 col-form-label text-start pe-3">Página Visível</label>
                            <div class="col-7">
                                <div class="form-check form-switch d-flex align-items-center" style="transform:scale(1.3); transform-origin:left center; margin-left:3rem;">
                                    <input class="form-check-input" type="checkbox" id="hide" name="hide">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row align-items-center">
                            <label for="full_page" class="col-5 col-form-label text-start pe-3">Página Completa</label>
                            <div class="col-7">
                                <div class="form-check form-switch d-flex align-items-center" style="transform:scale(1.3); transform-origin:left center; margin-left:3rem;">
                                    <input class="form-check-input" type="checkbox" id="full_page" name="full_page">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row align-items-center">
                            <label for="filter" class="col-5 col-form-label text-start pe-3">Filtro</label>
                            <div class="col-7">
                                <div class="form-check form-switch d-flex align-items-center" style="transform:scale(1.3); transform-origin:left center; margin-left:3rem;">
                                    <input class="form-check-input" type="checkbox" id="filter" name="filter">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row align-items-center">
                            <label for="group" class="col-5 col-form-label text-start pe-3">Tipo</label>
                            <div class="col-7">
                                <select id="group" name="group" class="form-select w-auto" style="min-width:70px; max-width:120px; margin-left:3rem;">
                                    <option value="5">Notícias</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row align-items-center">
                        <label for="columns" class="col-5 col-form-label text-start pe-3">Colunas</label>
                            <div class="col-7">
                                <select id="columns" name="columns" class="form-select w-auto" style="min-width:70px; max-width:90px; margin-left:3rem;">
                                    <option value="1">2</option>
                                    <option value="2">3</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row align-items-center">
                            <label for="pos" class="col-5 col-form-label text-start pe-3">Adicionar depois de</label>
                            <div class="col-7">
                                <select id="pos" name="pos" class="form-select w-auto" style="min-width:70px; max-width:90px; margin-left:3rem;">
                                    @foreach($Pages as $page)
                                        <option value="{{ $page->pos }}">{{ $page->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div id="stepper1" class="bs-stepper">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-lg-flex flex-lg-row align-items-lg-center justify-content-lg-between" role="tablist">
                                @foreach($languages as $i => $lang)
                                    <div class="step" data-target="#test-l-{{ $i+1 }}">
                                        <div class="step-trigger" role="tab" id="stepper1trigger{{ $i+1 }}" aria-controls="test-l-{{ $i+1 }}">
                                            <div class="bs-stepper-circle">{{ $i+1 }}</div>
                                            <div>
                                                <h5 class="mb-0 steper-title">{{ $lang->name }}</h5>
                                            </div>
                                        </div>
                                    </div>
                                    @if(!$loop->last)
                                        <div class="bs-stepper-line"></div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        <div class="card-body">    
                            <div class="bs-stepper-content">
                                @foreach($languages as $i => $lang)
                                    <div id="test-l-{{ $i+1 }}" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger{{ $i+1 }}">
                                        {{-- Título por idioma --}}
                                        <div class="mb-3 row align-items-center">
                                            <label for="title_{{ $lang->id }}" class="col-5 col-form-label text-start pe-3">
                                                Título ({{ $lang->name }})
                                            </label>
                                            <div class="col-7">
                                                <input type="text" id="title_{{ $lang->id }}" name="title[{{ $lang->id }}]" class="form-control radius-30" placeholder="Título em {{ $lang->name }}">
                                            </div>
                                        </div>

                                        {{-- Descrição por idioma --}}
                                        <div class="mb-3 row align-items-center">
                                            <label for="desc_{{ $lang->id }}" class="col-5 col-form-label text-start pe-3">
                                                Descrição ({{ $lang->name }})
                                            </label>
                                            <div class="col-7">
                                                <input type="text" id="desc_{{ $lang->id }}" name="description[{{ $lang->id }}]" class="form-control radius-30" placeholder="Descrição em {{ $lang->name }}">
                                            </div>
                                        </div>

                                        {{-- navegação Next / Previous / Salvar --}}
                                        <div class="d-flex align-items-center gap-3 mt-4">
                                            @if($i > 0)
                                                <a class="btn btn-outline-light px-4" onclick="stepper1.previous()">
                                                    <i class='bx bx-left-arrow-alt me-2'></i>Anterior
                                                </a>
                                            @endif

                                            @if(!$loop->last)
                                                <a class="btn btn-light px-4" onclick="stepper1.next()">
                                                    Próximo<i class='bx bx-right-arrow-alt ms-2'></i>
                                                </a>
                                            @else
                                                <button type="submit" class="btn btn-success px-4 save-button">
                                                    Salvar
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('page-scripts')

<script>
    // torna a instância global para o seu onclick="stepper1.next()"
    window.stepper1 = new Stepper(
        document.querySelector('#stepper1'),
        { linear: false }
    );

    function ensureErrorBox() {
      if (!document.getElementById('save-portfolio-error')) {
        $('#btn-guardar-portfolio')
          .parent()
          .append('<div id="save-portfolio-error" class="small text-danger mt-2 d-none"></div>');
      }
    }

    function showError(msg) {
      ensureErrorBox();
      $('#save-portfolio-error').removeClass('d-none').text(msg);
    }

    function hideError() {
      ensureErrorBox();
      $('#save-portfolio-error').addClass('d-none').text('');
    }

    function markInvalid($el) {
      $el.addClass('is-invalid');
    }

    function clearInvalid($el) {
      $el.removeClass('is-invalid');
    }

    $('.save-button')
        .off('click.save')
        .on('click.save', function (e) {
                e.preventDefault();
                
                const $btn = $(this);

                hideError();


                // Obter langs de forma segura
                const langs = {{ Js::from($languages) }};
                
                // limpar estados anteriores
                langs.forEach(lang => clearInvalid($(`#title_${lang.id}`)));
                langs.forEach(lang => clearInvalid($(`#desc_${lang.id}`)));

                const title = {};
                const desc = {};
                langs.forEach(lang => {
                    const $t = $(`#title_${lang.id}`);
                    const $d = $(`#desc_${lang.id}`);
                    const vt = ($t.val() || '').trim();
                    const vd = ($d.val() || '').trim();
                    title[lang.id] = vt;
                    desc[lang.id] = vd;

                    if (!vt) {
                        markInvalid($t);
                        firstInvalid = firstInvalid || $t[0];
                    }
                    if (!vd) {
                        markInvalid($d);
                        firstInvalid = firstInvalid || $d[0];
                    }
                });

                const payload = {
                    active: $('#active').is(':checked') ? 1 : 0,
                    hide: $('#hide').is(':checked') ? 0 : 1,
                    full_page: $('#full_page').is(':checked') ? 1 : 0,
                    filter: $('#filter').is(':checked') ? 1 : 0,
                    group: $('#group').val(),
                    columns: $('#columns').val(),
                    pos: $('#pos').val(),
                    title: title,
                    desc: desc
                };

                $btn.prop('disabled', true);


                $.ajax({
                    url: '{{ url("api/backoffice/pages/create-page") }}',
                    method: 'POST',
                    data: payload,
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                }).done((value) => {
                    $.get(apiBaseUrl + '/api/backoffice/edit-pages', { site_name: window.location.hostname }, function(data) {
                        $('#conteudo-central').html(data);
                        $('.btn-flag-edit-page').removeClass('active');
                        $('.btn-flag-edit-page[data-lang=pt]').addClass('active');
                    });
                }).fail((xhr) => {
                    console.error('Falha ao guardar:', xhr.status, xhr.responseText);
                    showError('Não foi possível guardar. Tente novamente.');
                }).always(() => {
                    $btn.prop('disabled', false);
                });
    });
</script>
@endsection