@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");
    document.getElementById("home-2").classList.add("active");
</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">
            ABOUT
        </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);
    $sub_title = json_decode($data->subtitle,true);
    @endphp

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <a href="{{ route('master.front-page.index',$data->category_id)}}" class="btn btn-primary float-right">List</a>
                </div>
                <div class="card-body">
                    @include('common.alert')
                    <form method="POST" action="{{ route('master.front-page.about.update',$data->id) }}" enctype="multipart/form-data" id="about_image">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label required" for="">Title1 (Primary color)</label>
                                    <input class="form-control" type="text" name="title[]" value="{{old('title1', $title[0] ?? null)}}" maxlength="120" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label required" for="">Title2 (Secondary color)</label>
                                    <input class="form-control" type="text" name="title[]" value="{{old('title2', $title[1] ?? null)}}" maxlength="120" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label required" for="">Description</label>
                                <!-- <textarea class="form-control" name="description" required>{{old('description', $data->description ?? null)}}</textarea> -->
                                <textarea type="text" class="form-control description" name="description" required>{{old('description', $data->description ?? null)}}</textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mt-2">
                                @include('common.lfm', [
                                'type' => 'image',
                                'name' => 'Image',
                                'input' => 'image',
                                'required' => true,
                                'file' => $data->image1 ?? null,
                                ])
                            </div>
                            <!-- <div class="col-md-6 mt-2">
                                @include('common.lfm', [
                                'type' => 'image',
                                'name' => 'Banner Image',
                                'input' => 'banner_image', 
                                'required' => true,
                                'file' => $data->banner_image ?? null, 
                                ])
                            </div> -->
                        </div>
                        <div class="mt-2 row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label required" for="">Title3 (Primary color)</label>
                                    <input class="form-control" type="text" maxlength="120" name="title[]" value="{{old('title3', $title[2] ?? null)}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label required" for="">Title4 (Secondary color)</label>
                                    <input class="form-control" type="text" maxlength="120" name="title[]" value="{{old('title4', $title[3] ?? null)}}">
                                </div>
                            </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>
                {{-- /card-body --}}
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->
</div>
@endsection
@push('script')
<script src="{{ asset('assets/ckeditor/ckeditor.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
       $('.ckeditor').ckeditor();
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $.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 (jpg, jpeg, or png only).</span>');
        $.validator.addMethod('image_size', function(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("validation_description", function(value, element) {
                var minLength = 0;
                var maxLength = 2000;
                var descriptionLength = value.trim().length;
                return this.optional(element) || (descriptionLength >= minLength && descriptionLength <= maxLength);
            }, '<span class="error-message">Please enter a description between 50 and 2000 characters.</span>');
        $('#about_image').validate({
            ignore: '.ignore, .select2-input',
            focusInvalid: false,
            rules: {
                'image': {
                    image_format: true,
                    image_size: true
                },
                'description':{
                        validation_description:true
                }
            },
            errorPlacement: function(error, element) {
                element.closest('.form-group').find('.invalid-feedback').remove();
                error.addClass('invalid-feedback').insertAfter(element);
            },
        });
        
    });
</script>
@endpush