@extends('admin.layouts.app')

@section('css')
    <style type="text/css">
        .tox-notifications-container,
        .tox-statusbar__branding {
            display: none !important;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')
    <section id="number-tabs">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{!! $form['heading'] !!}</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <form method="POST" action="{{ $form['action'] }}" class="number-tab-steps wizard-circle"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="_method" value="{!! $form['method'] !!}">
                                @if ($data->position == 1)
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="jobtitle">Image</label>
                                                    <input type="file" name="image" id="image"
                                                        class="form-control">
                                                </div>
                                                <div class="form-group d-flex">
                                                    <div class="single-image position-relative">
                                                        <button id="removeImage" type="button"
                                                            class="btn btn-danger position-absolute "
                                                            style="display: none;border-radius:50%;padding: 5px; top: 3px; right:3px"><i
                                                                class="fa fa-close"></i></button>
                                                        <img id="imagePreview" src="#" alt="Image Preview"
                                                            style="display: none; max-width: 100px;">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    {{-- <input type="hidden" name="previous_image"
                                                        value="{{ $content['images'][0] ?? '' }}" /> --}}
                                                    @if (isset($content['images'][0]) && filled($content['images'][0]))
                                                        <div class="avatar mr-1 avatar-xl">
                                                            <img src="{!! $content['images'][0] !!}" alt="Page Image"
                                                                title="Page Image" class="img-responsive" />
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title">Title *</label>
                                                    <textarea name="title" class="form-control editor-tinymce" maxlength="65000" rows="5" id="editor">{{ old('title', $content['title'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                @elseif ($data->position == 2)
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="heading">Video URL</label>
                                                    <input type="text" id="video_url" name="video_url" maxlength="190"
                                                        value="{{ old('video_url', $content['url']['video'] ?? '') }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title">Title *</label>
                                                    <textarea name="title" class="form-control editor-tinymce" maxlength="65000" rows="5" id="editor">{{ old('title', $content['title'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="description">Description *</label>
                                                    <textarea name="description" class="form-control editor-tinymce" maxlength="65000" rows="5" id="editor">{{ old('description', $content['description'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                @elseif ($data->position == 3)
                                    <fieldset>
                                        <div class="row">

                                            <div class="col-12 my-2">
                                                <h4>Box 1</h4>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="jobtitle">Image Box 1</label>
                                                    <input type="file" name="image_box1" id="image_box1"
                                                        class="form-control">
                                                </div>
                                                <div class="form-group d-flex">
                                                    <div class="single-image position-relative">
                                                        <button id="removeImage" type="button"
                                                            class="btn btn-danger position-absolute "
                                                            style="display: none;border-radius:50%;padding: 5px; top: 3px; right:3px"><i
                                                                class="fa fa-close"></i></button>
                                                        <img id="imagePreview" src="#" alt="Image Preview"
                                                            style="display: none; max-width: 100px;">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    {{-- <input type="hidden" name="previous_image"
                                                        value="{{ $content['images'][0] ?? '' }}" /> --}}
                                                    @if (isset($content['images']['box1']) && filled($content['images']['box1']))
                                                        <div class="avatar mr-1 avatar-xl">
                                                            <img src="{!! $content['images']['box1'] !!}" alt="Box 1 Image"
                                                                title="Box 1 Image" class="img-responsive" />
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="heading">App URL Box 1</label>
                                                    <input type="text" id="app_url_box1" name="app_url_box1"
                                                        maxlength="190"
                                                        value="{{ old('app_url_box1', $content['url']['app_box1'] ?? '') }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title_box1">Title Box 1 *</label>
                                                    <textarea name="title_box1" class="form-control editor-tinymce" maxlength="65000" rows="5" id="editor">{{ old('title_box1', $content['title']['box1'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="description_box1">Description Box 1 *</label>
                                                    <textarea name="description_box1" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('description_box1', $content['description']['box1'] ?? '') }}</textarea>
                                                </div>
                                            </div>

                                            <div class="col-12 my-2">
                                                <h4>Box 2</h4>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="jobtitle">Image Box 2</label>
                                                    <input type="file" name="image_box2" id="image_box2"
                                                        class="form-control">
                                                </div>
                                                <div class="form-group d-flex">
                                                    <div class="single-image position-relative">
                                                        <button id="removeImage" type="button"
                                                            class="btn btn-danger position-absolute "
                                                            style="display: none;border-radius:50%;padding: 5px; top: 3px; right:3px"><i
                                                                class="fa fa-close"></i></button>
                                                        <img id="imagePreview" src="#" alt="Image Preview"
                                                            style="display: none; max-width: 100px;">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    {{-- <input type="hidden" name="previous_image"
                                                        value="{{ $content['images'][0] ?? '' }}" /> --}}
                                                    @if (isset($content['images']['box2']) && filled($content['images']['box2']))
                                                        <div class="avatar mr-1 avatar-xl">
                                                            <img src="{!! $content['images']['box2'] !!}" alt="Box 2 Image"
                                                                title="Box 2 Image" class="img-responsive" />
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="heading">App URL Box 2</label>
                                                    <input type="text" id="app_url_box2" name="app_url_box2"
                                                        maxlength="190"
                                                        value="{{ old('app_url_box2', $content['url']['app_box2'] ?? '') }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title_box2">Title Box 2 *</label>
                                                    <textarea name="title_box2" class="form-control editor-tinymce" maxlength="65000" rows="5" id="editor">{{ old('title_box2', $content['title']['box2'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="description_box2">Description Box 2 *</label>
                                                    <textarea name="description_box2" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('description_box2', $content['description']['box2'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                @elseif ($data->position == 4)
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="heading">Play Store URL</label>
                                                    <input type="text" id="playstore_url" name="playstore_url"
                                                        maxlength="190"
                                                        value="{{ old('playstore_url', $content['url']['playstore'] ?? '') }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="heading">App Store URL</label>
                                                    <input type="text" id="appstore_url" name="appstore_url"
                                                        maxlength="190"
                                                        value="{{ old('appstore_url', $content['url']['appstore'] ?? '') }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title">Title *</label>
                                                    <textarea name="title" class="form-control editor-tinymce" maxlength="65000" rows="5" id="editor">{{ old('title', $content['title'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="description">Description *</label>
                                                    <textarea name="description" class="form-control editor-tinymce" maxlength="65000" rows="5" id="editor">{{ old('description', $content['description'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                @elseif ($data->position == 5)
                                    <fieldset>
                                        <div class="row">

                                            <div class="col-12 my-2">
                                                <h4>Left Side (Box 1)</h4>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title_left_box1">Title *</label>
                                                    <textarea name="title_left_box1" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('title_left_box1', $content['title']['left']['box1'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="description_left_box1">Description *</label>
                                                    <textarea name="description_left_box1" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('description_left_box1', $content['description']['left']['box1'] ?? '') }}</textarea>
                                                </div>
                                            </div>

                                            <div class="col-12 my-2">
                                                <h4>Left Side (Box 2)</h4>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title_left_box2">Title *</label>
                                                    <textarea name="title_left_box2" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('title_left_box2', $content['title']['left']['box2'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="description_left_box2">Description *</label>
                                                    <textarea name="description_left_box2" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('description_left_box2', $content['description']['left']['box2'] ?? '') }}</textarea>
                                                </div>
                                            </div>

                                            <div class="col-12 my-2">
                                                <h4>Center</h4>
                                            </div>

                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="jobtitle">Image</label>
                                                    <input type="file" name="image" id="image"
                                                        class="form-control">
                                                </div>
                                                <div class="form-group d-flex">
                                                    <div class="single-image position-relative">
                                                        <button id="removeImage" type="button"
                                                            class="btn btn-danger position-absolute "
                                                            style="display: none;border-radius:50%;padding: 5px; top: 3px; right:3px"><i
                                                                class="fa fa-close"></i></button>
                                                        <img id="imagePreview" src="#" alt="Image Preview"
                                                            style="display: none; max-width: 100px;">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    {{-- <input type="hidden" name="previous_image"
                                                        value="{{ $content['images'][0] ?? '' }}" /> --}}
                                                    @if (isset($content['images'][0]) && filled($content['images'][0]))
                                                        <div class="avatar mr-1 avatar-xl">
                                                            <img src="{!! $content['images'][0] !!}" alt="Page Image"
                                                                title="Page Image" class="img-responsive" />
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-12 my-2">
                                                <h4>Right Side (Box 1)</h4>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title_right_box1">Title *</label>
                                                    <textarea name="title_right_box1" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('title_right_box1', $content['title']['right']['box1'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="description_right_box1">Description *</label>
                                                    <textarea name="description_right_box1" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('description_right_box1', $content['description']['right']['box1'] ?? '') }}</textarea>
                                                </div>
                                            </div>

                                            <div class="col-12 my-2">
                                                <h4>Right Side (Box 2)</h4>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title_right_box2">Title *</label>
                                                    <textarea name="title_right_box2" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('title_right_box2', $content['title']['right']['box2'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="description_right_box2">Description *</label>
                                                    <textarea name="description_right_box2" class="form-control editor-tinymce" maxlength="65000" rows="5"
                                                        id="editor">{{ old('description_right_box2', $content['description']['right']['box2'] ?? '') }}</textarea>
                                                </div>
                                            </div>

                                        </div>
                                    </fieldset>
                                @elseif ($data->position == 6)
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="heading">Video URL</label>
                                                    <input type="text" id="video_url" name="video_url"
                                                        maxlength="190"
                                                        value="{{ old('video_url', $content['url']['video'] ?? '') }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="title">Title *</label>
                                                    <textarea name="title" class="form-control editor-tinymce" maxlength="65000" rows="5" id="editor">{{ old('title', $content['title'] ?? '') }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                @else
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-12">
                                                <p>
                                                    <strong>Note:</strong> This section is not editable. If you want to
                                                    change the content, please contact the support team.
                                                </p>
                                            </div>
                                        </div>
                                    </fieldset>
                                @endif

                                <div class="col-md-12 text-right">
                                    <button type="submit" class="btn btn-primary mr-1 mb-1 waves-effect waves-light">Save
                                        Changes</button>
                                    <a href="{!! $form['cancel_url'] !!}"
                                        class="btn btn-danger mr-1 mb-1 waves-effect waves-light"
                                        style="color: white">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('footer-js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $("#page_title").on('blur', function() {
            var value = $(this).val();
            $('#slug').val(slugify(value));
        });

        $(".js-example-tokenizer").select2({
            tags: true,
            tokenSeparators: [',', ' '],
        });
    </script>
@endsection