@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">Ventas</div>
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('home') }}"><i class="bx bx-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{route('ventas')}}"><i class="bx bx-trending-up"></i></a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Detalles de venta</li>
                        </ol>
                    </nav>
                </div>
                 <div class="ms-auto">
                    
                        <a class="btn btn-dark" id="btn-categoria" href="{{URL::previous()}}"><i class="bx bx-arrow-to-left"></i>Volver</a>
                    
                    <div class="btn-group">
                        <a href="{{route('modulo.factura', $venta->id)}}" id="factura" class="btn btn-primary">Imprimir factura</a>
                        @if($venta->id_cierre == null && Auth::user()->id == $venta->id_user)
                            <button type="button" class="btn btn-primary split-bg-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-end" style="">   
                                <a class="dropdown-item" id="eliminar_venta" href="{{route('ventas.delete', $venta->id)}}">Eliminar venta</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            @if(Auth::user()->is_admin == 'Si')
                <div class="row d-flex justify-content-between">
                    <div class="col">
                        <div class="card radius-10">
                            <div class="card-body" style="position: relative;">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0">Total venta</p>
                                        <h5 class="mb-0">$ {{Number_format($venta->total)}}</h5>
                                    </div>
                                </div>
                                <div id="total_ventas" style="min-height: 65px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10">
                            <div class="card-body" style="position: relative;">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0">Costo de producción</p>
                                        <h5 class="mb-0">$ {{Number_format($venta->costo())}}</h5>
                                    </div>
                                </div>
                                <div id="total_costo" style="min-height: 65px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10">
                            <div class="card-body" style="position: relative;">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0">Ganancias aproximadas</p>
                                        <h5 class="mb-0">$ {{Number_format($venta->ganancia())}}</h5>
                                    </div>
                                </div>
                                <div id="total_ganancia" style="min-height: 65px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="card">
                <div class="card-body">
                    <h2>Detalles de venta</h2>
                    <h6><strong>ID: #{{$venta->id}}</strong></h6>
                    <div class="row">
                        <div class="col-md-6">
                            @if($venta->id_cierre != null)
                                <div class="mb-2">
                                    <label>ID Cierre: <a href="{{route('informes.show', $venta->id_cierre)}}">#{{$venta->id_cierre}}</a></label>
                                </div>
                            @endif
                            @if($venta->id_mesa != null)
                                <div class="mb-2">
                                    <label><strong>Lugar de venta:</strong> {{$venta->mesa->titulo}}</label>
                                </div>
                            @endif
                            <div class="mb-2">
                                <label><strong>Fecha:</strong> {{date_format(date_create($venta->created_at), 'd/m/Y h:i A')}}</label>
                            </div>
                            <div class="mb-2">
                                <label><strong>Descripción: </strong> {{$venta->observaciones}}</label>
                            </div>

                            @if($venta->id_cupon != null)
                                <div class="mb-2">
                                    <label><strong>Cuṕon de descuento aplicado:</strong> <a href="{{route('cupones.show', $venta->id_cupon)}}">{{$venta->cupon->codigo}}</a></label>
                                </div>
                                <div class="mb-2">
                                    <label><strong>Tipo de descuento:</strong> {{$venta->tipo_descuento == '1' ? 'Fijo' : 'Porcentaje'}}</label>
                                </div>
                                <div class="mb-2">
                                    <label><strong>Total real:</strong> $ {{number_format($venta->total_real)}}</label>
                                </div>
                                @if($venta->tipo_descuento == '2')
                                    @php
                                        $porcentaje = $venta->descuento * 100 / $venta->total_real;
                                    @endphp
                                    <div class="mb-2">
                                        <label style="color: red;"><strong>Porcentaje de descuento:</strong> -{{$porcentaje}}%</label>
                                    </div>    
                                @endif
                                <div class="mb-2">
                                    <label style="color: red;"><strong>Valor del descuento:</strong> $ -{{number_format($venta->descuento)}}</label>
                                </div>
                            @endif
                            <div class="mb-2">
                                <label><strong>Total venta:</strong> $ {{number_format($venta->total)}}</label>
                            </div>
                            <div class="mb-2">
                                <label><strong>Valor recibido:</strong> $ {{number_format($venta->recibido)}}</label>
                            </div>
                            <div class="mb-2">
                                <label><strong>Devuelta:</strong> $ {{number_format($venta->devuelta)}}</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-2">
                                <label><strong>Cliente:</strong> <a href="{{route('clientes.edit', $venta->id_cliente)}}">{{$venta->cliente->nombre}}</a></label>
                            </div>
                            <div class="mb-2">
                                <label><strong>N° de items ventidos:</strong> {{$venta->number_items()}}</label>
                            </div>
                            <div class="mb-2">
                                <label><strong>Metodos de pago</strong></label>
                            </div>
                            @foreach($venta->movimientos as $movimiento)
                                <div class="mb-2">
                                    <label><strong>{{$movimiento->metodo->titulo}}: </strong>$ {{number_format($movimiento->valor)}} <a href="{{route('cajas.movimientos.show', $movimiento->id)}}">Ver movimiento</a></label>
                                </div>  
                            @endforeach
                            <div class="mb-2">
                                <label><strong>Venta registrada por</strong></label>
                            </div>
                            <div class="chip chip-md">
                                <img src="{{$venta->user->avatar_img()}}">{{$venta->user->name}}
                            </div>
                        </div>
                    </div>
                    <hr>
                    <h2>Productos vendidos</h2>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Producto</th>
                                    <th>Precio</th>
                                    <th>Cantidad</th>
                                    <th>Descuento</th>
                                    <th>Total</th>
                                    @if(Auth::user()->is_admin == 'Si')
                                    <th>Costo producción</th>
                                    <th>Ganancia Aprox</th>
                                    @endif
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($venta->detalles as $detalle)
                                    <tr role="row" class="odd">
                                        <td>#{{$detalle->id_producto != 0 ? $detalle->producto->id : 'CUSTOM'}}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="recent-product-img">
                                                    @if($detalle->id_producto != 0)
                                                        <img src="{{$detalle->producto->imagen_small()}}" alt="">
                                                    @else
                                                        <img src="{{asset('img/productos/defecto.png')}}" alt="">
                                                    @endif
                                                </div>
                                                <div class="ms-2">
                                                    @if($detalle->id_producto != 0)
                                                        <h6 class="mb-1 font-14">{{$detalle->producto->nombre}}</h6>
                                                    @else
                                                        <h6 class="mb-1 font-14">{{$detalle->concepto}}</h6>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            @if($detalle->id_producto != 0)
                                                <strong>$ {{number_format($detalle->producto->precio_final)}}</strong>
                                            @else
                                                <strong>$ {{number_format($detalle->total)}}</strong>
                                            @endif
                                        </td>
                                        <td>{{$detalle->cantidad}}</td>
                                        <td>
                                            @if($detalle->descuento > 0 && $detalle->descuento != null && $detalle->descuento != 'null')
                                                <strong>- {{$detalle->getDescuento()}}</strong>
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <td>
                                            <strong>$ {{number_format($detalle->total)}}</strong>
                                        </td>
                                        @if(Auth::user()->is_admin == 'Si')
                                        <td>
                                            <strong>$ {{number_format($detalle->costo)}}</strong>
                                        </td>
                                        <td>
                                            <strong>$ {{number_format($detalle->total - $detalle->costo)}}</strong>
                                        </td>
                                        @endif
                                        <td>
                                            @if($detalle->id_producto != 0)
                                                <div class="d-flex order-actions">
                                                    <a href="{{route('productos.edit', $detalle->producto->id)}}">
                                                        <i class="bx bx-show"></i>
                                                    </a>
                                                </div>
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <div class="btns " style="display: flex; justify-content: flex-start; align-items: center;">
                        <a class="btn btn-dark" id="btncerrarr" href="{{URL::previous()}}">Volver</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
@if(Auth::user()->is_admin == 'Si')
    <script src="{{asset('assets/plugins/apexcharts-bundle/js/apexcharts.min.js')}} "></script>
@endif
<script>
    $('#factura').click(function(e) {
        e.preventDefault();
        let url = $(this).attr('href')
        window.open(url, 'Factura', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=900,height=700,left = 390,top = 50');
    })
    $('#eliminar_venta').click(function(e) {
        e.preventDefault();
        let url = $(this).attr('href')
        let a = confirm('¿Realmente desea eliminar esta venta?, esta acción no se podrá revertir')
        if(a) {
            window.location.href=url
        }
    })

    @if(Auth::user()->is_admin == 'Si')
        // char de total
        var options = {
            series: [{
                name: 'Ventas',
                data:[@foreach($venta->detalles as $detalle){{$detalle->total}},@endforeach],
            }],
            chart: {
                type: "area",
                height: 65,
                toolbar: {
                    show: !1
                },
                zoom: {
                    enabled: !1
                },
                dropShadow: {
                    enabled: !0,
                    top: 3,
                    left: 14,
                    blur: 4,
                    opacity: .12,
                    color: "#0d6efd"
                },
                sparkline: {
                    enabled: !0
                }
            },
            markers: {
                size: 0,
                colors: [
                @foreach($venta->detalles as $detalle)'#0d6efd',@endforeach],
                strokeColors: "#fff",
                strokeWidth: 2,
                hover: {
                    size: 7
                }
            },
            plotOptions: {
                bar: {
                    horizontal: !1,
                    columnWidth: "45%",
                    endingShape: "rounded"
                }
            },
            stroke: {
                show: !0,
                width: 2.4,
                curve: "smooth"
            },
            colors: ["#0d6efd"],
            fill: {
                opacity: 1
            },
            tooltip: {
                theme: "dark",
                fixed: {
                    enabled: !1
                },
                x: {
                    show: !1
                },
                y: {
                    title: {
                        formatter: function(e) {
                            return ""
                        }
                    }
                },
                marker: {
                    show: !1
                }
            }
        };
        var chart = new ApexCharts(document.getElementById("total_ventas"), options);
        chart.render();

        // char de cosoto
        var options2 = {
            series: [{
                name: 'Costo',
                data:[@foreach($venta->detalles as $detalle){{$detalle->costo}},@endforeach],
            }],
            chart: {
                type: "area",
                height: 65,
                toolbar: {
                    show: !1
                },
                zoom: {
                    enabled: !1
                },
                dropShadow: {
                    enabled: !0,
                    top: 3,
                    left: 14,
                    blur: 4,
                    opacity: .12,
                    color: "#ffb207"
                },
                sparkline: {
                    enabled: !0
                }
            },
            markers: {
                size: 0,
                colors: [
                @foreach($venta->detalles as $detalle)'#ffb207',@endforeach],
                strokeColors: "#fff",
                strokeWidth: 2,
                hover: {
                    size: 7
                }
            },
            plotOptions: {
                bar: {
                    horizontal: !1,
                    columnWidth: "45%",
                    endingShape: "rounded"
                }
            },
            stroke: {
                show: !0,
                width: 2.4,
                curve: "smooth"
            },
            colors: ["#ffb207"],
            fill: {
                opacity: 1
            },
            tooltip: {
                theme: "dark",
                fixed: {
                    enabled: !1
                },
                x: {
                    show: !1
                },
                y: {
                    title: {
                        formatter: function(e) {
                            return ""
                        }
                    }
                },
                marker: {
                    show: !1
                }
            }
        };
        var chart2 = new ApexCharts(document.getElementById("total_costo"), options2);
        chart2.render();


        // char de total
        var options3 = {
            series: [{
                name: 'Ganancia',
                data:[@foreach($venta->detalles as $detalle){{$detalle->total - $detalle->costo}},@endforeach],
            }],
            chart: {
                type: "area",
                height: 65,
                toolbar: {
                    show: !1
                },
                zoom: {
                    enabled: !1
                },
                dropShadow: {
                    enabled: !0,
                    top: 3,
                    left: 14,
                    blur: 4,
                    opacity: .12,
                    color: "#17a00e"
                },
                sparkline: {
                    enabled: !0
                }
            },
            markers: {
                size: 0,
                colors: [
                @foreach($venta->detalles as $detalle)'#17a00e',@endforeach],
                strokeColors: "#fff",
                strokeWidth: 2,
                hover: {
                    size: 7
                }
            },
            plotOptions: {
                bar: {
                    horizontal: !1,
                    columnWidth: "45%",
                    endingShape: "rounded"
                }
            },
            stroke: {
                show: !0,
                width: 2.4,
                curve: "smooth"
            },
            colors: ["#17a00e"],
            fill: {
                opacity: 1
            },
            tooltip: {
                theme: "dark",
                fixed: {
                    enabled: !1
                },
                x: {
                    show: !1
                },
                y: {
                    title: {
                        formatter: function(e) {
                            return ""
                        }
                    }
                },
                marker: {
                    show: !1
                }
            }
        };
        var chart3 = new ApexCharts(document.getElementById("total_ganancia"), options3);
        chart3.render();
    @endif

</script>
@endsection