@extends('layouts.admin_main')

@section('title', trans('admin_lang.home_slider'))

@section('content')
    @breadcrumb([
    'home_url' => route('admin.dashboard.index'),
    'links' => [
        [
            'url' => route('admin.home-sliders.index'),
            'title' => trans('admin_lang.home_sliders_management'),
        ]
    ],
    'current_page_title' => trans('admin_lang.add_home_slider')
    ])
    @endbreadcrumb

    <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="kt-portlet">
                    @header(['title' => trans('admin_lang.add_home_slider'), 'icon' => 'fa fa-image'])
                    @endheader
                    <!--begin::Form-->
                    <form class="kt-form" action="{{ route('admin.home-sliders.store') }}" method="POST">
                        <div class="kt-portlet__body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name" class="required">@lang('admin_lang.name')</label>
                                        <input type="text" name="name" id="name" placeholder="{{ trans('admin_lang.home_slider_placeholder') }}" required class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <div class="kt-avatar kt-avatar--outline kt-avatar--danger" id="kt_user_avatar_4">
                                            <div class="kt-avatar__holder" style="background-image: url(/assets/media/logos/wl_logo_icon.png)"></div>
                                            <label class="kt-avatar__upload" data-toggle="kt-tooltip" title="" data-original-title="@lang('admin_lang.change_image')">
                                                <i class="fa fa-pen"></i>
                                                <input type="file" name="image" id="image" accept=".png, .jpg, .jpeg">
                                            </label>
                                            <span class="kt-avatar__cancel cancelImage" data-toggle="kt-tooltip" title="" data-original-title="@lang('admin_lang.remove_image')">
                                                <i class="fa fa-times"></i>
                                            </span>
                                        </div>
                                        <span class="form-text text-muted">@lang('admin_lang.allowed_types')</span>
                                        <label class="form-text text-danger">Image size : Width: 360px & Height: 230px</label>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="description">@lang('admin_lang.description')</label>
                                        <textarea name="description" id="description" class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="kt-portlet__foot">
                            <div class="kt-form__actions">
                                @button(['type' => 'submit'])@endbutton
                                @button(['type' => 'cancel', 'url' => route('admin.home-sliders.index')])@endbutton
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/pages/crud/file-upload/ktavatar.js') }}" type="text/javascript"></script>
<script>
    $('body').on('change','#image',function(){
        var type = this.files[0].type;
        var fileSize = this.files[0].size;

        if(type == "image/jpeg" || type == "image/png" || type == "image/jpg"){

        }
        else{
            $('.cancelImage').click();
            $('#image').val('');
            errorToast('{{ trans('admin_lang.allowed_types') }}');
            return false;
        }
    });
</script>
@endpush