@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Visitas del dia de hoy</span>
                        <span class="info-box-number">{{ $totalViews }}</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-chart-pie mr-1"></i>
                            Detalles de visitas
                        </h3>
                        <div class="card-tools">
                            <ul class="nav nav-pills ml-auto">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Grafico</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#details-today" data-toggle="tab">Visitas de hoy</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="tab-content p-0">
                            <div class="chart tab-pane active" id="revenue-chart"
                                style="position: relative; height: 300px;">
                                <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
                            </div>
                            <div class="chart tab-pane" id="details-today" style="position: relative; height: 300px;">
                                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Páginas visitadas</span>
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <td>Vista</td>
                                                <td>Visitas</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($countViews->take(4) as $view)
                                                <tr>
                                                    @if ($view->page == '/')
                                                        <td>inicio</td>
                                                    @else
                                                        <td>{{ $view->page }}</td>
                                                    @endif
                                                    <td>{{ $view->views }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="2" class="text-center">
                                                        <p>Sin visitas</p>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Productos más comprados</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="chart-responsive">
                                    <canvas id="pieChart" height="150"></canvas>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <ul class="chart-legend clearfix">
                                    @forelse ($popularProducts as $product)
                                        <li><i class="far fa-circle"></i> {{ $product->model }}</li>
                                    @empty
                                        <li><i class="far fa-circle text-danger"></i> Sin productos recientes</li>
                                    @endforelse
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <h4>Ultimas compras</h4>
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Correo</th>
                        <th>Nombre</th>
                        <th>Metodo de pago</th>
                        <th>Estado</th>
                        <th>Tipo de envio</th>
                        <th>Monto total</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- Actions --}}
                    @forelse($lastsPurchases->take(7) as $purchase)
                        <tr>
                            <td>{{ $purchase->email }}</td>
                            <td>{{ $purchase->full_name }} <p class="text-info">({{ $purchase->user_type }})</p>
                            </td>
                            <td>{{ $purchase->purchase_method }}</td>
                            <td @if ($purchase->iam_purchase_status_id == 5) class="text-success" @endif
                                @if ($purchase->iam_purchase_status_id == 6) class="text-danger" @endif
                                @if ($purchase->iam_purchase_status_id == 7) class="text-info" @endif>
                                {{ $purchase->status->purchase_status ?? 'Estado desconocido' }}
                            </td>
                            <td>{{ $purchase->shipment->shipment_type ?? 'Compra 100% digital' }}</td>
                            <td>$ {{ $purchase->total_cart_amount }}@if (floor($purchase->total_cart_amount) == $purchase->total_cart_amount)
                                    .00
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="bg-secondary" colspan="6" align="center">Sin registro</td>
                        </tr>
                    @endforelse
                    <tr>
                        <td colspan="6" class="text-center"> <a href="{{ Route('listPurchases') }}"
                                class="btn btn-info">Ver todas las compras</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row mt-3">
            {{-- list products section --}}
            <div class="col-lg-6 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-bold">Gestionar productos de la pagina principal</h5>
                        <p class="card-text mb-2 text-body-secondary">
                            Muestra los productos mas importantes en la página principal de la aplicación
                        </p>
                        <div class="buttons-group">
                            <button class="btn btn-success" id="listProducts">Reorganizar productos</button>
                        </div>
                    </div>
                    <div class="card-footer">
                        {{-- Ni idea que poner --}}
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-bold">Gestionar cintillo de marcas de la pagina principal</h5>
                        <p class="card-text mb-2 text-body-secondary">
                            Muestra las marcas mas importantes en la página principal de la aplicación
                        </p>
                        <div class="buttons-group">
                            <button class="btn btn-success" id="listBrands">Reorganizar marcas</button>
                        </div>
                    </div>
                    <div class="card-footer">
                        {{-- Ni idea que poner --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Reorder products modal --}}
    <div class="modal fade" id="listProductsModal" tabindex="-1" role="dialog" aria-labelledby="listProducts"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info">Reorganizar productos</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ Route('reorderProducts') }}" method="post">
                        <div class="container">
                            <p>Los productos se organizan consecutivamente y aparecen como maximo 40 en la pagina
                                de inicio</p>
                        </div>
                        <table class="table table-hover">
                            @csrf
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Producto</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($productsIndex->count() > 0)
                                    @forelse($productsIndex as $key => $productI)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>
                                                <select name="product_{{ $key }}"
                                                    id="product_{{ $key }}" class="select2 form-control"
                                                    required>
                                                    <option value="{{ $productI->product->id }}">
                                                        {{ $productI->product->model }}
                                                        ({{ $productI->product->display_name }})
                                                    </option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->id }}">{{ $product->model }}
                                                            ({{ $product->display_name }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2" class="text-center">
                                                <p>Sin productos por añadir</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                @else
                                    @foreach (range(0, 39) as $key)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>
                                                <select name="product_{{ $key }}"
                                                    id="product_{{ $key }}" class="select2 form-control"
                                                    required>
                                                    <option value="" selected disabled>Selecciona uno</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->id }}">{{ $product->model }}
                                                            ({{ $product->display_name }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">Organizar productos</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Reorder brands modal --}}
    <div class="modal fade" id="listBrandsModal" tabindex="-1" role="dialog" aria-labelledby="listProducts"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info">Reorganizar marcas</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ Route('reorderBrands') }}" method="post">
                        <div class="container">
                            <p>Las marcas se organizan consecutivamente y aparecen como maximo 10 en la pagina
                                de inicio</p>
                        </div>
                        <table class="table table-hover">
                            @csrf
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>marca</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($brandsIndex->count() > 0)
                                    @forelse($brandsIndex as $key => $brandI)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>
                                                <select name="brand_{{ $key }}"
                                                    id="brand_{{ $key }}" class="selectBrands2 form-control"
                                                    required>
                                                    <option value="{{ $brandI->brand->id }}">
                                                        {{ $brandI->brand->display_name }}
                                                    </option>
                                                    @foreach ($brands as $brand)
                                                        <option value="{{ $brand->id }}">{{ $brand->display_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2" class="text-center">
                                                <p>Sin productos por añadir</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                @else
                                    @foreach (range(0, 9) as $key)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>
                                                <select name="brand_{{ $key }}"
                                                    id="brand_{{ $key }}" class="selectBrands2 form-control"
                                                    required>
                                                    <option value="" selected disabled>Selecciona uno</option>
                                                    @foreach ($brands as $brand)
                                                        <option value="{{ $brand->id }}">{{ $brand->display_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">Organizar marcas</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/dashboard.js')
    <script id="chartLabels" type="application/json">@json($popularProducts->pluck('model'))</script>
    <script id="chartValues" type="application/json">@json($popularProducts->pluck('product_purchased'))</script>
    <script id="viewsChartLabels" type="application/json">@json($historyViews->pluck('created_at'))</script>
    <script id="viewsChartValues" type="application/json">@json($historyViews->pluck('views'))</script>
@endsection