@extends('layouts.app')
@section('titlePage', 'Front Page Banners Settings')

@section('content')
<style>
    .error-message {
        font-weight: bold;
    }
</style>
@push('script')
<script>
    document.getElementById("dra-15").classList.add("active");
</script>
@endpush
<div class="page-wrapper">
    <div class="breadcrumb-header justify-content-between">
        <h4 class="text-primary font-weight-bold py-3 mb-0">
           EDIT
        </h4>
        <div class="justify-content-center mt-2">
            <ol class="breadcrumb breadcrumb-style3">
                <li class="breadcrumb-item tx-15"><a href="{{ route('master.frontbanner-settings.index')}}"><i class="feather icon-home"></i></a></li>
                <li class="breadcrumb-item active">Edit Front Banner Settings</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <a href="{{ route('master.frontbanner-settings.index')}}" class="btn btn-primary float-right">List</a>
                </div>
                <div class="card-body">
                    @include('common.alert')

                    <form method="POST" action="{{ route('master.frontbanner-settings.update',$frontBanner->id)}}" enctype="multipart/form-data" id="frontbanner-form">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="col-md-6 mt-2">
                                @include('common.lfm', [
                                    'type' => 'image',
                                    'name' => 'About Banner',
                                    'input' => 'about_banner', 
                                    'required' => true,
                                    'file' => $frontBanner->about_banner ?? null, 
                                ])
                            </div>
                            <div class="col-md-6 mt-2">
                                @include('common.lfm', [
                                    'type' => 'image',
                                    'name' => 'Academy Banner',
                                    'input' => 'academy_banner', 
                                    'required' => true,
                                    'file' => $frontBanner->academy_banner ?? null, 
                                ])
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mt-2">
                                @include('common.lfm', [
                                    'type' => 'image',
                                    'name' => 'Live Banner',
                                    'input' => 'live_banner', 
                                    'required' => true,
                                    'file' => $frontBanner->live_banner ?? null, 
                                ])
                            </div>
                            <div class="col-md-6 mt-2">
                                @include('common.lfm', [
                                    'type' => 'image',
                                    'name' => 'FAQ Banner',
                                    'input' => 'faq_banner', 
                                    'required' => true,
                                    'file' => $frontBanner->faq_banner ?? null, 
                                ])
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mt-2">
                                @include('common.lfm', [
                                    'type' => 'image',
                                    'name' => 'Contact Us Banner',
                                    'input' => 'contact_us_banner', 
                                    'required' => true,
                                    'file' => $frontBanner->contact_us_banner ?? null, 
                                ])
                            </div>
                            <div class="col-md-6 mt-2">
                                @include('common.lfm', [
                                    'type' => 'image',
                                    'name' => 'Cart Banner',
                                    'input' => 'cart_banner', 
                                    'required' => true,
                                    'file' => $frontBanner->cart_banner ?? null, 
                                ])
                            </div>
                        </div>
                        <div class="col-md-6 mt-2">
                            @include('common.lfm', [
                                'type' => 'image',
                                'name' => 'Academic Detail Banner',
                                'input' => 'academic_detail_banner', 
                                'required' => true,
                                'file' => $frontBanner->academic_detail_banner ?? null, 
                            ])
                        </div>
                        <div class="col-md-6 mt-2">
                            @include('common.lfm', [
                                'type' => 'image',
                                'name' => 'Blog Banner',
                                'input' => 'blog_banner', 
                                'required' => true,
                                'file' => $frontBanner->blog_banner ?? null, 
                            ])
                        </div>
                        <div class="mt-2">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>
                </div>
                {{-- /card-body --}}
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script src="{{ asset('assets/ckeditor/ckeditor.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
       $('.ckeditor').ckeditor();
    });
</script>
<script src="{{ asset('assets/vidiyal/plugins/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('assets/vidiyal/js/tags.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $.validator.addMethod("image_size", (value, element) => {
               if (element.files && element.files[0]) {
                  return element.files[0].size <= 2 * 1024 * 1024;
               }
               return true;
            },'<span class="error-message">Please select an image smaller than 2MB.</span>');

            $.validator.addMethod("image_format", function(value, element) {
                return this.optional(element) || /\.(jpg|jpeg|png)$/i.test(value);
            },'<span class="error-message">Please select a valid image file format.</span>');

            // [ Initialize validation ] start
            $('#frontbanner-form').validate({
                ignore: '.ignore, .select2-input',
                focusInvalid: false,
                rules: {
                    'about_banner':{
                        image_size: true,
                        image_format:true
                    },
                    'academy_banner':{
                        image_size: true,
                        image_format:true
                    },
                    'live_banner':{
                        image_size: true,
                        image_format:true
                    },
                    'faq_banner':{
                        image_size: true,
                        image_format:true
                    },
                    'contact_us_banner':{
                        image_size: true,
                        image_format:true
                    },
                    'cart_banner':{
                        image_size: true,
                        image_format:true
                    },
                    'academic_detail_banner':{
                        image_size: true,
                        image_format:true
                    },
                    'blog_banner':{
                        image_size: true,
                        image_format:true
                    },

                    // Checkbox groups  //
                },

                // Errors //

                errorPlacement: function errorPlacement(error, element) {
                    var $parent = $(element).parents('.form-group');

                    // Do not duplicate errors
                    if ($parent.find('.jquery-validation-error').length) {
                        return;
                    }

                    $parent.append(
                        error.addClass('jquery-validation-error small form-text invalid-feedback')
                    );
                },
                highlight: function(element) {
                    var $el = $(element);
                    var $parent = $el.parents('.form-group');

                    $el.addClass('is-invalid');

                    // Select2 and Tagsinput
                    if ($el.hasClass('select2-hidden-accessible') || $el.attr('data-role') === 'tagsinput') {
                        $el.parent().addClass('is-invalid');
                    }
                },
                unhighlight: function(element) {
                    $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
                }
            });

        });
    });
</script>
@endpush