@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('promotors.index') }}">
            Promotores
        </a>
        <li class="breadcrumb-item"> <a href="{{url('/').'/promotors/'.$promotor->id}}">
            Promotor 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-2" style="position:relative!important">
                <h3 id="territorio">{{ $promotor->territorios->nombre }}</h3>
            </div>
            <div class="col-md-3" style="position:relative!important">
                <h6>Asignado a:</h6>
                <h3 id="promotor">{{ $promotor->user->name.' '.$promotor->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-2" 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-2" style="position:relative!important">
                <h6>Semana Siutek:</h6>
                <h3>{{ $semana_siutek->semana_calendario }}</h3>
            </div>
        </div>


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

            @include('promotor_objetivos.fields')

            <input type="hidden" name="territorio_id" value="{!! $promotor->territorio_id !!}">

        {!! 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);
        });

        $('#promotor_id').on('change',function(){
            var promotor_id = $(this).val();
            console.log(promotor_id);
            getDebitoSemanaActiva(promotor_id);
            getClientesSemanaActiva(promotor_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(promotor_id){
        var url ='{!! url('/') !!}' + '/api/getDebitoSemanaActiva/'+promotor_id ;
        console.log(url);
        $.get( url, function( data ) {
            console.log( data );
            $('#debito').html('$ '+data.data );
        });

    }

    function getClientesSemanaActiva(promotor_id){
        var url ='{!! url('/') !!}' + '/api/getClientesSemanaActiva/'+promotor_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('#promotor_id', '#promotor_id-mensaje')) {
            validacion = false;
        }

        if (!validar_seleccion('#promotor_id', '#promotor_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