@php
    $footer = \App\Services\FooterSettingsService::get();
@endphp

<label class="form-label fw-semibold">Footer About Text</label>
<textarea name="footer_text" class="form-control mb-3" rows="3" placeholder="Short description shown in footer (optional)…">{{ old('footer_text', $setting->footer_text) }}</textarea>
<small class="text-muted d-block mb-4">Contact info (email, phone, address) comes from <a href="{{ route('admin.settings.general', ['tab' => 'general']) }}">General</a> tab. Social icons from <a href="{{ route('admin.settings.general', ['tab' => 'social']) }}">Social Media</a>.</small>

<div class="row g-3 mb-3">
    <div class="col-md-6">
        <label class="form-label fw-semibold">Column 1 Title</label>
        <input type="text" name="menu_title" class="form-control" value="{{ old('menu_title', $footer['menu_title'] ?? 'Footer Menu') }}">
    </div>
    <div class="col-md-6">
        <label class="form-label fw-semibold">Column 2 Title</label>
        <input type="text" name="links_title" class="form-control" value="{{ old('links_title', $footer['links_title'] ?? 'Important Links') }}">
    </div>
</div>

<div class="card border-0 bg-light mb-3">
    <div class="card-header bg-white fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="fas fa-link me-1 text-success"></i> Footer Menu Links</span>
        <button type="button" class="btn btn-sm btn-outline-success" onclick="addFooterLinkRow('menu')"><i class="fas fa-plus"></i> Add</button>
    </div>
    <div class="card-body p-2" id="footerMenuLinks">
        @foreach(old('menu_links', $footer['menu_links'] ?? []) as $i => $link)
        <div class="row g-2 mb-2 footer-link-row">
            <div class="col-md-5">
                <input type="text" name="menu_links[{{ $i }}][label]" class="form-control form-control-sm" placeholder="Label" value="{{ $link['label'] ?? '' }}">
            </div>
            <div class="col-md-6">
                <input type="text" name="menu_links[{{ $i }}][url]" class="form-control form-control-sm" placeholder="/page/privacy-policy or https://..." value="{{ $link['url'] ?? '' }}">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="this.closest('.footer-link-row').remove()"><i class="fas fa-times"></i></button>
            </div>
        </div>
        @endforeach
    </div>
</div>

<div class="card border-0 bg-light mb-3">
    <div class="card-header bg-white fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="fas fa-external-link-alt me-1 text-success"></i> Important Links</span>
        <button type="button" class="btn btn-sm btn-outline-success" onclick="addFooterLinkRow('important')"><i class="fas fa-plus"></i> Add</button>
    </div>
    <div class="card-body p-2" id="footerImportantLinks">
        @foreach(old('important_links', $footer['important_links'] ?? []) as $i => $link)
        <div class="row g-2 mb-2 footer-link-row">
            <div class="col-md-5">
                <input type="text" name="important_links[{{ $i }}][label]" class="form-control form-control-sm" placeholder="Label" value="{{ $link['label'] ?? '' }}">
            </div>
            <div class="col-md-6">
                <input type="text" name="important_links[{{ $i }}][url]" class="form-control form-control-sm" placeholder="/order/track or /blog" value="{{ $link['url'] ?? '' }}">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="this.closest('.footer-link-row').remove()"><i class="fas fa-times"></i></button>
            </div>
        </div>
        @endforeach
    </div>
</div>

<div class="card border-0 bg-light mb-3">
    <div class="card-header bg-white fw-semibold">
        <i class="fas fa-copyright me-1 text-success"></i> Copyright Bar (Bottom)
    </div>
    <div class="card-body">
        <label class="form-label fw-semibold">Copyright Text</label>
        <input type="text" name="copyright_text" class="form-control"
               value="{{ old('copyright_text', $footer['copyright_text'] ?? '') }}"
               placeholder="© {year} {name}. All rights reserved.">
        <small class="text-muted d-block mt-2">
            Variables: <code>{year}</code> = current year, <code>{name}</code> = store name.
            Empty রাখলে default text use হবে।
        </small>
    </div>
</div>

<div class="card border-success bg-light">
    <div class="card-body py-3">
        <div class="row g-3">
            <div class="col-md-6">
                <div class="fw-semibold small mb-1"><i class="fas fa-palette me-1 text-success"></i> Footer Colors</div>
                <p class="text-muted small mb-2">Background, text, link colors — Theme Colors থেকে change করুন।</p>
                <a href="{{ route('admin.settings.theme.colors') }}#footer" class="btn btn-sm btn-success">
                    <i class="fas fa-sliders-h me-1"></i> Open Theme Color Settings
                </a>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var menuIdx = {{ count(old('menu_links', $footer['menu_links'] ?? [])) }};
    var impIdx = {{ count(old('important_links', $footer['important_links'] ?? [])) }};

    window.addFooterLinkRow = function (type) {
        var box = document.getElementById(type === 'menu' ? 'footerMenuLinks' : 'footerImportantLinks');
        var idx = type === 'menu' ? menuIdx++ : impIdx++;
        var prefix = type === 'menu' ? 'menu_links' : 'important_links';
        var row = document.createElement('div');
        row.className = 'row g-2 mb-2 footer-link-row';
        row.innerHTML =
            '<div class="col-md-5"><input type="text" name="' + prefix + '[' + idx + '][label]" class="form-control form-control-sm" placeholder="Label"></div>' +
            '<div class="col-md-6"><input type="text" name="' + prefix + '[' + idx + '][url]" class="form-control form-control-sm" placeholder="/page/slug or URL"></div>' +
            '<div class="col-md-1"><button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="this.closest(\'.footer-link-row\').remove()"><i class="fas fa-times"></i></button></div>';
        box.appendChild(row);
    };
})();
</script>
@endpush