@extends('layout.layout')

@section('content')
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>🔗 Quick Links Configuration</h4>
        <button type="button" class="btn btn-primary" id="add-quick-link" onclick="addQuickLink()">
            ➕ Add New Link
        </button>
    </div>

    @include('components.alert')

    <div class="card shadow-sm">
        <div class="card-header bg-light">
            Manage Links
        </div>
        <div class="card-body">
            <form id="quick-links-form" action="{{ route('quick_links.saveAll') }}" method="POST">
                @csrf

                <div id="quick-links-container" class="mb-4">
                    {{-- Existing Quick Links --}}
                    @foreach($quickLinks as $link)
                    <div class="quick-link-item mb-3 p-2 border rounded bg-white">
                        <div class="row align-items-center">
                            <div class="col-md-5">
                                <input type="text" name="quick_links[{{ $link->id }}][name]" class="form-control" placeholder="Name (e.g., Google)" value="{{ $link->name }}">
                            </div>
                            <div class="col-md-5">
                                <input type="url" name="quick_links[{{ $link->id }}][link]" class="form-control" placeholder="Link (e.g., https://google.com)" value="{{ $link->link }}">
                            </div>
                            <div class="col-md-2 text-end">
                                <button type="button" class="btn btn-outline-danger" onclick="removeQuickLink(this)">🗑️</button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <div class="border-top pt-3">
                    <button class="btn btn-success btn-lg">💾 Save All Links</button>
                </div>
            </form>
        </div>
    </div>
</div>

<template id="quick-link-template">
    <div class="quick-link-item mb-3 p-2 border rounded bg-light">
        <div class="row align-items-center">
            <div class="col-md-5">
                <input type="text" name="quick_links[$$INDEX$$][name]" class="form-control" placeholder="Name (e.g., New Tool)">
            </div>
            <div class="col-md-5">
                <input type="url" name="quick_links[$$INDEX$$][link]" class="form-control" placeholder="Link (e.g., https://newtool.com)">
            </div>
            <div class="col-md-2 text-end">
                <button type="button" class="btn btn-outline-danger" onclick="removeQuickLink(this)">🗑️</button>
            </div>
        </div>
    </div>
</template>

<script>
let newLinkCounter = {{ $quickLinks->max('id') ?? 0 }} + 1;

    function addQuickLink() {
        const container = document.getElementById('quick-links-container');
        const template = document.getElementById('quick-link-template');
        if (!template) return;

        const clone = template.content.cloneNode(true);
        clone.querySelectorAll('input').forEach(input => {
            input.name = input.name.replace('$$INDEX$$', newLinkCounter);
        });

        container.appendChild(clone);
        newLinkCounter++;
    }

    function removeQuickLink(button) {
        const item = button.closest('.quick-link-item');
        if (item) item.remove();
    }
</script>

@endsection