@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">Home Page</li>
            <li class="breadcrumb-item active" aria-current="page">
                @isset($homepage)
                    Edit
                @else
                    Create
                @endisset Home Page
            </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($homepage)
                                    Edit
                                @else
                                    Create
                                @endisset Home Page
                            </h4>
                            @isset($homepage)
                                <form method="post" action="/admin/homepage/{{ $homepage->id }}" id="PostForm"
                                    enctype="multipart/form-data">
                                    @method('PUT')
                                @else
                                    <form method="post" action="/admin/homepage" 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="Home Page Title"
                                                        value="@isset($homepage){{ $homepage->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" name="description" class="form-control" id="defaultconfig-4" rows="5"
                                                        placeholder="Enter Description">{{ isset($homepage) ? $homepage->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($homepage) data-default-file="{{ $homepage->getFirstMediaUrl('banner-image') }}" @else required @endisset />
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Clients Count</label>
                                                    <input class="form-control" name="client_count" id="client_count"
                                                        placeholder="Title Description"
                                                        value="@isset($homepage){{ $homepage->client_count }}@endisset"
                                                        type="number">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Years of Business</label>
                                                    <input class="form-control" name="year_business" id="year_business"
                                                        placeholder="Years of Business"
                                                        value="@isset($homepage){{ $homepage->year_business }}@endisset"
                                                        type="number">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Project Users Count</label>
                                                    <input class="form-control" name="project_users_count"
                                                        id="project_users_count" placeholder="Project Users Count"
                                                        value="@isset($homepage){{ $homepage->project_users_count }}@endisset"
                                                        type="number">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Project Delivered Count</label>
                                                    <input class="form-control" name="project_delivered_count"
                                                        id="project_delivered_count" placeholder="Project Delivered Count"
                                                        value="@isset($homepage){{ $homepage->project_delivered_count }}@endisset"
                                                        type="number">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Partners short Description</label>
                                                    <input class="form-control" name="partners_desc" id="partners_desc"
                                                        placeholder="Partners Description"
                                                        value="@isset($homepage){{ $homepage->partners_desc }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Our Solutions short Description</label>
                                                    <input class="form-control" name="solutions_short_desc" id="solutions_short_desc"
                                                        placeholder="Solutions short Description"
                                                        value="@isset($homepage){{ $homepage->short_desc_for_solutions }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">About Button Text</label>
                                                    <input class="form-control" name="about_button_text" id="about_button_text"
                                                        placeholder="About Button Text"
                                                        value="@isset($homepage){{ $homepage->about_button_text }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Blog Short Description</label>
                                                    <input class="form-control" name="short_desc_blog" id="short_desc_blog"
                                                        placeholder="Blog Short Description"
                                                        value="@isset($homepage){{ $homepage->short_desc_blog }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <h5> About Section </h5>
                                    <br>
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">About Title</label>
                                                    <input class="form-control" name="about_title" id="about_title"
                                                        placeholder="Home Page About Title"
                                                        value="@isset($homepage){{ $homepage->about_title }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">About Description</label>
                                                    <textarea name="about_description" class="form-control" id="about_description" rows="5" placeholder="Enter About Description">{{ isset($homepage) ? $homepage->about_description : '' }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <h6> About Section Points </h6>
                                    @isset($homepage)
                                        @if ($aboutPoints->count() > 0)
                                            @foreach ($aboutPoints as $key => $aboutPoint)
                                                <div class="row selectOptions">
                                                    <div class="col-lg-3">
                                                        <div class="mb-3">
                                                            <input type="hidden" name="point_id[{{ $key+1 }}]"
                                                                value="{{ $aboutPoint->id }}">
                                                            <label for="name" class="form-label">Point Title</label>
                                                            <input class="form-control" required name="point_title[{{ $key+1 }}]"
                                                                value="{{ $aboutPoint->title }}" placeholder="Point Title" type="text">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Point Description</label>
                                                            <textarea name="point_description[{{ $key+1 }}]" required class="form-control" rows="3"
                                                                placeholder="Enter Point Description">{{ $aboutPoint->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 src="{{ $aboutPoint->getFirstMediaUrl('about-point-image') }}" 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="point_display_order[{{ $key+1 }}]"
                                                                value="{{ $aboutPoint->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">Point Title</label>
                                                        <input class="form-control" required name="point_title[1]"
                                                            placeholder="Point Title" type="text">
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label for="name" class="form-label">Point Description</label>
                                                        <textarea name="point_description[1]" required class="form-control" rows="3"
                                                            placeholder="Enter Point 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="point_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">Point Title</label>
                                                    <input class="form-control" required name="point_title[1]"
                                                        placeholder="Point Title" type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Point Description</label>
                                                    <textarea name="point_description[1]" required class="form-control" rows="3"
                                                        placeholder="Enter Point 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="point_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/tinymce/tinymce.min.js') }}"></script>
    <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();
            if ($("#about_description").length) {
                tinymce.init({
                    selector: '#about_description',
                    height: 400,
                    default_text_color: 'red',
                    plugins: [
                        'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                        'searchreplace wordcount visualblocks visualchars code fullscreen',
                    ],
                    toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                    toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
                    image_advtab: true,
                    templates: [{
                            title: 'Test template 1',
                            content: 'Test 1'
                        },
                        {
                            title: 'Test template 2',
                            content: 'Test 2'
                        }
                    ],
                    content_css: []
                });
            }

            $(".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">Point Title</label>
                                                <input class="form-control" name="point_title[` + count + `]" required placeholder="Point Title"
                                                    type="text">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Point Description</label>
                                                <textarea name="point_description[` + count + `]" class="form-control" required rows="3"
                                                    placeholder="Enter Point 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="point_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,
                    },
                    client_count: {
                        required: true,
                    },
                    project_delivered_count: {
                        required: true,
                    },
                    year_business: {
                        required: true,
                    },
                    project_users_count: {
                        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($homepage)
                                @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