@extends('layouts.app')
@php
    use \App\Http\Controllers\Whatsapp\Types\Type;

    $sketches = \App\Models\Flows\Sketch::with("SketchType")->get();
    $sketch = $sketches->filter(fn($i) => $i->cid == Request::get("cid"))->first();
    $linkList = json_encode($sketches->map(function($i){
       return ["id" => $i->id, "text" => $i->name."($i->id)"];
    }));
@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">
                    <div class="clearfix">
                        <div class="float-start">
                            <h1>Sketch</h1>
                            <p>{{$sketch->id}}</p>
                        </div>
                        <div class="float-end">
                            <a href="{{route('flows.list')}}">Regresar</a>
                        </div>
                    </div>
                    <hr class="mt-3 mb-3">
                    <form method="POST" action="{{route('Sketch.save')}}">
                        @csrf
                        <input type="hidden" name="sketch_id" value="{{$sketch->id}}">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">
                                    Tipo de Sketch:
                                </label>
                                <input type="text" value="{{$sketch->name}}" name="name" class="form-control  border-gray-300" placeholder="Nombre del Sketch">
                            </div>
                            <div class="col-md-4">
                                <label for="">
                                    Tipo de Sketch:
                                </label>
                                <select name="sketch_type_id" class="form-control">
                                    <option value="">Ninguno</option>
                                    @foreach(\App\Models\Flows\SketchType::all() as $type)
                                        <option @selected($type->id == ($sketch ? $sketch->sketch_type_id : 0)) value="{{$type->id}}">{{$type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="">
                                    Conecta con:
                                </label>
                                <select  name="next_sketch_id" class="form-control">
                                    <option value="">Ninguno</option>
                                    @foreach($sketches as $_sketch)
                                        <option @selected(($sketch ? $sketch->next_sketch_id : 0) == $_sketch->id) value="{{$_sketch->id}}">{{$_sketch->name}}(ID:{{$_sketch->id}})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="">
                                    En caso de error mostrar:
                                </label>
                                <select name="default_sketch_id" class="form-control">
                                    <option value="">Ninguno</option>
                                    @foreach($sketches as $_sketch)
                                        <option @selected(($sketch ? $sketch->default_sketch_id : 0) == $_sketch->id) value="{{$_sketch->id}}">{{$_sketch->name}}(ID:{{$_sketch->id}})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="">
                                    Esperar por respuesta:
                                </label>
                                <select name="stop_on_send" class="form-control">
                                    <option @selected($sketch->stop_on_send == 0) value="0">No</option>
                                    <option @selected($sketch->stop_on_send == 1) value="1">Si</option>
                                </select>
                            </div>
                            @if($sketch->SketchType->name == Type::TextType)
                                <x-SketchesControl.stop_on_send :type="$sketch->data_type" :dataName="$sketch->data_name" :regex="$sketch->regex" :error="$sketch->error_text"></x-SketchesControl.stop_on_send>
                            @else
                                <x-SketchesControl.stop_on_send_capture  :dataName="$sketch->data_name" ></x-SketchesControl.stop_on_send_capture>
                            @endif
                            <div class="col-md-12">
                                @if($sketch->SketchType->name == Type::ListType)
                                    <x-SketchesType.text :value="$sketch->text"></x-SketchesType.text>
                                    <x-SketchesType.list :sketch="$sketch" :linkList="$linkList"></x-SketchesType.list>
                                @elseif($sketch->SketchType->name == Type::TextType)
                                    <x-SketchesType.text :value="$sketch->text"></x-SketchesType.text>
                                @elseif($sketch->SketchType->name == Type::ButtonType)
                                    <x-SketchesType.text :value="$sketch->text"></x-SketchesType.text>
                                    <x-SketchesType.button :sketch="$sketch" :linkList="$linkList"></x-SketchesType.button>
                                @elseif($sketch->SketchType->name == Type::StickerType)
                                    <x-SketchesType.resource :value="$sketch->sticker" acceptTypes="image/webp"></x-SketchesType.resource>
                                @elseif($sketch->SketchType->name == Type::ImageType)
                                    <x-SketchesType.text :value="$sketch->text"></x-SketchesType.text>
                                    <x-SketchesType.resource :value="$sketch->image" acceptTypes="image/*"></x-SketchesType.resource>
                                @elseif($sketch->SketchType->name == Type::AudioType)
                                    <x-SketchesType.resource :value="$sketch->document" acceptTypes="audio/ogg"></x-SketchesType.resource>
                                @elseif($sketch->SketchType->name == Type::VideoType)
                                    <x-SketchesType.text :value="$sketch->text"></x-SketchesType.text>
                                    <x-SketchesType.resource :value="$sketch->document" acceptTypes="video/mp4"></x-SketchesType.resource>
                                @elseif($sketch->SketchType->name == Type::DocumentType)
                                    <x-SketchesType.text :value="$sketch->text"></x-SketchesType.text>
                                    <x-SketchesType.resource :value="$sketch->document" acceptTypes="application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
text/plain, application/pdf, image/*"></x-SketchesType.resource>
                                @elseif($sketch->SketchType->name == Type::APIType)
                                    <x-SketchesType.API  :contenido="$sketch->content ?? '{}'" :url="$sketch->url" :body="$sketch->body" :method="$sketch->method"></x-SketchesType.API>
                                @elseif($sketch->SketchType->name == Type::RouterType)
                                    <x-SketchesType.Router :sketches="$sketches" :content="$sketch->content"></x-SketchesType.Router>
                                @endif
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="float-end mt-4">
                                <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <style>
        textarea[content-type=json]{
            min-height: 300px;
            height: fit-content;
        }
    </style>
@endpush
@push('js')
    <script>

    </script>
@endpush