@extends('layout.master')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@push('style')
    <style>
        .error {
            color: #F00;
            background-color: #FFF;
        }
    </style>
@endpush

@section('content')
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Site</a></li>
            <li class="breadcrumb-item active" aria-current="page">About Us</li>
            <li class="breadcrumb-item active" aria-current="page">
                @isset($aboutus)
                    Edit
                @else
                    Create
                @endisset About Us
            </li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-12">
            <div class="d-flex justify-content-center">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">
                                @isset($aboutus)
                                    Edit
                                @else
                                    Create
                                @endisset About Us
                            </h4>
                            @isset($aboutus)
                                <form method="post" action="/admin/aboutus/{{ $aboutus->id }}" id="PostForm"
                                    enctype="multipart/form-data">
                                    @method('PUT')
                                @else
                                    <form method="post" action="/admin/aboutus" id="PostForm" enctype="multipart/form-data">
                                    @endisset
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Title</label>
                                                    <input class="form-control" name="title" id="title"
                                                        placeholder="About Us Title"
                                                        value="@isset($aboutus){{ $aboutus->title }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Description</label>
                                                    <textarea id="maxlength-textarea" required name="description" class="form-control" rows="9"
                                                        placeholder="Enter Description">{{ isset($aboutus) ? $aboutus->description : '' }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div>
                                                    <label for="name" class="form-label">About Us Image</label>
                                                </div>
                                                <div class="mb-3">
                                                    <input name="aboutImage" type="file" id="myDropify1"
                                                        data-allowed-file-extensions="jpg png jpeg"
                                                        @isset($aboutus) data-default-file="{{ $aboutus->getFirstMediaUrl('about-us-image') }}" @else required @endisset />
                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Short Description</label>
                                                    <textarea id="maxlength-textarea" required name="short_description" class="form-control" rows="5"
                                                        placeholder="Enter Short Description">{{ isset($aboutus) ? $aboutus->short_description : '' }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div>
                                                    <label for="name" class="form-label">Banner Image</label>
                                                </div>
                                                <div class="mb-3">
                                                    <input name="bannerImage" type="file" id="myDropify"
                                                        data-allowed-file-extensions="jpg png jpeg"
                                                        @isset($aboutus) data-default-file="{{ $aboutus->getFirstMediaUrl('banner-image') }}" @else required @endisset />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <h5> Features </h5>
                                    <br>
                                    @isset($aboutus)
                                        @if ($features->count() > 0)
                                            @foreach ($features as $key => $feature)
                                                <div class="row selectOptions">
                                                    <div class="col-lg-3">
                                                        <div class="mb-3">
                                                            <input type="hidden" name="feature_id[{{ $key + 1 }}]"
                                                                value="{{ $feature->id }}">
                                                            <label for="name" class="form-label">Feature Title</label>
                                                            <input class="form-control" required
                                                                name="feature_title[{{ $key + 1 }}]"
                                                                value="{{ $feature->title }}" placeholder="Feature Title"
                                                                type="text">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Feature Description</label>
                                                            <textarea name="feature_description[{{ $key + 1 }}]" required class="form-control" rows="3"
                                                                placeholder="Enter Feature Description">{{ $feature->description }}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="formFile">Icon</label>
                                                            <input class="form-control" name="icon[{{ $key + 1 }}]"
                                                                type="file">
                                                        </div>
                                                        <img style="background-color: grey" src="{{ $feature->getFirstMediaUrl('feature-icon') }}"
                                                            width="50" height="50" alt="">
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Display Order</label>
                                                            <input class="form-control" required
                                                                name="feature_display_order[{{ $key + 1 }}]"
                                                                value="{{ $feature->display_order }}"
                                                                placeholder="Display Order" type="number">
                                                        </div>
                                                    </div>
                                                    @if ($key != 0)
                                                        <div class="col-lg-1">
                                                            <div class="m-4">
                                                                <button type="button"
                                                                    class="btn btn-danger removeMore">-</button>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="col-lg-1">
                                                            <div class="m-4">
                                                                <button type="button"
                                                                    class="btn btn-primary addMore">+</button>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="row selectOptions">
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label for="name" class="form-label">Feature Title</label>
                                                        <input class="form-control" required name="feature_title[1]"
                                                            placeholder="Feature Title" type="text">
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label for="name" class="form-label">Feature Description</label>
                                                        <textarea name="feature_description[1]" required class="form-control" rows="3"
                                                            placeholder="Enter Feature Description"></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="formFile">Icon</label>
                                                        <input class="form-control" name="icon[1]" type="file" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2">
                                                    <div class="mb-3">
                                                        <label for="name" class="form-label">Display Order</label>
                                                        <input class="form-control" required name="feature_display_order[1]"
                                                            placeholder="Display Order" type="number">
                                                    </div>
                                                </div>
                                                {{-- plus button --}}
                                                <div class="col-lg-1">
                                                    <div class="m-4">
                                                        <button type="button" class="btn btn-primary addMore">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @else
                                        <div class="row selectOptions">
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Feature Title</label>
                                                    <input class="form-control" required name="feature_title[1]"
                                                        placeholder="Feature Title" type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Feature Description</label>
                                                    <textarea name="feature_description[1]" required class="form-control" rows="3"
                                                        placeholder="Enter Feature Description"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label class="form-label" for="formFile">Icon</label>
                                                    <input class="form-control" name="icon[1]" type="file" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Display Order</label>
                                                    <input class="form-control" required name="feature_display_order[1]"
                                                        placeholder="Display Order" type="number">
                                                </div>
                                            </div>
                                            {{-- plus button --}}
                                            <div class="col-lg-1">
                                                <div class="m-4">
                                                    <button type="button" class="btn btn-primary addMore">+</button>
                                                </div>
                                            </div>
                                        </div>
                                    @endisset

                                    <div id="addMore">

                                    </div>

                                    <br>
                                    <div class="row">
                                        <h4 class="card-title"><u>SEO</u></h4>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Meta Title</label>
                                                <input class="form-control" id="seo_title" required name="seo_title"
                                                    placeholder="Meta Title"
                                                    value="@isset($homepage){{ $homepage->seo_title }}@endisset"
                                                    type="text">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Meta Description</label>
                                                <input class="form-control" name="seo_description" required
                                                    placeholder="Meta Description"
                                                    value="@isset($homepage){{ $homepage->seo_description }}@endisset"
                                                    type="text">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Meta Other</label>
                                                <textarea id="maxlength-textarea" name="seo_other" class="form-control" id="defaultconfig-4" rows="5"
                                                    placeholder="Meta Other">@isset($homepage){{ $homepage->seo_other }}@endisset</textarea>
                                            </div>
                                        </div>

                                    </div>

                                    <br>
                                    <input class="btn btn-primary" type="submit" value="Submit">
                                </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>
@endpush

@push('custom-scripts')
    <script>
        $(document).ready(function() {

            $('#myDropify').dropify();
            $('#myDropify1').dropify();

            $(".addMore").click(function(e) {
                e.preventDefault();
                //how many elements we have
                var count = $(".selectOptions").length + 1;
                var html = `<div class="row selectOptions">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Feature Title</label>
                                                <input class="form-control" name="feature_title[` + count + `]" required placeholder="Feature Title"
                                                    type="text">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Feature Description</label>
                                                <textarea name="feature_description[` + count + `]" class="form-control" required rows="3"
                                                    placeholder="Enter Feature Description"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label" for="formFile">Icon</label>
                                                <input class="form-control" required name="icon[` + count + `]" type="file">
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Display Order</label>
                                                <input class="form-control" required name="feature_display_order[` +
                    count + `]" placeholder="Display Order"
                                                    type="number">
                                            </div>
                                        </div>
                                        <div class="col-lg-1">
                                            <div class="m-4">
                                                <button type="button" class="btn btn-danger removeMore">-</button>
                                            </div>
                                        </div>
                                    </div>`;
                $("#addMore").append(html);

            });

            $(document).on('click', '.removeMore', function(e) {
                e.preventDefault();
                $(this).closest('.selectOptions').remove();
            });

            $("#PostForm").validate({
                ignore: [],
                rules: {
                    title: {
                        required: true,
                        minlength: 3
                    },
                    description: {
                        required: true,
                    },

                    about_title: {
                        required: true,
                    },
                    about_description: {
                        required: true,
                    },
                    "point_title[]": {
                        required: true,
                    },
                    "point_description[]": {
                        required: true,
                    },
                },
                submitHandler: function(form, e) {
                    e.preventDefault();
                    var method = $(form).attr('method');
                    var url = $(form).attr('action');
                    var formData = new FormData(form);
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type: method,
                        url: url,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(result) {
                            if (result) {
                                @isset($aboutus)
                                @else
                                    // form.reset();
                                    $(".dropify-clear").trigger("click");
                                    window.location.reload();
                                @endisset
                                const Toast = Swal.mixin({
                                    toast: true,
                                    position: 'top-end',
                                    showConfirmButton: false,
                                    timer: 2000,
                                    timerProgressBar: true,
                                });

                                Toast.fire({
                                    icon: 'success',
                                    title: result.message,
                                })
                            }
                        },
                        error: function(data) {
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                            });

                            Toast.fire({
                                icon: 'error',
                                title: 'Something went wrong',
                            })

                            if (data.responseJSON['errors']) {

                                let err = data.responseJSON['errors'];

                                $.each(err, (i, j) => {
                                    $(`input[name=${i}]`).after(
                                        `<span class="text-danger">${j}</span>`);
                                });
                            }
                        }
                    });
                    return false;
                }
            });

        });
    </script>
@endpush