@extends('dashboard.layouts.main')

@section('PageContent')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Resumo do sistema</h6>
    </div>

    <div class="row gy-4">
        <div class="col-xxl-9">
            <div class="card radius-8 border-0">
                <div class="row">
                    <div class="col-xxl-6 pe-xxl-0">
                        <div class="card-body p-24">
                            <div class="d-flex align-items-center flex-wrap gap-2 justify-content-between">
                                <h6 class="mb-2 fw-bold text-lg">Estatisticas mensal de registo</h6>
                            </div>
                            <ul class="d-flex flex-wrap align-items-center mt-3 gap-3">
                                <li class="d-flex align-items-center gap-2">
                                    <span class="w-12-px h-12-px radius-2 bg-primary-600"></span>
                                    <span class="text-secondary-light text-sm fw-semibold">Formais:
                                        <span class="text-primary-light fw-bold">200.000,00</span>
                                    </span>
                                </li>
                                <li class="d-flex align-items-center gap-2">
                                    <span class="w-12-px h-12-px radius-2 bg-yellow"></span>
                                    <span class="text-secondary-light text-sm fw-semibold">Informais:
                                        <span class="text-primary-light fw-bold">200.000,00</span>
                                    </span>
                                </li>
                            </ul>
                            <div class="mt-40">
                                <div id="paymentStatusChart" class="margin-16-minus"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-6">
                        <div class="row h-100 g-0">
                            <div class="row">
                                <!-- Total de Produtos -->
                                <div class="col-6 p-0 m-0">
                                    <div
                                        class="card-body p-24 h-100 d-flex flex-column justify-content-center border border-top-0">
                                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">
                                            <div>
                                                <span
                                                    class="mb-12 w-44-px h-44-px text-primary-600 bg-primary-light border border-primary-light-white flex-shrink-0 d-flex justify-content-center align-items-center radius-8 h6 mb-12">
                                                    <iconify-icon icon="fa-solid:box-open" class="icon"></iconify-icon>
                                                </span>
                                                <span class="mb-1 fw-medium text-secondary-light text-md">Total de
                                                    Produtos</span>
                                                <h6 class="fw-semibold text-primary-light mb-1">{{ $totalProdutos }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Total de Serviços -->
                                <div class="col-6 p-0 m-0">
                                    <div
                                        class="card-body p-24 h-100 d-flex flex-column justify-content-center border border-top-0 border-start-0 border-end-0">
                                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">
                                            <div>
                                                <span
                                                    class="mb-12 w-44-px h-44-px text-yellow bg-yellow-light border border-yellow-light-white flex-shrink-0 d-flex justify-content-center align-items-center radius-8 h6 mb-12">
                                                    <iconify-icon icon="ri:discount-percent-fill"
                                                        class="icon"></iconify-icon>
                                                </span>
                                                <span class="mb-1 fw-medium text-secondary-light text-md">Total de
                                                    Serviços</span>
                                                <h6 class="fw-semibold text-primary-light mb-1">{{ $totalServicos }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Total de Informais -->
                                <div class="col-6 p-0 m-0">
                                    <div
                                        class="card-body p-24 h-100 d-flex flex-column justify-content-center border border-top-0 border-bottom-0">
                                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">
                                            <div>
                                                <span
                                                    class="mb-12 w-44-px h-44-px text-lilac bg-lilac-light border border-lilac-light-white flex-shrink-0 d-flex justify-content-center align-items-center radius-8 h6 mb-12">
                                                    <iconify-icon icon="flowbite:users-group-solid"
                                                        class="icon"></iconify-icon>
                                                </span>
                                                <span class="mb-1 fw-medium text-secondary-light text-md">Total de
                                                    Informais</span>
                                                <h6 class="fw-semibold text-primary-light mb-1">{{ $totalInformais }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Total de Formais -->
                                <div class="col-6 p-0 m-0">
                                    <div
                                        class="card-body p-24 h-100 d-flex flex-column justify-content-center border border-top-0 border-start-0 border-end-0 border-bottom-0">
                                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">
                                            <div>
                                                <span
                                                    class="mb-12 w-44-px h-44-px text-pink bg-pink-light border border-pink-light-white flex-shrink-0 d-flex justify-content-center align-items-center radius-8 h6 mb-12">
                                                    <iconify-icon icon="flowbite:users-group-solid"
                                                        class="icon"></iconify-icon>
                                                </span>
                                                <span class="mb-1 fw-medium text-secondary-light text-md">Total de
                                                    Formais</span>
                                                <h6 class="fw-semibold text-primary-light mb-1">{{ $totalFormais }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-lg-6">
            <div class="card h-100 radius-8 border-0">
                <div class="card-body p-24">
                    <div class="d-flex align-items-center flex-wrap gap-2 justify-content-between">
                        <h6 class="mb-2 fw-bold text-lg">Formal / Informal</h6>
                    </div>

                    <div class="position-relative">
                        <span
                            class="w-80-px h-80-px bg-base shadow text-primary-light fw-semibold text-xl d-flex justify-content-center align-items-center rounded-circle position-absolute end-0 top-0 z-1">50%</span>
                        <div id="statisticsDonutChart"
                            class="mt-36 flex-grow-1 apexcharts-tooltip-z-none title-style circle-none"></div>
                        <span
                            class="w-80-px h-80-px bg-base shadow text-primary-light fw-semibold text-xl d-flex justify-content-center align-items-center rounded-circle position-absolute start-0 bottom-0 z-1">50%</span>
                    </div>

                    <ul class="d-flex flex-wrap align-items-center justify-content-between mt-3 gap-3">
                        <li class="d-flex align-items-center gap-2">
                            <span class="w-12-px h-12-px radius-2 bg-primary-600"></span>
                            <span class="text-secondary-light text-sm fw-normal">Formais:
                                <span class="text-primary-light fw-bold">{{ $totalFormais }}</span>
                            </span>
                        </li>
                        <li class="d-flex align-items-center gap-2">
                            <span class="w-12-px h-12-px radius-2 bg-yellow"></span>
                            <span class="text-secondary-light text-sm fw-normal">Informais:
                                <span class="text-primary-light fw-bold">{{ $totalInformais }}</span>
                            </span>
                        </li>
                    </ul>

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

        <div class="col-xxl-12 col-lg-6">
            <div class="card">
                <div class="card-body">
                    <table class="table bordered-table mb-0">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Tipo</th>
                                <th scope="col">Nome</th>
                                <th scope="col">Data de Registo</th>
                                <th scope="col">Telefone</th>
                                <th scope="col">Estado</th>
                                <th scope="col">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user)
                                <tr>
                                    <td>
                                        <a href="{{-- route('admin.users.show', $user->id) --}}" class="text-primary-600">
                                            {{ $user->id }}
                                        </a>
                                    </td>
                                    <td>{{ $user->formalType ? 'Formal' : ($user->informalType ? 'Informal' : 'Nulo') }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset($user->image ?? 'dashboard/images/users/default.png') }}"
                                                 alt="" class="flex-shrink-0 me-12 radius-8">
                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">
                                                {{ $user->name }}
                                            </h6>
                                        </div>
                                    </td>
                                    <td>{{ $user->created_at->format('d M Y') }}</td>
                                    <td>{{ $user->phone ?? 'N/A' }}</td>
                                    <td>
                                        {{-- <span class="bg-{{ $user->status == 'ativo' ? 'success' : 'warning' }}-focus
                                                     text-{{ $user->status == 'ativo' ? 'success' : 'warning' }}-main
                                                     px-24 py-4 rounded-pill fw-medium text-sm">
                                            {{ ucfirst($user->status) }}
                                        </span> --}}

                                         <span class="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm"> Activo  </span>
                                    </td>
                                    <td>
                                        <a href="{{-- route('admin.users.show', $user->id) --}}"
                                           class="w-32-px h-32-px bg-primary-light text-primary-600 rounded-circle
                                                  d-inline-flex align-items-center justify-content-center">
                                            <iconify-icon icon="iconamoon:eye-light"></iconify-icon>
                                        </a>
                                        <a href="{{-- route('admin.users.edit', $user->id) --}}"
                                           class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle
                                                  d-inline-flex align-items-center justify-content-center">
                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                        </a>
                                        <form action="{{-- route('admin.users.destroy', $user->id) --}}" method="POST"
                                              class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    class="w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle
                                                           d-inline-flex align-items-center justify-content-center border-0">
                                                <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection