@extends('layouts.app', [
    'navClass' => 'navbar-light bg-secondary',
    'parentSection' => 'laravel',
    'elementName' => 'client-management'
])

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css">

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'bubble',
    modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'indent': '-1'}, { 'indent': '+1' }]
            ]
        }
  });

</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />


@section('title', ' Kanban de Tarefas |')
@section('content')
    @component('layouts.headers.auth')
        @component('layouts.headers.breadcrumbs')
            @slot('title')
                Kanban de Tarefas
            @endslot

            <li class="breadcrumb-item"><a class="text-default" href="{{ route('tasks.index') }}">Tarefas</a></li>
        @endcomponent
    @endcomponent

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-6">
                                <h3 class="mb-0">Kanban de Tarefas</h3>
                                <p class="text-sm mb-0">
                                        Abaixo você encontra as tarefas cadastradas no TravelTogether do usuário {{ $user['name'] }}.
                                </p>
                            </div>
                            <form action="{{route('filtertask')}}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-10">
                                        <label class="form-control-label text-left" for="basic-url">Responsável</label>
                                        <select name="user_id" id="user_id" value="{{old('user_id')}}" class="form-control" @error('user_id') is-invalid @enderror>
                                            <option value=""> -- Selecione -- </option>
                                            @foreach ($users as $user)
                                                <option value="{{$user->id}}">{{ $user->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-2">
                                        <button type="submit" class="btn btn-md btn-primary" style="margin-top: 33px" value="Filtrar" class="btn pull-right">
                                            <i class="fas fa-light fa-filter text-bg opacity-10 shadow"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <div class="col-4 text-right">
                                <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#modal-task">Nova Tarefa</button>
                                <div class="modal fade" id="modal-task" tabindex="-1" role="dialog" aria-labelledby="modal-task" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered modal-" role="document">
                                    <form action="{{route('tasks.store')}}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h3 class="mb-0">Nova Tarefa</h3>
                                                <p style="margin-right: -370px;">Vincular a um cliente?</p>
                                                <div class="text-right" style="display: inline;">
                                                    <label class="custom-toggle" style="float: left;">
                                                        <input type="checkbox" style="margin-right: -30px;" name="link" id="link">
                                                        <span class="custom-toggle-slider rounded-circle" data-label-off="Não" data-label-on="Sim"></span>
                                                    </label>
                                                    <button style="float: right;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="modal-body">
                                                <div class="tab-content">
                                                    <div id="input-groups-component" class="tab-pane tab-example-result fade active show" role="tabpanel" aria-labelledby="input-groups-component-tab">
                                                        <div class="row">
                                                            <div class="col-8" id="title_div">
                                                                <div class="form-group">
                                                                <label class="form-control-label text-left" style="float:left" for="basic-url">Título</label>
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text" id="basic-addon1"><i class="ni ni-ruler-pencil"></i></span>
                                                                        </div>
                                                                        <input type="text" class="form-control" required name="title" value="{{ old('title') }}">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-3" id="client-div" style="display: none;">
                                                                <div class="form-group">
                                                                <label class="form-control-label text-left" style="float:left" for="basic-url">Cliente</label>
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text" id="basic-addon1"><i class="ni ni-briefcase-24"></i></span>
                                                                        </div>
                                                                        <select name="client_id" id="client_id" value="{{old('client_id')}}" class="form-control" @error('client_id') is-invalid @enderror>
                                                                            <option value=""> -- Selecione --</option>
                                                                            @foreach ($clients as $client)
                                                                                <option value="{{$client->id}}">{{ $client->first_name ." ". $client->last_name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-4" id="duedate_div">
                                                                <div class="form-group">
                                                                <label class="form-control-label text-left" style="float:left" for="basic-url">Prazo</label>
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text" id="basic-addon1"><i class="ni ni-calendar-grid-58"></i></span>
                                                                        </div>
                                                                        <input type="datetime-local" class="form-control" name="due_date" value="{{ old('start_date') }}">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-4">
                                                                <div class="form-group">
                                                                    <label class="form-control-label text-left" style="float:left"  for="input-name">Responsável</label>
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text" id="basic-addon1"><i class="ni ni-circle-08"></i></span>
                                                                        </div>
                                                                        <input type="text" name="created_by" value="{{$loggedId}}" hidden>
                                                                        <select name="user_id" id="user_id" required value="{{old('user_id')}}" class="form-control" @error('user_id') is-invalid @enderror>
                                                                            <option value=""> -- Selecione --</option>
                                                                            @foreach ($users as $user)
                                                                            <option value="{{$user->id}}">{{$user->name}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-4">
                                                                <div class="form-group">
                                                                <label class="form-control-label text-left" style="float:left" for="basic-url">Categoria</label>
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text" id="basic-addon1"><i class="ni ni-books"></i></span>
                                                                        </div>
                                                                        <select name="category" id="category" value="{{old('category')}}" class="form-control" @error('category') is-invalid @enderror>
                                                                            <option value=""> -- Selecione --</option>
                                                                            <option value="Atendimento">Atendimento</option>
                                                                            <option value="Cotação">Cotação</option>
                                                                            <option value="Cadastro">Cadastro</option>
                                                                            <option value="Emissão">Emissão</option>
                                                                            <option value="Checkin">Checkin</option>
                                                                            <option value="Outras">Outras</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-4">
                                                                <div class="form-group">
                                                                <label class="form-control-label text-left" style="float:left" for="basic-url">Prioridade</label>
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text" id="basic-addon1"><i class="ni ni-active-40"></i></span>
                                                                        </div>
                                                                        <select name="priority" id="priority" value="{{old('priority')}}" class="form-control" @error('priority') is-invalid @enderror>
                                                                            <option value=""> -- Selecione --</option>
                                                                            <option value="Alta">Alta</option>
                                                                            <option value="Média">Média</option>
                                                                            <option value="Baixa">Baixa</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                        <label class="form-control-label text-left" style="margin-left: 17px;"  for="input-name">Descrição</label>
                                                            <div class="col-12">
                                                                <div id="editor">
                                                                </div>
                                                                <textarea id="description" name="description" hidden></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><br>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-link  ml-auto" data-dismiss="modal">Sair</button>
                                                <button type="submit" class="btn btn-success btn-sm">Cadastrar</button>
                                            </div>
                                        </form>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div class="col-12 mt-2">
                        @include('alerts.success')
                        @include('alerts.errors')
                    </div>

                    {{-- Kanban --}}
                    <div class="row">
                        <!-- Pending  -->
                        <div class="col-4" style="margin-left: 20px;">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">Pendente</h5>
                                </div>
                                <div class="card-body">
                                    @foreach ($tasks_pending as $task)
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <a href="{{ route('tasks.edit', $task->id) }}" class="avatar avatar-md rounded-circle">
                                                    <img src="{{ asset('profile_user/'.$task->picture)}}" alt="Usuário" style="max-width: 100px; border-radius: 25px">
                                                </a>
                                            </div>
                                            <div class="col ml--2">
                                                <h4 class="mb-0">
                                                    <a  href="{{ route('tasks.edit', $task->id) }}">{{$task->title}} @if (!empty($task->fname)) | Cliente: {{ $task->fname." ".$task->lname }} @endif</a>
                                                </h4>
                                                {{-- <p class="text-sm text-muted mb-0"><strong>Responsável:</strong> {{$task->name}}</p> --}}
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->due_date)) <strong>Prazo:</strong> {{date('d/m/y', strtotime($task->due_date)) }} @endif </p>
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->category)) <strong>Categoria:</strong> {{$task->category}} @endif </p>
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->priority)) <strong>Prioridade:</strong> {{$task->priority}} @if ($task->priority == "Alta") <i class="fas fa-arrow-up text-danger mr-3"></i> @elseif($task->priority == "Média") <i class="fas fa-exclamation text-info mr-3"></i> @elseif($task->priority == "Baixa") <i class="fas fa-arrow-down text-success mr-3"></i> @endif @endif </p>
                                                <span class="text-danger">●</span>
                                                <small>{{$task->status}} | Criado em {{date('d/m/y', strtotime($task->created_at)) }}</small>
                                            </div>
                                            <div style="display: inline;">
                                                <a  href="{{ route('tasks.edit', $task->id) }}" style="float: left;" type="button" class="btn btn-sm btn-default"><i class="fa-solid fa-eye"></i></a>
                                                <form action="{{ route('tasks.destroy', $task->id) }}" style="float: right;" method="post">
                                                    @csrf
                                                    @method('delete')

                                                    <button type="button" class="btn btn-sm btn-danger"  onclick="confirm('Tem certeza que deseja excluir esse tarefa?') ? this.parentElement.submit() : ''">
                                                    <i class="fas fa-trash-can text-secondary"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                        <hr class="solid">
                                        <br>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="col-4" style="margin-left: -20px;">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">Em Andamento</h5>
                                </div>
                                <div class="card-body">
                                    @foreach ($tasks_ongoing as $task)
                                    <div class="row align-items-center">
                                            <div class="col-auto">
                                                <a href="{{ route('tasks.edit', $task->id) }}" class="avatar avatar-md rounded-circle">
                                                    <img src="{{ asset('profile_user/'.$task->picture)}}" alt="Usuário" style="max-width: 100px; border-radius: 25px">
                                                </a>
                                            </div>
                                            <div class="col ml--2">
                                                <h4 class="mb-0">
                                                    <a  href="{{ route('tasks.edit', $task->id) }}">{{$task->title}} @if (!empty($task->fname)) | Cliente: {{ $task->fname." ".$task->lname }} @endif</a>
                                                </h4>
                                                {{-- <p class="text-sm text-muted mb-0"><strong>Responsável:</strong> {{$task->name}}</p> --}}
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->due_date)) <strong>Prazo:</strong> {{date('d/m/y', strtotime($task->due_date)) }} @endif </p>
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->category)) <strong>Categoria:</strong> {{$task->category}} @endif </p>
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->priority)) <strong>Prioridade:</strong> {{$task->priority}} @if ($task->priority == "Alta") <i class="fas fa-arrow-up text-danger mr-3"></i> @elseif($task->priority == "Média") <i class="fas fa-exclamation text-info mr-3"></i> @elseif($task->priority == "Baixa") <i class="fas fa-arrow-down text-success mr-3"></i> @endif @endif </p>
                                                <span class="text-info">●</span>
                                                <small>{{$task->status}} | Em Andamento em {{date('d/m/y', strtotime($task->ongoing_date)) }}</small>
                                            </div>
                                            <div style="display: inline;">
                                                <a  href="{{ route('tasks.edit', $task->id) }}" style="float: left;" type="button" class="btn btn-sm btn-default"><i class="fa-solid fa-eye"></i></a>
                                                <form action="{{ route('tasks.destroy', $task->id) }}" style="float: right;" method="post">
                                                    @csrf
                                                    @method('delete')

                                                    <button type="button" class="btn btn-sm btn-danger"  onclick="confirm('Tem certeza que deseja excluir esse tarefa?') ? this.parentElement.submit() : ''">
                                                    <i class="fas fa-trash-can text-secondary"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                        <hr class="solid">
                                        <br>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="col-4" style="margin-left: -20px;">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">Concluído</h5>
                                </div>
                                <div class="card-body">
                                    @foreach ($tasks_done as $task)
                                    <div class="row align-items-center">
                                            <div class="col-auto">
                                                <a href="{{ route('tasks.edit', $task->id) }}" class="avatar avatar-md rounded-circle">
                                                    <img src="{{ asset('profile_user/'.$task->picture)}}" alt="Usuário" style="max-width: 100px; border-radius: 25px">
                                                </a>
                                            </div>
                                            <div class="col ml--2">
                                                <h4 class="mb-0">
                                                    <a  href="{{ route('tasks.edit', $task->id) }}">{{$task->title}} @if (!empty($task->fname)) | Cliente: {{ $task->fname." ".$task->lname }} @endif</a>
                                                </h4>
                                                {{-- <p class="text-sm text-muted mb-0"><strong>Responsável:</strong> {{$task->name}}</p> --}}
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->due_date)) <strong>Prazo:</strong> {{date('d/m/y', strtotime($task->due_date)) }} @endif </p>
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->category)) <strong>Categoria:</strong> {{$task->category}} @endif </p>
                                                <p class="text-sm text-muted mb-0"> @if (!empty($task->priority)) <strong>Prioridade:</strong> {{$task->priority}} @if ($task->priority == "Alta") <i class="fas fa-arrow-up text-danger mr-3"></i> @elseif($task->priority == "Média") <i class="fas fa-exclamation text-info mr-3"></i> @elseif($task->priority == "Baixa") <i class="fas fa-arrow-down text-success mr-3"></i> @endif  @endif </p>
                                                <span class="text-success">●</span>
                                                <small>{{$task->status}} | Concluído em {{date('d/m/y', strtotime($task->done_date)) }}</small>
                                            </div>
                                            <div style="display: inline;">
                                                <a  href="{{ route('tasks.edit', $task->id) }}" style="float: left;" type="button" class="btn btn-sm btn-default"><i class="fa-solid fa-eye"></i></a>
                                                <form action="{{ route('tasks.destroy', $task->id) }}" style="float: right;" method="post">
                                                    @csrf
                                                    @method('delete')

                                                    <button type="button" class="btn btn-sm btn-danger"  onclick="confirm('Tem certeza que deseja excluir esse tarefa?') ? this.parentElement.submit() : ''">
                                                    <i class="fas fa-trash-can text-secondary"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                        <hr class="solid">
                                        <br>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        @include('layouts.footers.auth')
    </div>
@push('css')
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/fullcalendar/dist/fullcalendar.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/sweetalert2/dist/sweetalert2.min.css">
@endpush
@push('js')
<script src="{{ asset('argon') }}/vendor/moment/min/moment.min.js"></script>
<script src="{{ asset('argon') }}/vendor/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="{{ asset('argon') }}/vendor/sweetalert2/dist/sweetalert2.min.js"></script>
@endpush

@push('js')
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
@endpush
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
  quill.on('text-change', function(delta, oldDelta, source) {
            console.log(quill.container.firstChild.innerHTML)
            $('#description').val(quill.container.firstChild.innerHTML);
        });
</script>
<!-- Scripts Section -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"> </script>
<!-- CPF or CNPJ -->
<script>
    $(function(){
        $("#link").change(function(){
            var link = $("#link");
            if (link.is(':checked')) {
                $("#title_div").attr("Class"," ");
                $("#title_div").show().toggleClass('col-5');
                $("#duedate_div").attr("Class"," ");
                $("#duedate_div").show().toggleClass('col-4');
                $("#client-div").show();
            } else {
                $("#title_div").attr("Class"," ");
                $("#title_div").show().toggleClass('col-8');
                $("#duedate_div").attr("Class"," ");
                $("#duedate_div").show().toggleClass('col-4');
                $("#client-div").hide();
            }
        });
    })
</script>
@endsection