@extends('forms.ti.base_form')

@section('title')
    <div class="sec-title">
        <div class="title">Suporte & TI</div>
        <h2>Agendamento <i class="bi bi-calendar-plus title-icon"></i></h2>
    </div>
@endsection
@section('form')
    <form action="{{ route('chamados.agendamento.store') }}" method="post" id="contact-form">
        {{ csrf_field() }}
        <div class="row">

            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3">
                <label for="filial" class="col-form-label">Filial <span class="required-mark">*</span></label>
                <select class="form-control" id="filial" name="filial" required>
                    <option value="">Selecione a 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 col-xs-12 mt-3">
                <label for="setor" class="col-form-label">Setor <span class="required-mark">*</span></label>
                <select class="form-control" id="setor" name="setor" required>
                    <option value="">Selecione o setor…</option>
                    @foreach ($setores as $c)
                        <option value="{{ $c['id'] }}">{{ $c['name'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3">
                <label for="email" class="col-form-label">E-mail <span class="required-mark">*</span></label>
                <input type="email" class="form-control" id="email" name="email"
                    value="{{ Auth::check() ? Auth::user()->email : old('email') }}" required
                    placeholder="seu@email.com">
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3">
                <label for="tipo_equipamento" class="col-form-label">Tipo de equipamento <span class="required-mark">*</span></label>
                <select class="form-control" id="tipo_equipamento" required>
                    <option value="">Selecione o tipo de equipamento…</option>
                    <option value="24">Notebook</option>
                    <option value="26">Projetor</option>
                </select>
            </div>

            <div class="col-12 my-3" id="calendario">
                <div class="cdp-wrapper" style="position:relative">
                    <div class="cdp-overlay" id="cdp-overlay">
                        <div class="cdp-overlay-inner">
                            <i class="bi bi-calendar3-event"></i>
                            <p>Selecione o tipo de equipamento para verificar a disponibilidade</p>
                        </div>
                    </div>
                    <div class="cdp-topbar">
                        <div class="cdp-range-row">
                            <div class="cdp-date-pill" id="cdp-start-pill">
                                <i class="bi bi-calendar3 cdp-icon"></i>
                                <span id="cdp-start-display">Data inicial</span>
                            </div>
                            <span class="cdp-sep">→</span>
                            <div class="cdp-date-pill" id="cdp-end-pill">
                                <i class="bi bi-calendar3 cdp-icon"></i>
                                <span id="cdp-end-display">Data final</span>
                            </div>
                        </div>
                        <button type="button" class="cdp-clear-btn" id="cdp-clear">Limpar</button>
                    </div>

                    <div class="cdp-body">
                        <div class="cdp-cal">
                            <div class="cdp-cal-header">
                                <button type="button" class="cdp-nav-btn" id="cdp-prev">
                                    <i class="bi bi-chevron-left"></i>
                                </button>
                                <div class="cdp-cal-title">
                                    <span id="cdp-month-label-0"></span>
                                    <span id="cdp-year-label-0"></span>
                                </div>
                                <div style="width:30px"></div>
                            </div>
                            <div class="cdp-dow-header">
                                <span>D</span><span>S</span><span>T</span><span>Q</span><span>Q</span><span>S</span><span>S</span>
                            </div>
                            <div class="cdp-grid" id="cdp-grid-0"></div>
                        </div>

                        <div class="cdp-divider"></div>

                        <div class="cdp-cal">
                            <div class="cdp-cal-header">
                                <div style="width:30px"></div>
                                <div class="cdp-cal-title">
                                    <span id="cdp-month-label-1"></span>
                                    <span id="cdp-year-label-1"></span>
                                </div>
                                <button type="button" class="cdp-nav-btn" id="cdp-next">
                                    <i class="bi bi-chevron-right"></i>
                                </button>
                            </div>
                            <div class="cdp-dow-header">
                                <span>D</span><span>S</span><span>T</span><span>Q</span><span>Q</span><span>S</span><span>S</span>
                            </div>
                            <div class="cdp-grid" id="cdp-grid-1"></div>
                        </div>
                    </div>

                    <div class="cdp-legend">
                        <span class="legend-item"><span class="cdp-swatch cdp-swatch-available"></span>Disponível</span>
                        <span class="legend-item"><span class="cdp-swatch cdp-swatch-unavailable"></span>Indisponível</span>
                        <span class="legend-item"><span class="cdp-swatch cdp-swatch-past"></span>Data passada</span>
                        <span class="legend-item"><span class="cdp-swatch cdp-swatch-selected"></span>Selecionado</span>
                    </div>
                </div>
            </div>

            {{-- Hidden inputs for form submission --}}
            <input type="hidden" name="date-start" id="date-start">
            <input type="hidden" name="date-ends" id="date-ends">

            <div class="col-12 mb-3 hidden" id="alert-availability"></div>

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

            <div class="form-group col-12 mt-3">
                <label for="msg" class="col-form-label">Observações</label>
                <div class="rt-wrap">
                    <div class="rt-toolbar">
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'b')" title="Negrito"><b>B</b></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'i')" title="Itálico" style="font-style:italic">I</button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'u')" title="Sublinhado"><u>U</u></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'s')" title="Riscado"><s>S</s></button>
                        <div class="rt-sep"></div>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'code')" title="Código" style="font-family:monospace;font-size:.65rem">&lt;/&gt;</button>
                        <div class="rt-sep"></div>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'ul')" title="Lista com marcadores"><i class="bi bi-list-ul"></i></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'ol')" title="Lista numerada"><i class="bi bi-list-ol"></i></button>
                    </div>
                    <div contenteditable="true" data-name="msg" data-placeholder="Observações (opcional)"></div>
                    <input type="hidden" name="msg" id="msg">
                </div>
            </div>

            <div class="form-group col-12 mt-2">
                <button type="submit" class="theme-btn btn-style-one" id="submit-btn">
                    <i class="bi bi-send"></i> Enviar agendamento
                </button>
            </div>

        </div>
        <input type="hidden" id="categoria" name="categoria" value="">
        <input type="hidden" id="tipo_chamado" name="tipo_chamado" value="1">
        <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-triangle-fill"></i>
        <p>Este formulário é designado <strong>APENAS</strong> para agendamentos de equipamentos.</p>
    </li>
    <li>
        <i class="bi bi-info-circle"></i>
        <p>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-check2-circle"></i>
        <p>Campos marcados com <span class="required-mark">*</span> são obrigatórios.</p>
    </li>
    <li>
        <i class="bi bi-telephone"></i>
        <p>Em caso de dúvidas, ligue para o suporte.</p>
    </li>
@endsection

@push('scripts')
    <script>
        var ends = '';
        var start = '';
        var typeId = '24';
        var allAgenda = {!! json_encode($datas) !!};
        var qnt = {!! json_encode($qnt) !!};

        var TYPE_MAP = { '24': 'Notebook', '26': 'Projetor' };
        var blockedDays = {};

        var CDP_MONTHS = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho',
                          'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
        var cdpLeftYear, cdpLeftMonth;

        window.addEventListener('jquery-ready', () => {
            $(document).ready(function() {

                // ---- helpers ----
                function getTypeName() { return TYPE_MAP[typeId] || ''; }

                function buildBlockedDays() {
                    blockedDays = {};
                    var typeName = getTypeName();
                    if (!typeName) return;
                    var total = 0;
                    var q = qnt.find(function(item) { return item.type === typeName; });
                    if (q) total = parseInt(q.qnt);
                    if (total === 0) return;
                    var occ = {};
                    allAgenda.forEach(function(element) {
                        if (element.type !== typeName) return;
                        var bs = new Date(element.date_begin + 'T00:00:00');
                        var be = new Date(element.date_ends + 'T00:00:00');
                        var d = new Date(bs);
                        while (d <= be) {
                            var key = d.toISOString().slice(0, 10);
                            occ[key] = (occ[key] || 0) + 1;
                            d.setDate(d.getDate() + 1);
                        }
                    });
                    for (var dk in occ) {
                        if (occ[dk] >= total) blockedDays[dk] = true;
                    }
                }

                function countAvailable(startDate, endDate) {
                    var typeName = getTypeName();
                    if (!typeName) return 0;
                    var total = 0;
                    var q = qnt.find(function(item) { return item.type === typeName; });
                    if (q) total = parseInt(q.qnt);
                    var occupied = 0;
                    var s = new Date(startDate);
                    var e = new Date(endDate);
                    allAgenda.forEach(function(element) {
                        if (element.type !== typeName) return;
                        var bs = new Date(element.date_begin);
                        var be = new Date(element.date_ends);
                        if (s <= be && e >= bs) occupied++;
                    });
                    return total - occupied;
                }

                function isPastDate(dateStr) {
                    var today = new Date();
                    today.setHours(0, 0, 0, 0);
                    return new Date(dateStr + 'T00:00:00') < today;
                }

                function isClickableDate(dateStr) {
                    return !isPastDate(dateStr) && !blockedDays[dateStr];
                }

                function updateAvailabilityFeedback() {
                    var ds = $('#date-start').val();
                    var de = $('#date-ends').val();
                    var $alert = $('#alert-availability');
                    var $submit = $('#submit-btn');
                    if (!ds || !de) {
                        $alert.addClass('hidden').html('');
                        $submit.prop('disabled', false);
                        return;
                    }
                    var available = countAvailable(ds, de);
                    if (available <= 0) {
                        $alert.removeClass('hidden').html(
                            '<div class="alert alert-danger mb-0 py-2 alert-agendamento">' +
                            '<i class="bi bi-exclamation-triangle mr-1"></i> ' +
                            'Nenhum equipamento disponível para o período selecionado. Escolha outra data.</div>'
                        );
                        $submit.prop('disabled', true);
                    } else {
                        $alert.removeClass('hidden').html(
                            '<div class="alert alert-success mb-0 py-2 alert-agendamento">' +
                            '<i class="bi bi-check-circle mr-1"></i> ' +
                            available + ' equipamento(s) disponível(is) para o período.</div>'
                        );
                        $submit.prop('disabled', false);
                    }
                }

                function resetCalendar() {
                    start = '';
                    ends = '';
                    $('#date-start').val('');
                    $('#date-ends').val('');
                    $('#alert-availability').addClass('hidden').html('');
                    cdpUpdateTop();
                    cdpRender();
                }

                // ---- Custom Date Picker ----
                function cdpPad(n) { return n < 10 ? '0' + n : String(n); }

                function cdpFormatDate(dateStr) {
                    var d = new Date(dateStr + 'T00:00:00');
                    return d.getDate() + ' de ' + CDP_MONTHS[d.getMonth()];
                }

                function cdpUpdateTop() {
                    var ds = $('#date-start').val();
                    var de = $('#date-ends').val();
                    var $sp = $('#cdp-start-pill'), $ep = $('#cdp-end-pill');
                    if (ds) {
                        $('#cdp-start-display').text(cdpFormatDate(ds));
                        $sp.addClass('cdp-date-active');
                    } else {
                        $('#cdp-start-display').text('Data inicial');
                        $sp.removeClass('cdp-date-active');
                    }
                    if (de) {
                        $('#cdp-end-display').text(cdpFormatDate(de));
                        $ep.addClass('cdp-date-active');
                    } else {
                        $('#cdp-end-display').text('Data final');
                        $ep.removeClass('cdp-date-active');
                    }
                }

                function cdpDayClass(dateStr, dow) {
                    var classes = ['cdp-day'];
                    if (dow === 0) { classes.push('cdp-sunday'); return classes.join(' '); }
                    if (isPastDate(dateStr)) { classes.push('cdp-past'); return classes.join(' '); }
                    if (blockedDays[dateStr]) { classes.push('cdp-unavailable'); return classes.join(' '); }
                    classes.push('cdp-available');
                    var ds = $('#date-start').val();
                    var de = $('#date-ends').val();
                    if (ds && dateStr === ds) classes.push('cdp-sel-start');
                    if (de && dateStr === de) classes.push('cdp-sel-end');
                    if (ds && de && dateStr > ds && dateStr < de) classes.push('cdp-sel-mid');
                    return classes.join(' ');
                }

                function cdpRenderGrid(gridId, year, month) {
                    var container = document.getElementById(gridId);
                    if (!container) return;
                    container.innerHTML = '';
                    var daysInMonth = new Date(year, month + 1, 0).getDate();
                    var firstDow = new Date(year, month, 1).getDay();
                    for (var i = 0; i < firstDow; i++) {
                        var empty = document.createElement('div');
                        empty.className = 'cdp-day cdp-empty';
                        container.appendChild(empty);
                    }
                    for (var d = 1; d <= daysInMonth; d++) {
                        var dow = new Date(year, month, d).getDay();
                        var dateStr = year + '-' + cdpPad(month + 1) + '-' + cdpPad(d);
                        var div = document.createElement('div');
                        div.className = cdpDayClass(dateStr, dow);
                        div.dataset.date = dateStr;
                        div.innerHTML = '<span>' + d + '</span>';
                        if (div.classList.contains('cdp-available')) {
                            div.addEventListener('click', function() {
                                cdpHandleClick(this.dataset.date);
                            });
                        }
                        container.appendChild(div);
                    }
                }

                function cdpRender() {
                    cdpRenderGrid('cdp-grid-0', cdpLeftYear, cdpLeftMonth);
                    document.getElementById('cdp-month-label-0').textContent = CDP_MONTHS[cdpLeftMonth];
                    document.getElementById('cdp-year-label-0').textContent = cdpLeftYear;
                    var rDate = new Date(cdpLeftYear, cdpLeftMonth + 1, 1);
                    cdpRenderGrid('cdp-grid-1', rDate.getFullYear(), rDate.getMonth());
                    document.getElementById('cdp-month-label-1').textContent = CDP_MONTHS[rDate.getMonth()];
                    document.getElementById('cdp-year-label-1').textContent = rDate.getFullYear();
                    // Disable prev button if already at current month
                    var now = new Date();
                    var atMin = (cdpLeftYear === now.getFullYear() && cdpLeftMonth === now.getMonth());
                    document.getElementById('cdp-prev').disabled = atMin;
                }

                function cdpHandleClick(dateStr) {
                    if (!isClickableDate(dateStr)) return;
                    var ds = $('#date-start').val();
                    var de = $('#date-ends').val();
                    if (!ds || de) {
                        start = new Date(dateStr);
                        ends = '';
                        $('#date-start').val(dateStr);
                        $('#date-ends').val('');
                    } else {
                        if (dateStr >= ds) {
                            ends = new Date(dateStr);
                            $('#date-ends').val(dateStr);
                        } else {
                            ends = new Date(ds);
                            start = new Date(dateStr);
                            $('#date-ends').val(ds);
                            $('#date-start').val(dateStr);
                        }
                    }
                    cdpRender();
                    cdpUpdateTop();
                    updateAvailabilityFeedback();
                }

                function cdpInit() {
                    var now = new Date();
                    cdpLeftYear = now.getFullYear();
                    cdpLeftMonth = now.getMonth();
                    document.getElementById('cdp-prev').addEventListener('click', function() {
                        cdpLeftMonth--;
                        if (cdpLeftMonth < 0) { cdpLeftMonth = 11; cdpLeftYear--; }
                        cdpRender();
                    });
                    document.getElementById('cdp-next').addEventListener('click', function() {
                        cdpLeftMonth++;
                        if (cdpLeftMonth > 11) { cdpLeftMonth = 0; cdpLeftYear++; }
                        cdpRender();
                    });
                    document.getElementById('cdp-clear').addEventListener('click', function() {
                        resetCalendar();
                    });
                    cdpRender();
                    cdpUpdateTop();
                }

                // ---- tipo equipamento select ----
                $('#tipo_equipamento').change(function() {
                    typeId = $(this).val();
                    if (!typeId) {
                        $('#cdp-overlay').show();
                        $('#adicional').addClass('hidden');
                        resetCalendar();
                        return;
                    }
                    $('#categoria').val(typeId);
                    $('#cdp-overlay').hide();
                    if (typeId == '26') {
                        $('#adicional').removeClass('hidden');
                    } else {
                        $('#adicional').addClass('hidden');
                    }
                    resetCalendar();
                    buildBlockedDays();
                    cdpRender();
                });

                // ---- form submit validation ----
                $('#contact-form').on('submit', function(e) {
                    var ds = $('#date-start').val();
                    var de = $('#date-ends').val();
                    if (ds && de) {
                        var available = countAvailable(ds, de);
                        if (available <= 0) {
                            e.preventDefault();
                            $('#alert-availability').removeClass('hidden').html(
                                '<div class="alert alert-danger mb-0 py-2 alert-agendamento">' +
                                '<i class="bi bi-exclamation-triangle mr-1"></i> ' +
                                'Não é possível agendar: nenhum equipamento disponível para o período.</div>'
                            );
                            return false;
                        }
                    }
                });

                cdpInit();
            });
        });
    </script>
@endpush