@extends('template.master')

@section('title', 'About Us Management')

@push('styles')
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
<style>
    .note-editable {
        min-height: 300px !important;
    }
</style>
@endpush
@section('content')

<div class=" mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                    <h3 class="card-title">About Us Management</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    @if ($message = Session::get('success'))
                    <div class="alert alert-success alert-block">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $message }}</strong>
                    </div>
                    @endif

                    @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <form action="{{ route('store.aboutus') }}" method="POST" enctype="multipart/form-data" id="taxo-form">
                        @csrf
                        <input type="hidden" class="form-control" id="about_id" name="about_id" value="{{ @$about->about_id }}">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2">Header <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="header" name="header" placeholder="Header " value="{{ @$about->header }}">
                                </div>
                            </div>
                            <div class="col-md-6 media_image">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2">Short Description <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="" name="header_short_desc" rows="3" placeholder="Short Description" name="header_short_desc">{{ @$about->header_short_desc }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="exampleInputName1" class="mt-2">Long Description <span class="text-danger">*</span></label>
                                <div class="card card-outline card-info">
                                    <div class="card-body">
                                        <textarea id="header_long_desc" name="header_long_desc" class="summernote">{{ @$about->header_long_desc }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 media_image">
                                <div class="form-group">
                                    <label for="exampleInputName1" id="media_image" class="mt-2"><b>Image</b></label>
                                    <input type="file" class="form-control" id="image" name="image" placeholder="Image" accept="image/png, image/gif, image/jpeg" multiple>
                                    <input type="hidden" name="image_name" value="{{ @$about->image }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                @if(@$about->image!=null)
                                <img src="{{ asset('aboutus/'.@$about->image) }}" style="width:200px;height:200px;padding:10px;">
                                @endif
                            </div>
                        </div>
                        @php
                        $s=0;
                        if(@$about->testimonials!=null){
                        $s=sizeof(@$about->testimonials);
                        }
                        @endphp
                        <input type="hidden" class="form-control" id="h_v" name="h_v" value="{{ $s }}">
                        <div class="row">
                            <div class="mb-3 col-md-12 error-placeholder">
                                <label for="exampleInputName1" id="media_image" class="mt-2"><b>Testimonials</b></label>
                                <td colspan="3"><a class="btn btn-primary" data-toggle="modal" data-target="#AddModal">Add</a></td>
                                </br></br>
                                <div class="table-responsive">
                                    <table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Title</th>
                                                <th>Description</th>
                                                <th>Delete?</th>
                                            </tr>
                                        </thead>
                                        {{-- {{$tes=[];
                                     $tes[]=@$about->testimonials; }} --}}
                                        @php
                                        $tes=[];
                                        //$tes[]=@$about->testimonials;
                                        @endphp
                                        <tbody>


                                            @if(@$about->testimonials!=null)
                                            @php
                                            $tes[]=@$about->testimonials;
                                            @endphp
                                            @foreach ($tes as $key=>$value)
                                            @php
                                            $i=0;
                                            @endphp
                                            @foreach($value as $t)
                                            <tr>
                                                <td>{{ $t->testimonials_name; }}<input type="hidden" name="{{"testimonials[".$i."][testimonials_name]"}}" value="{{$t->testimonials_name; }}">
                                                </td>
                                                <td>{{ $t->testimonials_title; }}<input type="hidden" name="{{"testimonials[".$i."][testimonials_title]"}}" value="{{$t->testimonials_title;}}" </td>
                                                <td>{{ $t->testimonials_desc; }}<input type="hidden" name="{{"testimonials[".$i."][testimonials_desc]"}}" value="{{$t->testimonials_desc;}}" </td>
                                                <td><button class="btn btn-warning" onclick="return delete_testimonials($(this));" type="button">delete</button>
                                            </tr>
                                            </tr>
                                            @php
                                            $i++;
                                            @endphp
                                            @endforeach
                                            @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <button type="submit" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form id="testimonials">
                <div class="modal-header">
                    <center>
                        <h4 class="modal-title" id="myModalLabel">Add</h4>
                    </center>
                </div>

                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row form-group">
                            <div class="col-sm-4">
                                <label class="control-label modal-label">Name </label>
                                <span class="text-danger">*</span>
                            </div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="testimonials_name" id="testimonials_name" required>
                            </div>
                        </div>
                        </br>
                        <div class="row form-group">
                            <div class="col-sm-4">
                                <label class="control-label modal-label">Title</label>
                                <span class="text-danger">*</span>
                            </div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="testimonials_title" id="testimonials_title" required>
                            </div>
                        </div>
                        </br>
                        <div class="row form-group">
                            <div class="col-sm-4">
                                <label class="control-label modal-label">Description </label>
                                <span class="text-danger">*</span>
                            </div>
                            <div class="col-sm-8">
                                <textarea class="form-control" name="testimonials_desc" id="testimonials_desc" required></textarea>
                            </div>
                        </div>
                        </br>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary add-modal-waste">Save</a>
                        </div>
            </form>
        </div>
    </div>
</div>

@endsection
@push('child-scripts')

<script>
    $(function() {
        // Summernote
        $('.summernote').summernote()

        // CodeMirror
        CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
            mode: "htmlmixed",
            theme: "monokai"
        });
    })

    $(document).ready(function() {
        $('#AddModal').on('hidden.bs.modal', function() {
            $('#AddModal .error').remove();
            $('#AddModal form')[0].reset();
        });
        let counter = $('#h_v').val();
        $("#testimonials").validate({
            errorElement: "span",
            errorClass: "error",
            ignore: '.note-editor *',
            rules: {
                testimonials_name: {
                    required: true,
                    maxlength: 255,
                },
                testimonials_title: {
                    required: true,
                    maxlength: 255
                },
                testimonials_desc: {
                    required: true,
                }
            },
            messages: {
                testimonials_name: {
                    required: 'Name required.',
                },
                testimonials_title: {
                    required: 'Title required.',
                },
                testimonials_desc: {
                    required: 'Description required.',
                }
            },
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                if (element.attr("class") == 'summernote') {
                    error.insertAfter(element.parent().find('.note-editor'));
                } else {
                    element.after(error); // default error placement
                }
            },
            submitHandler: function(form) {
                const rows = [];
                $.each($(form).serializeArray(), function(i, field) {
                    if (i > 0 && field.name === rows[rows.length - 1].name) {
                        rows[rows.length - 1].value += ';' + field.value;
                    } else {
                        rows.push(field);
                    }
                });
                let list = '<tr>';
                $.each(rows, function(i, field) {
                    list += '<td>' + field.value + '<input type="hidden" name="testimonials[' + String(counter) + '][' + field.name + ']" value="' + field.value + '"/>' + '</td>';
                });
                list += '<td><button class="btn btn-warning" onclick="return this.parentNode.parentNode.remove();">delete</button></tr>';
                $('#userList tbody').append(list);
                $('#AddModal').modal('hide');
                counter++;
                $(this)[0].reset();
            }
        });

        $("#taxo-form").validate({
            errorElement: "span",
            errorClass: "error",
            ignore: '.note-editor *',
            rules: {
                header: {
                    required: true,
                    maxlength: 255
                },
                header_short_desc: {
                    required: true,
                },
                header_long_desc: {
                    required: true,
                }
            },
            messages: {
                header: {
                    required: 'Header required.',
                },
                header_short_desc: {
                    required: 'Header short description required.',
                },
                header_long_desc: {
                    required: 'Header long description required.',
                }
            },
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                if (element.attr("class") == 'summernote') {
                    error.insertAfter(element.parent().find('.note-editor'));
                } else {
                    element.after(error); // default error placement
                }
            }
        });
    });

    function delete_testimonials(obj) {
        var retVal = confirm("Are you sure you want to remove this Testimonial?");
        if (retVal == true) {
            return obj.parent().parent().remove();
        }
        return true;
    }
</script>
@endpush