@extends('layouts.app')

@section('content')
<div class="ind">
    <article>
        <div class="titlepag">
            <h2><button class="bt-arrow" onclick="volverAtras()"><i class="bi bi-arrow-left"></i></button>Departamentos</h2>
            <hr>
        </div>
        <div>
        <table class="main_table">
            <thead>
                <tr id="thead">
                    <th>Nombre</th>
                    <th>Descripcion</th>
                    <th>Responsable</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($departamento as $d)
                <tr>
                    <td><a class="tab-title-link" href="{{route('departamento').'?id=' . $d->id}}">{{$d->name}}</a></td>
                    <td>{{$d->descripcion}}</td>
                    <td>{{$d->responsablename}} {{$d->lastname}}</td>
                    <td class="delete-row-cont"><button onclick="confirmDelete({{$d->id}}, '{{$d->name}}')" class="delete-row"><i class="bi bi-x-lg"></i></button></td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="error-window" id="confirm-delete">
            <div class="error-window-head" style="cursor:move;" id="confirm-deleteheader">
                <div class="error-window-head-title">
                <span style="color: white;"></span>
                </div>
                <div class="error-window-head-bt">
                <button onclick="errorWindowHide('confirm-delete')"><i class="bi bi-x-lg"></i></button>
                </div>
            </div>
            <div class="error-window-body">
                <div class="error-window-body-alert">
                    <i class="bi bi-exclamation-triangle"></i>
                    <span id="confirm-message"></span>
                    <div><button class="bt-confirm" id="eliminar">Eliminar</button><button onclick="errorWindowHide('confirm-delete')" class="bt-confirm">Cancelar</button></div>
                </div>
            </div>
        </div>
        </div>
    </article>
    <button class="new-dep-bt"  data-bs-toggle="modal" data-bs-target="#nuevodepartamento"><i class="bi bi-plus-lg"></i> Nuevo departamento</button>
    <div class="modal fade" data-bs-backdrop="static" id="nuevodepartamento" tabindex="-1" aria-labelledby="nuevodepartamentoLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="nuevodepartamentoLabel">Nuevo departamento</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('insertDepartamento')}}" id="nuevo-departamento" method="post" onsubmit="disableButton('guardar-bt')" enctype="multipart/form-data">
                @csrf
                    <div class="new-proj-cont-hor" id="info">
                        <div class="new-proj-cont-vert">
                            <div class="new-proj-ind-cont">
                                <label for="">Nombre del departamento:</label>
                                <input name="name" type="text" required>
                            </div>
                            <div class="new-proj-ind-cont">
                                <label for="">Responsable:</label>
                                <select name="responsable" id="responsable">
                                    <option value="">Elige un responsable</option>
                                    @foreach ($users as $u)
                                        <option value="{{$u->id}}">{{$u->name}} {{$u->lastname}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="new-proj-cont-vert">
                            <div class="new-proj-ind-cont">
                                <label for="">Descripción:</label>
                                <textarea name="descripcion" id="descripcion" cols="30" rows="10"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="new-proj-cont-hor" id="assign">
                        <div class="new-proj-cont-vert">
                            <div class="new-proj-ind-cont">
                                <label for="">Asignar usuarios o departamentos:</label>
                                <div class="new-proj-asign-cont">
                                    <table class="asign-table">
                                        <thead>
                                            <th id="check"><input type="checkbox" value="todos" disabled></th>
                                            <th>Nombre</th>
                                        </thead>
                                        <tbody>
                                            @foreach ($users as $u)
                                                <tr>
                                                    <td id="check"><input name="asignados[]" type="checkbox" value="{{$u->id}}"></td>
                                                    <td><i class="bi bi-person-fill"></i> {{$u->name}} {{$u->lastname}}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="cancelar-bt" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="atras-bt" onclick="atras()">Atras</button>
                <button type="button" id="siguiente-bt" class="guardar-bt" onclick="siguiente()">Siguiente</button>
                <button type="submit" id="guardar-bt" class="guardar-bt" style="display:none" form="nuevo-departamento">Guardar</button>
            </div>
            </div>
        </div>
    </div>
</div>
<script>
    dragElement(document.getElementById("confirm-delete"));

    function siguiente(){
        document.getElementById('info').style.display='none'
        document.getElementById('siguiente-bt').style.display='none'
        document.getElementById('assign').style.display='flex'
        document.getElementById('guardar-bt').style.display='block'
    }

    function atras(){
        document.getElementById('info').style.display='flex'
        document.getElementById('assign').style.display='none'
        document.getElementById('siguiente-bt').style.display='block'
        document.getElementById('guardar-bt').style.display='none'
    }

    function confirmDelete(id, name){
        document.getElementById('confirm-message').innerHTML='Seguro que deseas eliminar el departamento ' + name
        document.getElementById('eliminar').setAttribute('onclick', 'deleteDepartamento(' + id + ')')
        errorWindowShow("confirm-delete");
    }

    function deleteDepartamento(id){
        disableButton('eliminar')
        let data={
            'id_dep': id
            }
            fetch("{{route('deleteDepartamento')}}", {
            headers:{
                "Content-Type": "application/json",
                "Accept": "application/json, text-plain, */*",
                "X-Requested-With": "XMLHttpRequest",
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            method:'POST',
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(function(result){

        })
        location.reload()
    }
</script>
@endsection