@extends('admin.layout.master')

@section('title', 'Dil Değişkenleri')

@section('breadcrumb')
    <div class="container-fluid px-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb my-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">Anasayfa</a>
                </li>
                <li class="breadcrumb-item"><a href="{{ route('admin.languages.index') }}">Diller</a>
                </li>
                <li class="breadcrumb-item active"><span>{{ $language->title }}</span>
                </li>
            </ol>
        </nav>
    </div>
@stop

@section('content')
    <div class="container-lg px-4">

        <div class="example">
            <ul class="nav nav-underline-border" role="tablist">
                <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1001"
                        role="tab">
                        <svg class="icon me-2">
                            <use xlink:href="{{ URL::to('admin/vendors/@coreui/icons/svg/free.svg#cil-language') }}"></use>
                        </svg>Dil Bilgileri</a>
                </li>
            </ul>
            <div class="rounded-bottom">
                <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1001">
                    <div class="row g-4">
                        <div class="col-12 col-sm-6 col-xl-4 col-xxl-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="fs-5 fw-semibold">
                                        {{ $language->default == 1 ? 'Varsayılan' : 'Varsayılan Değil' }}</div>
                                    <small class="text-body-secondary">Durum</small>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-6 col-xl-4 col-xxl-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="fs-5 fw-semibold">{{ $language->short }}</div>
                                    <small class="text-body-secondary">Kod</small>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-6 col-xl-4 col-xxl-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="fs-5 fw-semibold">{{ $language->code }}</div>
                                    <small class="text-body-secondary">Locale string</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row my-4">
            <div class="d-flex justify-content-end">
                <livewire:admin.language.create-language-variable :$language />
            </div>
        </div>

        <div class="card mb-4">
            <livewire:admin.language.show-language-variables :$language />
        </div>
    </div>

@section('css')
    <link href="{{ URL::to('admin/vendors/@coreui/icons/css/free.min.css') }}" rel="stylesheet">
@stop

@section('js')
    <script>
        const toastConfig = {
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
        };

        document.addEventListener('livewire:init', () => {

            Livewire.on('showAlert', (event) => {
                Swal.fire({
                    ...toastConfig,
                    text: event[0].text,
                    icon: event[0].icon,
                });
            });

            Livewire.on('saveCompleted', () => {
                var myModalEl = document.getElementById('createLanguageVariableModal');
                var modal = coreui.Modal.getInstance(myModalEl)
                modal.hide();
            });

            var mymodal = document.getElementById('createLanguageVariableModal')
            mymodal.addEventListener('hidden.coreui.modal', (event) => {
                Livewire.dispatch('reset-modal');
            })
        });
    </script>

    <script>
        function showInput(element) {
            Livewire.emit('editValue', element.getAttribute('wire:click').match(/\d+/)[0]);
        }
    </script>
@stop

@stop