@extends('adminlte::page')

@section('title', 'Edit Template')

@section('content_header')
    <h1>Template</h1>
    <small>Edit Template</small>
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Edit Template</h3>
        </div>

        <form method="POST" id="edit_template" role="form" action="{{ route('template.update', $template->id) }}"
            class="jqueryValidation" enctype="multipart/form-data">
            @csrf
            @method('PUT') <!-- Use PUT instead of PATCH -->

            <div class="card-body">
                <div class="form-group">
                    <label for="image">Image</label>
                    <input type="file" class="form-control" id="image" name="image">
                    @if ($mainImage)
                        <img src="{{ $mainImage }}" width="50" height="50" alt="Main Image">
                    @endif
                    {{-- <small>Current Image: <img src="{{ asset('storage/' . $template->image) }}" alt="Template Image" width="100"></small> --}}
                </div>
                <div class="form-group">
                    <label for="screenshots_image">Screenshots Image</label>
                    <input type="file" class="form-control" id="screenshots_image" name="screenshots_image[]" multiple>
                    @foreach ($screenshots as $screenshot)
                        <img src="{{ $screenshot->getUrl() }}" width="50" height="50" alt="Screenshot">
                    @endforeach
                    {{-- <small>Current Screenshot: <img src="{{ asset('storage/' . $template->screenshots_image) }}" alt="Screenshot" width="100"></small> --}}
                </div>
                <div class="form-group">
                    <label for="title">Title</label>
                    <x-adminlte-input class="form-control" id="title" name="title" placeholder="Enter title"
                        value="{{ old('title', $template->title) }}" required />
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea type="text" class="form-control" id="description" name="description" placeholder="Enter description"
                        required>{{ old('description', $template->description) }}</textarea>
                </div>
                <div class="form-group">
                    <label for="tags">Tags</label>
                    <select name="tags[]" id="tags" class="form-control select2" multiple required>
                        <!-- Dynamically add options here -->
                        @foreach ($tags as $tag)
                            <option value="{{ $tag }}" @if (in_array($tag, old('tags', $tags))) selected @endif>
                                {{ $tag }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="features">Features</label>
                            <div id="features-wrapper">
                                <div class="input-group mb-3 feature-field">
                                    <input type="text" class="form-control" id="features" name="features[]"
                                        value="{{ implode(',', old('features', $features)) }}" required>
                                    <button type="button" class="btn btn-dark btn-add-feature">Add More</button>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="industry">Industry</label>
                            <select name="industry_id" id="industry" class="form-control" required>
                                <option value="">Please select Industry</option>
                                @foreach($industries as $industry)
                                    <option value="{{ $industry->id }}" {{ $template->industry_id == $industry->id ? 'selected' : '' }}>
                                        {{ $industry->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="status">Status</label>
                            <select class="form-control" name="status" id="">
                                <option value="{{ App\Models\Plan::INACTIVE }}"
                                    {{ $template->status == App\Models\Plan::INACTIVE ? 'selected' : '' }}>
                                    InActive
                                </option>
                                <option value="{{ App\Models\Plan::ACTIVE }}"
                                    {{ $template->status == App\Models\Plan::ACTIVE ? 'selected' : '' }}>
                                    Active
                                </option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <input type="checkbox" id="is_test" name="is_test" value="1"
                                {{ old('is_test', $template->is_test) == 1 ? 'checked' : '' }}>
                            <label for="is_test">Is Test</label>
                        </div>
                    </div>
                </div>

                <div class="card-footer d-flex justify-content-end">
                    <a href="{{ route('template.index') }}" class="btn btn-danger mx-1">Cancel</a>
                    <button type="submit" class="btn btn-dark mx-1">Update</button>
                </div>
            </div>
        </form>
    </div>
@stop
@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"
        integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endpush
@section('js')
    <script>
        $(document).ready(function() {
            $("#tags").select2({
                tags: true,
                placeholder: 'Select tags',
                allowClear: true
            });

            $(document).on('click', '.btn-add-feature', function() {
                // alert(1234);
                let featureField = `
                    <div class="input-group mb-3 feature-field">
                        <input type="text" name="features[]" class="form-control" placeholder="Enter a feature" required>
                        <button type="button" class="btn btn-danger btn-remove-feature">Remove</button>
                    </div>`;
                $('#features-wrapper').append(featureField);
            });

            $(document).on('click', '.btn-remove-feature', function() {
                $(this).closest('.feature-field').remove();
            });
        });
    </script>
@endsection