@extends('admin.layouts.index')

@section('content')
<section class="content">
    <div class="container-fluid">

        <form method="post" accept-charset="utf-8" id="form" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-lg-12">
                    <div class="view-header">
                        <div class="pull-right text-right" style="line-height: 14px">
                            <button class="btn btn-success" type="submit" form="form"><span class="bold">Mentés</span> <i class="fa fa-floppy-o"></i></button>
                        </div>
                        <div class="header-icon">
                            <i class="pe page-header-icon pe-7s-browser"></i>
                        </div>
                        @if($model)
                            <div class="header-title">
                                <h3 class="m-b-xs">Szerkesztés: {{ $model->name }}</h3>
                                <small>Utoljára módosítva: {{ $model->updated_at->format('Y.m.d H:i') }}</small>
                            </div>
                        @else
                            <div class="header-title">
                                <h3 class="m-b-xs">Új termék hozzáadása</h3>
                                <small>A weboldalon megvásárolható termék hozzáadása.</small>
                            </div>
                        @endif
                    </div>
                    <hr>
                </div>
            </div>

            @foreach(\App\Language::all() as $lang)
                <div class="row">
                    <div class="col-12">
                        <div class="panel panel-filled">
                            <div class="panel-heading">
                                <h4>{{$lang->name}}</h4>
                            </div>

                            <div class="panel-body">

                                @include('admin.includes.fields.text', ['name' => "name[$lang->code]", 'value' => $model ? $model->getTranslation('name', $lang->code) : null])

                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="row">
                <div class="col-12">
                    <div class="panel panel-filled">
                        <div class="panel-heading">
                            <h4>Kapcsolatok</h4>
                        </div>

                        <div class="panel-body">

                            @include('admin.includes.fields.select_multiple', ['name' => "collections[]", 'options' => \App\Collection::pluck('name', 'id'), 'value' => $model ? $model->collections()->pluck('ws_collections.id') : null, 'info' => 'A tulajdonság több kollekcióhoz is tartozhat.'])

                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 text-right">
                    <button class="btn btn-success" type="submit" form="form">
                        <span class="bold">Mentés</span> <i class="fa fa-floppy-o"></i>
                    </button>
                </div>
            </div>

        </form>

    </div>
</section>
@stop

@section('custom-css')
    <link href="{{ url('assets/admin/vendor/summernote/summernote.css') }}" rel="stylesheet">
    <link href="{{ url('assets/admin/styles/editors.css') }}" rel="stylesheet">
    <link href="{{ url('assets/admin/vendor/chosen/chosen-bs.css') }}" rel="stylesheet">

    <style>
        .img-custom {
            width: 75px;
            height: 75px;
            background-size: cover;
        }

        .media-body {
            vertical-align: middle !important;
        }

        .active-img {
            border: 2px solid #f6a821;
        }

        .modal {
            background: rgba(0, 0, 0, 0.8) !important;
        }

        .modal-content .modal-header {
            border-top-left-radius: 6px !important;
            border-top-right-radius: 6px !important;
        }

        .modal-content .modal-footer {
            border-bottom-left-radius: 6px !important;
            border-bottom-right-radius: 6px !important;
        }
    </style>
@stop

@section('custom-js')
    <script src="{{ url('assets/admin/vendor/summernote/summernote.js') }}"></script>
    <script src="{{ url('assets/admin/vendor/summernote/lang/summernote-hu-HU.js') }}"></script>
    <script src="{{ url('assets/admin/vendor/chosen/chosen.jquery.js') }}"></script>

    <script>
        $(document).ready(function(){
            $('.summernote').summernote({
                lang: 'hu-HU',
                shortcuts: false,
                //airMode: true
                toolbar: [
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['view', ['undo', 'redo']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'hr']],
                    ['view', ['fullscreen', 'codeview']],
                ],
                codemirror: {
                    theme: 'default',
                    mode: "text/html",
                    lineNumbers: true,
                    lineWrapping: true,
                    styleActiveLine: true,
                    htmlMode: true,
                },
                disableDragAndDrop: true
            });

            var config = {
                '.chosen-select': {width: "100%"},
                '.chosen-select-deselect': {allow_single_deselect: true},
                '.chosen-select-no-single': {disable_search_threshold: 10},
                '.chosen-select-no-results': {no_results_text: 'Nincs találat.'},
                '.chosen-select-width': {width: "95%"}
            }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
        });
    </script>
@stop