@extends('admin.layout.master')

@section('title', 'Form Düzenle')

@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.forms.index') }}">Formlar</a></li>
                <li class="breadcrumb-item active"><span>Form Düzenle</span></li>
            </ol>
        </nav>
    </div>
@stop

@section('content')

    <div class="container-lg px-4">
        <div class="card mb-4">
            <!-- form -->
            <div class="card-header">
                <strong>Form Düzenle</strong>
            </div>
            <div class="card-body">
                <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-1004" role="tab">
                                <svg class="icon me-2">
                                    <use xlink:href="{{ URL::to('admin/vendors/@coreui/icons/svg/free.svg#cil-applications') }}"></use>
                                </svg>
                                Form Düzenle
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" data-coreui-toggle="tab" href="#preview-1005" role="tab">
                                <svg class="icon me-2">
                                    <use xlink:href="{{ URL::to('admin/vendors/@coreui/icons/svg/free.svg#cil-list') }}"></use>
                                </svg>
                                Form Alanları
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" data-coreui-toggle="tab" href="#preview-1006" role="tab">
                                <svg class="icon me-2">
                                    <use xlink:href="{{ URL::to('admin/vendors/@coreui/icons/svg/free.svg#cil-comment-square') }}"></use>
                                </svg>
                                Dönüşümler
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content rounded-bottom">
                        <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1004">
                            <livewire:admin.forms.edit :$form />
                        </div>

                        <div class="tab-pane p-3" role="tabpanel" id="preview-1005">
                            <livewire:admin.forms.fields :$form />
                        </div>

                        <div class="tab-pane p-3" role="tabpanel" id="preview-1006">
                            <livewire:admin.forms.conversions :$form />
                        </div>
                    </div>
                </div>
            </div>
            <!-- form -->
        </div>
    </div>

@section('css')
    <link href="{{ URL::to('admin/vendors/@coreui/icons/css/free.min.css') }}" rel="stylesheet">
    @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('showAlert', (event) => {
                Swal.fire({
                    ...toastConfig,
                    // title: event[0].title,
                    text: event[0].text,
                    icon: event[0].icon,
                });
            });
        });
    </script>
@stop

@stop
