{{-- resources/views/social/create.blade.php --}}
@extends('layouts.app')

@section('content')
    <div class="max-w-3xl mx-auto mt-10 p-8 bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg">

        <!-- Breadcrumbs -->
        <nav class="text-gray-600 text-sm mb-4" aria-label="Breadcrumb">
            <ol class="flex">
                <li><a href="{{ route('dashboard') }}" class="text-indigo-600 hover:underline">Home</a></li>
                <span class="mx-2">/</span>
                <li class="text-gray-900 font-semibold">Social Links</li>
            </ol>
        </nav>

        <!-- Header Row: Title + Go Back -->
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-semibold text-gray-800">
                {{ $links ? 'Your Social Links' : 'Add Your Social Links' }}</h2>
            <a href="{{ route('dashboard') }}"
                class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg border">
                ← Go Back
            </a>
        </div>

        <!-- Success Message -->
        @if (session('success'))
            <div class="bg-green-100 text-green-800 p-3 rounded mb-6 text-center font-medium shadow-sm">
                {{ session('success') }}
            </div>
        @endif

        @php
            $defaultPlatforms = ['Facebook', 'Instagram', 'LinkedIn', 'GitHub', 'Portfolio', 'Twitter'];

            // Prepare default saved links
            $savedDefault = [];
            foreach ($defaultPlatforms as $platform) {
                $savedDefault[$platform] =
                    $links->first(function ($link) use ($platform) {
                        return strtolower(trim($link->platform)) === strtolower($platform);
                    })->url ?? '';
            }

            // Prepare custom links
            $customLinks = $links->filter(function ($link) use ($defaultPlatforms) {
                return !in_array(strtolower(trim($link->platform)), array_map('strtolower', $defaultPlatforms));
            });
        @endphp

        <!-- Form Start -->
        <form action="{{ route('social-links.store') }}" method="POST" id="socialForm" class="space-y-6">
            @csrf

            <!-- Default Social Fields -->
            @foreach ($defaultPlatforms as $platform)
                <div>
                    <label class="block font-medium text-gray-700 mb-1">{{ $platform }}</label>
                    <input type="url" name="social_links[]"
                        placeholder="https://{{ strtolower($platform) }}.com/yourprofile"
                        class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                        value="{{ $savedDefault[$platform] }}">
                </div>
            @endforeach

            <!-- Dynamic Custom Links Section -->
            <div id="extra-links" class="space-y-4 mt-4">
                @foreach ($customLinks as $index => $link)
                    <div class="flex gap-4 items-center">
                        <input type="text" name="custom_names[]" placeholder="Platform Name (e.g. YouTube, Behance)"
                            class="w-1/2 border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                            value="{{ $link->platform }}" required>
                        <input type="url" name="custom_links[]" placeholder="https://example.com/yourprofile"
                            class="w-1/2 border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                            value="{{ $link->url }}" required>
                        <button type="button"
                            class="remove bg-red-500 text-white px-3 py-1 rounded-lg hover:bg-red-600">X</button>
                    </div>
                @endforeach
            </div>


            <!-- Submit Button -->
            <div>
                <button type="submit"
                    class="w-full bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-green-700 transition duration-300 shadow-md">
                    {{ count($customLinks) > 0 ? 'Update Links' : 'Save Links' }}
                </button>
            </div>
        </form>
    </div>

    <!-- JS for Dynamic Fields -->
    <script>
        document.getElementById('addMore').addEventListener('click', function() {
            const container = document.getElementById('extra-links');
            const div = document.createElement('div');
            div.classList.add('flex', 'gap-4', 'items-center');

            div.innerHTML = `
        <input type="text" name="custom_names[]" placeholder="Platform Name (e.g. YouTube, Behance)" 
               class="w-1/2 border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-400" required>
        <input type="url" name="custom_links[]" placeholder="https://example.com/yourprofile" 
               class="w-1/2 border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-400" required>
        <button type="button" class="remove bg-red-500 text-white px-3 py-1 rounded-lg hover:bg-red-600">X</button>
    `;

            container.appendChild(div);

            div.querySelector('.remove').addEventListener('click', () => div.remove());
        });

        // Remove button functionality for existing custom links
        document.querySelectorAll('.remove').forEach(button => {
            button.addEventListener('click', function() {
                this.closest('div').remove();
            });
        });
    </script>
@endsection