@extends('voyager::master')

@section('page_title', __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <link rel="stylesheet" href="{{asset('css/selectize.css')}}">

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }
    </style>
    <style>
        .panel .mce-panel {
            border-left-color: #fff;
            border-right-color: #fff;
        }

        .panel .mce-toolbar,
        .panel .mce-statusbar {
            padding-left: 20px;
        }

        .panel .mce-edit-area,
        .panel .mce-edit-area iframe,
        .panel .mce-edit-area iframe html {
            padding: 0 10px;
            min-height: 350px;
        }

        .mce-content-body {
            color: #555;
            font-size: 14px;
        }

        .panel.is-fullscreen .mce-statusbar {
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 200000;
        }

        .panel.is-fullscreen .mce-tinymce {
            height: 100%;
        }

        .panel.is-fullscreen .mce-edit-area,
        .panel.is-fullscreen .mce-edit-area iframe,
        .panel.is-fullscreen .mce-edit-area iframe html {
            height: 100%;
            position: absolute;
            width: 99%;
            overflow-y: scroll;
            overflow-x: hidden;
            min-height: 100%;
        }

        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }

        .img-wrap {
            position: relative;
        }

        .image-div {
            position: relative;
        }
        .img-wrap .remove {
            position: absolute;
            top: 2px;
            left: 20px;
            z-index: 100;
        }
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
    </h1>

    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content container-fluid">
        <form class="form-edit-add" role="form"
              action="@if(!is_null($dataTypeContent->getKey())){{ route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) }}@else{{ route('voyager.'.$dataType->slug.'.store') }}@endif"
              method="POST" enctype="multipart/form-data" autocomplete="off">
            <!-- PUT Method if we are editing -->
            @if(isset($dataTypeContent->id))
                {{ method_field("PUT") }}
            @endif
            {{ csrf_field() }}

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-bordered">
                    {{-- <div class="panel"> --}}
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $key => $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="panel-body">

                            <!-- ### name ### -->
                            <div class="form-group">
                                <label for="name">{{ __('voyager::seeders.data_rows.name') }}</label>

                                @include('voyager::multilingual.input-hidden', [
                                    'isModelTranslatable' => true,
                                    '_field_name'  => 'name',
                                    '_field_trans' => get_field_translations($dataTypeContent, 'name')
                                ])
                                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $dataTypeContent->name ?? '') }}" placeholder="{{ __('voyager::seeders.data_rows.name') }}">

                                @error('name')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            {{--parent_id--}}
                            <div class="form-group">
                                <label for="phone">{{ __('voyager::seeders.data_rows.parent') }}</label>
                                <select name="parent_id" class="form-control">
                                    <option selected value>--None--</option>
                                    @foreach(\App\Models\AddOn::getTree() as $option)
                                        @if($option->top())
                                            <optgroup label="{{ $option->name  }}">
                                            @foreach($option->children as $child)
                                                @if($child->hasParentAndChildren())
                                                    <option value="{{ $child->id }}" {{ (old('parent_id') == $child->id || $dataTypeContent->parent_id == $child->id) ? "selected" : "" }}>-{{ $child->name }}</option>
                                                    @else
                                                    <option value="{{ $child->id }}" {{ (old('parent_id') == $child->id || $dataTypeContent->parent_id == $child->id) ? "selected" : "" }}>--{{ $child->name }}</option>
                                                @endif
                                            @endforeach
                                            </optgroup>
                                        @endif
                                    @endforeach
                                </select>

                                @error('parent_id')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="icon">{{ __('voyager::generic.upload_icon') }}</label>

                                <div class="selected-option">
                                    @if(old('icon', $dataTypeContent->icon))
                                        <img style="background-color: #c0c2c5;max-width: 100px;" src="{{ Voyager::image( old('icon', $dataTypeContent->icon) ) }}" alt="Selected Icon" />
                                    @else
                                        <span>Select an icon</span>
                                    @endif
                                </div>

                                <input type="file" name="icon_file" class="form-control" accept=".svg">
                            </div>

                            <div class="form-group">
                                <label for="icon_select">{{ __('voyager::generic.select_icon_text') }}</label>
                                <select id="iconSelect" name="icon" class="form-control select2-icon">
                                    <option value="">-- Select Icon --</option>
                                    @foreach(File::files(public_path('storage/addons_icons')) as $file)
                                        @php $fileName = 'addons_icons/'.$file->getFilename(); @endphp
                                        <option value="{{ $fileName }}" data-icon="{{ Voyager::image( $fileName ) }}"
                                            {{ old('icon', $dataTypeContent->icon ?? '') === $fileName ? 'selected' : '' }}>
                                            {{ $fileName }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary pull-right save">
                {{ __('voyager::generic.save') }}
            </button>
        </form>
        <div style="display:none">
            <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
            <input type="hidden" id="upload_type_slug" value="{{ $dataType->slug }}">
        </div>
    </div>
@stop

@section('javascript')
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>


    <script>
        $(document).ready(function () {
            $('#iconSelect').select2({
                templateResult: formatIconOption,
                templateSelection: formatIconOption
            });

            function formatIconOption (state) {
                if (!state.id) return state.text;
                var iconUrl = $(state.element).data('icon');
                return $(`<span><img src="${iconUrl}" style="width:20px; margin-right:5px;" /> ${state.text}</span>`);
            }
        });
    </script>

    <script>
        $('document').ready(function () {
            $('.toggle').bootstrapToggle();

            @if ($isModelTranslatable)
            $('.side-body').multilingual({"editing": true});
            $(document).on('click','.language-selector',function (){
                reinitSelectize('#input-tags3');
            })
            @endif
        });
    </script>
@stop