@extends('layouts.master')

@section('content')
    <div class="container-xxl">

        <x-breadcrumb listRoute="{{ route('admin.features.index') }}" model="Features" item="Edit"></x-breadcrumb>

        <div class="card">
            <div class="card-body">
                <x-form.wrapper action="{{ route('admin.features.update', $feature->id) }}" method="POST"
                    enctype="multipart/form-data">
                    @method('PATCH')

                    <x-form.row>
                        <x-form.input type="text" col="6" label="Name" :req="true" id="name"
                            name="name" value="{!! old('name', $feature->name) !!}" />

                    </x-form.row>
                    {{-- <x-form.input col="12" type="text" label="Meta (Yt Link)" id="meta" name="meta"
                        value="{!! old('meta', $feature->meta) !!}" /> --}}
                    <x-form.row>
                        <div class="col-md-6">
                            <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                                accept="image/*" onchange="previewThumb(this,'featured-thumb')" />
                            <x-form.preview id="featured-thumb" url="{{ $feature->feature_image->getPath() }}" />
                        </div>


                    </x-form.row>

                    <x-form.row>
                        <label class="form-label">Additional Links (Meta2)</label>
                        <div id="meta2-wrapper">
                            @php
                                $meta2 = old('meta2', $feature->meta2 ? json_decode($feature->meta2, true) : []);
                            @endphp

                            @foreach ($meta2 as $index => $link)
                                <div class="d-flex mb-2 meta2-item">
                                    <input type="text" name="meta2[]" class="form-control me-2"
                                        value="{{ $link }}" placeholder="Enter link">
                                    <button type="button" class="btn btn-danger btn-sm"
                                        onclick="removeMeta2(this)">Delete</button>
                                </div>
                            @endforeach
                        </div>

                        <div class="col-md-6">
                            <button type="button" class="btn btn-primary btn-sm mt-2" onclick="addMeta2()">+ Add
                                Link</button>
                        </div>
                    </x-form.row>
                    <br>
                    <x-form.checkbox label="Status" id="status" name="status" value="1" class="form-check-input"
                        isEditMode="yes" :isChecked="$feature->status ? 'checked' : ''" />

                    <x-form.button class="btn btn-sm btn-dark" type="submit"><i class='bx bx-save bx-xs'></i>
                        Save</x-form.button>
                </x-form.wrapper>

            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    {{-- @include('_helpers.slugify', ['title' => 'name']) --}}
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.ajax_form')

    {{-- JS for dynamic fields --}}
    <script>
        function addMeta2() {
            const wrapper = document.getElementById('meta2-wrapper');
            const div = document.createElement('div');
            div.classList.add('d-flex', 'mb-2', 'meta2-item');
            div.innerHTML = `
            <input type="text" name="meta2[]" class="form-control me-2" placeholder="Enter link" required>
            <button type="button" class="btn btn-danger btn-sm" onclick="removeMeta2(this)">Delete</button>
        `;
            wrapper.appendChild(div);
        }

        function removeMeta2(button) {
            button.parentElement.remove();
        }
    </script>
@endpush