@extends('layouts.app')

@section('css')
<link rel="stylesheet" href="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed tbody tr td.day.active:before{
        background: linear-gradient(to right, #313232, #313232) !important;
    }
    .bg-gradient-success, .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed tbody tr td.day.today:before{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .col-custom{
        width: 20%;
    }
    @media only screen and (max-width: 1440px) {
        .col-custom{
            width: 20%;
        }
    }
    @media only screen and (max-width: 720px) {
        .col-custom{
            width: 50%;
        }
    }
    @media only screen and (max-width: 480px) {
        .col-custom{
            width: 100%;
        }
    }
    .standby{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .datepicker table tr td span.active{
        background-image: linear-gradient(to bottom,#00c88b,#00c88b) !important;
        color:#fff;
    }
    .datepicker table tr td span.focused{
        background: linear-gradient(to right, #00c88b, #00c88b);
        color:#fff;
    }
    .datepicker table tr td span:hover {
        background: #c2e7e4;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-months .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-years .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-decades .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-centuries .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .btnAccionesCalendar{
        font-size: 20px;
        color: #00c88b;
        border: none;
    }
    .btnAccionesCalendar:hover{
        font-size: 20px;
        color: #454a4d;
    }
    #btnCliente:hover{
        text-decoration: none;
        color: #fff;
    }
    #accordion-ingresos.accordion.accordion-bordered .card .card-header a:before{
		color: #00c88b !important;
	}
	.bootstrap-touchspin-up {
		background-color: #00c88b !important;
		border-color: #00c88b !important;
	}

	.bootstrap-touchspin-down {
		background-color: #67666a !important;
		border-color: #67666a !important;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice,
	.select2-selection__choice__remove {
		background-color: #00c88b !important;
		border: 1px solid #00c88b !important;
		font-family: 'Poppins';
		font-weight: 400;
		font-size: 13px;
		color: #fff !important;
		margin-bottom: 5px;
	}

	.form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before{
		background: #00c88b !important;
		border-width: 0 !important;
		border: solid #00c88b !important;
		border-color: #00c88b !important;
	}
	.form-check-primary.form-check label input[type="checkbox"] + .input-helper:before, .form-check-primary.form-check label input[type="radio"] + .input-helper:before{
		border-color: #00c88b !important;
	}
	.daterangepicker .ranges li.active{
		background: #00c88b !important;
	}
	.daterangepicker td.in-range{
		background: #00c88c38;
	}
	.daterangepicker td.active, .daterangepicker td.active:hover{
		background: #00c88b;
	}
	.btnArrow{
        font-size: 25px;
        background: #f9f9f9;
        margin: 0px 10px;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
    }
    #daterange{
        background: #f9f9f9;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    }
</style>
@endsection

@section('content')
<div class="page-header">
    <div class="page-title">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-home"></i>
        </span>
        <span class="h2 text-uppercase text-left">  tablero principal </span>
    </div>
    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>visión general <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>
<div class="card card-statistics mb-5 overflow-hidden">
    <div class="row">
        <div class="card-col col-custom" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-account-check-outline text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0">Referidos <br /> agregados mes</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium" id="clientes_mes">{{ $clientes_mes }}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="card-col col-custom" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-account-clock-outline text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0">Referidos <br /> faltantes mes</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium" id="referidos_faltantes">{{ $referidos_faltantes }}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="card-col col-custom" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-account-multiple-outline text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0">Referidos <br /> totales</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium" id="clientes_totales">{{ $clientes_totales }}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="card-col col-custom" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-currency-usd text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0">Balance <br /> del mes</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium" id="comision_generada_mes">${{ number_format($comision_generada_mes,2) }}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
        @if (Auth::user()->tipo_usuario == 'Socio jr')
        <a href="{{url('clientes/create')}}" id="btnCliente" class="card-col col-custom" style="background-color: #00c88a" >
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                    <i class="mdi mdi-account-plus-outline mr-0 mr-sm-4 icon-lg text-white"></i>
                    <div class="wrapper text-center text-sm-left">
                        <div class="fluid-container">
                            <h3 class="mb-0 font-weight-medium text-white">Nuevo <br /> cliente</h3>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        @elseif (Auth::user()->tipo_usuario == 'Admin')
        <div class="card-col col-custom" style="background-color: #00c88a" >
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                    <i class="mdi mdi-account-plus-outline mr-0 mr-sm-4 icon-lg text-white"></i>
                    <div class="wrapper text-center text-sm-left">
                        <p class="card-text mb-0 text-white">Dinero a<br /> recibir</p>
                        <div class="fluid-container">
                            <h3 class="mb-0 font-weight-medium text-white">${{ number_format($clientes_mes * 200,2) }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-4"></div>
                    <div class="col-4"></div>
                    <div class="col-4">
                        <div class="btn-group w-100">
                            <button class="btnArrow" data-tipo="anterior"> < </button>
                            <input class="w-100 text-center" type="text" id="daterange" name="daterange" value="{{ $inicio_mes.' / '.$fin_mes }}" />
                            <button class="btnArrow" data-tipo="siguiente"> > </button>
                        </div>
                    </div>
                </div>
                @if (Auth::user()->tipo_usuario == 'Socio jr')
                <h4 class="card-title text-uppercase">Mis referidos</h4>
                @elseif (Auth::user()->tipo_usuario == 'Admin')
                <h4 class="card-title text-uppercase">Referidos vinculados</h4>
                @endif
                @if(count($clientes)== 0)
                <h1 class="text-center">
                    Aún no se han registrado clientes.
                </h1>
                @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Correo electrónico</th>
                                <th>Teléfono</th>
                                <th>Generado este mes</th>
                                @if (Auth::user()->tipo_usuario == 'Admin')
                                <th>Estatus</th>
                                <th>Detalle</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody id="tbody_clientes">
                            @foreach($clientes as $cliente)
                                <tr>
                                    <td>
                                        {!! $cliente->nombre.' '.$cliente->a_paterno !!}
                                    </td>
                                    <td>{!! $cliente->correo_electronico !!}</td>
                                    <td>{!! $cliente->telefono !!}</td>
                                    <td>${{ number_format($cliente->generado_mes,2) }}</td>
                                    @if (Auth::user()->tipo_usuario == 'Admin')
                                    <td>
                                        <select @if($cliente->estatus_reward == "cobrado") disabled @endif class="select_status" data-id="{{ $cliente->id }}" name="" id="">
                                            @if($cliente->estatus_reward == "cobrado")
                                            <option selected value="cobrado">Cobrado</option>
                                            @else
                                            <option selected value="sincobrar">Sin cobrar</option>
                                            @endif
                                        </select>
                                    </td>
                                    <td><a href="{{ url('clientes/'.$cliente->id) }}" class="btn btn-gradient-primary_local btn-xs">Ver</a></td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
<div id="socialjr_id" data-id="{{ Auth::user()->id }}"></div>
@endsection

@section('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('/js/citas') }}/loadingoverlay.min.js"></script>
<script>
    $(function() {
		var inicio = "{{ $inicio_mes}}";
		var fin = "{{ $fin_mes}}";
		$('#daterange').daterangepicker({
			"cancelButtonClasses": "btn btn-secondary",
			"applyButtonClasses" : "btn btn-primary_local",
			ranges: {
				'Hoy': [moment(), moment()],
				'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
				'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
				'Este mes': [moment().startOf('month'), moment().endOf('month')],
				'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			},
			"alwaysShowCalendars": true,
			"startDate": inicio,
			"endDate": fin,
			"opens": "center",
			"locale": {
				"format": "DD-MMM-YYYY",
				"separator": " / ",
				"applyLabel": "Aplicar",
				"cancelLabel": "Cancelar",
				"fromLabel": "Desde",
				"toLabel": "Hasta",
				"customRangeLabel": "Personalizado",
				"weekLabel": "W",
				"daysOfWeek": [
					"Do",
					"Lu",
					"Ma",
					"Mie",
					"Jue",
					"Vie",
					"Sa"
				],
				"monthNames": [
					"Enero",
					"Febrero",
					"Marzo",
					"Abril",
					"Mayo",
					"Junio",
					"Julio",
					"Agosto",
					"Septiembre",
					"Octubre",
					"Noviembre",
					"Diciembre"
				],
				"firstDay": 1
			},
		});

    });

    $(".btnArrow").click(function(){
		$.LoadingOverlay("show");

        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        var tipo = $(this).data('tipo');

        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/get_fecha/"+tipo+"/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
			$('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);
			actualizarDatos();
            $.LoadingOverlay("hide");
        })
        .fail(function(error) {
            console.log('error',error);
        });
    });

    function actualizarDatos(){
        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        var socialjr_id = $("#socialjr_id").data('id');

        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/get_referidos/"+socialjr_id+"/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            var datos = (data.data);
            // $("#clientes_mes").text(datos.clientes_mes);
            // $("#referidos_faltantes").text(datos.referidos_faltantes);
            // $("#clientes_totales").text(datos.clientes_totales);
            // $("#comision_generada_mes").text(datos.comision_generada_mes);

            $("#tbody_clientes").html('');
            datos.clientes.forEach(element => {
                var aux = 'N/A';
                if(element.generado_mes != undefined)
                {
                    var aux = element.generado_mes;
                }
                $("#tbody_clientes").append('<tr><td>'+element.nombre+' '+element.a_paterno+'</td>'+
                '<td>'+element.correo_electronico+'</td>'+
                '<td>'+element.telefono+'</td>'+
                '<td>'+aux+'</td></tr>');
            });

        })
        .fail(function(error) {
            console.log('error',error);
        });
	}

	$('#daterange').on('apply.daterangepicker', function(ev, picker) {
        $.LoadingOverlay("show");
        actualizarDatos();
        $.LoadingOverlay("hide");
    });

    $(".select_status").change(function(){
        var cliente_id = $(this).data('id');
        var valor = $(this).val();
        console.log(cliente_id,valor);
        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/change_estatus/"+cliente_id+"/"+valor,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            var datos = (data.data);

        })
        .fail(function(error) {
            console.log('error',error);
        });
    })
</script>
@endsection