@extends('adminlte::page')

@section('title', 'Dashboard')

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

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

        <form method="POST" id="add_template" role="form" action="{{ route('template.store') }}" class="jqueryValidation"
            enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                {{-- <div class="form-group">
                <label for="icon">Icon</label>
                <x-adminlte-input class="form-control" id="icon" name="icon" placeholder="Enter icon URL" value="{{ old('icon') }}" />
            </div> --}}
                <div class="form-group">
                    <label for="image">Image</label>
                    <input type="file" class="form-control" id="image" name="image" placeholder=""
                        required>{{ old('image') }}</input>
                </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>
                </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') }}" 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') }}</textarea>

                    {{-- <x-adminlte-input type="text" class="form-control" id="description" name="description" placeholder="Enter description" value="{{ old('description') }}" required/> --}}
                </div>

                <div class= "form-group">
                    <label for="tags">Tags</label>
                    <select name="tags[]" id="tags" class="form-control select2" multiple required>
                        <!-- Dynamic options can be added here if necessary -->
                    </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" name="features[]" class="form-control" placeholder="Enter a feature" 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 }}">{{ $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 }}">InActive</option>
                                <option value="{{ 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" checked
                                {{ old('is_test') == 'on' ? '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">Submit</button>
                </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(543);
                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