@extends('layouts.app')

@section('content')

    <div class="container">

        <h3 class="mb-3">✏️ Edit Gadget</h3>

        {{-- Errors --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.gadgets.update', $gadget->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            {{-- Basic Info --}}
            <input type="text" name="title" value="{{ old('title', $gadget->title) }}" placeholder="Title"
                class="form-control mb-2">

            <input type="text" name="brand" value="{{ old('brand', $gadget->brand) }}" placeholder="Brand"
                class="form-control mb-2">

            <input type="number" name="price" value="{{ old('price', $gadget->price) }}" placeholder="Price"
                class="form-control mb-2">

            {{-- Image --}}
            <div class="mb-2">
                <input type="file" name="image" class="form-control">
                @if ($gadget->image)
                    <img src="{{ asset('storage/' . $gadget->image) }}" width="120" class="mt-2 rounded">
                @endif
            </div>
            <div class="mb-3">
                <label>Category</label>
                <input type="text" name="category" class="form-control"
                    value="{{ old('category', $gadget->category ?? '') }}">
            </div>

            <div class="mb-3">
                <label>Tags (comma separated)</label>
                <input type="text" name="tags" class="form-control" placeholder="AI, Mobile, Tech"
                    value="{{ old('tags', is_array($gadget->tags ?? null) ? implode(', ', $gadget->tags) : $gadget->tags) }}">
            </div>
            {{-- Descriptions --}}
            <textarea name="short_description" class="form-control mb-2" placeholder="Short description">{{ old('short_description', $gadget->short_description) }}</textarea>

            <textarea name="full_description" class="form-control mb-2" placeholder="Full description">{{ old('full_description', $gadget->full_description) }}</textarea>
            <div class="mb-3">
                <label>🌍 Africa Relevance</label>
                <textarea name="africa_description" class="form-control" rows="4"
                    placeholder="Explain why this gadget matters in African markets (connectivity, cost, infrastructure, etc.)">
                {{ old('africa_description', $gadget->africa_description ?? '') }}
            </textarea>
            </div>
            <div class="form-group">
                <label>Maker Bio</label>
                <textarea name="maker_bio" class="form-control" rows="4">
                    {{ old('maker_bio', $gadget->maker_bio ?? '') }}
                </textarea>
            </div>

            <div class="form-group mt-2">
                <label>Maker Website</label>
                <input type="url" name="maker_website" class="form-control"
                    value="{{ old('maker_website', $gadget->maker_website ?? '') }}">
            </div>
            <div class="form-group mt-3">
                <label>🎥 YouTube Video URL</label>
               <input type="url" name="youtube_url" class="form-control"
                placeholder="https://www.youtube.com/watch?v=xxxxx"
                value="{{ old('youtube_url', $gadget->youtube_url ?? '') }}">
            </div>
            {{-- PROS --}}
            <h5>Pros</h5>
            @php $pros = is_array($gadget->pros) ? $gadget->pros : json_decode($gadget->pros, true); @endphp

            <div id="pros-wrapper">
                @foreach ($pros ?? [''] as $pro)
                    <input type="text" name="pros[]" value="{{ $pro }}" class="form-control mb-2"
                        placeholder="Enter a pro">
                @endforeach
            </div>
            <button type="button" onclick="addPro()" class="btn btn-sm btn-primary mb-3">Add Pro</button>

            <hr>

            {{-- CONS --}}
            <h5>Cons</h5>
            @php $cons = is_array($gadget->cons) ? $gadget->cons : json_decode($gadget->cons, true); @endphp

            <div id="cons-wrapper">
                @foreach ($cons ?? [''] as $con)
                    <input type="text" name="cons[]" value="{{ $con }}" class="form-control mb-2"
                        placeholder="Enter a con">
                @endforeach
            </div>
            <button type="button" onclick="addCon()" class="btn btn-sm btn-danger mb-3">Add Con</button>

            {{-- SPECS --}}
            <div class="card mt-3">
                <div class="card-header bg-dark text-white">
                    🧠 Spec Builder
                </div>

                <div class="card-body">

                    @php $specs = is_array($gadget->specs) ? $gadget->specs : json_decode($gadget->specs, true); @endphp

                    <div id="spec-container">

                        @if ($specs)
                            @foreach ($specs as $key => $value)
                                <div class="row mb-2 spec-row">
                                    <div class="col-md-5">
                                        <input type="text" name="specs_key[]" value="{{ $key }}"
                                            class="form-control" placeholder="Key">
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" name="specs_value[]" value="{{ $value }}"
                                            class="form-control" placeholder="Value">
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger remove-row">X</button>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            {{-- Default empty row --}}
                            <div class="row mb-2 spec-row">
                                <div class="col-md-5">
                                    <input type="text" name="specs_key[]" class="form-control" placeholder="Key">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="specs_value[]" class="form-control" placeholder="Value">
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-danger remove-row">X</button>
                                </div>
                            </div>
                        @endif

                    </div>

                    <button type="button" id="add-spec" class="btn btn-primary mt-2">
                        ➕ Add Spec
                    </button>

                </div>
            </div>

            {{-- Featured --}}
            <div class="mt-3">
                <label>
                    <input type="checkbox" name="is_featured" {{ $gadget->is_featured ? 'checked' : '' }}>
                    Featured
                </label>
            </div>

            <button class="btn btn-dark mt-3">Update Gadget</button>

        </form>

    </div>

    {{-- SCRIPTS --}}
    <script>
        // Add Spec Row
        document.getElementById('add-spec').addEventListener('click', function() {
            let container = document.getElementById('spec-container');

            let row = document.createElement('div');
            row.classList.add('row', 'mb-2', 'spec-row');

            row.innerHTML = `
            <div class="col-md-5">
                <input type="text" name="specs_key[]" class="form-control" placeholder="Key">
            </div>
            <div class="col-md-5">
                <input type="text" name="specs_value[]" class="form-control" placeholder="Value">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-danger remove-row">X</button>
            </div>
        `;

            container.appendChild(row);
        });

        // Remove Spec Row
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-row')) {
                e.target.closest('.spec-row').remove();
            }
        });

        // Add Pro
        function addPro() {
            let wrapper = document.getElementById('pros-wrapper');
            let input = document.createElement('input');
            input.type = 'text';
            input.name = 'pros[]';
            input.className = 'form-control mb-2';
            input.placeholder = 'Enter a pro';
            wrapper.appendChild(input);
        }

        // Add Con
        function addCon() {
            let wrapper = document.getElementById('cons-wrapper');
            let input = document.createElement('input');
            input.type = 'text';
            input.name = 'cons[]';
            input.className = 'form-control mb-2';
            input.placeholder = 'Enter a con';
            wrapper.appendChild(input);
        }
    </script>

@endsection