@extends('admin.layouts.app')
<!-- Plugins css -->
@section('head')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    #product-img {
        width: 400px !important;
        height: 170px !important;
    }
</style>

{{-- <link href="{{asset('assets_admin/libs/dropzone/dropzone.css')}}" rel="stylesheet" type="text/css" /> --}}
@endsection

@section('content')
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">{{$title}}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{route('admin.menu.index')}}">{{$title}}</a></li>
                        <li class="breadcrumb-item active">{{$subtitle}}</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row">
        @php
            $cant = 0;
            $categorias = [];
            $days = [];
    
            foreach ($order->orderDetails as $detail) {
                $day = json_decode($detail->menu->days);
                $cant += $detail->quantity;
                $categorias[] = $detail->menu->category->name;
                $days[] = $day[0];
            }
    
            // Colores por categoría (puedes añadir más)
            $categoryColors = [
                1 => 'bg-primary', // Azul
                2 => 'bg-success', // Verde
                3 => 'bg-warning', // Amarillo
                4 => 'bg-danger',  // Rojo
                5 => 'bg-info',    // Cian
            ];
    
            $dayColorMap = [
                'monday' => '#3498db',    // Blue
                'tuesday' => '#e74c3c',   // Red
                'wednesday' => '#2ecc71', // Green
                'thursday' => '#f1c40f',  // Yellow
                'friday' => '#9b59b6',    // Purple
                'saturday' => '#e67e22',  // Orange
                'sunday' => '#e84393'     // Pink
            ];
        @endphp
        <!-- Contenedor de la tarjeta -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Datos del cliente</h5>
                </div>
                <div class="card-body text-left">
                    <div class="row mb-3">
                        <p><i class="ri-id-card-line icon-large"></i>  {{$order->client->name}}</p>
                        <p for=""><i class="ri-map-pin-line icon-large"></i>  {{$order->client->address}}</p>
                        <p for=""><i class="ri-phone-line icon-large"></i>  {{$order->client->cel}}</p>
                        <p for=""><i class="ri-mail-fill icon-large"></i>  {{$order->client->email}}</p>
                        
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Resumen orden</h5>
                </div>
                <div class="card-body text-left">
                    <div class="row mb-3">
                        <div class="col">
                            <div><strong>Menus totales:</strong></div>
                            <div><strong>Menus cant:</strong></div>
                            <div><strong>Categorias:</strong></div>
                            <div><strong>Días:</strong></div><br>
                        </div>
                        <div class="col text-end">
                            <div>
                                {{count($order->orderDetails)}} 
                            </div>
                            <div>
                                {{$cant}} 
                            </div>
                            <div>
                                {{ implode(', ', array_unique($categorias)) }}
                            </div><br>
                            <div>
                                {{ implode(', ', array_unique($days)) }}
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row mb-3">
                        <div class="col">
                            <div><strong>Total:</strong></div><br>
                        </div>
                        <div class="col text-end">
                            <div>
                                {{$order->total}} USD
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col text-center">
                            <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#imageModal">
                                Ver comprobante
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            @foreach ($order->orderDetails as $detail)
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col">
                            <!-- Izquierda -->
                            <div>
                                <a href="{{route('admin.menu.show', $detail->menu->id)}}"><h6>{{$detail->menu->name}}</h6></a>
                            </div>
                        </div>
                        <div class="col text-end">
                            <!-- Derecha -->
                            <div class="mb-2">
                                @php
                                    $day = json_decode($detail->menu->days);
                                    $dayColor = $dayColors[$day[0]] ?? 'bg-secondary'; // Color por defecto
                                @endphp
                                <span style="background-color: {{ $dayColorMap[strtolower($day[0])] ?? '#bdc3c7' }}; color: white; padding: 3px; border-radius: 2px;">
                                    <strong>{{ ucfirst($day[0]) }}</strong>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div><hr><br></div>
                    <div class="row">
                        <div class="col">
                            <label class="form-label" for="product-title-input"><strong>Cantidad</strong></label>
                            <p class="form-label" for="product-title-input">{{$detail->quantity}}</p>
                        </div>
                        <div class="col">
                            <label class="form-label" for="product-title-carbohydrate"><strong>Categoria</strong></label>
                            @php
                                $categoryColor = $categoryColors[$detail->menu->category->id] ?? 'bg-secondary'; // Color por defecto
                            @endphp
                            <br>
                            <span class="badge {{ $categoryColor }}">{{$detail->menu->category->name}}</span>
                        </div>
                     
                        <div class="col">
                            <label class="form-label" for="product-title-carbohydrate"><strong>Precio unitario</strong></label>
                            <p class="form-label" for="product-title-carbohydrate">{{$detail->unit_price}} USD</p>
                        </div>
                        <div class="col">
                            <label class="form-label" for="product-title-carbohydrate"><strong>Precio total</strong></label>
                            <p class="form-label" for="product-title-carbohydrate">{{$detail->total_price}} USD</p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <!-- end card -->
        </div>
    </div>
    
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Comprobante de Pago</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="{{ asset('images/poof_payment/'.$order->proof_payment) }}" alt="img de gallery">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
    
</div>
<style>
    .icon-large {
        font-size: 15px; 
    }
    #modalImage {
        max-width: 80%; 
        height: 80%;   
    }
</style>
@section('scripts')
<!-- dropzone js -->
<script src="{{asset('assets_admin/libs/dropzone/dropzone-min.js')}}"></script>
<script src="{{asset('assets_admin/js/pages/ecommerce-product-create.init.js')}}"></script>
<script src="{{asset('assets_admin/js/app.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

@endsection
@endsection