@extends('dashboardCollector._theme_dashboard')

@section('content')
    <div class="container-fluid" style="margin-top: 10px;">
        <div class="row">
            <div class="col-12 mb-4 text-center">
                <h5><strong>Preencher Roteiro</strong></h5>
            </div>
            <div class="col-12 rounded-3 shadow-md">
                <div class="card text-white bg-info mb-1">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">Cliente: <strong>{{$client_name}}.</strong></div>
                            <div class="col-12">Equipamento: <strong>{{$equipment_name}}</strong></div>
                            <div class="col-12">Roteiro: <strong>{{$itinerary->itineraries_name}}</strong></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 text-end">
                <button class="btn btn-info" data-bs-toggle="offcanvas" href="#equipmentCanvas"
                        role="button" aria-controls="equipmentCanvas">
                    Detalhes do Equipamento
                </button>
            </div>
            <div class="col-12 mb-2 mt-2">
                <hr>
            </div>
            <div class="col-12 mb-9" id="preview_forms_div">
                <form method="POST" action="{{route("collector.itineraries.filled")}}" enctype="multipart/form-data"
                      id="itineraries_form">
                    @csrf
                    <input type="hidden" id="schedule_id" name="schedule_id" value="{{$schedule_data->schedule_id}}">
                    <input type="hidden" id="schedule_data_id" name="schedule_data_id"
                           value="{{$schedule_data->schedule_data_id}}">
                    <input type="hidden" id="itineraries_id" name="itineraries_id"
                           value="{{$itinerary->itineraries_id}}">

                    @if($itineraries_body)
                        @foreach($itineraries_body as $key => $item)
                            <div class="col-{{ $item['size'] }} mb-2">
                                <label class="form-label" for="itinerary[{{ $key }}]">{{ $item['title'] }}</label>
                                @if($item['type'] === 'text')
                                    <input type="text" class="form-control"
                                           id="itinerary[{{ $key }}]" name="itinerary[{{ $key }}]" value="">

                                @elseif($item['type'] === 'textarea')
                                    <textarea class="form-control" id="itinerary[{{ $key }}]"
                                              name="itinerary[{{ $key }}]"></textarea>

                                @elseif($item['type'] === 'select')
                                    <select class="form-select" name="itinerary[{{ $key }}]" id="itinerary[{{ $key }}]">
                                        <option value="">Selecione</option>
                                        @foreach($item['options'] as $option)
                                            <option value="{{ $option }}">{{ $option }}</option>
                                        @endforeach
                                    </select>

                                @elseif($item['type'] === 'radio')
                                    <div>
                                        @foreach($item['options'] as $key2 => $option)
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio"
                                                       id="itinerary[{{ $key."_".$key2 }}]" name="itinerary[{{ $key }}]"
                                                       value="{{ $option }}">
                                                <label class="form-check-label"
                                                       for="itinerary[{{ $key."_".$key2 }}]">{{ $option }}</label>
                                            </div>
                                        @endforeach
                                    </div>

                                @elseif($item['type'] === 'checkbox')
                                    <div>
                                        @foreach($item['options'] as $key3 => $option)
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                       id="itinerary[{{ $key."_".$key3 }}]"
                                                       name="itinerary[{{ $key }}][]" value="{{ $option }}">
                                                <label class="form-check-label"
                                                       for="itinerary[{{ $key."_".$key3 }}]">{{ $option }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    @endif

                    <div class="col-12 text-center">
                        <button class="btn btn-primary">Salvar</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="offcanvas offcanvas-end" tabindex="-1" id="equipmentCanvas" aria-labelledby="equipmentCanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">Detalhes do equipamento</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
            </div>
            @if($equipment_type == "caldeira" || $equipment_type == "torre" || $equipment_type == "gelado")
                <div class="offcanvas-body">
                    <div class="row">
                        <div class="col-12 mb-2">
                            <strong>Equipamento:</strong> {{$equipment_complete->Equipamento}}
                        </div>
                        <div class="col-12 mb-2">
                            <strong>Marca:</strong> {{$equipment_complete->Marca}}
                        </div>
                        <div class="col-12 mb-2">
                            <strong>Modelo:</strong> {{$equipment_complete->Modelo}}
                        </div>
                        <div class="col-12 mb-2">
                            <strong>Ano Fabricação:</strong> {{$equipment_complete->AnoFabr}}
                        </div>
                        @if($equipment_type == "caldeira")
                            <div class="col-12 mb-2">
                                <strong>Capacidade:</strong>
                                {{
                                    (!empty($equipment_complete->Producao) && is_numeric($equipment_complete->Producao))
                                        ? (intval($equipment_complete->Producao) == $equipment_complete->Producao
                                            ? number_format($equipment_complete->Producao, 0, ',', '.')
                                            : number_format($equipment_complete->Producao, 2, ',', '.'))
                                        : ''
                                }}
                            </div>
                        @else
                            <div class="col-12 mb-2">
                                <strong>Capacidade:</strong>
                                {{
                                    (!empty($equipment_complete->Capadidade) && is_numeric($equipment_complete->Capadidade))
                                        ? (intval($equipment_complete->Capadidade) == $equipment_complete->Capadidade
                                            ? number_format($equipment_complete->Capadidade, 0, ',', '.')
                                            : number_format($equipment_complete->Capadidade, 2, ',', '.'))
                                        : ''
                                }}
                            </div>
                        @endif
                        <div class="col-12 mb-2">
                            <strong>Unidade:</strong> {{$equipment_complete->NomeUnidade}}
                        </div>
                        <div class="col-12 mb-2">
                            <strong>Bomba Dosadora:</strong>
                        </div>
                        <hr>
                        <div class="row">
                            <h5 class="mb-2">Dosagem de produtos Químicos</h5>
                            <div class="col-12 mb-2">
                                Recomendado - Para <strong>{{$equipment_complete->Horas}}</strong> horas de operação
                            </div>
                            <div class="col-12 mb-2">
                                <table class="table table-responsive table-striped">
                                    <thead>
                                    <tr>
                                        <td>Produtos</td>
                                        <td>Kg/L</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>{{$equipment_complete->produtoNome1}}</td>
                                        <td>
                                            {{
                                                (!empty($equipment_complete->Kg1) && is_numeric($equipment_complete->Kg1))
                                                    ? (intval($equipment_complete->Kg1) == $equipment_complete->Kg1
                                                        ? number_format($equipment_complete->Kg1, 0, ',', '.')
                                                        : number_format($equipment_complete->Kg1, 2, ',', '.'))
                                                    : ''
                                            }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{$equipment_complete->produtoNome2}}</td>
                                        <td>
                                            {{
                                                (!empty($equipment_complete->Kg2) && is_numeric($equipment_complete->Kg2))
                                                    ? (intval($equipment_complete->Kg2) == $equipment_complete->Kg2
                                                        ? number_format($equipment_complete->Kg2, 0, ',', '.')
                                                        : number_format($equipment_complete->Kg2, 2, ',', '.'))
                                                    : ''
                                            }}
                                        </td>

                                    </tr>
                                    <tr>
                                        <td>{{$equipment_complete->produtoNome3}}</td>
                                        <td>
                                            {{
                                                (!empty($equipment_complete->Kg3) && is_numeric($equipment_complete->Kg3))
                                                    ? (intval($equipment_complete->Kg3) == $equipment_complete->Kg3
                                                        ? number_format($equipment_complete->Kg3, 0, ',', '.')
                                                        : number_format($equipment_complete->Kg3, 2, ',', '.'))
                                                    : ''
                                            }}
                                        </td>

                                    </tr>
                                    <tr>
                                        <td>{{$equipment_complete->produtoNome4}}</td>
                                        <td>
                                            {{
                                                (!empty($equipment_complete->Kg4) && is_numeric($equipment_complete->Kg4))
                                                    ? (intval($equipment_complete->Kg4) == $equipment_complete->Kg4
                                                        ? number_format($equipment_complete->Kg4, 0, ',', '.')
                                                        : number_format($equipment_complete->Kg4, 2, ',', '.'))
                                                    : ''
                                            }}
                                        </td>

                                    </tr>
                                    <tr>
                                        <td>{{$equipment_complete->produtoNome5}}</td>
                                        <td>
                                            {{
                                                (!empty($equipment_complete->Kg5) && is_numeric($equipment_complete->Kg5))
                                                    ? (intval($equipment_complete->Kg5) == $equipment_complete->Kg5
                                                        ? number_format($equipment_complete->Kg5, 0, ',', '.')
                                                        : number_format($equipment_complete->Kg5, 2, ',', '.'))
                                                    : ''
                                            }}
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="row">
                                    <div class="col-12 mb-4">
                                        Volume total da solução: <strong>
                                            {{
                                                (!empty($equipment_complete->Volume) && is_numeric($equipment_complete->Volume))
                                                    ? (intval($equipment_complete->Volume) == $equipment_complete->Volume
                                                        ? number_format($equipment_complete->Volume, 0, ',', '.')
                                                        : number_format($equipment_complete->Volume, 2, ',', '.'))
                                                    : ''
                                            }}</strong>
                                    </div>
                                    <div class="col-12 mb-4">
                                        Regulagem da bomba dosadora: <strong>
                                            {{
                                                (!empty($equipment_complete->Regulagem) && is_numeric($equipment_complete->Regulagem))
                                                    ? (intval($equipment_complete->Regulagem) == $equipment_complete->Regulagem
                                                        ? number_format($equipment_complete->Regulagem, 0, ',', '.')
                                                        : number_format($equipment_complete->Regulagem, 2, ',', '.'))
                                                    : ''
                                            }}</strong>
                                    </div>
                                    <div class="col-12 mb-4">
                                        Unidade:
                                    </div>
                                    <div class="col-12 mb-4">
                                        Regime Operação:
                                        <strong>
                                            {{
                                                (!empty($equipment_complete->RegimeH) && is_numeric($equipment_complete->RegimeH))
                                                    ? (intval($equipment_complete->RegimeH) == $equipment_complete->RegimeH
                                                        ? number_format($equipment_complete->RegimeH, 0, ',', '.')
                                                        : number_format($equipment_complete->RegimeH, 2, ',', '.'))
                                                    : ''
                                            }}</strong>
                                    </div>
                                    <div class="col-4 mb-4">
                                        Dias: <strong>
                                            {{
                                                (!empty($equipment_complete->RegimeD) && is_numeric($equipment_complete->RegimeD))
                                                    ? (intval($equipment_complete->RegimeD) == $equipment_complete->RegimeD
                                                        ? number_format($equipment_complete->RegimeD, 0, ',', '.')
                                                        : number_format($equipment_complete->RegimeD, 2, ',', '.'))
                                                    : ''
                                            }}</strong>
                                    </div>
                                    <div class="col-12 mb-4">
                                        Descargas Intervalo (M):
                                        <strong>
                                            {{
                                                (!empty($equipment_complete->DescargaM) && is_numeric($equipment_complete->DescargaM))
                                                    ? (intval($equipment_complete->DescargaM) == $equipment_complete->DescargaM
                                                        ? number_format($equipment_complete->DescargaM, 0, ',', '.')
                                                        : number_format($equipment_complete->DescargaM, 2, ',', '.'))
                                                    : ''
                                            }}</strong>
                                    </div>
                                    <div class="col-12 mb-4">
                                        Abertura (S)
                                        <strong>
                                            {{
                                                (!empty($equipment_complete->DescargaS) && is_numeric($equipment_complete->DescargaS))
                                                    ? (intval($equipment_complete->DescargaS) == $equipment_complete->DescargaS
                                                        ? number_format($equipment_complete->DescargaS, 0, ',', '.')
                                                        : number_format($equipment_complete->DescargaS, 2, ',', '.'))
                                                    : ''
                                            }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="offcanvas-body">
                    <h5>Sem Informações</h5>
                </div>
            @endif
        </div>

        <div class="offcanvas offcanvas-end" tabindex="-1" id="assessmentTaskCanvas"
             aria-labelledby="assessmentTaskCanvas"
             data-bs-backdrop="false" data-bs-keyboard="false" data-bs-scroll="false">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="assessmentTaskCanvasLabel">Avaliação da Visita Técnica</h5>
            </div>
            <div class="offcanvas-body">
                <div class="row">
                    <form method="POST" enctype="multipart/form-data"
                          action="{{route("collector.schedule.assessment.task")}}" id="assessment_task_form">
                        @csrf
                        <input type="hidden" name="schedule_data_id" value="{{$schedule_data->schedule_data_id}}">
                        <input type="hidden" name="schedule_id" value="{{$schedule_data->schedule_id}}">

                        <div class="col-12 mb-2">
                            <label class="form-label" for="schedule_data_assessment">
                                Avaliação da visita Técnica
                            </label>
                            <select class="form-select" name="schedule_data_assessment" id="schedule_data_assessment"
                                    required>
                                <option value="">Selecione uma opção</option>
                                <option value="Ótimo">Ótimo</option>
                                <option value="Regular">Regular</option>
                                <option value="Não Atende">Não Atende</option>
                            </select>
                        </div>
                        <div class="col-12 mb-2" id="show_assessment_observations" style="display: none">
                            <label class="form-label" for="schedule_data_assessment_observations">
                                Observações da visita Técnica
                            </label>
                            <textarea class="form-control" name="schedule_data_assessment_observations"
                                      id="schedule_data_assessment_observations" rows="4"></textarea>
                        </div>
                        <input type="hidden" name="geo_lat" id="geo_lat">
                        <input type="hidden" name="geo_lng" id="geo_lng">
                        <input type="hidden" name="geo_accuracy" id="geo_accuracy">
                        <input type="hidden" name="geo_timestamp" id="geo_timestamp">
                        <input type="hidden" name="geo_source" id="geo_source" value="geolocation">

                        <div class="col-12 text-center">
                            <button class="btn btn-primary submit-forms">Salvar e Continuar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endsection
        @section('customJS')
            <script>
                $(document).ready(function () {
                    $("#schedule_footer_button").addClass("text-primary");

                    $("#itineraries_form").submit(function (e) {
                        e.preventDefault();

                        let forms = $(this);
                        sendAjax(forms.attr("action"), forms.serialize(), function (callback) {
                            if (callback.status) {
                                $("#assessmentTaskCanvas").offcanvas("show");
                            } else {
                                simpleErrorMessage(callback.error)
                            }
                        });
                    });

                    $("#schedule_data_assessment").change(function () {
                        let assessment = $(this).val();
                        if (assessment === "Ótimo") {
                            $("#show_assessment_observations").hide();
                            $("#schedule_data_assessment_observations").prop('required', false);
                        } else {
                            $("#show_assessment_observations").show();
                            $("#schedule_data_assessment_observations").prop('required', true);
                        }
                    });


                    $("#assessment_task_form").off('submit').on('submit', function (e) {
                        e.preventDefault();

                        const forms = $(this);
                        const btn = $(".submit-forms");
                        const btnText = btn.html();

                        btn.prop('disabled', true).html('<span class="spinner-border" role="status" aria-hidden="true"></span>');

                        getCurrentPositionSafe().__timeout = 3000;
                        getCurrentPositionSafe().then((pos) => {
                            fillGeoHiddenInputs(pos);

                            Swal.fire({
                                title: "Tem certeza que deseja salvar e prosseguir?",
                                text: "Essa ação não pode ser desfeita.",
                                showCancelButton: true,
                                confirmButtonColor: "#5D87FF",
                                cancelButtonColor: "#d33",
                                confirmButtonText: "Confirmar",
                                cancelButtonText: "Cancelar"
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    sendAjax(forms.attr("action"), forms.serialize(), function (callback) {
                                        if (callback.status) {
                                            Swal.fire('Tudo certo', callback.message, 'success').then((r) => {
                                                if (r.isConfirmed) window.location.href = callback.redirect;
                                            });
                                        } else {
                                            simpleErrorMessage(callback.error);
                                        }
                                    });
                                }

                                btn.html(btnText).prop('disabled', false);
                            });
                        });
                    });
                });


                function getCurrentPositionSafe(options = {}) {
                    return new Promise((resolve) => {
                        if (!('geolocation' in navigator)) {
                            return resolve(null);
                        }

                        const to = setTimeout(() => resolve(null), options.__timeout ?? 3000);

                        navigator.geolocation.getCurrentPosition(
                            (pos) => {
                                clearTimeout(to);
                                resolve(pos);
                            },
                            (err) => {
                                clearTimeout(to);
                                resolve(null);
                            },
                            {
                                enableHighAccuracy: true,
                                timeout: 10000,
                                maximumAge: 0,
                            }
                        );
                    });
                }

                function fillGeoHiddenInputs(pos) {
                    if (pos && pos.coords) {
                        const {latitude, longitude, accuracy} = pos.coords;
                        document.getElementById('geo_lat').value = latitude ?? '';
                        document.getElementById('geo_lng').value = longitude ?? '';
                        document.getElementById('geo_accuracy').value = accuracy ?? '';
                        document.getElementById('geo_timestamp').value = pos.timestamp ? new Date(pos.timestamp).toISOString() : '';
                    } else {
                        document.getElementById('geo_lat').value = '';
                        document.getElementById('geo_lng').value = '';
                        document.getElementById('geo_accuracy').value = '';
                        document.getElementById('geo_timestamp').value = '';
                    }
                }
            </script>
@endsection