@extends('layouts.app')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{asset('css')}}/bootstrap-material-datetimepicker.css" />

<style>
    .input-group-text {
        margin-right: 10px;
    }
</style>
@endsection

@section('content')

<div>
    <ol class="breadcrumb">
        <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
        <li class="breadcrumb-item"><a href="{{ route('supervisors.index') }}">
            supervisores
        </a>
        <li class="breadcrumb-item"> <a href="{{url('/').'/supervisors/'.$supervisor->id}}">
            supervisor panel</a>
        </li>
    </li>
        <li class="breadcrumb-item">Crear objetivo </li>
    </ol>
</div>

<div class="row justify-content-between">
    <div class="col-12 col-xl-6">
        <h1 class="page-title">Crea un nuevo <span class="fw-semi-bold">objetivo</span></h1>
    </div>
    <div class="col-12 col-xl-6 text-right">
        <a class="btnInfo btn3" href="{{ url()->previous() }}">Regresar</a>
    </div>
</div>

<section class="widget">
    <header class="header-border">
        <h6>
            Llena todos los campos necesarios para generar un nuevo objetivo
        </h6>
        @include('adminlte-templates::common.errors')
    </header>

    <div class="widget-body">


        <div class="row class_p" style="padding-bottom:0px">
            <div class="col-md-3" style="position:relative!important">
                <h6>supervisor:</h6>
                <h3 id="clientes">{{ $supervisor->user->name.' '.$supervisor->user->a_paterno}}</h3>
            </div>
            <div class="col-md-3" style="position:relative!important">
                <h6>Debito:</h6>
                <h3 id="debito">${{ number_format($totalCobranza,2) }}</h3>
            </div>
            <div class="col-md-3" style="position:relative!important">
                <h6>Clientes:</h6>
                @if($clientes > 0)
                <h3 id="clientes">{{ $clientes }}</h3>
                @else
                <h3 id="clientes">0</h3>
                @endif
            </div>
            <div class="col-md-3" style="position:relative!important">
                <h6>Semana Siutek:</h6>
                <h3>{{ $semana_siutek->semana_calendario }}</h3>
            </div>
        </div>


        {!! Form::open(['route' => 'supervisorObjetivos.store']) !!}

        @include('supervisor_objetivos.fields')

        {!! Form::close() !!}
    </div>
</section>

@endsection

@section('scripts')
<script src="{{asset('template')}}/bower_components/jasny-bootstrap/js/fileinput.js"></script>
<script src="{{asset('template')}}/bower_components/jasny-bootstrap/js/inputmask.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script type="text/javascript" src="{{asset('js')}}/bootstrap-material-datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="{!! asset('js') !!}/validaciones.js"></script>


<script>
    //Variables globales
    var correo_existe = false;
    var url = '{!! asset("/") !!}';
    var url_base = '{!! url("/") !!}';

    $(document).ready(function() {
        $('.js-example-basic-single').select2();


        $('#semana').bootstrapMaterialDatePicker({
            lang: 'es',
            weekStart: 1,
            cancelText: 'Cancelar',
            time: false,
            format :'YYYY-MM-DD',
        });

        $("form").submit(function(e) {
            e.preventDefault();
            aplicar_validaciones(e);
        });

        $('#supervisor_id').on('change',function(){
            var supervisor_id = $(this).val();
            console.log(supervisor_id);
            getDebitoSemanaActiva(supervisor_id);
            getClientesSemanaActiva(supervisor_id);
        });

        $('#cobranza_monto_text').on('focusout',function(){
            var n = numeral($(this).val());
            $(this).val(n.format('0,0'));
            $('#cobranza_monto').val(n.value());
        });

        $('#venta_monto_texto').on('focusout',function(){
            var n = numeral($(this).val());
            $(this).val(n.format('0,0'));
            $('#venta_monto').val(n.value());
        });

    }); // fin document

    function getDebitoSemanaActiva(supervisor_id){
        var url ='{!! url('/') !!}' + '/api/getDebitoSemanaActiva/'+supervisor_id ;
        console.log(url);
        $.get( url, function( data ) {
            console.log( data );
            $('#debito').html('$ '+data.data );
        });

    }

    function getClientesSemanaActiva(supervisor_id){
        var url ='{!! url('/') !!}' + '/api/getClientesSemanaActiva/'+supervisor_id ;
        console.log(url);
        $.get( url, function( data ) {
            console.log( data );
            $('#clientes').html(data.data );
        });

    }


    function aplicar_validaciones(event) {
        var validacion = true;

        if (!validar_seleccion('#semana', '#semana-mensaje')) {
            validacion = false;
        }

        if (!validar_seleccion('#supervisor_id', '#supervisor_id-mensaje')) {
            validacion = false;
        }

        if (!validar_seleccion('#supervisor_id', '#supervisor_id-mensaje')) {
            validacion = false;
        }

        if (!validar_numero('#cobranza_monto', '#cobranza_monto-mensaje',1,0)) {
            validacion = false;
        }


        if (!validar_numero('#cobranza_prestamos', '#cobranza_prestamos-mensaje',1,0)) {
            validacion = false;
        }


        if (!validar_numero('#venta_monto', '#venta_monto-mensaje',1,0)) {
            validacion = false;
        }

        if (!validar_numero('#venta_prestamos', '#venta_prestamos-mensaje',1,0)) {
            validacion = false;
        }


        if (validacion) {
            event.target.submit();
        }
    }

</script>
@endsection