@extends('admin.layout.master')

@section('title', 'Navigasyon')

@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>
                @if(isset($navigationPages))
                    <li class="breadcrumb-item"><a href="{{ route('admin.navigation.menu.index') }}">Navigasyon</a></li>
                    <li class="breadcrumb-item active"><span>Ana Menü</span></li>
                @else
                    <li class="breadcrumb-item active"><span>Navigasyon</span></li>
                @endif
            </ol>
        </nav>
    </div>
@stop

@section('content')

    <div class="container-lg px-4">

        @if(!isset($navigationPages))
            @can('navigation.create')
                <div class="row mb-4">
                    <div class="d-flex justify-content-end">
                        <a href="{{ route('admin.navigation.menu.create') }}" class="btn btn-sm btn-primary">
                            <span class="cil-plus"></span>
                            Yeni Menü
                        </a>
                    </div>
                </div>
            @endcan
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    @if(isset($navigationPages))
                        <div class="card-body">
                            <div class="example">
                                <div class="tab-content rounded-bottom">
                                    <div class="tab-pane active preview" role="tabpanel" id="preview-1005">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Başlık</th>
                                                    <th scope="col">Slug</th>
                                                    @can(['page.update'])
                                                        <th scope="col">İşlem</th>
                                                    @endcan
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($navigationPages as $page)
                                                    <tr>
                                                        <td>
                                                            {{ $page->title }}
                                                        </td>
                                                        <td>{{ $page->slug }}</td>
                                                        @can(['page.update'])
                                                            <td>
                                                                @can('page.update')
                                                                    <a href="{{ route('admin.pages.edit', $page->id) }}" class="btn btn-sm btn-outline-primary">
                                                                        <span class="cil-pencil"></span>
                                                                    </a>
                                                                @endcan
                                                            </td>
                                                        @endcanany
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <livewire:admin.navigation.menu.index :navigationMenu="$navigationMenu ?? null" />
                    @endif
                </div>
            </div>
        </div>
    </div>

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

    <style>
        .table > :not(caption) > * > * {
            vertical-align: middle;
        }
    </style>
    @livewireStyles
@stop

@section('js')
@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v1.x.x/dist/livewire-sortable.js"></script>

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

        document.addEventListener('livewire:init', () => {
            Livewire.on('deleteTriggered', (event) => {
                swal.fire({
                    title: 'Emin misiniz?',
                    text: 'Bu menüye ait tüm linkler silinecektir ve bu işlem geri alınamaz!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Evet, sil!',
                    cancelButtonText: 'Vazgeç'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Livewire.dispatch('delete', {
                            id: event.id
                        });
                    }
                });
            });

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

@stop