@extends('layouts.default')

@section('content')

    <div class="x_panel">
        <div class="x_title">
            <h3>Folgas Pendentes de Aprovação</h3>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-12"></div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="x_panel" style="background-color: #ffffff">
                        <div class="x_content" id="tabela-aprovar-folgas">
                            <table cellspacing="0" class="table table-hover table-row-clickable" id="datatable-aprovar-folgas" width="100%">
                                <thead>
                                    <tr>
                                        <th>Usuário</th>
                                        <th>Folga Paga?</th>
                                        <th>Data</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (!isset($aprovar) || $aprovar->IsEmpty())
                                        <tr data-id='-1'>
                                            <td colspan="3">Nenhuma folga pendente de aprovação</td>
                                        </tr>
                                    @else
                                        @foreach ($aprovar as $item)
                                            <tr>
                                                <td>{{ $item->name }}</td>
                                                <td>{{ $item->tipo == 'folga_paga' ? 'Sim' : 'Não' }}</td>
                                                <td>{{ formata_data($item->dt_inicial) }}</td>
                                                <td>
                                                    <button class="btn btn-sm bt-aprovar btn-danger  pull-right" data-aprovar="R" data-id="{{ $item->id }}" type="button"><i class="fa fa-times"></i></button>
                                                    <button class="btn btn-sm bt-aprovar btn-success pull-right" data-aprovar="A" data-id="{{ $item->id }}" type="button"><i class="fa fa-check"></i></button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12"></div>
            </div>
        </div>
    </div>



    <div class="x_panel">
        <div class="x_content">
            <span><i class="fas fa-square-full" style="color: yellow;"></i> Folga</span>
            <span><i class="fas fa-square-full" style="color: red"></i> Folga paga</span>
            <span><i class="fas fa-square-full" style="color: #3282d8"></i> Férias</span>
            <span><i class="fas fa-square-full" style="color: #449418"></i> Atestado</span>
            <span><i class="fas fa-square-full" style="color: #a419a8"></i> Licenças M/P</span>
            <span><i class="fas fa-square-full" style="color: gray"></i> Aprovação Pendente</span>
            <span><i class="fas fa-square-full" style="color: deepskyblue"></i> Rio Pardo</span>


            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-12"></div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="x_panel">
                        <div id='calendario_aprovar_folgas' name="calendar" style="font-size: 11px;"></div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12"></div>
            </div>

        </div>
    </div>


@endsection

@section('custom_js')
    <script src="{{ asset('js/aprovarfolgas1.0.js') }}"></script>
@endsection

@section('custom_css')
    <link href='{{ asset('calendar/core/main.css') }}' rel='stylesheet' />
    <link href='{{ asset('calendar/daygrid/main.css') }}' rel='stylesheet' />
    <link href='{{ asset('calendar/timegrid/main.css') }}' rel='stylesheet' />
    <link href='{{ asset('calendar/list/main.css') }}' rel='stylesheet' />
    <script src='{{ asset('calendar/core/main.js') }}'></script>
    <script src='{{ asset('calendar/interaction/main.js') }}'></script>
    <script src='{{ asset('calendar/daygrid/main.js') }}'></script>
    <script src='{{ asset('calendar/timegrid/main.js') }}'></script>
    <script src='{{ asset('calendar/list/main.js') }}'></script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendario_aprovar_folgas');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid'],
                height: 'parent',
                locale: 'pt-BR',
                header: {
                    //left: 'prev,next today',
                    //center: 'title',
                    //right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                firstDay: 0,
                defaultView: 'dayGridMonth',
                defaultDate: '{{ date('Y-m-d') }}',
                navLinks: false,
                editable: false,
                eventLimit: false,
                handleWindowResize: false,
                longPressDelay: 200,
                droppable: false,
                selectable: false,
                showNonCurrentDates: true,
                dateClick: function(start) {

                },
                eventClick: function(info) {

                },
                eventDragStart: false,
                events: [
                    @foreach ($ferias as $f)
                        {
                            title: '{{ $f->name }}',
                            start: '{{ $f->dt_inicial }}',
                            end: '{{ $f->dt_final }} 23:59:59',
                            id: '{{ $f->id }}',
                            user: '{{ $f->id_user }}',
                            tipo: '{{ $f->tipo }}',
                            @if ($f->tipo == 'folga' && $f->status != '?')
                                color: 'yellow',
                                textColor: 'black',
                            @elseif ($f->tipo == 'folga_paga' && $f->status != '?')
                                color: 'red',
                            @elseif ($f->status == '?')
                                color: 'gray',
                            @elseif ($f->tipo == 'atestado')
                                color: 'green',
                            @elseif ($f->tipo == 'maternidade')
                                color: '#449418',
                            @elseif ($f->tipo == 'ferias')
                                color: '#3282d8',
                            @elseif ($f->tipo == 'riopardo')
                                color: 'deepskyblue'
                            @endif
                        },
                    @endforeach
                ],
            });
            calendar.render();
        });
    </script>
@endsection