@extends('academia.dashboard')

@section('content')

<div class="row mt-4 justify-content-center">
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4 p-md-5">

                <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
                    <div>
                        <img src="{{ asset('fondo/5.jpg') }}" alt="logo" style="height: 80px;">
                    </div>
                    <div class="text-end">
                        <span class="badge bg-primary bg-opacity-10 text-primary fw-semibold mb-2 fs-6 px-3 py-2">
                            <i class="bi bi-receipt-cutoff me-1"></i>Orden N° {{ $solicitud->id }}
                        </span>
                        <h5 class="fw-bold mb-0">{{ $settings->name }}</h5>
                    </div>
                </div>

                <hr class="my-4">

                <div class="row g-4 mb-4">

                    <div class="col-md-6">
                        <h6 class="text-uppercase text-muted small fw-bold mb-3">
                            <i class="bi bi-person-badge me-1"></i>Datos del Cliente
                        </h6>
                        <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-person-fill text-primary me-2"></i>
                            <span class="fw-semibold">{{ $solicitud->user->display_name }}</span>
                        </div>
                        <div class="d-flex align-items-start mb-2 text-muted">
                            <i class="bi bi-geo-alt-fill text-primary me-2 mt-1"></i>
                            <span>{{ $solicitud->user->usercampo->direccion }}</span>
                        </div>
                        <div class="d-flex align-items-center mb-2 text-muted">
                            <i class="bi bi-globe2 text-primary me-2"></i>
                            <span>{{ $solicitud->user->usercampo->pais }}</span>
                        </div>
                        <div class="d-flex align-items-center mb-2 text-muted">
                            <i class="bi bi-envelope-fill text-primary me-2"></i>
                            <span>{{ $solicitud->user->user_email }}</span>
                        </div>
                        <div class="d-flex align-items-center text-muted">
                            <i class="bi bi-telephone-fill text-primary me-2"></i>
                            <span>{{ $solicitud->user->usercampo->phone }}</span>
                        </div>
                    </div>

                    <div class="col-md-6 text-md-end">
                        <h6 class="text-uppercase text-muted small fw-bold mb-3">
                            <i class="bi bi-info-circle me-1"></i>Detalles de la Orden
                        </h6>
                        <div class="mb-2">
                            <span class="text-muted me-2">Fecha:</span>
                            <span class="fw-semibold">
                                <i class="bi bi-calendar3 text-primary me-1"></i>{{ $solicitud->fecha }}
                            </span>
                        </div>
                        <div class="mb-2">
                            <span class="text-muted me-2">Estado:</span>
                            @if($solicitud->status == 0)
                                <span class="badge bg-warning-subtle text-warning border border-warning-subtle">
                                    <span class="d-inline-block bg-warning rounded-circle me-1" style="width: 6px; height: 6px;"></span>
                                    En espera
                                </span>
                            @elseif($solicitud->status == 1)
                                <span class="badge bg-success-subtle text-success border border-success-subtle">
                                    <span class="d-inline-block bg-success rounded-circle me-1" style="width: 6px; height: 6px;"></span>
                                    Aprobada
                                </span>
                            @elseif($solicitud->status == 2)
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
                                    <span class="d-inline-block bg-danger rounded-circle me-1" style="width: 6px; height: 6px;"></span>
                                    Rechazada
                                </span>
                            @endif
                        </div>
                    </div>

                </div>

                <div class="table-responsive mb-4">
                    <table class="table table-borderless align-middle mb-0">
                        <thead>
                            <tr style="background-color: #0093f8; color: #fff;">
                                <th class="py-3 ps-3 rounded-start">Curso</th>
                                <th class="py-3">Categoría</th>
                                <th class="py-3 text-end pe-3 rounded-end">Precio</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(json_decode($solicitud->datos) as $datos)
                            @php
                                $course = DB::table('courses')->select('category_id')->where('id', '=', $datos->idcourse)->first();
                                $cat = null;
                                if($course != null){
                                    $cat = DB::table('category')->select('title')->where('id', '=', $course->category_id)->first();
                                }
                            @endphp
                            <tr class="border-bottom">
                                <td class="py-3 ps-3">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-primary bg-opacity-10 text-primary rounded d-flex align-items-center justify-content-center me-2 flex-shrink-0" style="width: 38px; height: 38px;">
                                            <i class="bi bi-book-fill"></i>
                                        </div>
                                        <span class="fw-semibold">{{ $datos->nombre }}</span>
                                    </div>
                                </td>
                                <td class="py-3">
                                    @if($cat != null)
                                        <span class="badge bg-light text-dark border fw-normal">{{ $cat->title }}</span>
                                    @endif
                                </td>
                                <td class="py-3 text-end pe-3 fw-semibold">
                                    @if ($moneda->mostrar_a_d)
                                        {{$moneda->simbolo}} {{ $datos->precio }}
                                    @else
                                        {{ $datos->precio }} {{$moneda->simbolo}}
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-end mb-3">
                    <div class="col-12 col-md-5 col-lg-4">
                        <div class="bg-light rounded-3 p-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="fw-bold mb-0 text-secondary">TOTAL</h5>
                                <h4 class="fw-bold mb-0" style="color: #00894f;">
                                    @if ($moneda->mostrar_a_d)
                                        {{$moneda->simbolo}} {{ $solicitud->total }}
                                    @else
                                        {{ $solicitud->total }} {{$moneda->simbolo}}
                                    @endif
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@endsection