@extends('config::layouts.master')

@section('page_level_css')
<style type="text/css">
    .config-card .tab-pane > .card {
        border: 0;
        box-shadow: none;
    }
</style>
@endsection

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Configuration</h1>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="container-fluid">
            <div class="config-card card card-info card-tabs">
                <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="config_tabs" role="tablist">
                        @foreach($tabs as $tab)
                            <li class="nav-item">
                                <a class="nav-link{{ $tab['id'] == $activeTab ? ' active' : '' }} tab-link" id="tab-{{ $tab['id'] }}" data-tab-id="{{ $tab['id'] }}" data-toggle="pill" href="#tab-{{ $tab['id'] }}-content" role="tab" aria-controls="tab-{{ $tab['id'] }}-content" aria-selected="false">{{ $tab['name'] }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="card-body p-0">
                    <div class="tab-content" id="config_tab_contents">
                        @foreach($tabs as $tab)
                            <div class="tab-pane fade{{ $tab['id'] == $activeTab ? ' active show' : '' }}" id="tab-{{ $tab['id'] }}-content" role="tabpanel" aria-labelledby="tab-{{ $tab['id'] }}">
                                <div class="d-flex justify-content-center"><img src="{{ asset('images/loader-v2.gif') }}" height="64"/></div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('page_level_js')
<script type="text/javascript">
    toastr.options = {"positionClass": "toast-top-center"};

    var activeTab = "{{ $activeTab }}";
    var loadedTabs = [];
    var loadingTab = null;

    function loadForm(tabId) {
        var url = ("{{ route('configs.form', ['tab' => 'tabid']) }}").replace('/tabid/', '/' + tabId + '/');

        loadingTab = tabId;

        $.ajax({
            url: url,
            type: 'GET',
            success: function(html) {
                $('.tab-pane.active').html(html);

                loadedTabs.push(tabId);
            },
            error: function(xhr, status, error) {
                var errorMessage = xhr.responseJSON.message ? xhr.responseJSON.message : 'Unable to load the form.';

                toastr.error(errorMessage);
                $('.tab-pane.active').html('<div class="p-2">' + errorMessage + '</div>');
            },
            complete: function() {
                loadingTab = null;
            }
        });
    }

    $(document).ready(function() {
        if (activeTab != '') {
            loadForm(activeTab);
        }
    });

    $('.tab-link').click(function() {
        if (loadingTab != $(this).attr('data-tab-id') && $.inArray($(this).attr('data-tab-id'), loadedTabs) == -1) {
            loadForm($(this).attr('data-tab-id'));
        }

        if ($(this).attr('data-tab-id')) {
            var configUrl = ("{{ route('configs.index', ['tab' => 'tabid']) }}").replace('/tabid', '/' + $(this).attr('data-tab-id'));

            window.history.pushState({}, document.title, configUrl);
        }
    });
</script>
@endsection