@extends('forms.ti.base_form')
<style>
    .fc-daygrid-day-top a {
        color: #3a77b3;
        pointer-events: none;
    }

    select.form-control {
        position: relative;
        display: block;
        width: 100%;
        height: 60px;
        color: #222;
        font-size: 14px;
        line-height: 38px;
        padding: 10px 30px;
        border: 1px solid #ddd;
        background-color: #fff;
        transition: all .3s ease;
        -ms-transition: all .3s ease;
        -webkit-transition: all .3s ease;

    }

    input[type="date"] {
        position: relative;
        display: block;
        width: 100%;
        height: 60px;
        color: #222;
        font-size: 14px;
        line-height: 38px;
        padding: 10px 30px;
        border: 1px solid #ddd;
        background-color: #fff !;
        transition: all .3s ease;
        -ms-transition: all .3s ease;
        -webkit-transition: all .3s ease;

    }

    .fc-toolbar-title {
        text-transform: uppercase;
        font-weight: bold;
        color: #fff;
        font-family: 'Poppins';
        letter-spacing: 2px;
    }

    .fc .fc-daygrid-day-number {
        font-size: 16px;
        padding: 4px;
    }

    .fc .fc-toolbar.fc-header-toolbar {
        margin-bottom: 0;
    }

    .fc .fc-daygrid-day.fc-day-today {
        border-radius: 0;
    }

    .fc-theme-standard td,
    .fc-theme-standard th {
        border: 1px solid #d8d8d84d;
    }


    select.form-control:focus {
        color: #495057;
        background-color: #ffffff73;
        border-color: #343434cb !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0rem rgba(0, 123, 255, .25);
    }
</style>
@section('title')
    <div class="sec-title">
        <div class="title">
            <h2>Agendamento<i class="bi bi-calendar-plus"style="margin-left:20px; color:rgb(19, 200, 224);"></i></h2>
        </div>
    </div>
@endsection
@section('form')
    <form action="{{ route('chamados.store') }}" method="post" id="contact-form">
        {{ csrf_field() }}
        <div class="row clearfix justify-content-center">

            <div class="form-group col-md-6 col-sm-4 co-xs-12 ">
                <select class="form-control" name="filial" required>
                    <option value="">Filial </option>
                    @foreach ($filiais as $f)
                        <option value="{{ $f['id'] }}">{{ $f['comment'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-6 col-sm-6 co-xs-12 ">
                <select class="form-control" name="setor" required="">
                    <option value="">Setor</option>
                    @foreach ($setores as $c)
                        <option value="{{ $c['id'] }}">{{ $c['name'] }}</option>
                        @endforeach

                </select>
            </div>
            <div class="divider-modern my-4"></div>
            <div class="form-group text-center col-md-12 col-sm-12 co-xs-12 mt-4 " id="div_item">
                <a class="btn btn-chamado btn_item" id="24" value="24">Notebook</a>
                <a class="btn btn-chamado btn_item" id="26" value="26">Projetor</a>
            </div>
            <div class="col-md-10 my-4 hidden" id="calendario">
                <div id="calendar"></div>
            </div>
            <div class="col-md-12 my-4 " id="instrucao">
                <h2 class="text-center set_top"><i class="bi bi-chevron-compact-up"></i>
                </h2>
                <p class="text-muted text-center">Selecione uma opção acima</p>
            </div>
            <div class="col-md-12 hidden my-4" id="datas">
                <div class="row justify-content-center">
                    <div class="col">
                        <label for="date-start"><strong>Data inicial</strong></label>
                        <input type="date" class="form-control text-center" style="pointer-events: none; font-size:18px"
                            name="date-start" id="date-start" readonly>
                    </div>
                    <div class="col ">
                        <label for="date-ends"> <strong>Data final</strong></label>
                        <input type="date" class="form-control text-center" style="pointer-events: none; font-size:18px"
                            name="date-ends" id="date-ends" readonly>
                    </div>
                </div>


            </div>

            <div class="form-group col-md-12 hidden " id="adicional">
                <input type="checkbox" class="" name="add" id="add">
                <label for="add"><strong>Necessita tela e
                        pedestal?</strong></label>

            </div>
            <div class="form-group col-md-12 mt-4">
                <textarea name="msg" id="msg" placeholder="Observações"></textarea>
            </div>
            <div class="form-group col-md-12 col-sm-12 co-xs-12 mt-4">
                <button type="submit" class="theme-btn btn-style-one">Enviar</button>
            </div>
        </div>
        <input type="hidden" id="categoria" name="categoria" value="18">
        <input type="hidden" id="tipo_chamado" name="tipo_chamado" value="11">
        <input type="hidden" id="user_recipient" name="user_recipient" value="56">
        <input type="hidden" id="form_type" name="form_type" value="agendamento">


    </form>
@endsection
@section('info')
    <li><i class="bi bi-exclamation-diamond ml-1" style="color: rgb(211, 175, 14);"></i>
        <p class="mb-3">Esse formulário é designado APENAS para agendamentos para uso
            de EQUIPAMENTOS</p>
    </li>
    <li><i class="bi bi-exclamation-diamond ml-1" style="color: rgb(211, 175, 14);"></i>
        <p class="mb-3">O agendamento de SALAS e AUDITÓRIO é feito pela <a
                href="http://intranet.casasdaagua.com.br">intranet</a></p>
    </li>

    <li><i class="bi bi-exclamation-diamond ml-1" style="color: rgb(211, 175, 14);"></i>
        <p class="mb-3">Todos os campos são obrigatórios</p>
    </li>
    <li><i class="bi bi-exclamation-diamond ml-1" style="color: rgb(211, 175, 14);"></i>
        <p class="mb-3">Ligar para o suporte em caso de erros ou dúvidas</p>
    </li>
@endsection

@push('scripts')
    <script>
        var ends = '';
        var start = '';
        var type = '24';
        window.addEventListener('jquery-ready', () => {

            $(document).ready(function() {
                $('.btn_item').click(function() {
                    type = $(this).attr('id');
                    $('#categoria').val(type)

                    console.log(type);
                    $('.btn_item').removeClass('selected_type')
                    $(this).addClass('selected_type')

                    $('.fc-view-harness').css('height', '500px')
                    $('#calendario').removeClass('hidden')
                    $('#instrucao').addClass('hidden')

                    $('#datas').removeClass('hidden')

                    if (type == '26') {
                        $('#adicional').removeClass('hidden')

                    } else {
                        $('#adicional').addClass('hidden')
                    }
                    reset_calendar()
                });

                var agenda = {!! json_encode($datas) !!};
                console.log(agenda);
                var qnt = {!! json_encode($qnt) !!};
                console.log(qnt);




                var index = 0;
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    plugins: [FullCalendar.dayGridPlugin, FullCalendar.interactionPlugin],

                    selectable: true,
                    themeSystem: 'google',
                    locale: 'pt-br',
                    headerToolbar: {
                        left: 'prev',
                        center: 'title',
                        right: 'next',
                    },
                    hiddenDays: [0],
                    dateClick: function(info) {
                        var date_click = info.dateStr;
                        if (start == '') {
                            $('#date-start').val(info.dateStr);
                            start = new Date(info.dateStr);
                            $('.fc-day').filter(`[data-date="${info.dateStr}"]`).addClass(
                                'is-selected')
                        } else if (ends == '') {
                            if (start < new Date(info.dateStr)) {
                                ends = new Date(info.dateStr);
                                $('#date-ends').val(info.dateStr);
                                $('.fc-day').filter(`[data-date="${info.dateStr}"]`).addClass(
                                    'is-selected')
                                var tds = $('.fc-day');
                                var startIdx = -1;
                                var endIdx = -1;


                                tds.each(function(index) {
                                    var td = $(this);
                                    if (td.hasClass("is-selected")) {
                                        if (startIdx === -1) {
                                            startIdx = index;
                                        } else {
                                            endIdx = index;
                                            return false; // Encerrar o loop quando encontrarmos o segundo "y"
                                        }
                                    }
                                });

                                if (startIdx !== -1 && endIdx !== -1 && endIdx > startIdx) {
                                    tds.slice(startIdx + 1, endIdx).addClass("is-selected")
                                        .addClass(
                                            "middle");
                                }

                            } else {
                                ends = '';
                                $('.fc-day').filter('.is-selected').removeClass('is-selected')
                                    .removeClass(
                                        'middle')
                                $('.fc-day').filter(`[data-date="${info.dateStr}"]`).addClass(
                                    'is-selected')
                                start = new Date(info.dateStr);
                                $('#date-start').val(info.dateStr);
                                $('#date-ends').val('');
                            }

                        } else {
                            ends = '';
                            $('.fc-day').filter('.is-selected').removeClass('is-selected')
                                .removeClass(
                                    'middle')
                            $('.fc-day').filter(`[data-date="${info.dateStr}"]`).addClass(
                                'is-selected')
                            start = new Date(info.dateStr);
                            $('#date-start').val(info.dateStr);
                            $('#date-ends').val('');

                        }

                        var type_qnt = qnt.find(function(item) {
                            return item.type === type;
                        });

                        agenda.forEach(function(element) {
                            if (new Date(info.dateStr) <= new Date(element.date_ends) &&
                                new Date(
                                    info.dateStr) >= new Date(element.date_begin) &&
                                element.type ==
                                $('#type').val()) {
                                index += 1;
                                if (index >= type_qnt.qnt) {
                                    reset_calendar()
                                    $('#alert').html(
                                        '<div class="alert-div" style="background:#cb1c1c">Sem equipamentos disponíveis para a data selecionada!</div>'
                                    );
                                }
                            }
                        });



                        index = 0;




                    },

                });
                calendar.render();
            });
        });

        function reset_calendar() {
            $('.fc-day').filter('.is-selected').removeClass('is-selected').removeClass('middle')
            start = '';
            ends = '';
            $('#date-ends').val('');
            $('#date-start').val('');
        }
    </script>
@endpush