@extends('welcome')
<link href="{{ URL::asset('css/main.css') }}" rel='stylesheet' />
<link rel="stylesheet" href="css/contact.css">

<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('conteudo')
    <div class="content">
        <!--FORM CORE-->

        <div class="container">
            <section class="contact-page-section">
                <div class="container">
                    <div class="sec-title">
                        <h2 style="color: rgb(43, 43, 43);">Agendamento <i class="bi bi-calendar-plus"
                                style="margin-left:20px; color:rgb(19, 200, 224);"></i></h2>
                    </div>
                    <div class="inner-container">
                        <div class="row clearfix">

                            <!--Form Column-->
                            <div class="form-column col-md-8 col-sm-12 col-xs-12">
                                <div class="inner-column">

                                    <!--Contact Form-->
                                    <div class="contact-form">
                                        <form action="/agendamento/chamado" method="post" id="contact-form">
                                            {{ csrf_field() }}
                                            <div class="row clearfix justify-content-center">
                                                @if (!Auth::check())
                                                    <div class="form-group col-md-6 col-sm-6 co-xs-12">

                                                        <input type="text" name="name" id="nome" required
                                                            placeholder="Nome solicitante ">
                                                    </div>
                                                    <div class="form-group col-md-6 col-sm-6 co-xs-12">
                                                        <input type="email" name="email" value=""
                                                            placeholder="Email para contato " required>
                                                    </div>
                                                @endif

                                                <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">Notebook</a>
                                                    <a class="btn btn-chamado btn_item" id="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="type" name="categoria" value="">

                                        </form>
                                    </div>
                                    <!--End Contact Form-->

                                </div>
                            </div>

                            <!--Info Column-->
                            <div class="info-column col-md-4 col-sm-12 col-xs-12">
                                <div class="inner-column">
                                    <h2>Info</h2>
                                    <ul class="list-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>

                                    </ul>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <div class="row align-items-stretch justify-content-center no-gutters">
                <div class="col-md-9">

                    <div class="max-width mt-5">
                        <!--FORM VALIDATE-->
                        @if ($message = Session::get('success'))
                        <div id="alert">
                            <div class="alert-div success-alert">
                                <i class="bi bi-check-circle-fill"></i>
                                <p><strong>Agendamento enviado com sucesso!</strong><br>Sua solicitação foi enviada,
                                    aguarde o retorno.</p>
                            </div>
                        </div>
                        @elseif($message = Session::get('error_mail'))
                            <div id="alert">
                                <div class="alert-div error-alert">
                                    <i class="bi bi-x-circle-fill"></i>
                                    <p><strong>Email para contato invalido!</strong> <br><br>Verifique se o email está
                                        dentro
                                        do padrão <br>Ex: "exemplo@<u>casasdaagua.com.br<u>".</p>
                                </div>

                            </div>
                        @endif

                        @if ($message = Session::get('error_off'))
                        <div id="alert">
                            <div class="alert-div error-alert">
                                <i class="bi bi-x-circle-fill"></i>
                                <p><strong>Agendamento não foi enviado!</strong><br> Sem equipamentos disponiveis.
                                </p>
                            </div>
                        </div>
                    @endif
                        @if ($message = Session::get('error'))
                            <div id="alert">
                                <div class="alert-div error-alert">
                                    <i class="bi bi-x-circle-fill"></i>
                                    <p><strong>Agendamento não foi enviado!</strong><br> Favor entrar em contato com o suporte.
                                    </p>
                                </div>
                            </div>
                        @endif


                    </div>

                </div>
            </div>
        </div>
        <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
            © 2022 Desenvolvido por : Casas da Água
        </div>
    </div>
    <div id="alert">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>

    <script src="{{ URL::asset('js/pikaday.js') }}"></script>
    <script>
        var ends = '';
        var start = '';
        var type = 'Notebook';
        $(document).ready(function() {
            $('.btn_item').click(function() {
                type = $(this).attr('id');
                $('#type').val(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 == 'projetor') {
                    $('#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, {

                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('');
        }


        // var field = document.getElementById('datepicker');
        // var picker = new Pikaday({
        //         disableDayFn: function(date) {
        //             var day = date.getDay();
        //             // Verifica se a data formatada está presente no array de dias desabilitados
        //             return day === 0 || day === 6;
        //         },
        //     onSelect: function(date) {
        //         var elemento = false;
        //         const day = date.getDate();
        //         const month = date.getMonth() + 1;
        //         const year = date.getFullYear();
        //         var data_inp = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        //         // Calcula a diferença em milissegundos entre as duas datas e converte para dias
        //         const options = {year: 'numeric', month: '2-digit', day: '2-digit' };
        //         const options_week = { weekday: "long" };

        //         if(date_agend == ''){
        //             $('.date-button').removeClass('selected')
        //             date_agend = data_inp;
        //         }
        //         else if(date_ends == ''){
        //             date_ends = data_inp;
        //         }
        //         else if (date_ends != ''){
        //             $('.date-button').removeClass('selected')
        //             date_agend = ''
        //             date_ends = ''
        //         }

        //         $('#div_item').removeClass('hidden')
        //         $('#adicional').addClass('hidden')

        //         console.log(date_ends)

        //         $.get("/agendamento/date_agend", {'date':date_agend},
        //             (result) => {

        //                 var arr = Object.values(result);
        //                 var categories = {};

        //                 arr.forEach(function(element) {
        //                     if (element.category) {
        //                         if (categories[element.category]) {
        //                             categories[element.category]++;
        //                         } else {
        //                             categories[element.category] = 1;
        //                         }
        //                     }
        //                 });

        //                 for (var category in categories) {
        //                     if (categories[category] >= 2) {
        //                         console.log("Indisponível " + category);
        //                     }
        //                 }

        //             }
        //         );
        // },
        //     i18n: {
        //         previousMonth: 'Anterior',
        //         nextMonth: 'Next Month',
        //         months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro',
        //             'Outubro', 'Novembro', 'Dezembro'
        //         ],
        //         weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
        //         weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab']
        //     }
        // });
        // field.parentNode.insertBefore(picker.el, field.nextSibling);
    </script>
@endsection