@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" />
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css"/>

<style>
    .active{
        background-color: #00c88b !important;
        color: white !important;
    }

    .btn-outline{
        border: 1px solid #00c88b ;
        padding: 5px 8px;
        border-radius: 20px;
        margin: 5px;
    }

    .form-control:focus {
        background-color: #ffffff;
        color: #000;
        outline: none;
        border-color: #00c88b;
        text-transform: uppercase;
    }

    .btn-outline-cantidades{
        /* border: 1px solid #00c88b ; */
        padding: 5px 8px;
        border-radius: 20px;
        margin: 5px;
        color: #00c88b;
    }

   .select2-container--default .select2-results__option--highlighted[aria-selected],#select2-selectSala-result-v48f-0 {
        background-color: #00c88b;
        color: white;
    }
    .select2-container{
        width:100% !important;
    }

    .btn-link{
        color: #00c88b;
    }

    .btn-link:hover{
        color: #00a76f;
        text-decoration: none;
    }

    label{
        margin-bottom: 25px !important;
    }

    .card {
        position: relative;
        height: 80vh;
        overflow: auto;
    }

    .botonera {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
    }

    .bg-primary-local{
        background: #00c88b;
        color: #fff;
    }
</style>
@endsection

@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-shopping menu-icon"></i>
        </span> productos </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page"><a href="{!! route('pedidos.index') !!}">pedidos</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>ver pedido <i class="mdi mdi-eye-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">detalles del pedido</h4> <span class="ml-2 rounded-pill {{$pedido->estatus == 'Pendiente' ? 'badge bg-secondary' : 'badge bg-primary-local'}}">{{$pedido->estatus}}</span>
                </div>
                <div class="espacio_vertical"></div>
                @include('adminlte-templates::common.errors')

                <div class="botonera">
                    <div>
                        @if($pedido->estatus == 'Pendiente')
                            <a href="{!! route('pedidos.edit', $pedido->id) !!}" class="btn btn-primary_local">Editar</a>
                        @else
                            <a href="{!! route('pedidos.show_pdf', $pedido->id) !!}" class="btn btn-primary_local">Descargar PDF</a>
                        @endif
                        <a href="{!! route('pedidos.index') !!}" class="btn btn-secondary">Volver</a>
                    </div>

                    <div>
                        @if($pedido->estatus == 'Pendiente')
                            <form action="{!! route('pedidos.destroy', $pedido->id) !!}" method="POST" style="display: inline;">
                                @method('DELETE')
                                @csrf
                                <button type="submit" class="btn btn-danger" onclick="return confirm('¿Estás seguro de que deseas eliminar este pedido?')">Eliminar</button>
                            </form>
                        @endif
                    </div>
                </div>

                <div id="productos-container" class="mt-5">
                    <h3 class="mb-3">Productos</h3>
                    @if($pedido->pedidoProductos->where('producto_id', '!=', null)->count() > 0)
                                            @php $total = 0; @endphp
                                            @foreach($pedido->pedidoProductos->where('producto_id', '!=', null) as $pedidoProducto)
                            <div class="row producto-row">
                                <div class="col-md-3" style="display: flex; align-items: center;">
                                    @if($pedidoProducto->producto && $pedidoProducto->producto->imagen)
                                        <img class="product-image" src="/img_productos/{{ $pedidoProducto->producto->imagen }}" style="width: 150px; height: 150px; object-fit: contain; margin-right: 10px;">
                                    @else
                                        <img class="product-image" src="/img_productos/default.png" style="width: 150px; height: 150px; object-fit: contain; margin-right: 10px;">
                                    @endif
                                    <div class="form-group mt-5">
                                        <label>Producto:</label>
                                        <p>{{ $pedidoProducto->producto->nombre ?? 'N/A' }}</p>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group mt-5">
                                        <label>Cantidad Solicitada:</label>
                                        <p>{{ $pedidoProducto->cantidad }}</p>
                                    </div>
                                </div>

                                @if($pedidoProducto->cantidad_recibida !== null)
                                    <div class="col">
                                        <div class="form-group mt-5" style="text-align: center;">
                                                <label>Cantidad Recibida:</label>
                                                <p>{{ $pedidoProducto->cantidad_recibida }}</p>
                                        </div>
                                    </div>
                                @endif

                                @if($pedidoProducto->precio_unitario !== null)
                                    <div class="col">
                                        <div class="form-group mt-5" style="text-align: center;">
                                                <label>Precio unitario:</label>
                                                <p>{{ $pedidoProducto->precio_unitario }}</p>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group mt-5" style="text-align: center;">
                                                <label>Subtotal:</label>
                                                <p>@php $subtotal = $pedidoProducto->cantidad_recibida * $pedidoProducto->precio_unitario; $total += $subtotal; @endphp {{ number_format($subtotal, 2) }}</p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                        @if($total > 0) <hr> <div class="row justify-content-end"> <div class="col-auto"><h5><strong>Total Productos: ${{ number_format($total, 2) }}</strong></h5></div> </div> @endif
                    @else
                        <p>No hay productos en este pedido.</p>
                    @endif
                </div>

                <div id="consumibles-container" class="mt-5">
                    <h3 class="mb-3">Consumibles</h3>
                    @if($pedido->pedidoProductos->where('consumible_id', '!=', null)->count() > 0)
                                            @php $total = 0; @endphp
                                            @foreach($pedido->pedidoProductos->where('consumible_id', '!=', null) as $pedidoProducto)
                            <div class="row consumible-row">
                                <div class="col-md-3" style="display: flex; align-items: center;">
                                    @if($pedidoProducto->consumible && $pedidoProducto->consumible->imagen)
                                        <img class="product-image" src="/img_consumibles/{{ $pedidoProducto->consumible->imagen }}" style="width: 150px; height: 150px; object-fit: contain; margin-right: 10px;">
                                    @else
                                        <img class="product-image" src="/img_productos/default.png" style="width: 150px; height: 150px; object-fit: contain; margin-right: 10px;">
                                    @endif
                                    <div class="form-group mt-5">
                                        <label>Consumible:</label>
                                        <p>{{ $pedidoProducto->consumible->nombre ?? 'N/A' }}</p>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group mt-5">
                                        <label>Cantidad Solicitada:</label>
                                        <p>{{ $pedidoProducto->cantidad }}</p>
                                    </div>
                                </div>

                                @if($pedidoProducto->cantidad_recibida !== null)
                                    <div class="col">
                                        <div class="form-group mt-5" style="text-align: center;">
                                                <label>Cantidad Recibida:</label>
                                                <p>{{ $pedidoProducto->cantidad_recibida }}</p>
                                        </div>
                                    </div>
                                @endif


                                @if($pedidoProducto->precio_unitario !== null)
                                    <div class="col">
                                        <div class="form-group mt-5" style="text-align: center;">
                                                <label>Precio unitario:</label>
                                                <p>{{ $pedidoProducto->precio_unitario }}</p>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group mt-5" style="text-align: center;">
                                                <label>Subtotal:</label>
                                                <p>@php $subtotal = $pedidoProducto->cantidad_recibida * $pedidoProducto->precio_unitario; $total += $subtotal; @endphp {{ number_format($subtotal, 2) }}</p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                        @if($total > 0) <hr> <div class="row justify-content-end"> <div class="col-auto"><h5><strong>Total Consumibles: ${{ number_format($total, 2) }}</strong></h5></div> </div> @endif
                    @else
                        <p>No hay consumibles en este pedido.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@endsection