@extends('layouts.users.app')

@section('content')
    @if (session('error'))
        <script>
            showAlert('error', "{{ session('error') }}");
        </script>
    @endif

    @if (session('success'))
        <script>
            showAlert('success', "{{ session('success') }}");
        </script>
    @endif

    {{-- @include('home.preloader') --}}

    <div class="content-wrapper"> <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="space-y-6">
                <!-- Header -->
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                    <h2 class="text-2xl font-bold">
                        {{ __('Dashboard') }}
                    </h2>
                    <p class="text-2xl font-semibold">
                        {{ __('Welcome back') }} , {{ Auth::user()->name }}
                    </p>
                </div>
                <!-- Resumen principal -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Total Tickets -->
                    <div class="bg-white shadow rounded-2xl p-5 flex items-center justify-between">
                        <div>
                            <h3 class="text-sm text-gray-600">{{__('Total Tickets')}}</h3>
                            <p class="text-3xl font-bold text-indigo-600">{{ $totalTickets }}</p>
                        </div>
                        <div class="bg-indigo-100 p-3 rounded-full">
                            <i class="w-6 h-6 ti text-indigo-600 tabler-ticket"></i>
                        </div>
                    </div>
                    <!-- Tickets de Venta -->
                    <div class="bg-white shadow rounded-2xl p-5 flex items-center justify-between">
                        <div>
                            <h3 class="text-sm text-gray-600">{{__('Sales Tickets')}}</h3>
                            <p class="text-3xl font-bold text-green-600">{{ $sellTicketTotals }}</p>
                        </div>
                        <div class="bg-green-100 p-3 rounded-full">
                            <i class="w-6 h-6 text-green-600 ti tabler-shopping-cart"></i>
                        </div>
                    </div>
                    <!-- Tickets de Compra -->
                    <div class="bg-white shadow rounded-2xl p-5 flex items-center justify-between">
                        <div>
                            <h3 class="text-sm text-gray-600">{{__('Purchase Tickets')}}</h3>
                            <p class="text-3xl font-bold text-blue-600">{{ $buyTicketTotals }}</p>
                        </div>
                        <div class="bg-blue-100 p-3 rounded-full">
                            <i class="w-6 h-6 text-blue-600 ti tabler-credit-card"></i>
                        </div>
                    </div>
                </div>
                <!-- Progreso por etapa -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Progress for Sales Tickets -->
                    <div class="bg-white shadow rounded-2xl p-6">
                        <h3 class="text-lg font-semibold text-gray-700 mb-4">{{__('Sales Tickets Progress')}}</h3>
                        <div class="space-y-5">
                            @foreach ($sellTicketCountsByStage as $stageName => $count)
                                <div class="p-3 border-b border-gray-100 last:border-b-0">
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm font-semibold text-gray-700 capitalize">
                                            {{ str_replace('_', ' ', $stageName) }}
                                    </span>
                                        <span class="px-2 py-0.5 text-xs font-bold text-white bg-blue-600 rounded-full">
                                          {{ $count }}
                                         </span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <!-- Progress for Purchase Tickets -->
                    <div class="bg-white shadow rounded-2xl p-6">
                        <h3 class="text-lg font-semibold text-gray-700 mb-4">{{__('Purchase Tickets Progress')}}</h3>
                        <div class="space-y-5">
                            @foreach ($buyTicketCountsByStage as $stageName => $count)
                                <div class="p-3 border-b border-gray-100 last:border-b-0">
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm font-semibold text-gray-700 capitalize">
                                            {{ str_replace('_', ' ', $stageName) }}
                                    </span>
                                        <span class="px-2 py-0.5 text-xs font-bold text-white bg-blue-600 rounded-full">
                                          {{ $count }}
                                         </span>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
                <!-- Información adicional -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Máquinas publicadas -->
                    <div
                        class="bg-gradient-to-r from-indigo-500 to-blue-600 text-white p-6 rounded-2xl shadow flex items-center justify-between">
                        <div>
                            <h3 class="text-sm uppercase tracking-wide opacity-80">{{__('Machines for sale published')}}</h3>
                            <p class="text-4xl font-bold mt-1">{{ $totalSaleUsedMachine }}</p>
                        </div>
                        <i class="w-10 h-10 opacity-90 ti tabler-album"></i>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection