@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;
        }
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-credit-cards"></i> {{ __('voyager::seeders.data_types.about_us_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">
                                {{--page_title--}}
                                <div class="form-group">

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

                                    @include('voyager::multilingual.input-hidden-bread-edit-add', [
                                        'isModelTranslatable' => true,
                                        'dataTypeContent'  => $dataTypeContent,
                                        'row' => $dataTypeRows->where('field','page_title')->first()
                                    ])
                                    <input type="text" class="form-control" id="banner_title" name="page_title" placeholder="{{ __('voyager::seeders.data_rows.page_title') }}" value="{{ old('page_title', $dataTypeContent->page_title ?? '') }}">
                                </div>

                                {{--page_description--}}
                                <div class="form-group">
                                    <label for="name">{{ __('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">{{ old('page_description', $dataTypeContent->page_description ?? '') }}</textarea>
                                </div>

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

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

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

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

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

                                    <textarea name="our_vision_description" id="our_vision_description" class="form-control">{{ old('our_vision_description', $dataTypeContent->our_vision_description ?? '') }}</textarea>
                                </div>

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

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

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

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

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

                                    <textarea name="our_mission_description" id="our_mission_description" class="form-control">{{ old('our_mission_description', $dataTypeContent->our_mission_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>

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

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

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

                    </div>

                </div>

                {{--<div class="col-md-4">
                    <div class="panel panel panel-bordered panel-warning">
                        <div class="panel-body">
                            <div class="form-group">
                                @if(isset($dataTypeContent->banner_image))
                                    <img src="{{ filter_var($dataTypeContent->banner_image, FILTER_VALIDATE_URL) ? $dataTypeContent->banner_image : Voyager::image( $dataTypeContent->banner_image ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                @endif
                                <input type="file" data-name="banner_image" name="banner_image">
                            </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.addEventListener('DOMContentLoaded', function () {
            let container = document.getElementById('statistics-container');
            let addBtn = document.getElementById('add-statistic');
            let count = 1; // Start with 1 since the first input is already there

            addBtn.addEventListener('click', function () {
                let newStatistic = document.createElement('div');
                newStatistic.className = 'statistic-item mb-2';
                newStatistic.innerHTML = `
                <label for="statistics[${count}][title]" class="form-label">Title</label>
                <input type="text" name="statistics[${count}][title]" class="form-control mb-1" placeholder="Title" required>
                <label for="statistics[${count}][count]" class="form-label">Count</label>
                <input type="number" name="statistics[${count}][count]" class="form-control mb-1" placeholder="Count" required>
                <button type="button" class="btn btn-danger btn-sm remove-statistic">Remove</button>
            `;
                container.appendChild(newStatistic);
                count++;
            });

            container.addEventListener('click', function (e) {
                if (e.target && e.target.classList.contains('remove-statistic')) {
                    e.target.parentElement.remove();
                }
            });
        });
    </script>

    <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>
@endsection