@extends('admin.layout.master')
@section('content')
   <div class="content datatable">
        <div class="p-4 code-to-copy">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="card shadow-none border">
                        <div class="card-header p-4 border-bottom bg-body">
                            <div class="row g-3 justify-content-between align-items-end">
                                <div class="col-md-12">
                                    <h4 class="text-body mb-0" data-anchor="data-anchor" id="pagination-with-numbering">
                                        Update strategy
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="p-4 code-to-copy">
                              <form action="{{ route('admin.manage_strategy', ['id' => isset($strategy->id) ? encrypt($strategy->id) : '']) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $strategy->id ?? '' }}">
                                    <div class="mb-3">
                                        <label for="strategyName" class="form-label">Strategy Name</label>
                                        <input type="text" readonly class="form-control" id="strategyName" value="{{ $strategy->name }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="strategyDescription" class="form-label">Description <span class="text-danger">*</span></label>
                                        <textarea name="description" id="strategyDescription" rows="6" class="form-control summernote">{{ old('description', $strategy->description ?? '') }}</textarea>
                                        @error('description')
                                            <div class="col-form-alert-label">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                   <hr>
                            <h5>Tags & Images</h5>
                            <div id="tag-container">
                                @if(!empty($strategy->tags))
                                   @foreach($strategy->tags as $index => $tag)
                                    @php
                                        $autoTag = $tag->tag ?: "__" . ($index+1) . "IMG__";
                                    @endphp
                                    <div class="tag-item border p-3 mb-2">
                                        <input type="hidden" name="tags[{{ $index }}][id]" value="{{ $tag->id }}">
                                        <input type="text" name="tags[{{ $index }}][tag]" value="{{ $autoTag }}" placeholder="Tag Name" class="form-control mb-2" required>
                                        <input type="file" name="tags[{{ $index }}][image]" class="form-control mb-2" accept="image/*">
                                        @if($tag->image)
                                            <input type="hidden" name="tags[{{ $index }}][old_image]" value="{{ $tag->image }}">
                                            <img src="{{ $tag->image }}" width="80" height="80" style="border-radius: 50%;object-fit: cover;border: 2px solid #ccc;">
                                        @endif
                                        <button type="button" class="btn btn-danger remove-tag mt-2">Remove</button>
                                    </div>
                                @endforeach
                                @endif
                            </div>

                             <div class="mt-3 mb-3 d-flex justify-content-end">
                                <button type="button" id="add-tag" class="btn btn-sm btn-secondary mt-2">+ Add Tag</button>
                            </div>

                                    <button type="submit" class="btn btn-primary">Update</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                 @if(!empty($strategy) && !empty($strategy->description))
                 <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 mt-5">
                    <div class="card shadow-none border">
                        <div class="card-header p-4 border-bottom bg-body">
                            <div class="row g-3 justify-content-between align-items-end">
                                 <div class="col-md-6">
                                    <h4 class="text-body mb-0" data-anchor="data-anchor" id="pagination-with-numbering">
                                        Strategy Preview
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="p-4 code-to-copy">
                            @if ($strategy)
                                <div class="mt-2"><strong>Strategy Name:</strong> {{ $strategy->name }}</div>
                                <div class="mt-2"><strong>Description:</strong>
                              @php
                                $descWithImages = $strategy->description;
                                if (!empty($strategy->tags)) {
                                    foreach ($strategy->tags as $tag) {
                                        if (!empty($tag->image) && !empty($tag->tag)) {
                                            $imgTag = '<a href="'.$tag->image.'" target="_blank">
                                                        <img src="'.$tag->image.'" style="max-width:200px;border-radius:8px;border:1px solid #ccc;" alt="tag image">
                                                    </a>';
                                            $descWithImages = str_replace($tag->tag, $imgTag, $descWithImages);
                                        }
                                    }
                                }
                            @endphp

                              {!! $descWithImages !!}

                                </div>
                            @else
                                <p>No strategy selected for preview.</p>
                            @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endif

            </div>

        </div>
    </div>
    @section('script')
<script>
document.addEventListener("DOMContentLoaded", function () {
    let tagIndex = {{ !empty($strategy->tags) ? count($strategy->tags) : 0 }};  
    const tagContainer = document.getElementById("tag-container");
    const addTagBtn = document.getElementById("add-tag");

    // Add Tag
    addTagBtn.addEventListener("click", function () {
        const wrapper = document.createElement("div");
        wrapper.className = "tag-item border p-3 mb-2";

        // Auto-generate tag name like __1IMG__
        let autoTag = `__${tagIndex + 1}IMG__`;

        wrapper.innerHTML = `
            <input type="hidden" name="tags[${tagIndex}][id]" value="">
            <input type="text" name="tags[${tagIndex}][tag]" value="${autoTag}" placeholder="Tag Name" class="form-control mb-2" required>
            <input type="file" name="tags[${tagIndex}][image]" class="form-control mb-2" accept="image/*" required>
            <button type="button" class="btn btn-danger remove-tag mt-2">Remove</button>
        `;

        tagContainer.appendChild(wrapper);
        tagIndex++;
    });

    // Remove Tag
    tagContainer.addEventListener("click", function (e) {
        if (e.target.classList.contains("remove-tag")) {
            e.target.closest(".tag-item").remove();
        }
    });
});
</script>
@endsection
@endsection