@extends('panel.layout.base')

@section('title',$title)

@section('content')
            {!! \App\Metha\TMethaForm::open([
                'method' => 'POST',
                'action' => $action
            ]) !!}
            @csrf
            <div class="row">
                <div class="col-lg-12 col-xl-9">
                    <div class="card">
                        <div class="card-body">
                            @if($errors->any())
                                @foreach($errors->all() as $error)
                                    <div class="alert alert-danger mg-b-0 alert-dismissible fade show" role="alert">
                                        <strong>{{ $error }}</strong>
                                    </div>
                                @endforeach
                                <br>
                            @endif
                            <div class="form-group">
                                <div class="panel panel-primary tabs-style-2">
                                    <div class=" tab-menu-heading">
                                        <div class="tabs-menu1">
                                            <!-- Tabs -->
                                            <ul class="nav panel-tabs main-nav-line">
                                                @foreach(\App\Models\Language::all() as $index => $item)
                                                    <li><a href="#{{ $item['code'] }}" class="nav-link {{ $index == 0 ? 'active' : null }}" data-bs-toggle="tab">{{ $item['language'] }}</a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="panel-body tabs-menu-body main-content-body-right border">
                                        <div class="tab-content">
                                            @foreach(\App\Models\Language::all() as $index => $item)
                                                <div class="tab-pane {{ $index == 0 ? 'active' : null }}" id="{{ $item['code'] }}">
                                                    {!! $form['lang'][$item['code']] !!}
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {!! $form['general'] !!}
                                <div class="repeater">
                                    <div data-repeater-list="images">
                                        <div data-repeater-item class="row" style="margin-bottom: 10px;">
                                            <div class="col-xl-10">
                                                <div class="form-group">
                                                    <input type="file" class="form-control" name="image"/>
                                                </div>
                                            </div>
                                            <div class="col-xl-2"><button class="btn btn-danger btn-sm" data-repeater-delete type="button"><i class="fa fa-trash"></i></button></div>
                                        </div>
                                    </div>
                                    <button class="btn btn-success btn-sm" data-repeater-language="{{ $item['code'] }}" data-repeater-create type="button"><i class="fa fa-plus"></i> Yükleyici Ekle</button>
                                </div>
                                @if($type == 'update')
                                    <hr>
                                    <div class="row">
                                        <div class="col-12">
                                            <ol class="list-group list-group-numbered">
                                                @foreach(json_decode($script_data['data'],true)['tr']['images'] as $item)
                                                    <li class="list-group-item d-flex justify-content-between align-items-start" data-type="removeImageItem">
                                                        <div class="ms-2 me-auto">
                                                            <img src="{{ asset('storage/accounts/'.$item['image']) }}" width="128" height="128">
                                                        </div>
                                                        <a data-type="removeImage" data-id="{{ $item['id'] }}" class="btn btn-danger" style="display: none">
                                                            <i class="fa fa-trash"></i>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ol>
                                        </div>
                                    </div>
                                @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="panel panel-primary tabs-style-2">
                                <div class=" tab-menu-heading">
                                    <div class="tabs-menu1">
                                        <!-- Tabs -->
                                        <ul class="nav panel-tabs main-nav-line">
                                            @foreach(\App\Models\Language::all() as $index => $item)
                                                <li><a href="#feature_tab_{{ $item['code'] }}" class="nav-link {{ $index == 0 ? 'active' : null }}" data-bs-toggle="tab">{{ $item['language'] }}</a></li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                <div class="panel-body tabs-menu-body main-content-body-right border">
                                    <div class="tab-content">
                                        @foreach(\App\Models\Language::all() as $index => $item)
                                            <div class="tab-pane {{ $index == 0 ? 'active' : null }}" id="feature_tab_{{ $item['code'] }}" data-feature-tab="{{ $item['code'] }}">

                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Kaydet</button>
                                <a href="{{ $links['list'] }}" class="btn btn-warning"><i class="fa fa-arrow-alt-circle-left"></i> Geri Dön</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {!! \App\Metha\TMethaForm::close() !!}
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js" integrity="sha512-foIijUdV0fR0Zew7vmw98E6mOWd9gkGWQBWaoA1EOFAx+pY+N8FmmtIYAVj64R98KeD2wzZh1aHK0JSpKmRH8w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        $(document).ready(function(){
            var scriptData = {!! $script_data['data'] !!};
            var $repeater = $('.repeater').repeater({
                initEmpty: true,
                show: function () {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    if(confirm('İlgili görseli silmek istediğinize emin misiniz?')) {
                        $(this).slideUp(deleteElement);
                    }
                },
                isFirstItemUndeletable: true,
            });

            @if($type == 'update')
            deliveryMethod('manuel');
            @else
            deliveryMethod('manuel');
            @endif

            $('[name="delivery"]').on('change', function(){
                deliveryMethod($(this).val());
            });

            function deliveryMethod(method)
            {
                if(method == 'manuel')
                {
                    $('[name="info[delivery_note]"]').closest('.form-group').hide();
                }else{
                    $('[name="info[delivery_note]"]').closest('.form-group').show();
                }
            }

            var gameFeatures = [];

            $('[name="game_id"]').on('change', function(){
                getGame($(this).val());
            });

            getGame($('[name="game_id"]').val());

            function getGame(gameID)
            {
                $('[data-feature-tab]').html('');

                $.ajax({
                    url: '{{ route('api.accounts.features') }}',
                    type: 'POST',
                    data: {game_id: gameID, type: 'account'},
                    success: function(result)
                    {
                        $.each(result, function(lang, items){
                            var container = $('[data-feature-tab="' + lang + '"]');
                            $.each(items, function(index, item){
                                switch (item.type)
                                {
                                    case 'select':
                                        select(container,item,lang);
                                        break;
                                    case 'radio':
                                        select(container,item,lang);
                                        break;
                                    default:
                                        input(container,item,lang);
                                        break;
                                }
                            })
                        })
                    }
                })
            }

            function input(container, args, lang)
            {
                var group = $('<div>').attr({
                    class: 'form-group'
                });
                var label = $('<label>').text(args.title);
                var inputCore = $('<input>').attr({
                    class: 'form-control',
                    name: 'feature[' + lang + '][' + args.code + ']'
                });
                $(group).append($(label)).append($(inputCore));
                $(container).append($(group));
            }

            function select(container, args, lang)
            {
                var group = $('<div>').attr({
                    class: 'form-group'
                });
                var label = $('<label>').text(args.title);
                var selectCore = $('<select>').attr({
                    class: 'form-control',
                    name: 'feature[' + lang + '][' + args.code + ']'
                });

                $.each(JSON.parse(args.values), function(key, value){
                    var option = $('<option>').attr({
                        value: value.title
                    }).text(value.title);

                    $(selectCore).append($(option));
                });

                $(group).append($(label)).append($(selectCore));
                $(container).append($(group));
            }

            $('[name="settings[price_status]"]').on('change', function(){
                if($(this).val() == 'change')
                {
                    $('[name="settings[price_request]"]').attr('disabled',false);
                    $('[name="settings[note]"]').attr('disabled',true);
                }else if($(this).val() == 'cancel')
                {
                    $('[name="settings[price_request]"]').attr('disabled',true);
                    $('[name="settings[note]"]').attr('disabled',false);
                }else{
                    $('[name="settings[price_request]"]').attr('disabled',true);
                    $('[name="settings[note]"]').attr('disabled',true);
                }
            });

            $('[data-type="removeImageItem"]').hover(function() {
                var removeBtn = $(this).find('[data-type="removeImage"]');
                if($(removeBtn).is(':visible'))
                {
                    $(removeBtn).hide();
                }else{
                    $(removeBtn).show();
                }
            });

            $('[data-type="removeImage"]').on('click', function(){
                var removeLi = $(this).closest('li');
                var imageID = $(this).data('id');

                Swal.fire({
                    title: "Uyarı?",
                    text: "İlgili görseli silmek istediğinize emin misiniz?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Evet",
                    cancelButtonText: "Hayır",
                }).then(function(result){
                    if (result.isConfirmed)
                    {
                        $.ajax({
                            url: '{{ route('api.account.image') }}',
                            type: 'POST',
                            headers: {
                                type: 'avert-remove'
                            },
                            data: {id: imageID},
                            success: function()
                            {
                                Swal.fire({
                                    title: "Başarılı!",
                                    text: "Görsel silme işleminiz başarılı.",
                                    icon: "success"
                                });

                                $(removeLi).remove();
                            }
                        })
                    }
                })
            })


            setTimeout(function(){
                $.each(scriptData, function(dataLanguage, dataItem){
                    $.each(dataItem.feature, function(key, value){
                        $('[name="feature[' + dataLanguage + '][' + value.name + ']"]').val(value.value);
                    });
                });
            },1000)
        });
    </script>
@endsection