@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="department_id"
                label='Elegir la oficina para asignar usuarios'
                name='department_id'
                :data="$data"
                :items='$model_info->departments'
                itemtext='name'
                itemindex='id'
                template='templateSelectDepartments'
                datatags="parent_name, name"
            />
            <div class="text-right">
                <button id="departmentSelect" type="button" class="btn btn-info">
                    <i class="mi-arrow-forward"></i>
                    Ingresar
                </button>
            </div>
        </div>
    </div>
    @if (! empty($model_info->users) AND ! empty($data['id']))
        <div class="card" id="cardUsers">
            <form method="post" action="{{ route('organigram.assignments.save') }}">
                <x-fieldhidden id="department_id" name="department_id" value="{{ $data['id'] }}" />
                <div class="card-header">
                    <h4 class="card-title">Listado de usuarios para asignar</h4>
                </div>
                <div class="card-body">
                    @csrf
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Usuario</th>
                                <th>Asignado</th>
                                <th>Jefe de Área</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($model_info->users as $user)
                                <tr>
                                    <td>{{ $user->username }}</td>
                                    <td>
                                        <div class="form-check form-check-switchery form-check-switchery-double">
                                            <input type="checkbox" @if (! empty($user->assignment_id)) checked @endif name="users[{{ $user->id }}][id]" value="{{ $user->id }}" class="form-check-input-switchery">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-switchery form-check-switchery-double">
                                            <input type="checkbox" @if (! empty($user->in_charge)) checked @endif name="users[{{ $user->id }}][in_charge]" value="1" class="form-check-input-switchery">
                                        </div>
                                    </td>
                                </tr>
                            @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 asignDepartment = () => {
            const type = document.querySelector("#type").value;
            const department_id = document.querySelector("#department_id").value;
            const redirect = `organigrama/asignaciones/crear/${type}/${department_id}`;
            window.location.pathname = redirect;
        };

        document.querySelector("#departmentSelect").addEventListener("click", asignDepartment);

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