@extends('layouts.user_type.auth')

@section('content')

<main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg ">
<div class="container-fluid py-4">
<div class="row mt-4">
<div class="col-md-12">
    <div class="card">
        <div class="card-header pb-0 px-3">
            <div class="d-flex flex-row justify-content-between">
                <div>
                    <h6 class="mb-0 modal-title font-weight-bolder text-primary text-gradient">Detalles de la venta del cliente:  {{$venta->nombre.' '.$venta->apellidos}}  </h6>
                </div>
                <div>
                    <h6 class="mr-0 modal-title font-weight-bolder text-primary text-gradient">Estado:  {{$venta->estadoVenta->nombre}}  </h6>
                </div>
            </div>
        </div>
        <div class="card-body pt-6 p-3">
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="card  mb-4">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Referencia</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{$venta->referencia}}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md">
                                        <i class="ni ni-book-bookmark text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card ">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Método de Pago</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{$venta->metodoPago->nombre}}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md">
                                        <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-sm-6 mt-sm-0 mt-4">
                    <div class="card  mb-4">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Monto Total</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            ${{$venta->monto_total}}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                        <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card ">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Fecha de Venta</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{$venta->fecha_venta}}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                        <i class="ni ni-calendar-grid-58 text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card ">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="accordion" id="accordionRental">
                                  <div class="accordion-item mb-3">
                                    <h5 class="accordion-header" id="headingOne">
                                      <button class="accordion-button border-bottom font-weight-bold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                        Entradas
                                        <i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
                                        <i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
                                    </button>
                                </h5>
                                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionRental" style="">
                                  <div class="accordion-body text-sm opacity-8">
                                    <div class="card  mb-4">
                                        <div class="card-body p-3">
                                            <div class="row">
                                                @forelse($venta->detallesVentas as $detalleVenta)
                                                <div class="col-md-4">
                                                    <div class="numbers">
                                                        <p class="text-sm mb-0 text-capitalize font-weight-bold">Cantidad</p>
                                                        <h5 class="font-weight-bolder mb-0">
                                                         {{$detalleVenta->cantidad}}
                                                     </h5>
                                                 </div>
                                             </div>
                                             <div class="col-md-2 text-end">
                                                <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md">
                                                    <i class="ni ni-basket text-lg opacity-10" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="numbers">
                                                    <p class="text-sm mb-0 text-capitalize font-weight-bold">Entrada</p>
                                                    <h5 class="font-weight-bolder mb-0">
                                                        {{$detalleVenta->entradaEvento->nombre}}
                                                    </h5>
                                                </div>
                                            </div>
                                            <div class="col-md-2 text-end">
                                                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                                    <i class="ni ni-tag text-lg opacity-10" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                            @empty
                                            No hay registros
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>
</div>
</div>



<div class="row">
<div class="col-md-6">
<div class="card bg-cover text-center move-on-hover" style="background-image: url({{($venta->evento->logo) != null ? $venta->evento->logo : 'https://www.marquid.com/wp-content/uploads/2017/06/6197706_orig.jpg'}})">
<div class="card-body z-index-2 py-9">
    <h2 class="text-white">Evento {{$venta->evento->nombre}}</h2>
    <p class="text-white">
        {{$venta->evento->descripcion}}
    </p>
    <p class="text-white">
        Del {{$venta->evento->fecha_inicio}} al {{$venta->evento->fecha_fin}}
    </p>
    <a href="{{route('eventos')}}" class="badge badge-light text-dark">Ver Información</a>
</div>
<div class="mask bg-gradient-dark border-radius-lg"></div>
</div>
</div>
<div class="col-md-6">
<a href="javascript:;">
<div class="card card-background move-on-hover">
    <div class="full-background" style="background-image: url({{($venta->evento->logo) != null ? $venta->evento->logo : 'https://www.tinaeventplanner.com/wp-content/uploads/2021/03/congreso.jpg'}})"></div>
    <div class="card-body pt-12">
        <h4 class="text-white">{{$venta->nombre.' '.$venta->apellidos}}</h4>
        <p>Télefono: {{$venta->telefono}}</p>
        <p>Email: {{$venta->email}}</p>
    </div>
</div>
</a>
</div>
</div>

</div>
</main>
@endsection