@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2>Editar Propiedad - {{$proyecto->descripcion}} {{$propiedad->summary()}}</h2>
        <table class="ui table">
            <thead>
                <tr>
                    <th>Tipo</th>
                    <th>Unidad</th>
                    <th class="right aligned">
                        <button class="ui small green circular icon button" id="add_unidad">
                            <i class="plus icon"></i>
                        </button>
                    </th>
                </tr>
            </thead>
            <tbody>
            @foreach($propiedad->unidades as $unidad)
                <tr>
                    <td>{{ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion)}}</td>
                    <td>{{$unidad->descripcion}}</td>
                    <td class="right aligned">
                        <button class="ui small red circular icon button remove_unidad" data-id="{{$unidad->id}}">
                            <i class="remove icon"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="ui modal" id="add_modal">
        <div class="content">
            <h3 class="header">Agregar</h3>
            <div class="ui form" id="add_form">
                <div class="field">
                    <label for="tipo">Tipo</label>
                    <select id="tipo" name="tipo" class="ui search selection dropdown">
                    @foreach ($tiposUnidades as $tipoUnidad)
                        <option value="{{$tipoUnidad->id}}">{{ucwords($tipoUnidad->descripcion)}}</option>
                    @endforeach
                    </select>
                </div>
                <div class="field">
                    <label for="unidad">Unidad</label>
                    <select id="unidad" name="unidad" class="ui search selection dropdown" size="4"></select>
                </div>
                <button class="ui button">Agregar</button>
            </div>
        </div>
    </div>
@endsection

@push('page_scripts')
    <script type="text/javascript">
        const unidades = {
        @foreach($tiposUnidades as $tipoUnidad)
            {{$tipoUnidad->id}}: [
                @foreach($unidades as $unidad)
                    @if ($unidad->proyectoTipoUnidad->tipoUnidad->id === $tipoUnidad->id)
                        {
                            value: {{$unidad->id}},
                            text: '{{$unidad->descripcion}}',
                            name: '{{$unidad->descripcion}}'
                        },
                    @endif
                @endforeach
            ],
        @endforeach
        }
        function changeTipoUnidad(tipo_unidad_id) {
            $('#unidad').dropdown('change values', unidades[tipo_unidad_id].sort((a, b) => a.text.padStart(4, '0').localeCompare(b.text.padStart(4, '0'))))
        }
        function addUnidad() {
            $('#add_modal').modal('show')
        }
        function removeUnidad(unidad_id) {
            console.debug(unidad_id)
        }
        $(document).ready(() => {
            $('#add_unidad').click(event => {
                addUnidad()
            })
            $('.remove_unidad').click(event => {
                const unidad_id = $(event.currentTarget).data('id')
                removeUnidad(unidad_id)
            })
            $('#add_modal').modal()
            const tipo = $('#tipo')
            tipo.dropdown()
            tipo.change(event => {
                changeTipoUnidad(tipo.val())
            })
            $('#unidad').dropdown()
            changeTipoUnidad(tipo.val())
            $('#add_form').submit(event => {
                event.preventDefault()
                tipo.model('hide')
                return false
            })
        })
    </script>
@endpush