@extends('livewire.forms.input-template')

@section('auto-update')
@parent
    <ul>
        @forelse($inputsData[$key][$input->id]['items'] as $k=>$item)
            <li class="mb-2">
                <div class="row">
                    <div class="col-md-7">
                        <input type="text"
                            wire:model.lazy="inputsData.{{ $key }}.{{ $input->id }}.items.{{ $k }}"
                            class="form-control w-100" placeholder="item 1" />
                    </div>
                    <div class="col-md-4">
                        <button class="btn btn-outline-danger btn-sm"
                            wire:click.prevent="removeItem({{ $key }},{{ $input->id }},{{ $k }})"><i
                                class="fas fa-trash"> Supp </i></button>
                    </div>
                </div>
            </li>


        @empty
            <p>
                Empty List
            </p>
        @endforelse
    </ul>
    <div class="col-md-4">
        <button class="btn btn btn-outline-success btn-sm"
            wire:click.prevent="addItem({{ $key }},{{ $input->id }})"><i class="fas fa-plus"> Add
            </i></button>
    </div>
@overwrite

@section('pending')
@parent
    <ul>
        @forelse($inputsData[$key][$input->id]['items'] as $k=>$item)
            <li class="mb-2">
                <div class="row">
                    <div class="col-md-7">
                        <input type="text"
                            wire:model.defer="inputsData.{{ $key }}.{{ $input->id }}.items.{{ $k }}"
                            class="form-control w-100" placeholder="item 1" />
                    </div>
                    <div class="col-md-4">
                        <button class="btn btn-outline-danger btn-sm"
                            wire:click.prevent="removeItem({{ $key }},{{ $input->id }},{{ $k }})"><i
                                class="fas fa-trash"></i>Supprimer </button>
                    </div>
                </div>
            </li>
        @empty
            <p>
                Empty List
            </p>
        @endforelse
    </ul>
    <div class="col-md-4">
        <button class="btn btn-outline-success btn-sm"
            wire:click.prevent="addItem({{ $key }},{{ $input->id }})"><i class="fas fa-plus"></i>Ajouter</button>
    </div>
@overwrite

@section('render')    
        @php $list=json_decode($input->value,true) @endphp
        @if(!empty($list))
        <div class="col-md-12">
            <div class="col p-1">
                <div class="btn-card w-100 p-2">
                    <div class="container-fluid">
                        <div class="row pb-2">
                            <div class="col-auto">
                                <i class="fas fa-list pr-1"></i>
                                {{ $input->display_name }}
                            </div>
                        </div>
                    </div>
                    <ul class="list-group">
                        @foreach ($list['items'] as $element)
                            <li class="list-group-item">{{ $element }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        @endif
@overwrite

@section('display')    
        @if ($input->value != null)
            @php $list=json_decode($input->value,true) @endphp
            <ul class="list-group">
                @foreach ($list['items'] as $element)
                    <li class="list-group-item">{{ $element }}</li>
                @endforeach
            </ul>
        @endif
@overwrite

@section('other')    
        @if ($input->value != null)
            @php $list=json_decode($input->value,true) @endphp
            <ul class="list-group">
                @foreach ($list['items'] as $element)
                    <li class="list-group-item">{{ $element }}</li>
                @endforeach
            </ul>
        @endif
@overwrite