@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/touchspin/css/touchspin.min.css') !!}">
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/stroll/css/stroll.css') !!}">
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/sweetalert/css/sweetalert.css">
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/switchery/css/switchery.min.css">
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/bootstrap-multiselect/css/bootstrap-multiselect.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/multiselect/css/multi-select.css"/>
<style>
    .invoice-contact,.card-block{
        font-family:'Fixture Expandend Extra light';
        color:#67666a;
        padding: 0px 15px;
    }
    .invoive-info{
        font-family:'Fixture Expandend Extra light';
        color:#67666a;
        padding: 0px 15px;
    }
    #terminos{
        padding:0px 60px;
        font-family:'Fixture Expandend Extra light';
    }
    .text-info{
        color:#67666a!important;
    }
    .text-primary {
        color:#67666a!important;
    }
    .text-center {
        text-align: center !important;
        margin-top: 10px;
    }
    .table td img {
        width: 50%;
        height: 50%;
        border-radius: 0px;
    }
    table{
        font-family: 'Fixture Expandend Extra light';
    }
    .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;
    }
    .btn-primary_local:disabled{
        background: #00c88b !important;
        color: #fff !important;
        cursor: no-drop !important;
    }
    .promocion{
        text-decoration: line-through;
        -webkit-text-decoration-line: line-through;
        color: black;
    }
    @media only screen and (max-width: 480px) {
        .card .card-body {
            padding: 2.5rem 1.5rem;
        }
    }
    .sidebar .nav .nav-item.active > .nav-link i{
        color: #3e4b5b;
    }
    .sidebar .nav .nav-item.active > .nav-link .menu-title{
        color: #3e4b5b;
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <div class="page-body">
        <div class="container">
            <div>
                <div class="card">
                    <div class="row invoice-contact">
                        <div class="col-md-12">
                            <div class="invoice-box row">
                                <div class="col-sm-12">
                                    <img src="{!! asset('imagenes_nuevas/logo_verde.png') !!}" class="m-2" style="width: 30%" alt="">
                                    <br />
                                    <h3 class="ml-2 mt-2 mb-2">Datos de la empresa</h3>
                                    <hr class="ml-2 mt-2 mb-2 w-50 float-left">
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Nombre:<br /> <strong style="font-size: .8rem">Dickiss BarberShop </strong></p>
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Dirección:<br /> <strong style="font-size: .8rem">31 Oriente #824, Col. Anzures </strong></p>
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Correo electrónico:<br /> <strong style="font-size: .8rem">info@dickissbarbershop.com </strong></p>
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Teléfono:<br /> <strong style="font-size: .8rem">22 23 70 17 98 </strong></p>
                                </div>

                                <div class="col-sm-12">
                                    <h3 class="ml-2 mt-2 mb-2">Datos cliente</h3>
                                    <hr class="ml-2 mt-2 mb-2 w-50 float-left">
                                </div>

                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Nombre:<br /> <strong style="font-size: .8rem">{!! $cliente->nombre !!} {!! $cliente->a_paterno !!} {!! $cliente->a_materno !!} </strong></p>
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Teléfono:<br /> <strong style="font-size: .8rem"> {!! $cliente->telefono !!} </strong></p>
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Correo electrónico:<br /> <strong style="font-size: .8rem"> {!! $cliente->correo_electronico !!} </strong></p>
                                </div>
                                <div class="col-sm-3"></div>

                                <div class="col-sm-12">
                                    <h3 class="ml-2 mt-2 mb-2">Ticket</h3>
                                    <hr class="ml-2 mt-2 mb-2 w-50 float-left">
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Fecha:<br /> <strong style="font-size: .8rem"> {!! $venta->created_at->format('d/m/Y').'<br />'.$venta->created_at->format('h:i a') !!} </strong></p>
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Estatus:<br /> <strong style="font-size: .8rem"> <span id="spanStatus" class="label @if($venta->status == 'Pendiente') label-warning @else label-success @endif">{!! $venta->status !!}</span> </strong></p>
                                </div>
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2"># Orden:<br /> <strong style="font-size: .8rem"> {!! $venta->id !!} </strong></p>
                                </div>
                                @if($venta->puntos != null)
                                <div class="col-sm-3">
                                    <p style="font-size: .7rem" class="ml-2">Puntos generados<br /> <strong style="font-size: .8rem"> {!! $venta->puntos->puntos_totales !!} </strong></p>
                                </div>
                                @endif
                                @if(isset($puntos_vigentes))
                                <p style="font-size: .7rem" class="ml-2">Puntos disponibles<br /> <strong style="font-size: .8rem"> {!! $puntos_vigentes->puntos_totales !!} </strong></p>
                                @endif
                                <div class="col-sm-3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-block ml-2 mt-5">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="table-responsive">
                                    <table class="table  invoice-detail-table">
                                        <thead>
                                            <tr class="thead-default">
                                            <th>Descripción</th>
                                            <th>Cantidad</th>
                                            <th>Precio individual</th>
                                            <th>Subtotal</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($productos_vendidos as $producto_venta)
                                            <tr>
                                                <td>
                                                <h6>{!! $producto_venta->producto->nombre !!}</h6>
                                                </td>
                                                <td>{!! $producto_venta->cantidad_productos !!}</td>
                                                @if($producto_venta->tipo == "venta")
                                                <td>${!! $producto_venta->producto->precio !!}</td>
                                                <td>${!! $producto_venta->producto->precio * $producto_venta->cantidad_productos !!}</td>
                                                @elseif($producto_venta->tipo == "cortesia")
                                                <td>GRATIS</td>
                                                <td>0</td>
                                                @endif
                                            </tr>
                                            @endforeach
                                            @foreach($servicios_vendidos as $servicio_venta)
                                            <tr>
                                                <td>
                                                <h6>{!! $servicio_venta->services->nombre !!}</h6>
                                                <p>{!! $servicio_venta->services->descripcion !!}</p>
                                                </td>
                                                <td>{!! $servicio_venta->cantidad_servicios  !!}</td>
                                                @if($servicio_venta->services->check_promocion == 'si')
                                                <td><span class="promocion">${!! $servicio_venta->services->costo!!}</span> ${!! $servicio_venta->services->costo_promocion!!}</td>
                                                <td>${!! $servicio_venta->services->costo_promocion * $servicio_venta->cantidad_servicios !!}</td>
                                                @else
                                                <td>${!! $servicio_venta->services->costo!!}</td>
                                                <td>${!! $servicio_venta->services->costo * $servicio_venta->cantidad_servicios !!}</td>
                                                @endif
                                            </tr>
                                            @endforeach
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td class="">
                                                    {{-- @dd($cliente->reward) --}}
                                                    @if($venta->puntos_utilizados == null)
                                                    <h1 class="text-primary totalTexto">Total : ${!! $total + $total_services  !!}</h1>
                                                    @else
                                                    <h1 class="text-primary text-right">Puntos utilizados: ${{ $venta->puntos_utilizados }}</h1>
                                                    <h1 class=" text-right totalTexto">Total : ${!! ($total + $total_services) -  $venta->puntos_utilizados !!}</h1>
                                                    @endif
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        {{-- <div class="row">
                            <div class="col-sm-12">
                                <table class="table table-responsive invoice-table invoice-total">
                                    <tbody>
                                        <tr class="text-info">
                                        <td>
                                        <h1 class="text-primary">Total :</h1>
                                        </td>
                                        <td>
                                        <h1 class="text-primary">${!! $total + $total_services  !!}</h1>
                                        </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>--}}

                        <div class="row">
                            <div class="col-sm-8">
                                <table class="table  invoice-detail-table">
                                    <thead>
                                        <tr class="thead-default">
                                        <th>Colaborador</th>
                                        <th>Cantidad</th>
                                        <th>Tipo</th>
                                        </tr>
                                    </thead>
                                    <tbody id="contenedorPropinas">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col-sm-6 invoice-btn-group text-center mb-4">
                    @if($venta->status != 'Pagado')
                        <h1 class="text-uppercase">Formas de pago</h1>
                        <button id="btnCobrarTarjeta" class="btn btn-sm btn-primary_local">Tajeta de credito</button>
                        <button id="btnCobrarEfectivo" class="btn btn-sm btn-primary_local">Efectivo</button>
                        @if($puntos_vigentes != null)
                            @if($venta->puntos_utilizados == null)
                            <button id="btnCobrarPuntos" class="btn btn-sm btn-primary_local">Puntos</button>
                            @endif
                        @endif
                    @endif
                    </div>
                    <div class="col-sm-6 invoice-btn-group text-center mb-4">
                        <h1 class="text-uppercase">Impresión</h1>
                        {{-- <a target="_blank" href="{!! asset('ventas/PDF').'/'.$venta->id !!}" class="btn btn-sm btn-info" id="imprimir">Factura</a> --}}
                        <a target="_blank" href="{!! asset('ventas/ticket').'/'.$venta->id !!}" class="btn btn-sm btn-info" id="imprimir_ticket">Ticket</a>
                    </div>
                    <div class="col-sm-12 invoice-btn-group text-center mb-4">
                        <a href="{!! asset('caja/nuevo-ticket') !!}" class=" btn btn-lg btn-dark">Regresar a caja</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalas">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="background: #fff;">
            <form action="{{ url('recibir_puntos_venta/'.$venta->id) }}" method="post">
            @csrf
            <div class="modal-body" style="padding:0px 3rem">
                <h3 class="text-center">Utilizar puntos</h3>
                <br />
                <p class="text-center">Cuentas con esta cantidad de puntos vigentes</p>
                @if($puntos_vigentes == null)
                    <h1 class="text-center">0</h1>
                @else
                    <h1 class="text-center">{{ $puntos_vigentes->puntos_totales }}</h1>

                    <div>
                        <div class="form-group">
                            <input class="vertical-spin spin" type="text" data-bts-button-down-class="btn btn-secondary btn-outline" data-bts-button-up-class="btn btn-secondary btn-outline" value="0"  name="cantidad_puntos" id="cantidad_puntos">
                            <p class="text-info">Puntos máximos a canjear: {{ $puntos_vigentes->puntos_totales }}</p>
                        </div>
                    </div>
                @endif
                <div class="text-center row">
                    <div class="col-12">
                        <hr>
                    </div>
                    <div class="col-6">
                        <h4>Subtotal</h4>
                        <h3>${{ $total + $total_services }}</h3>
                    </div>
                    <div class="col-6">
                        <h4>Total</h4>
                        <h3>$<span id="subtotal">{{ $total + $total_services }}</span></h3>
                    </div>
                </div>
            </div>
            <div class="col-12 text-center">
                <p id="msgPuntos" class="text-danger"></p>
            </div>
            <div class="modal-footer border-0 btn-group">
                <button type="button" class="btn btn-xs btn-secondary" data-dismiss="modal">Cancelar</button>
                <button class="btn btn-xs btn-primary_local" id="btnModalPuntos">Usar puntos</button>
            </div>
            </form>
        </div>
    </div>
</div>


@endsection

@section('scripts')
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/sweetalert/js/sweetalert.min.js"></script>

<script src="{!! asset('files_custom/bower_components/stroll/js/stroll.js" type="text/javascript') !!}"></script>

<meta name="csrf-token" content="{{ csrf_token() }}" />

<script src="{!! asset('files_custom/bower_components/touchspin/js/TouchSpin.js') !!}"></script>

<script src="{!! asset('files_custom/bower_components/datatables.net/js/jquery.dataTables.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/dataTables.buttons.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.print.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.html5.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') !!}" type="text/javascript"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/modernizr/js/modernizr.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/multiselect/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/switchery/js/switchery.min.js"></script>
<script>
var venta_id = {!! $venta->id !!};
var respuesta = '';
var total_global = {{ $venta->total }};
$('#btnCobrarTarjeta').click(function(){
    swal({
        title: "Cobrar con tarjeta de credito",
        text: "Ingrese la referencia de pago:",
        type: "input",
        cancelButtonText: "Cancelar",
        confirmButtonText: "Cobrar",
        showCancelButton: true,
        closeOnConfirm: false,
        showLoaderOnConfirm: true,
        inputPlaceholder: "12DASCER2321"
    }, function (inputValue){
        if (inputValue === false) return false;
        if (inputValue === "") {
            swal.showInputError("Debe de llenar el campo");
            return false
        }
        setTimeout(function () {
            var tipo = 'tarjeta';
            enviarDatos(tipo,inputValue);
            swal("Genial!", "Su referencia de pago fue: " + inputValue, "success");
            $("#spanStatus").removeClass('label-danger');
            $("#spanStatus").addClass('label-success');
            $("#spanStatus").text('Pagado');
            $("#btnCobrarTarjeta").hide();
            $("#btnCobrarEfectivo").hide();
        }, 3000);
    });
});

$('#btnCobrarEfectivo').click(function(){
    swal({
        title: "Cobrar en efectivo",
        text: "Ingrese la cantidad recibida, unicamente números",
        type: "input",
        // inputType: 'number',
        cancelButtonText: "Cancelar",
        confirmButtonText: "Cobrar",
        showCancelButton: true,
        closeOnConfirm: false,
        showLoaderOnConfirm: true,
        inputPlaceholder: "Ej: 340.50"
    }, function (inputValue) {

        let total =  parseFloat($('.totalTexto').text().replace(/[^0-9]/g, ''));



        if (inputValue === false) return false;
        if (inputValue === "") {
            swal.showInputError("Debe de llenar el campo!");
            return false
        }
        var numNum = +inputValue;
        if (isNaN(numNum))
        {
            swal.showInputError("Solo se aceptan números");
            return false
        }
        else if(numNum < total){

            swal.showInputError("El monto ingresado debe ser mayor o igual al total.");
            return false

        }



        setTimeout(function () {
            var tipo = 'efectivo';
            var total_base = {!! ($venta->puntos_utilizados == null)? $venta->total : $venta->subtotal !!};
            var cambio = inputValue - total_base;
            enviarDatos(tipo,inputValue);
            // swal("Genial!", "Su cambio es de: $" + cambio, "success");
            swal({
                title: '$'+cambio,
                type: 'success',
                text:'Debe dar de cambio'
            });
            $("#spanStatus").removeClass('label-danger');
            $("#spanStatus").addClass('label-success');
            $("#spanStatus").text('Pagado');
            $("#btnCobrarTarjeta").hide();
            $("#btnCobrarEfectivo").hide();
        }, 3000);



    });
});


@if($puntos_vigentes != null)
$('#btnCobrarPuntos').click(function(){
    $("#modalas").modal();
});

var vspinTrue = $(".vertical-spin").TouchSpin({
    verticalbuttons: true,
    max: {!! $puntos_vigentes->puntos_totales !!},
    decimals: 1
});
if (vspinTrue) {
    $('.vertical-spin').prev('.bootstrap-touchspin-prefix').remove();
}

$('.vertical-spin').on("change",function(){
    $("#subtotal").text(parseFloat(total_global) - $(this).val());
});

@endif

function enviarDatos(tipo,inputValue){
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    var venta_id = {!! $venta->id !!};

    if(tipo == "efectivo")
    {
        var formulario =
        {
            venta_id: venta_id,
            tipo_pago: tipo,
            monto_recibido: inputValue,
            _token: CSRF_TOKEN
        };
    }
    else if(tipo == "tarjeta"){
        var formulario =
        {
            venta_id: venta_id,
            tipo_pago: tipo,
            no_referencia: inputValue,
            _token: CSRF_TOKEN
        };
    }

    $.ajaxSetup({
        headers:
        { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });
    $.ajax({
        method: 'post',
        url         :   "{{ URL::to('/') }}/api/ventas/cobrar",
        data        :   formulario,
        dataType    :   'json'
    }).done(function() {
        location.reload();
    });

}

</script>
@endsection