@extends('layouts.app')

@section('styles')
    @vite(['resources/scss/light/assets/dashboard/dash_1.scss'])
    @vite(['resources/scss/dark/assets/dashboard/dash_1.scss'])

    @vite(['resources/scss/light/assets/components/list-group.scss'])
    @vite(['resources/scss/light/assets/widgets/modules-widgets.scss'])

    @vite(['resources/scss/dark/assets/components/list-group.scss'])
    @vite(['resources/scss/dark/assets/widgets/modules-widgets.scss'])
@endsection

@section('content')
<div class="row layout-top-spacing">
    <div class="col-lg-6 col-md-3 col-sm-3 mb-4">
        <h4>Proyección de Mantenimientos Preventivos</h4>
        <span>Usa los filtros para ver la información deseada</span>
    </div>

    <div class="row">

        <form method="GET" action="{{ route('dashboard.proyecciones') }}" class="flex gap-4">
            <div class="row">
                <div class="col-xl-4 mb-xl-0 mb-2">
                    <select class="form-select" name="provider_id" onchange="this.form.submit()">
                        <option value="">Todos los proveedores</option>
                        @foreach ($providers as $provider)
                            <option value="{{ $provider->id }}" {{ request('provider_id') == $provider->id ? 'selected' : '' }}>
                                {{ $provider->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-xl-4 mb-xl-0 mb-2">
                    <select class="form-select" name="equipment_id" onchange="this.form.submit()">
                        <option value="">Todos los equipos</option>
                        @foreach ($equipments as $equipment)
                            <option value="{{ $equipment->id }}" {{ request('equipment_id') == $equipment->id ? 'selected' : '' }}>
                                {{ $equipment->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>

    </div>

</div>

    <div class="row layout-top-spacing">
        <!--
        <div class="flex gap-4">

            {{-- Filtro Proveedor --}}
            <select class="border rounded-lg px-4 py-2">
                <option value="">Todos los proveedores</option>
                @foreach ($providers as $provider)
                    <option value="{{ $provider->id }}">
                        {{ $provider->name }}
                    </option>
                @endforeach
            </select>

            {{-- Filtro Equipo --}}
            <select class="border rounded-lg px-4 py-2">
                <option value="">Todos los equipos</option>
                @foreach ($equipments as $equipment)
                    <option value="{{ $equipment->id }}">
                        {{ $equipment->name }}
                    </option>
                @endforeach
            </select>

        </div>-->

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-five">
                <div class="widget-content">
                    <div class="account-box">

                        <div class="info-box">
                            <div class="icon">
                                <span class="p-4">
                                    <img style="max-width:40px; max-height:40px;" src="{{ asset('storage/images/equipo.png') }}" alt="money-bag">
                                </span>
                            </div>

                            <div class="balance-info">
                                <h6>Equipos Totales</h6>
                                <span><br></span>
                                <p>{{ $totalEquipments }}</p>
                            </div>
                        </div>

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

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-five">
                <div class="widget-content">
                    <div class="account-box">

                        <div class="info-box">
                            <div class="icon">
                                <span class="p-4">
                                    <img style="max-width:40px; max-height:40px;" src="{{ asset('storage/images/costo.png') }}" alt="money-bag">
                                </span>
                            </div>

                            <div class="balance-info">
                                <h6>Costo Póliza Anual</h6>
                                <span>Mantto. Preventivo<br> por Equipo</span>
                                <p>${{ number_format($annualCost, 2) }} USD</p>
                            </div>
                        </div>

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

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-five">
                <div class="widget-content">
                    <div class="account-box">

                        <div class="info-box">
                            <div class="icon">
                                <span class="p-4">
                                    <img style="max-width:40px; max-height:40px;" src="{{ asset('storage/images/monedas.png') }}" alt="money-bag">
                                </span>
                            </div>

                            <div class="balance-info">
                                <h6>Inversión Total</h6>
                                <span>Proyectada <br>a 12 años</span>
                                <p>${{ number_format($totalInvestment, 2) }} USD</p>
                            </div>
                        </div>

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

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-five">
                <div class="widget-content">
                    <div class="account-box">

                        <div class="info-box">
                            <div class="icon">
                                <span class="p-4">
                                    <img style="max-width:40px; max-height:40px;" src="{{ asset('storage/images/calendario.png') }}" alt="money-bag">
                                </span>
                            </div>

                            <div class="balance-info">
                                <h6>Inicio de Pagos</h6>
                                <br>
                                <span>{{ $startPayments }}</span>
                            </div>
                        </div>

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

        <div class="col-xl-9 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-chart-three">
                <div class="widget-heading">
                    <div class="">
                        <h5 class="">Tabla de Proyección</h5>
                    </div>

                    <div class="dropdown ">
                        <a class="dropdown-toggle" href="#" role="button" id="uniqueVisitors"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-more-horizontal">
                                <circle cx="12" cy="12" r="1"></circle>
                                <circle cx="19" cy="12" r="1"></circle>
                                <circle cx="5" cy="12" r="1"></circle>
                            </svg>
                        </a>

                        <div class="dropdown-menu left" aria-labelledby="uniqueVisitors">
                            <a class="dropdown-item" href="javascript:void(0);">Descargar</a>
                            <a class="dropdown-item" href="javascript:void(0);">Exportar</a>
                        </div>
                    </div>
                </div>



                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th class="px-4 py-2">CRIT</th>
                                <th class="px-4 py-2">Garantía</th>
                                <th class="px-4 py-2">Recepción</th>
                                <th class="px-4 py-2">Fin Garantía</th>

                                @foreach ($years as $year)
                                    <th class="px-4 py-2">{{ $year }}</th>
                                @endforeach

                                <th class="px-4 py-2">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($rows as $row)
                                <tr class="border-t">
                                    <td class="px-4 py-2">{{ $row['location'] }}</td>
                                    <td>{{ $row['warranty'] }}</td>
                                    <td>{{ $row['delivery_date'] }}</td>
                                    <td>{{ $row['warranty_end'] }}</td>

                                    @foreach ($row['years'] as $value)
                                        <td>
                                            {{ $value ? '$' . number_format($value) : '-' }}
                                        </td>
                                    @endforeach

                                    <td class="font-bold text-purple-600">
                                        ${{ number_format($row['total']) }}
                                    </td>
                                </tr>
                            @endforeach

                            {{-- TOTAL ANUAL --}}
                            <tr class="bg-purple-100 font-bold">
                                <td colspan="4">TOTAL ANUAL</td>

                                @foreach ($totalsByYear as $value)
                                    <td>${{ number_format($value) }}</td>
                                @endforeach

                                <td>${{ number_format(array_sum($totalsByYear)) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-activity-five">

                <div class="widget-heading">
                    <h5 class="">Imagen / Equipo</h5>

                    <div class="task-action">
                        <div class="dropdown">
                            <a class="dropdown-toggle" href="#" role="button" id="activitylog"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-more-horizontal">
                                    <circle cx="12" cy="12" r="1"></circle>
                                    <circle cx="19" cy="12" r="1"></circle>
                                    <circle cx="5" cy="12" r="1"></circle>
                                </svg>
                            </a>

                            <div class="dropdown-menu left" aria-labelledby="activitylog"
                                style="will-change: transform;">
                                <a class="dropdown-item" href="javascript:void(0);">View All</a>
                                <a class="dropdown-item" href="javascript:void(0);">Mark as Read</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="widget-content">

                    <div class="w-shadow-top"></div>
                        <img style="max-width:250px; max-height:250px;" src="{{ asset('storage/equipo/R- Force Imagen.png') }}" alt="money-bag">

                    <div class="w-shadow-bottom"></div>
                </div>
            </div>
        </div>

        <div class="col-xl-12 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-five">

                <div class="widget-heading">

                    <a href="javascript:void(0)" class="task-info">

                        <div class="usr-avatar">
                            <span>FD</span>
                        </div>

                        <div class="w-title">

                            <h4>Condiciones del contrato</h4>
                            <span>Detalles del proyecto</span>

                        </div>

                    </a>

                    <div class="task-action">
                        <div class="dropdown">
                            <a class="dropdown-toggle" href="#" role="button" id="taskaction"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-more-horizontal">
                                    <circle cx="12" cy="12" r="1"></circle>
                                    <circle cx="19" cy="12" r="1"></circle>
                                    <circle cx="5" cy="12" r="1"></circle>
                                </svg>
                            </a>

                            <div class="dropdown-menu left" aria-labelledby="taskaction" style="will-change: transform;">
                                <a class="dropdown-item" href="javascript:void(0);">View Project</a>
                                <a class="dropdown-item" href="javascript:void(0);">Edit Project</a>
                                <a class="dropdown-item" href="javascript:void(0);">Mark as Done</a>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="widget-content">

                    <p>Doloribus nisi vel suscipit modi, optio ex repudiandae voluptatibus officiis commodi.</p>

                    <div class="meta-info">

                        <div class="due-time">
                            <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-clock">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <polyline points="12 6 12 12 16 14"></polyline>
                                </svg> 3 Days Left</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/src/apex/apexcharts.min.js') }}"></script>
    @vite(['resources/js/dashboard/dash_1.js'])

    <script type="module" src="{{ asset('plugins/src/global/vendors.min.js') }}"></script>
    @vite(['resources/js/custom.js'])

@endsection