@extends('voyager::master')

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

@section('css')
    <style>
        .panel-actions .voyager-trash {
            cursor: pointer;
        }
        .panel-actions .voyager-trash:hover {
            color: #e94542;
        }
        .settings .panel-actions{
            right:0px;
        }
        .panel hr {
            margin-bottom: 10px;
        }
        .panel {
            padding-bottom: 15px;
        }
        .sort-icons {
            font-size: 21px;
            color: #ccc;
            position: relative;
            cursor: pointer;
        }
        .sort-icons:hover {
            color: #37474F;
        }
        .voyager-sort-desc {
            margin-right: 10px;
        }
        .voyager-sort-asc {
            top: 10px;
        }
        .page-title {
            margin-bottom: 0;
        }
        .panel-title code {
            border-radius: 30px;
            padding: 5px 10px;
            font-size: 11px;
            border: 0;
            position: relative;
            top: -2px;
        }
        .modal-open .settings  .select2-container {
            z-index: 9!important;
            width: 100%!important;
        }
        .new-setting {
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }
        .new-setting .panel-title {
            margin: 0 auto;
            display: inline-block;
            color: #999fac;
            font-weight: lighter;
            font-size: 13px;
            background: #fff;
            width: auto;
            height: auto;
            position: relative;
            padding-right: 15px;
        }
        .settings .panel-title{
            padding-left:0px;
            padding-right:0px;
        }
        .new-setting hr {
            margin-bottom: 0;
            position: absolute;
            top: 7px;
            width: 96%;
            margin-left: 2%;
        }
        .new-setting .panel-title i {
            position: relative;
            top: 2px;
        }
        .new-settings-options {
            display: none;
            padding-bottom: 10px;
        }
        .new-settings-options label {
            margin-top: 13px;
        }
        .new-settings-options .alert {
            margin-bottom: 0;
        }
        #toggle_options {
            clear: both;
            float: right;
            font-size: 12px;
            position: relative;
            margin-top: 15px;
            margin-right: 5px;
            margin-bottom: 10px;
            cursor: pointer;
            z-index: 9;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .new-setting-btn {
            margin-right: 15px;
            position: relative;
            margin-bottom: 0;
            top: 5px;
        }
        .new-setting-btn i {
            position: relative;
            top: 2px;
        }
        textarea {
            min-height: 120px;
        }
        textarea.hidden{
            display:none;
        }

        .voyager .settings .nav-tabs{
            background:none;
            border-bottom:0px;
        }

        .voyager .settings .nav-tabs .active a{
            border:0px;
        }

        .select2{
            width:100% !important;
            border: 1px solid #f1f1f1;
            border-radius: 3px;
        }

        .voyager .settings input[type=file]{
            width:100%;
        }

        .settings .select2{
            margin-left:10px;
        }

        .settings .select2-selection{
            height: 32px;
            padding: 2px;
        }

        .voyager .settings .nav-tabs > li{
            margin-bottom:-1px !important;
        }

        .voyager .settings .nav-tabs a{
            text-align: center;
            background: #f8f8f8;
            border: 1px solid #f1f1f1;
            position: relative;
            top: -1px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .voyager .settings .nav-tabs a i{
            display: block;
            font-size: 22px;
        }

        .tab-content{
            background:#ffffff;
            border: 1px solid transparent;
        }

        .tab-content>div{
            padding:10px;
        }

        .settings .no-padding-left-right{
            padding-left:0px;
            padding-right:0px;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{
            background:#fff !important;
            color:#62a8ea !important;
            border-bottom:1px solid #fff !important;
            top:-1px !important;
        }

        .nav-tabs > li a{
            transition:all 0.3s ease;
        }


        .nav-tabs > li.active > a:focus{
            top:0px !important;
        }

        .voyager .settings .nav-tabs > li > a:hover{
            background-color:#fff !important;
        }

        .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="voyager-home"></i> {{ __('voyager::seeders.data_types.home_page.plural') }}
    </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">
            <!-- 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">

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

                        @php
                            $dataTypeRows = $dataType->{(!is_null($dataTypeContent->getKey()) ? 'editRows' : 'addRows' )};
                        @endphp

                        <div class="panel-body">

                            <div class="tab-content">
                                {{--banner_title--}}
                                <div class="form-group">

                                    <label for="banner_title">{{ __('voyager::seeders.data_rows.banner_title') }}</label>

                                    @include('voyager::multilingual.input-hidden-bread-edit-add', [
                                        'isModelTranslatable' => true,
                                        'dataTypeContent'  => $dataTypeContent,
                                        'row' => $dataTypeRows->where('field','banner_title')->first()
                                    ])

                                    <input type="text" class="form-control" id="banner_title" name="banner_title" placeholder="{{ __('voyager::seeders.data_rows.banner_title') }}" value="{{ $dataTypeContent->banner_title ?? '' }}">
                                </div>

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

                                    @include('voyager::multilingual.input-hidden-bread-edit-add', [
                                        'isModelTranslatable' => true,
                                        'dataTypeContent'  => $dataTypeContent,
                                        'row' => $dataTypeRows->where('field','page_description')->first()
                                    ])
                                    <textarea name="page_description" id="page_description" class="form-control">{{ $dataTypeContent->page_description ?? '' }}</textarea>
                                </div>


                                {{--link--}}
                                <div class="form-group">

                                    <label for="banner_title">{{ __('voyager::seeders.data_rows.link') }}</label>

                                    <input type="text" class="form-control" id="link" name="link" placeholder="{{ __('voyager::seeders.data_rows.link') }}" value="{{ $dataTypeContent->link ?? '' }}">
                                </div>

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

                                    @include('voyager::multilingual.input-hidden-bread-edit-add', [
                                        'isModelTranslatable' => true,
                                        'dataTypeContent'  => $dataTypeContent,
                                        'row' => $dataTypeRows->where('field','our_approach_description')->first()
                                    ])

                                    <textarea name="our_approach_description" id="our_approach_description" class="form-control">{{ $dataTypeContent->our_approach_description ?? '' }}</textarea>
                                </div>

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

                                    <input type="hidden" name="show_statistics" value="off">
                                    <input id="toggle" class="toggle @error('show_statistics') is-invalid @enderror"
                                           name="show_statistics" data-off="{{ __('voyager::generic.no') }}" data-on="{{ __('voyager::generic.yes') }}"
                                           {{ old('show_statistics') || $dataTypeContent->show_statistics ? 'checked' : '' }} type="checkbox">

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

                                {{--projects_count--}}
                                <div class="form-group">

                                    <label for="banner_title">{{ __('voyager::seeders.data_rows.projects_count') }}</label>

                                    <input type="text" class="form-control" id="projects_count" name="projects_count" placeholder="{{ __('voyager::seeders.data_rows.projects_count') }}" value="{{ $dataTypeContent->projects_count ?? '' }}">
                                </div>


                                {{--clients_count--}}
                                <div class="form-group">

                                    <label for="banner_title">{{ __('voyager::seeders.data_rows.clients_count') }}</label>

                                    <input type="text" class="form-control" id="clients_count" name="clients_count" placeholder="{{ __('voyager::seeders.data_rows.clients_count') }}" value="{{ $dataTypeContent->clients_count ?? '' }}">
                                </div>


                                {{--initiatives_count--}}
                                <div class="form-group">

                                    <label for="banner_title">{{ __('voyager::seeders.data_rows.initiatives_count') }}</label>

                                    <input type="text" class="form-control" id="initiatives_count" name="initiatives_count" placeholder="{{ __('voyager::seeders.data_rows.initiatives_count') }}" value="{{ $dataTypeContent->initiatives_count ?? '' }}">
                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- ### images ### -->
                    <div class="panel panel-bordered" >
                        <div class="panel-heading">
                            <h3 class="panel-title">{!! __('voyager::generic.background_images') !!}</h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>

                        <div class="panel-body">

                            {{-- files --}}
                            <div class="form-group col-md-12">
                                <label for="url_video">{{ __('voyager::generic.images') }}</label>
                                <div class="img-wrap row">
                                    @php
                                        $images = $dataTypeContent->files()->get();
                                    @endphp

                                    @if($images)
                                        @foreach($images as $key => $image)
                                            <div class="col-md-3 image-div">
                                                @if($image->type == "application/pdf")
                                                    <object style="max-height: 260px;" data="{{Storage::disk("oss")->url($image->url)}}" type="application/pdf" width="100%" height="500px">
                                                        <p>Unable to display PDF file. <a href="{{Storage::disk("oss")->url($image->url)}}">Download</a> instead.</p>
                                                    </object>
                                                @else
                                                    <img src="{{ filter_var($image->url, FILTER_VALIDATE_URL) ? $image->url : Voyager::image( $image->url ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                                @endif
                                                <button type="button" class="btn btn-circle btn-danger remove" data-image="{{ $image->id }}">
                                                    <i class="voyager-trash"></i>
                                                </button>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                <input type="file" accept="image/*" id="images" class="form-control-file @error('images') is-invalid @enderror" name="images[]" multiple>

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

                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary pull-right save">{{ __('voyager::generic.submit') }}</button>
        </form>

        <div style="clear:both"></div>

    </div>
@stop

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

            @if ($isModelTranslatable)
            $('.side-body').multilingual({"editing": true});
            @endif
        });
    </script>

    <script>
        $(document).ready(function() {
            var additionalConfig = {
                selector: 'textarea.richTextBox',
                toolbar: 'undo redo | blocks | bold italic  | forecolor ',
            }

            $.extend(additionalConfig, {!! json_encode($options->tinymceOptions ?? (object)[]) !!})

            tinymce.init(window.voyagerTinyMCE.getConfig(additionalConfig));
        });
    </script>

    <script>
        $(document).ready(function(){
            $(document).on('click','.remove',function(){

                var image_source = $(this).data('image');
                var type = 'home_page';

                var var_this = $(this);

                $.ajax({
                    url: "{{ route('voyager.remove_file.ajax') }}",
                    data: {
                        "image_source": image_source,
                        "type": type
                    },
                    type: "GET",
                    success: function(response)
                    {
                        toastr.success(response.success+'!');
                        $(var_this).closest('.image-div').remove();
                    },
                    error: function(xhr) {

                    }
                });

            });
        });
    </script>
@endsection