@extends('Admin.Views.admin')

@include('organigram::sidebar')

@section('content')
    <div class="card">
        <div class="card-body">
            <x-fieldhidden id="type" name="type" value="{{ $data['type'] }}" />
            <x-fieldselect
                id="user_id"
                label='Elegir el usuario a asignar oficinas'
                name='user_id'
                :data="$data"
                :items='$model_info->users'
                itemtext='username'
                itemindex='id'
                template='templateSelectUsers'
                datatags="dni"
            />
            <div class="text-right">
                <button id="userSelect" type="button" class="btn btn-info">
                    <i class="mi-arrow-forward"></i>
                    Ingresar
                </button>
            </div>
        </div>
    </div>
    @if (! empty($model_info->departments) AND ! empty($data['id']))
        <div class="card" id="cardDepartments">
            <form method="post" action="{{ route('organigram.assignments.save') }}">
                <x-fieldhidden id="user_id" name="user_id" value="{{ $data['id'] }}" />
                <div class="card-header">
                    <h4 class="card-title">Listado de oficinas para asignar</h4>
                </div>
                <div class="card-body table-responsive">
                    @csrf
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Nivel</th>
                                <th style="min-width: 200px;">Oficina</th>
                                <th width="170px">Tipo de oficina</th>
                                <th>Asignado</th>
                                <th>Acceso total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $depth = 0; @endphp
                            @foreach($departments as $department)
                                @include('organigram::assignments.partials.user-row')
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="text-right col-12">
                            <div class="form-group">
                                <button type="submit" class="btn btn-success">Guardar <i class="mi-save ml-2"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    @endif
@endsection

@push('scripts')
    <script type="text/javascript">
        "use strict";

        const asignUser = () => {
            const type = document.querySelector("#type").value;
            const user_id = document.querySelector("#user_id").value;
            const redirect = `organigrama/asignaciones/crear/${type}/${user_id}`;
            window.location.pathname = redirect;
        };

        document.querySelector("#userSelect").addEventListener("click", asignUser);

        $('#user_id').on('change', function(){
            $('#cardDepartments').hide();
        });
    </script>
@endpush