@extends('../backend/layout/' . $layout)

@section('subhead')
<title>Banner Form - {{ config('app.name') }} </title>
@endsection

<style>
    #holder img {
        width: 300px;
    }
    #product_image_holder img {
        width: 150px;
    }
</style>

@section('subcontent')
<div class="intro-y flex flex-col sm:flex-row items-center mt-8">
    <h2 class="text-lg font-medium mr-auto capitalize">{{ $bannerGroup->name }} Banners</h2>
    <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        <a href="{{ route('banner-groups.index') }}" class="btn btn-primary shadow-md mr-2">Banner Groups</a>
    </div>
    <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        <a href="{{ route('banner-groups.banners.index', $bannerGroup->id) }}" class="btn btn-outline-primary shadow-md mr-2">Banner List</a>
    </div>
</div>
<div class="grid grid-cols-12 gap-6 mt-5">
    <div class="intro-y col-span-12 lg:col-span-12">
        <!-- BEGIN: Input -->
        <div class="intro-y box">
            <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                <h2 class="font-medium text-base mr-auto">{{ ($formType === 'edit') ? 'Edit' : 'Add New' }} Banner</h2>
            </div>
            <div id="form-validation" class="p-5">
                <div class="preview">
                    <!-- FORM START -->
                    <form id="banner-form" action="javascript:;" class="validate-form" method="POST">
                        @csrf
                        <div class="input-form mb-4">
                            <label for="regular-form-1" class="form-label w-full flex flex-col sm:flex-row">Background Image&nbsp;<span class="text-danger">*</span></label>
                            <div class="block flex flex-nowrap">
                                <input id="background_image" class="form-control" type="text" name="background_image" value="{{ $formType == 'edit' ? $banner->background_image : '' }}" 
                                data-pristine-required-message="Please enter background imager">
                                <a style="border-radius: 0 0.375rem 0.375rem 0;" id="background_image_lfm" data-input="background_image" data-thumb="0" data-preview="holder" class="btn btn-primary text-white">
                                    Choose
                                </a>
                            </div>
                            <div class="image_preview" id="holder" style="margin-top:15px;">
                                @if ($formType == 'edit')
                                <img width="300px" src="{{ $banner->background_image }}" />
                                @endif
                            </div>
                        </div>
                        <div class="input-form mb-4">
                            <label for="regular-form-1" class="form-label w-full flex flex-col sm:flex-row">Product Image</label>
                            <div class="block flex flex-nowrap">
                                <input id="product_image" class="form-control" type="text" name="product_image" value="{{ $formType == 'edit' && $banner->product_image != '' ? $banner->product_image : '' }}">
                                <a style="border-radius: 0;" id="product_image_lfm" data-input="product_image" data-thumb="0" data-preview="product_image_holder" class="btn btn-primary rounded-none text-white">
                                    Choose
                                </a>
                                <a style="border-radius: 0 0.375rem 0.375rem 0;" id="clear_product_image" class="btn btn-outline-primary rounded-none text-primary">
                                    Clear
                                </a>
                            </div>
                            <div class="image_preview" id="product_image_holder" style="margin-top:15px;">
                                @if ($formType == 'edit' && $banner->product_image != '')
                                <img width="150px" src="{{ $banner->product_image }}" />
                                @endif
                            </div>
                        </div>
                        <div class="mb-4">
                            <label>Product Image Alignment (If background image has product image in it, then also use this to set alignment)</label>
                            <div class="flex flex-col sm:flex-row">
                                <div class="form-check mr-2">
                                    <input id="left-switch" class="form-check-input" type="radio" name="product_image_alignment" value="0" {{ (($formType == 'edit' && $banner->product_image_alignment == 0) || $formType == 'add') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="left-switch">Left</label>
                                </div>
                                <div class="form-check ml-2 mr-2 mt-2 sm:mt-0">
                                    <input id="right-switch" class="form-check-input" type="radio" name="product_image_alignment" value="1" {{ ($formType == 'edit' && $banner->product_image_alignment == 1) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="right-switch">Right</label>
                                </div>
                            </div>
                        </div>
                        <div class="input-form mb-4">
                            <label for="priority" class="form-label w-full flex flex-col sm:flex-row">Priority</label>
                            <input id="priority" name="priority" type="text" class="form-control form__input" value="{{ $formType == 'edit' ? $banner->priority : '' }}">
                            <div id="error-priority" class="form__input-error text-danger"></div>
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Title 1
                            </label>
                            <div id="title1" class="editor document-editor banner-ck-editor">
                                <div class="document-editor__toolbar"></div>
                                <div class="document-editor__editable-container">
                                    <div class="document-editor__editable">
                                        @if ($formType == 'edit')
                                        {!! html_entity_decode($banner->title1) !!}
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <input name="title1" class="title1" type="hidden" />  
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Title 2
                            </label>
                            <div id="title2" class="editor document-editor banner-ck-editor">
                                <div class="document-editor__toolbar"></div>
                                <div class="document-editor__editable-container">
                                    <div class="document-editor__editable">
                                        @if ($formType == 'edit')
                                        {!! html_entity_decode($banner->title2) !!}
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <input name="title2" class="title2" type="hidden" />
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Title 3
                            </label>
                            <div id="title3" class="editor document-editor banner-ck-editor">
                                <div class="document-editor__toolbar"></div>
                                <div class="document-editor__editable-container">
                                    <div class="document-editor__editable">
                                        @if ($formType == 'edit')
                                        {!! html_entity_decode($banner->title3) !!}
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <input name="title3" class="title3" type="hidden" />
                        </div>
                        <div class="input-form mb-4">
                            <label for="button_text" class="form-label w-full flex flex-col sm:flex-row">Button Text</label>
                            <input id="btn_text" name="btn_text" type="text" class="form-control form__input" value="{{ $formType == 'edit' ? $banner->btn_text : '' }}">
                            <div id="error-btn_text" class="form__input-error text-danger"></div>
                        </div>
                        <div class="input-form mb-4">
                            <label for="button_text_color" class="form-label w-full flex flex-col sm:flex-row">Button Text Color</label>
                            <div class="input-group">
                                <div class="input-group-text">#</div>  
                                    <input id="btn_text_color" name="btn_text_color" type="text" class="form-control form__input" value="{{ $formType == 'edit' ? $banner->btn_text_color : '' }}">
                            </div>
                            <div id="error-btn_text_color" class="form__input-error text-danger"></div>
                        </div>
                        <div class="input-form mb-4">
                            <label for="button_link" class="form-label w-full flex flex-col sm:flex-row">Button Link</label>
                            <input id="btn_link" name="btn_link" type="text" class="form-control form__input" value="{{ $formType == 'edit' ? $banner->btn_link : '' }}">
                            <div id="error-btn_link" class="form__input-error text-danger"></div>
                        </div>
                        <button type="submit" id="btn-submit" class="btn btn-primary w-24 mr-1 mb-2 mt-2">Submit</button>
                    </form>

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

@section('script')
<script src="{{ mix('dist/backend/js/ckeditor-document.js') }}"></script>
<script src="{{ asset(mix('vendors/jquery/jquery.min.js')) }}"></script>
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script src="{{ asset(mix('js/backend/pages/file-manager/others-file-manager.js'))}}"></script>
<script src="{{ asset(mix('js/backend/pages/banners/form.js')) }}"></script>
<script>
    others_lfm('background_image_lfm', 'file');
    others_lfm('product_image_lfm', 'file');
    var apiURL = '{{ route("banner-groups.banners.store", $bannerGroup->id) }}';
    var bannerGroupId = '{{ $bannerGroup->id }}'
    let listRoute = "{{ route('banner-groups.banners.index', $bannerGroup->id) }}";
    var form_type = "{{ $formType }}";
    var banner = "{{ ($formType === 'edit') ? $banner->id : '' }}"
    var titleValues = {
        "title1": "{{ ($formType === 'edit') ? $banner->title1 : '' }}",
        "title2": "{{ ($formType === 'edit') ? $banner->title2 : '' }}",
        "title3": "{{ ($formType === 'edit') ? $banner->title3 : '' }}"
    };

    if (form_type === 'edit') {
        let url = "{{ route('banner-groups.banners.update', [':bannerGroupId', ':id']) }}";
        url = url.replace(':bannerGroupId', bannerGroupId);
        apiURL = url.replace(':id', banner);
    }
</script>
@endsection