@extends('layouts.app')
@section('titlePage', 'Create New FAQ')

@section('content')
<style>
    .error-message {
        font-weight: bold;
    }
</style>
@push('script')
<script>
    document.getElementById("draz-14").classList.add("is-expanded");
    document.getElementById("dra-14").classList.add("active","is-expanded");
</script> 
@endpush
<div class="page-wrapper">
    <!-- [ breadcrumb ] start -->
    <div class="breadcrumb-header justify-content-between">
        <h4 class="text-primary font-weight-bold py-3 mb-0">
            HOME WORKS
        </h4>

        <div class="justify-content-center mt-2">
            <ol class="breadcrumb breadcrumb-style3">
                <li class="breadcrumb-item tx-15"><a href="{{ route('master.front-page.index',$data->category_id)}}"><i class="feather icon-home"></i></a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </div>
    </div>
    <!-- [ breadcrumb ] end -->
    <!-- [ Main Content ] start -->
    @php
    $title = json_decode($data->title,true);
    $description = json_decode($data->description,true);
    @endphp
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <a href="{{ route('master.front-page.index',$data->category_id)}}" class="btn btn-primary float-right">List</a>
					<button class="btn btn-secondary float-left" data-toggle="modal" data-target="#modalMedia">Help Desk</button>
                </div>

                <div class="card-body">
                    @include('common.alert')
                    <form method="POST" action="{{ route('master.front-page.home.update',$data->id) }}" enctype="multipart/form-data" id="homeworks-form">
                        @csrf
                        <div class="row">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label required" for="">Title 1(Primary Color)</label>
                                    <input class="form-control" type="text" name="title[]" value="{{old('head', $title[0] ?? null)}}" maxlength="150" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label required" for="">Title 2(secondary color)</label>
                                    <input class="form-control" type="text" name="title[]" value="{{old('head', $title[1] ?? null)}}" maxlength="150" required>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <div class="form-group">
                                    <label class="control-label required" for="">Description</label>
                                    <!-- <textarea class="form-control" name="description" required>{{old('description', $description['description'] ?? null)}}</textarea> -->
                                    <textarea type="text" class="form-control description" name="description" required>{{old('description', $description['description'] ?? null)}}</textarea>
                                </div>
                            </div>
                            {{-- <div class="row">
                                    <fieldset class="form-group col-md-6">
                                        {{ Form::label('category_id', 'Category') }}
                            <span class="text-red">*</span>
                            {{ Form::select('category_id', $categories, $selectedCategoryID, ['class' => 'form-control', 'placeholder' => 'Select']) }}
                            </fieldset>
                        </div> --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label required" for="">Title(card1)</label>
                                <input class="form-control" type="text" name="card[]" value="{{old('subtitle', $description['cards'][0] ?? null)}}" maxlength="80" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            @include('common.lfm', [
                            'type' => 'image',
                            'name' => 'Image1',
                            'input' => 'image1',
                            'required' => true,
                            'file' => $data->image1 ?? null,
                            ])
                        </div>
                        <div class="col-md-12 mb-2">
                            <div class="form-group">
                                <label class="control-label required" for="">Description</label>
                                <!-- <textarea class="form-control" name="des[]" required>{{old('description', $description['card_description'][1] ?? null)}}</textarea> -->
                                <textarea type="text" class=" form-control description" name="des[]" required>{!!old('description', $description['card_description'][0] ?? null)!!}</textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label required" for="">Title(card2)</label>
                                <input class="form-control" type="text" name="card[]" value="{{old('subtitle', $description['cards'][1] ?? null)}}" maxlength="80" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            @include('common.lfm', [
                            'type' => 'image',
                            'name' => 'Image2',
                            'input' => 'image2',
                            'required' => true,
                            'file' => $data->image2 ?? null,
                            ])
                        </div>
                        <div class="col-md-12 mb-2">
                            <div class="form-group">
                                <label class="control-label required" for="">Description</label>
                                <!-- <textarea class="form-control" name="des[]" required>{{old('description', $description['card_description'][1] ?? null)}}</textarea> -->
                                <textarea type="text" class=" form-control description" name="des[]" required>{{old('description', $description['card_description'][1] ?? null)}}</textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label required" for="">Title(card3)</label>
                                <input class="form-control" type="text" name="card[]" value="{{old('subtitle', $description['cards'][2] ?? null)}}" maxlength="80" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            @include('common.lfm', [
                            'type' => 'image',
                            'name' => 'Image3',
                            'input' => 'image3',
                            'required' => true,
                            'file' => $data->image3 ?? null,
                            ])
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label required" for="">Description</label>
                                <!-- <textarea class="form-control" name="des[]" required>{{old('description', $description['card_description'][2] ?? null)}}</textarea> -->
                                <textarea type="text" class="form-control description" name="des[]" required>{{old('description', $description['card_description'][2] ?? null)}}</textarea>
                            </div>
                        </div>
                        <div class="col-md-12 mt-2">
                            <input type="hidden" name="head" value="{{old('title', $data->head ?? null)}}">
                            <input type="hidden" name="category_id" value="{{old('title', $data->category_id ?? null)}}">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- /card-body --}}
</div>
</div>
</div>
<!-- [ Main Content ] end -->
</div>
<div class="modal fade" id="modalMedia" oncontextmenu="return false;" tabindex="-1" role="dialog" aria-labelledby="modalMediaLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalMediaLabel">Creating Work</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
               <iframe src="https://azam-stage-assets.s3.ap-south-1.amazonaws.com/help_desk/HOME-HowWorks.mp4" frameborder="0" width="100%" height="600px"></iframe>
            </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>');
            $.validator.addMethod("validation_description", function(value, element) {
                var minLength = 0;
                var maxLength = 800;
                var descriptionLength = value.trim().length;
                return this.optional(element) || (descriptionLength >= minLength && descriptionLength <= maxLength);
            }, '<span class="error-message">Please enter a description between 50 and 800 characters.</span>');
            // [ Initialize validation ] start
            $('#homeworks-form').validate({
                ignore: '.ignore, .select2-input',
                focusInvalid: false,
                rules: {
                    'image1':{
                        image_size: true,
                        image_format:true
                    },
                    'image2':{
                        image_size: true,
                        image_format:true
                    },
                    'image3':{
                        image_size: true,
                        image_format:true
                    },
                    'description':{
                        validation_description:true
                    },
                    'des[]':{
                        validation_description: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