@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;
        }
        .bootstrap-datetimepicker-widget {
            z-index: 2147483647 !important;
            position: sticky !important;
        }
    </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-8">
                    <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

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

                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <i class="voyager-character"></i> {{ __('voyager::report.title') }}
                                <span class="panel-desc"> {{ __('voyager::report.title_sub') }}</span>
                            </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">

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

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

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

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

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

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

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

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

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

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

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

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


                            @if(check_permission('reports_activation'))

                                <!-- ### STATUS ### -->
                                <div class="form-group">
                                    <label for="status">{{ __('voyager::report.status') }}</label>

                                    <select class="form-control @error('status') is-invalid @enderror" name="status" id="status_select">
                                        <option selected disabled>{{ __('voyager::seeders.data_rows.choose_status') }}</option>
                                        <option value="DRAFT" {{ 'DRAFT' == old('status') || 'DRAFT' == $dataTypeContent->status ? 'selected':'' }}>{{ __('voyager::post.status_draft') }}</option>
                                        <option value="PUBLISHED" {{ 'PUBLISHED' == old('status') || 'PUBLISHED' == $dataTypeContent->status ? 'selected':'' }}>{{ __('voyager::post.status_published') }}</option>
                                        <option value="PENDING" {{ 'PENDING' == old('status') || 'PENDING' == $dataTypeContent->status ? 'selected':'' }}>{{ __('voyager::post.status_pending') }}</option>
                                    </select>

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

                                {{-- published date --}}
                                <div class="form-group">
                                    <label for="published_at">{{ __('voyager::seeders.data_rows.published_at') }}</label>
                                    <input class="form-control pre-date @error('published_at')is-invalid @enderror datepicker" name="published_at" type="text" placeholder="{{ __('voyager::seeders.data_rows.published_at') }}" id="published_at" value="{{ old('published_at', $dataTypeContent->published_at ?? '') }}">

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

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

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

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

                        </div>
                    </div>

                    <div class="panel panel-bordered">
                        <div class="panel-heading">
                            <h3 class="panel-title">{!! __('voyager::report.additional_fields') !!}</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">
                            <div class="form-group">
                                <label for="body">{{ __('voyager::seeders.data_rows.category') }}</label>

                                <select class="form-control select2" name="category_id" id="category_id">
                                    @foreach(\App\Models\Category::all() as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id || ( $dataTypeContent && $dataTypeContent->category_id == $category->id) ? 'selected' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>

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

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

                                <select class="form-control select2" name="type_id" required>
                                    @foreach(\App\Models\ReportType::where('type','financial_reports')->get() as $type)
                                        <option value="{{ $type->id }}" {{ (old('type_id') == $type->id || $dataTypeContent->type_id == $type->id) ? "selected" : "" }}>{{ $type->getTranslatedAttribute('name') }}</option>
                                    @endforeach
                                </select>

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

                    <!-- ### files ### -->
                    <div class="panel panel-bordered" >
                        <div class="panel-heading">
                            <h3 class="panel-title">{!! __('voyager::report.files') !!}</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::report.files') }}</label>
                                <div class="img-wrap row">
                                    @if(isset($files) && !empty($files))
                                        @foreach($files as $key => $package_file)
                                            <div class="col-md-3 image-div">
                                                @if($package_file['type'] == "application/pdf")
                                                    <object style="max-height: 260px;" data="{{$package_file['url']}}" type="application/pdf" width="100%" height="500px">
                                                        <p>Unable to display PDF file. <a href="{{$package_file['url']}}">Download</a> instead.</p>
                                                    </object>

                                                    <a target="_blank" class="btn btn-dark" href="{{$package_file['url']}}">Download</a>
                                                @else
                                                    <img src="{{ filter_var($package_file['url'], FILTER_VALIDATE_URL) ? $package_file['url'] : Voyager::image( $package_file['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="{{ $package_file['id'] }}">
                                                    <i class="voyager-trash"></i>
                                                </button>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                <label>{{ __('voyager::seeders.data_rows.english_file') }}</label>
                                <input type="file" accept="application/pdf" id="file" class="form-control-file @error('file') is-invalid @enderror" name="file">

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

                            <div class="form-group col-md-12">
                                <label for="url_video">{{ __('voyager::report.files') }}</label>
                                <div class="img-wrap row">
                                    @if(isset($ar_files) && !empty($ar_files))
                                        @foreach($ar_files as $key => $package_file)
                                            <div class="col-md-3 image-div">
                                                @if($package_file['type'] == "application/pdf")
                                                    <object style="max-height: 260px;" data="{{$package_file['url']}}" type="application/pdf" width="100%" height="500px">
                                                        <p>Unable to display PDF file. <a href="{{$package_file['url']}}">Download</a> instead.</p>
                                                    </object>

                                                    <a target="_blank" class="btn btn-dark" href="{{$package_file['url']}}">Download</a>
                                                @else
                                                    <img src="{{ filter_var($package_file['url'], FILTER_VALIDATE_URL) ? $package_file['url'] : Voyager::image( $package_file['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="{{ $package_file['id'] }}">
                                                    <i class="voyager-trash"></i>
                                                </button>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                <label>{{ __('voyager::seeders.data_rows.arabic_file') }}</label>
                                <input type="file" accept="application/pdf" id="arabic_file" class="form-control-file @error('file') is-invalid @enderror" name="arabic_file">

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

                </div>

                <!-- ### RIGHT SIDE ### -->
                <div class="col-md-4">

                    <!-- ### IMAGE ### -->
                    <div class="panel panel-bordered panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon wb-image"></i> {{ __('voyager::report.image') }}</h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>

                        {{-- Upload Image --}}
                        <div class="panel-body" align="center">

                            <div class="form-group">
                                @if(isset($dataTypeContent->cover_image))
                                    <img src="{{ filter_var($dataTypeContent->cover_image, FILTER_VALIDATE_URL) ? $dataTypeContent->cover_image : Voyager::image( $dataTypeContent->cover_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="cover_image" name="cover_image">
                            </div>

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

                    <div class="panel panel-bordered panel-warning">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon wb-image"></i> {{ __('voyager::report.image') }} ( ar)</h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>

                        {{-- Upload image_ar --}}
                        <div class="panel-body" align="center">

                            <div class="form-group">
                                @if(isset($dataTypeContent->image_ar))
                                    <img src="{{ filter_var($dataTypeContent->image_ar, FILTER_VALIDATE_URL) ? $dataTypeContent->image_ar : Voyager::image( $dataTypeContent->image_ar ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                @endif
                                <input type="file" data-name="image_ar" name="image_ar">
                            </div>

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

                    <!-- ### DETAILS ### -->
                    <div class="panel panel panel-bordered panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon wb-clipboard"></i> {{ __('voyager::report.details') }}</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">

                            <!-- ### SLUG ### -->
                            <div class="form-group">
                                <label for="slug">{{ __('voyager::report.slug') }}</label>

                                {{-- post slug listen by slugify function --}}
                                <input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" placeholder="{{ __('voyager::report.slug') }}" {!! isFieldSlugAutoGenerator($dataType, $dataTypeContent, "slug") !!} value="{{ old('slug', $dataTypeContent->slug ?? '') }}">

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

                        </div>

                    </div>

                    <!-- ### SEO CONTENT ### -->
                    <div class="panel panel-bordered panel-dark">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon wb-search"></i> {{ __('voyager::report.seo_content') }}</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">

                            <!-- ### META DESCRIPTION ### -->
                            <div class="form-group">
                                <label for="meta_description">{{ __('voyager::report.meta_description') }}</label>

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

                                <textarea class="form-control @error('meta_description') is-invalid @enderror" name="meta_description" placeholder="{{ __('voyager::report.meta_description') }}">{{ old('meta_description', $dataTypeContent->meta_description ?? '') }}</textarea>

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

                            <!-- ### META KEYWORDS ### -->
                            <div class="form-group">
                                <label for="meta_keywords">{{ __('voyager::report.meta_keywords') }}</label>

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

                                <input type="text" name="meta_keywords" id="input-tags3" class="form-control demo-default selectized @error('meta_keywords') is-invalid @enderror" value="{{ old('meta_keywords', $dataTypeContent->meta_keywords ?? '') }}"
                                       tabindex="-1" >

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

                            <!-- ### SEO TITLE ### -->
                            <div class="form-group">
                                <label for="seo_title">{{ __('voyager::report.seo_title') }}</label>

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

                                <input type="text" class="form-control @error('seo_title') is-invalid @enderror" name="seo_title" placeholder="{{ __('voyager::report.seo_title') }}" value="{{ old('seo_title', $dataTypeContent->seo_title ?? '') }}">

                                @error('seo_title')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </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')
    {{-- KeysWords input --}}
    <script src="{{asset('js/selectize.js')}}"></script>

    <script>
        $('.datepicker').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss', // Match the format in your input value
        });
    </script>

    <script>
        // Function to initialize Selectize
        function initSelectize(selector) {
            $(selector).selectize({
                plugins: ['remove_button'],
                delimiter: ',',
                persist: false,
                placeholder     : "{{ __('voyager::report.meta_keywords') }}",
                create: function (input)
                {
                    return {
                        value: input,
                        text: input
                    }
                }
            });
        }

        // Function to reinitialize Selectize
        function reinitSelectize(selector, newOptions = []) {
            const $input = $(selector);

            // Destroy the existing Selectize instance
            if ($input[0].selectize) {
                $input[0].selectize.destroy();
            }

            // Update the options if provided
            if (newOptions.length > 0) {
                $input.empty(); // Clear the existing options
                newOptions.forEach(option => {
                    $input.append(new Option(option.text, option.value));
                });
            }

            // Reinitialize Selectize
            initSelectize(selector);
        }

        $('document').ready(function () {
            $('#slug').slugify();
            initSelectize('#input-tags3');
        });
    </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>

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

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

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