@extends('layouts.dashboard_layout')

@section('title', 'Tareas')

@section('head')
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="{{ asset('css/tareas/tarea-style.css') }}">
  <!-- Styles -->
  <style>
	  #chartdiv {
		  width: 100%;
		  height: 300px;
	  }
  
	  #chartPresupuesto {
		  width: 100%;
		  height: 500px;
	  }
  </style>
  <link rel="stylesheet" href="{{ asset('assets/css/style.bundle.css') }}">
@endsection

@section('content')
<div class="container-fluid container-column mb-2 d-flex align-items-center justify-content-between w-100">
    <div class="d-flex flex-wrap w-100 align-items-center justify-content-between">
        <div class="search-bar">
            <select name="proyecto" id="projectSelect" class="form-select mb-3">
              <option value=""></option>
              @foreach($projectNames as $projectId => $projectName)        
                <option value="{{ $projectId }}">{{ $projectName }}</option>
              @endforeach
            </select>
        </div>
    	<div id="fecha_creacion_container">
    		<input type="text" id="fecha_creacion" name="fecha_creacion" class="form-control mb-3 me-6">
    	</div>
    	<div class="d-flex justify-content-end">
        	<div class="@if (Auth::user()->roles->first()->nombre=='Usuario') d-none @endif" id="responsable_container">
        		<select name="responsable" id="responsable" class="form-select mb-3">
        		  <option value="">Seleccionar Responsable</option>
        		</select>
        	</div>
    	</div>
    </div>
</div>

<div class="container-fluid p-3">
<header>
	<div id="totalTask"><span id="total">0</span></div>

	<div class="@if (Auth::user()->roles->first()->nombre=='Usuario') d-none @endif" id="btns">
		<div class="btnAdd">
			<button id="btnCrear">&#10010;</button>
		</div>
	</div>
</header>

@include('partials.alerts', ['success' => 'success', 'error' => 'error', 'warning' => 'warning'])

<div id="myLists" class="row">
	<div class="col-lg-4 col-md-4">
		<div id="to-do">
			<h3>Pendiente <span></span></h3>
			<ul id="ul-todo" class="section" ondrop="drop(event, this)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
			</ul>
		</div>
	</div>
	<div class="col-lg-4 col-md-4">
		<div id="work-in">
			<h3>En progreso <span></span></h3>
			<ul id="ul-working" class="section" ondrop="drop(event, this)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
			</ul>
		</div>
	</div>
	<div class="col-lg-4 col-md-4">
		<div id="do-ne">
			<h3>Cerrado <span></span></h3>
			<ul id="ul-done" class="section" ondrop="drop(event, this)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
			</ul>
		</div>
	</div>
</div>

@include('dashboard.tareas.modals.modal')
</div>

@endsection

@section('scripts')
  @parent
  <script>window.userId = {{ Auth::id() }}; console.log(userId)</script>
  <script src="{{ asset('js/tareas/task.js') }}"></script>
  <script>
    const usuarioTieneRolUsuario = {{ Auth::user()->hasRole('Usuario') ? 'true' : 'false' }};
    </script>
@endsection