@extends('layouts.app')
@php
    $sketchTypes = \App\Models\Flows\SketchType::select([
                "id",
                \DB::RAW("UPPER(name) as name")
            ])
        ->pluck("name","id")
        ->toJson();
@endphp
@section('content')
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-3">
                    <h1>Flows</h1>

                    <p>Sistema para gestionar Flows de la DB</p>


                    <table class="table table-striped" id="table"
                           data-toggle="table"
                           class="table-responsive">
                        <thead>
                        <tr>
                            <th data-field="prenom" data-sortable="true">Folio</th>
                            <th data-field="sketch">Sketch</th>
                            <th data-field="examen" data-filter-control="select" data-sortable="true">Tipo</th>
                            <th data-field="text"  data-sortable="true">Texto</th>
                            <th data-field="note" data-sortable="true">On Success</th>
                            <th data-field="next" data-sortable="true">On Error</th>
                            <th data-field="default" data-sortable="true">Acción</th>
                            <th data-field="tool" data-sortable="true">Herramientas</th>
                        </tr>
                        </thead>
                        <tbody>

                        @foreach(\App\Models\Flows\Sketch::get() as $sketch)
                            <tr>
                                <td>{{$sketch->id}}</td>
                                <td class="text-uppercase">
                                    <a class="text-blue-600" href="/flows/sketch?cid={{$sketch->cid}}">
                                        {{$sketch->name ?? "Sin nombre"}}
                                    </a>
                                </td>
                                <td ass="text-uppercase">
                                    <a class="text-blue-600" href="/flows/sketch?cid={{$sketch->cid}}">
                                        {{$sketch->SketchType->name}}
                                    </a>
                                </td>
                                <td>
                                    {!!$sketch->text."<br>"!!}
                                    {{$sketch->image}}
                                    {{$sketch->sticker}}
                                    {{$sketch->document}}
                                </td>
                                <td class="text-uppercase">{{$sketch->nextSketch ? $sketch->nextSketch->name."($sketch->next_sketch_id)" : "No hay"}}</td>
                                <td class="text-uppercase">{{$sketch->defaultSketch ? $sketch->defaultSketch->name."($sketch->default_sketch_id)"  : "No hay"}}</td>
                                <td>{{$sketch->stop_on_send == 1 ? "DETENER" : "CONTINUAR"}}</td>
                                <td>
                                    <livewire:mark-as-default :sketch="$sketch"></livewire:mark-as-default>
                                </td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
<x-datatables></x-datatables>
@push('js')
    <script>
        let inputTypes = {!! $sketchTypes !!};
        $("#table").DataTable({
          scrollX: true,
            ...buttonConfig,
            buttons : [
                {
                    text : "Nuevo",
                    action : function(x,y,z,w){
                        Swal.fire({
                            icon : "info",
                            title : "Crear nuevo Sketch",
                            text : "Selecciona el tipo de Sketch a crear",
                            input : "select",
                            inputOptions : inputTypes,
                            inputAttributes : {
                                required : true
                            },
                            allowOutsideClick : false,
                            showLoaderOnConform: true,
                            showCancelButton : true,
                            confirmButtonText : "Crear",
                            cancelButtonText : "Cancelar",
                            preConfirm : (sketch_type_id) => {
                                return location.href = "{{route('flows.sketch.new')}}?sketch_type_id="+sketch_type_id
                            }
                        })
                    }
                }
            ]
        });
    </script>
@endpush