@extends('layouts.app')
@push('page_css')
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
@endpush
@section('content')
    <div class="page-info">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/home'); }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Detalle de instrumentos de medición</li>
            </ol>
        </nav>
    </div>
    @include('flash::message')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Detalle de instrumentos de medición</h1>
                </div>
                <div class="col-sm-6">
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    @include('instruments.show_fields')
                    <div class="card-footer col-sm-12" style="margin-top:30px">
                        <div class="form-group  flex-content" >
                            <a type="button" href="{{ route('instruments.index') }}" class="btn btn-light">VOLVER</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Bitácora</h1>
                </div>
                <div class="col-sm-6" style="text-align: right">
                    <button  tyoe="button" class="btn btn-success" id="add_bitacora" >
                        <img src=" {{  asset('assets/iconos/agregar.png') }} " alt="usuarios" style="height: 20px;">
                        NUEVO
                    </button>
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    @include('devices.time_line')
                </div>
            </div>
        </div>
    </div>
    

    <livewire:modal-create /> 
    <livewire:modal-edit /> 
@endsection
@push('page_scripts')
    <script>
        const bitacoras  = {!! count($bitacora_dates) > 0 ? $bitacora_dates : '[]' !!};
        var id_device = "{!! $instrument->id !!}";
        var html = `@include('devices.fields_bitacora')`;
        var url_dinamica = "{!! url('/') !!}";
        var url_create = `${url_dinamica}/create-bitacora-instrumentos/${id_device}`;
        
        
        $(`#add_bitacora`).on('click',function(){
            $('#form_create').attr('action', url_create);
            $('#modulo_modal').html('Bitácora');
            $('#modulo_modal_title').html('Bitácora');
            $('.create_content_form').html(html);
            ejecutar_datepicker();
            $('#createModal').modal('show');
        });

        $(`.edit_bitacora`).on('click',function(){
            var aux = $(this).data('aux');
            var aux_fecha = $(this).data('date')
            var id = $(this).data('id');
            var url_edit = `${url_dinamica}/edit-bitacora-instrumentos/${id}/${id_device}`;

            $('#form_edit').attr('action', url_edit);
            $('#modulo_modal').html('Bitácora');
            $('#modulo_modal_title_edit').html('Bitácora');
            $('.edit_content_form').html(html);

            $('.calibracion').val(bitacoras[aux_fecha][aux].calibration_date);
            $('.dia_calibracion').val(bitacoras[aux_fecha][aux].day_of_calibation);
            $('.comentario').val(bitacoras[aux_fecha][aux].comentario);
            ejecutar_datepicker();
            $('#editModal').modal('show');
        });

        function ejecutar_datepicker(){
            $('.calibracion').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: true,
                icons: {
                    up: "icon-arrow-up-circle icons font-2xl",
                    down: "icon-arrow-down-circle icons font-2xl"
                },
                sideBySide: true
            })

            $('.dia_calibracion').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: true,
                icons: {
                    up: "icon-arrow-up-circle icons font-2xl",
                    down: "icon-arrow-down-circle icons font-2xl"
                },
                sideBySide: true
            })
        }


        $('#form_create').submit(function(event){
            event.preventDefault();
            aplicar_validacion(event);
        });

        $('#form_edit').submit(function(event){
            event.preventDefault();
            aplicar_validacion(event);
        });
        
        function aplicar_validacion(event){
            let validacion = true;
            $.each($('.selectValue'),function(key,value){
                const id = $(value).parent().find('.messageInput');
                if($(this).val() != ''){
                    $(id).text('');
                }else{
                    $(id).text('Este campo es requerido');
                    validacion = false;
                }
            })
            if (validacion) {
                event.target.submit();
            }
        }
    </script>
@endpush