@extends('layouts.admin.app')

@section('title', 'Edit Popup Template')

@section('content_header')
    <x-admin.title
        text="Edit Popup Template"
        :bcRoute="['admin.popup-templates.edit', $popupTemplate]"
    />
@stop

@section('content')
    <form action="{{route('admin.popup-templates.update', $popupTemplate)}}" method="POST" class="general-ajax-submit">
        @csrf
        @method('PUT')
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Name</label>
                            <input name="name" type="text" class="form-control" value="{{$popupTemplate->name}}">
                            <span data-input="name" class="input-error"></span>
                        </div>
                    </div>
                </div>
                <div class="row">

                    @php
                    $translations = $popupTemplate->popupTemplateTranslations;

                    $default_translations = $popupTemplate->popupTemplateTranslations()->where('locale', config('app.locale'))->get();
                    @endphp


                    @foreach($default_translations as $default_translation)
                    @php
                        $field_name = $default_translation->id;
                    @endphp
                    <div class="col-md-12">
                        <div class="form-group">

                            <ul class="nav nav-tabs" role="tablist" style="display: flex;">
                                @foreach(LaravelLocalization::getLocalesOrder() as $localeCode => $properties)
                                    <li role="presentation" class="{{$loop->first ? 'active' : ''}}" class="nav-item">
                                        <a
                                            href="#field-{{$field_name}}-{{$localeCode}}"
                                            role="tab"
                                            data-toggle="tab"
                                            class="nav-link {{$loop->first ? 'active' : ''}}"
                                        >
                                            {{$localeCode}}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="tab-content">
                                @foreach(LaravelLocalization::getLocalesOrder() as $localeCode => $properties)
                                    <div role="tabpanel" class="tab-pane {{$loop->first ? 'active' : ''}}" id="field-{{$field_name}}-{{$localeCode}}">
                                        @php
                                            $name_ = "translations[{$field_name}]" . '[' . $localeCode . ']';

                                            $value_data = $translations->first(function ($value) use($default_translation, $localeCode) {
                                                return $value->original == $default_translation->original && $value->locale === $localeCode;
                                            });

                                            $value = isset($value_data)?$value_data->translation:'';

                                            $textarea = false;
                                            if(mb_strlen($default_translation->original) > 20){
                                               $textarea = true;
                                            }

                                        @endphp
                                        @if ($textarea??false)
                                            <textarea class="form-control" name="{{$name_}}" rows="4">{{$value}}</textarea>
                                        @else
                                            <input class="form-control" name="{{$name_}}" type="text" value="{{$value}}">
                                        @endif
                                    </div>
                                @endforeach
                            </div>

                            <span data-input="question" class="input-error"></span>
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-success min-w-100">Save</button>
        <a href="{{ route('admin.popup-templates.index') }}" class="btn btn-outline-secondary text-dark min-w-100">Cancel</a>
    </form>
@endsection