@extends('admin.layout.master')
@section('title', 'Banner Manager')
@section('content')
    <style>
        .image-input-placeholder {
            background-image: url({{ asset('assets/images/svg/files/blank-image.svg') }});
        }

        [data-theme="dark"] .image-input-placeholder {
            background-image: url({{ asset('assets/images/svg/files/blank-image-dark.svg') }});
        }
    </style>
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin_dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Website Manager</li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('banner-list') }}" class="text-muted text-hover-primary">Banner
                                Manager</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Add Banner</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="kt_app_content_container" class="app-container container-xxl index-container">
            <div class="card mb-5 mb-xl-8">
                <div class="card-header mb-4">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3">Add Banner</span>
                    </h3>
                </div>
                <div class="card-body pt-0">
                    <form action="{{ route('banner-save') }}" method="post" id="createForm" enctype="multipart/form-data">
                        <div class="row">
                            @csrf

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Title</label>
                                <input type="text" autocomplete="off" name="name" value="{{ old('name') }}"
                                    class="form-control stop_first_space" placeholder="Title" data-error="#name_error" />
                                <span class="error" id="name_error"></span>
                                @if ($errors->has('name'))
                                    <span class="text-danger">{{ $errors->first('name') }}</span>
                                @endif
                            </div>
                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Image</label>
                            </div>
                            <div class="col-md-12 fv-row mb-5">
                                <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                    data-kt-image-input="true">
                                    <div class="image-input-wrapper w-150px h-150px" data-image_type="banner_image_"
                                        style="background-repeat: no-repeat; background-size: 140px; background-position: center;">
                                    </div>

                                    <label
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Upload">
                                        <i class="bi bi-pencil-fill fs-7"></i>
                                        <input type="file" name="image" id="image" data-name="banner_image_"
                                            data-error="#image_error" onChange="image_validation(this,event);" />
                                        <input type="hidden" name="avatar_remove" />
                                    </label>

                                    <span
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel">
                                        <i class="bi bi-x fs-2"></i>
                                    </span>
                                    <span
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove">
                                        <i class="bi bi-x fs-2"></i>
                                    </span>
                                </div>
                                <div>
                                    <span class="error" id="image_error"></span>
                                    @if ($errors->has('image'))
                                        <p class="text-danger">{{ $errors->first('image') }}</p>
                                    @endif
                                </div>

                                <div class="text-muted fs-7">Only *.png, *.jpg and *.jpeg image files are accepted</div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" id="kt_modal_new_address_submit" class="btn btn-primary me-3">
                                <span class="indicator-label">Save & Continue</span>
                            </button>
                            <a href="{{ route('banner-list') }}" class="btn btn-light">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        function image_validation(tag, event) {
            const fileTypeAccepted = ['image/png', 'image/jpeg', 'image/jpg'];

            const fileSize = tag.files[0].size / 1024 / 1024;
            const fileType = tag.files[0].type;

            let image_name = $(tag).attr("data-name");
            if (fileSize > 5) {
                $("#image").val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', '');
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Image size should not be greater than 5MB.',
                });
            } else if (!fileTypeAccepted.includes(fileType)) {
                $("#image").val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', '');
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Only .png .jpeg .jpg file format accepted.',
                });
            } else {
                return true;
            }
        }

        $(document).ready(function() {
            $("#createForm").validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    name: {
                        required: true,
                        maxlength: 50,
                    },
                    image: {
                        required: true,
                    },
                },
                messages: {
                    name: {
                        required: "Title field is required.",
                        maxlength: 'Title must not be greater than 50 characters.',
                    },
                    image: {
                        required: "Image field is required.",
                    },
                },
                submitHandler: function(form) {
                    document.getElementById('kt_modal_new_address_submit').disabled = true;
                    setTimeout(() => {
                        form.submit();
                    }, 200);
                },
                showErrors: function(errorMap, errorList) {
                    this.defaultShowErrors();
                    $('input').removeClass('error');
                },
            });
        });
    </script>
@endpush