@extends('layouts.app')

@section('title', 'Settings — Footer Menus')
@section('page-title', 'Footer Menus')

@section('content')

<div class="mb-4">
    <h4 class="fw-bold mb-0">Footer Menus</h4>
    <div class="text-muted small">Manage the footer's text content, the two link columns, and the bottom-bar links. Column count is fixed to match the site design.</div>
</div>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <h6 class="fw-bold mb-3">Footer Content</h6>
        <form action="{{ route('admin.settings.footer-menus.content.update') }}" method="POST">
            @csrf @method('PATCH')

            <div class="mb-3">
                <label class="form-label fw-medium" for="footer_cta_eyebrow">CTA Eyebrow</label>
                <input type="text" name="footer_cta_eyebrow" id="footer_cta_eyebrow"
                       class="form-control @error('footer_cta_eyebrow') is-invalid @enderror"
                       value="{{ old('footer_cta_eyebrow', $footerContent['footer_cta_eyebrow']) }}" maxlength="60">
                <div class="form-text">Small label shown above the heading, e.g. "Ready when you are".</div>
                @error('footer_cta_eyebrow')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium" for="footer_cta_heading">CTA Heading</label>
                <input type="text" name="footer_cta_heading" id="footer_cta_heading"
                       class="form-control @error('footer_cta_heading') is-invalid @enderror"
                       value="{{ old('footer_cta_heading', $footerContent['footer_cta_heading']) }}" maxlength="150">
                @error('footer_cta_heading')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium" for="footer_cta_subtext">CTA Subtext</label>
                <textarea name="footer_cta_subtext" id="footer_cta_subtext"
                          class="form-control @error('footer_cta_subtext') is-invalid @enderror"
                          rows="2" maxlength="300">{{ old('footer_cta_subtext', $footerContent['footer_cta_subtext']) }}</textarea>
                @error('footer_cta_subtext')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium" for="footer_cta_button_text">CTA Button Text</label>
                <input type="text" name="footer_cta_button_text" id="footer_cta_button_text"
                       class="form-control @error('footer_cta_button_text') is-invalid @enderror"
                       value="{{ old('footer_cta_button_text', $footerContent['footer_cta_button_text']) }}" maxlength="40">
                <div class="form-text">The button still opens the enquiry form — only its label changes.</div>
                @error('footer_cta_button_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium" for="footer_about_text">About Text</label>
                <textarea name="footer_about_text" id="footer_about_text"
                          class="form-control @error('footer_about_text') is-invalid @enderror"
                          rows="3" maxlength="500">{{ old('footer_about_text', $footerContent['footer_about_text']) }}</textarea>
                <div class="form-text">Shown next to the logo in the footer's first column.</div>
                @error('footer_about_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium" for="footer_copyright_text">Copyright Text</label>
                <input type="text" name="footer_copyright_text" id="footer_copyright_text"
                       class="form-control @error('footer_copyright_text') is-invalid @enderror"
                       value="{{ old('footer_copyright_text', $footerContent['footer_copyright_text']) }}" maxlength="150">
                <div class="form-text">The year is added automatically — enter just the text after it, e.g. "{{ $footerContent['footer_copyright_text'] }}".</div>
                @error('footer_copyright_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg me-1"></i> Save Footer Content
            </button>
        </form>
    </div>
</div>

@foreach($columnGroups as $group)
    @include('settings.footer-menus._link-group', ['group' => $group, 'showTitleEditor' => true, 'contentPages' => $contentPages])
@endforeach

@if($bottomGroup)
    <h6 class="fw-bold mb-2 mt-4">Bottom Bar Links</h6>
    <div class="text-muted small mb-3">Shown next to the copyright line at the very bottom of the footer.</div>
    @include('settings.footer-menus._link-group', ['group' => $bottomGroup, 'showTitleEditor' => false, 'contentPages' => $contentPages])
@endif

@push('scripts')
<script>
(function () {
    document.querySelectorAll('.modal').forEach(function (modalEl) {
        modalEl.querySelectorAll('.link-type-radio').forEach(function (radio) {
            radio.addEventListener('change', function () {
                modalEl.querySelectorAll('.link-type-field').forEach(function (field) {
                    field.classList.toggle('d-none', field.dataset.type !== radio.value);
                });
            });
        });
    });

    document.querySelectorAll('.edit-link-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var modalEl = document.querySelector(btn.getAttribute('data-bs-target'));
            if (!modalEl) return;

            modalEl.querySelector('.edit-label').value = btn.dataset.label;
            modalEl.querySelector('.edit-url').value = btn.dataset.url === 'null' ? '' : (btn.dataset.url || '');
            modalEl.querySelector('.edit-content-page-id').value = btn.dataset.contentPageId === 'null' ? '' : (btn.dataset.contentPageId || '');
            modalEl.querySelector('.edit-link-form').action = '{{ url("admin/settings/footer-menus/links") }}/' + btn.dataset.id;

            var isPage = btn.dataset.linkType === 'content_page';
            modalEl.querySelector('.edit-type-custom').checked = ! isPage;
            modalEl.querySelector('.edit-type-page').checked = isPage;
            modalEl.querySelectorAll('.link-type-field').forEach(function (field) {
                field.classList.toggle('d-none', field.dataset.type !== btn.dataset.linkType);
            });
        });
    });

    document.querySelectorAll('tbody[id^="sortable-footer-links-"]').forEach(function (tbody) {
        var dragging = null;
        tbody.querySelectorAll('tr[data-id]').forEach(function (r) { r.setAttribute('draggable', 'true'); });

        tbody.addEventListener('dragstart', function (e) {
            dragging = e.target.closest('tr[data-id]');
            if (dragging) dragging.style.opacity = '0.5';
        });
        tbody.addEventListener('dragover', function (e) {
            e.preventDefault();
            var target = e.target.closest('tr[data-id]');
            if (target && target !== dragging && dragging) {
                var mid = target.getBoundingClientRect().top + target.getBoundingClientRect().height / 2;
                tbody.insertBefore(dragging, e.clientY < mid ? target : target.nextSibling);
            }
        });
        tbody.addEventListener('dragend', function () {
            if (dragging) dragging.style.opacity = '';
            dragging = null;
            var ids = Array.from(tbody.querySelectorAll('tr[data-id]')).map(function (r) { return r.dataset.id; });
            fetch('{{ route("admin.settings.footer-menus.links.reorder") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
                body: JSON.stringify({ ids: ids }),
            });
        });
    });
}());
</script>
@endpush
@endsection