@extends('panel.layout.base')

@section('title','Paypal')

@section('content')
    <div class="col-xl-12">
        <form method="post">
            @csrf
            <div class="card mg-b-20" id="tabs-style2">
                <div class="card-header">
                    <div class="card-options">
                        <a href="javascript:void(0);" class="btn btn-primary btn-sm" data-type="createPayment"><i class="fa fa-plus"></i> Hesap Oluştur</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="panel panel-primary tabs-style-2">
                        <div class=" tab-menu-heading">
                            <div class="tabs-menu1">
                                <ul class="nav panel-tabs main-nav-line" data-type="tab">
                                    @if(count($data) > 0)
                                        @foreach($data as $index => $item)
                                            <li><a href="#tab{{ $index }}" class="nav-link {{ $index == 0 ? 'active' : '' }}" data-bs-toggle="tab">{{ $item['title'] }}</a></li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>
                        </div>
                        <div class="panel-body tabs-menu-body main-content-body-right border">
                            <div class="tab-content" data-type="pane">
                                @if(count($data) > 0)
                                    @foreach($data as $index => $item)
                                        <div class="tab-pane {{ $index == 0 ? 'active' : '' }}" id="tab{{ $index }}">
                                            <input class="form-control" name="current[{{ $index }}][id]" value="{{ $item['id'] }}" style="display: none">
                                            <div class="form-group">
                                                <label>Başlık</label>
                                                <input class="form-control" name="current[{{ $index }}][title]" value="{{ $item['title'] }}">
                                            </div>
                                            <div class="form-group">
                                                <label>Başlık [Görünen]</label>
                                                <input class="form-control" name="current[{{ $index }}][title_site]" value="{{ $item['title_site'] }}">
                                            </div>
                                            <div class="form-group">
                                                <label>API Key</label>
                                                <input class="form-control" name="current[{{ $index }}][api_key]" value="{{ $item['data']['api_key'] }}">
                                            </div>
                                            <div class="form-group">
                                                <label>Secret Key</label>
                                                <input class="form-control" name="current[{{ $index }}][secret_key]" value="{{ $item['data']['secret_key'] }}">
                                            </div>
                                            <div class="form-group">
                                                <label>Yayın Durumu</label>
                                                <select class="form-control" name="current[{{ $index }}][publish]">
                                                    <option value="Y" {{ $item['publish'] == 'Y' ? 'selected' : null }}>Aktif</option>
                                                    <option value="N" {{ $item['publish'] == 'N' ? 'selected' : null }}>Pasif</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label>Yayınlanacak Ülkeler</label>
                                                <select class="form-control select2" name="current[{{ $index }}][countries][]" multiple>
                                                    @foreach(\App\Models\Countries::all()->toArray() as $item)
                                                        <option value="{{ $item['id'] }}">{{ $item['title'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label>Yayınlanacak Ülke Grubu</label>
                                                <select class="form-control select2" name="current[{{ $index }}][country_group]">
                                                    @foreach(\App\Models\CountryGroup::all()->toArray() as $item)
                                                        <option value="{{ $item['id'] }}">{{ $item['title'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="text-center" data-type="message">
                                        <p>Sistemde kayıtlı bir ödeme bilgisi bulunmamaktadır.Aşağıdaki "<i>Hesap Oluştur</i>' butonuna tıklayabilirsiniz.</p>
                                        <button type="button" class="btn btn-sm btn-primary" data-type="createPayment"><i class="fa fa-plus"></i> Hesap Oluştur</button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Kaydet</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet" />
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

    <script>
        $(document).ready(function(){
            var coutries = {!! $countries !!};

            var elements = [
                {title: 'Başlık',name: 'title'},
                {title: 'Başlık [Görünen]',name: 'title_site'},
                {title: 'API Key',name: 'api_key'},
                {title: 'Secret Key',name: 'secret_key'},
                {title: 'Callback URL',name: 'callback_url'},
                {title: 'Success URL',name: 'success_url'},
                {title: 'Fail URL',name: 'fail_url'},
                {title: 'Yayın Durumu',name: 'publish'},
                {title: 'Yayınlanacak Ülkeler',name: 'countries'},
                {title: 'Yayınlanacak Ülke Grubu',name: 'country_group'},
            ];

            var tabIndex = {{ count($data) > 0 ? count($data) : 0 }};
            function addTab(options)
            {
                var active = options.index == 0 ? 'active' : null;

                var li = $('<li>');
                var title = $('<span>').text('<başlıksız>');

                var link = $('<a>').attr({
                    class: 'nav-link ' + active,
                    href: '#tab' + options.index,
                    'data-bs-toggle': 'tab'
                }).append($(title));
                $(li).append($(link));
                $('[data-type="tab"]').append($(li));

                addPane(options,title);
            }

            function addPane(options,title)
            {
                var active = options.index == 0 ? 'active' : null;

                var pane = $('<div>').attr({
                    class: 'tab-pane ' + active,
                    id: 'tab' + options.index
                });

                $.each(elements, function(index, item){
                    formGroup({
                        index: tabIndex,
                        title: item.title,
                        name: item.name,
                        pane: pane,
                        titleElement: title
                    });
                });

                $('[data-type="pane"]').append($(pane));
            }

            $('[data-type="createPayment"]').on('click', function () {
                emptyMessage(true);
                addTab({
                    index: tabIndex
                });
                tabIndex++;
            });

            function emptyMessage(status)
            {
                if(status)
                {
                    $('[data-type="message"]').hide();
                }else{
                    $('[data-type="message"]').show();
                }
            }


            function formGroup(options)
            {
                var group = $('<div>').attr({
                    class: 'form-group',
                });
                var label = $('<label>').text(options.title);
                var input;

                if(options.name == 'publish')
                {
                    input = $('<select>').attr({
                        class: 'form-control',
                        name: 'payment[' + options.index + '][' + options.name + ']',
                    });
                    $.each([{'value':'Y','title':'Aktif'},{'value':'N','title':'Pasif'}], function(key, value){
                        var option = $('<option>').attr({
                            value: value.value
                        }).text(value.title);
                        $(input).append($(option));
                    });
                }else if(options.name == 'countries')
                {
                    input = $('<select>').attr({
                        class: 'form-control',
                        name: 'payment[' + options.index + '][' + options.name + ']',
                        multiple: true,
                    });

                    $.each(coutries, function(key, value){
                        var option = $('<option>').attr({
                            value: value.id
                        }).text(value.title);
                        $(input).append($(option));
                    });
                }else{
                    input = $('<input>').attr({
                        class: 'form-control',
                        name: 'payment[' + options.index + '][' + options.name + ']',
                    });
                }

                if(options.name == 'title')
                {
                    $(input).on('input', function(){
                        if($(this).val() == '')
                        {
                            $(options.titleElement).text('<başlıksız>');
                        }else{
                            $(options.titleElement).text($(this).val())
                        }
                    })
                }

                $(group).append($(label)).append($(input));
                $(options.pane).append($(group));

                if(options.name == 'countries')
                {
                    $(input).select2({
                        width: '100%'
                    });
                }
            }

            @foreach($data as $index => $item)
            $('[name="current[{{ $index }}][countries][]"]').val({!! $item['countries'] !!}).trigger('change');
            @endforeach
        });
    </script>
@endsection