@extends('Dashboard.layouts.main')

@section('title', 'Beranda Customer')

@section('css')
<!-- Plugins css -->
<link href="{{ asset('DB/assets/libs/morris-js/morris.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb')
<li class="breadcrumb-item active">Beranda</li>
@endsection

@section('page-title', 'Selamat Datang, ' . $user->name)

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card-box">
            <div class="row">
                <div class="col-md-6">
                    <div class="p-2">
                        <h2 class="font-weight-normal mb-3">Selamat Datang di Sistem Pengujian Air</h2>
                        <p class="text-muted mb-3 font-16">
                            Sistem ini memungkinkan Anda melakukan permintaan pengambilan dan pengujian sampel air.
                            Kami siap melayani Anda dengan profesional dan memberikan hasil uji yang akurat.
                        </p>
                        <p class="text-muted mb-4">
                            Profil Anda telah terdaftar sebagai:
                        </p>
                        <div class="media mb-4">
                            <div class="media-body">
                                <h5 class="mt-0 mb-2 font-16">{{ $user->name }}</h5>
                                <p class="mb-1">
                                    <i class="fe-mail mr-1"></i> {{ $user->email }}
                                </p>
                                <p class="mb-1">
                                    <i class="fe-phone mr-1"></i> {{ $user->phone }}
                                </p>
                                <p class="mb-1">
                                    <i class="fe-briefcase mr-1"></i> {{ $user->business_name }}
                                </p>
                                <p class="mb-0">
                                    <i class="fe-map-pin mr-1"></i> {{ $user->business_address }}
                                </p>
                            </div>
                        </div>
                        <a href="{{ route('services.create') }}" class="btn btn-primary waves-effect waves-light">
                            <i class="fe-plus mr-1"></i> Ajukan Permintaan Pengujian Baru
                        </a>
                        <a href="{{ route('profile.edit') }}" class="btn btn-light waves-effect ml-2">
                            <i class="fe-user mr-1"></i> Edit Profil
                        </a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-2">
                        <img style="width: 100%; height: 400px; object-fit: cover;" src="{{ asset('/images/home3.jpg') }}" alt="Water Testing" class="img-fluid rounded">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card-box">
            <h4 class="header-title mt-0 mb-2">Total Layanan</h4>
            <div class="widget-box-2">
                <div class="widget-detail-2 text-right">
                    <span class="badge badge-info badge-pill float-left mt-3">Total <i class="fe-archive ml-1"></i></span>
                    <h2 class="font-weight-normal mb-1"> {{ $totalServices }} </h2>
                    <p class="text-muted mb-3">Layanan</p>
                </div>
                <div class="progress progress-bar-alt-info progress-sm">
                    <div class="progress-bar bg-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card-box">
            <h4 class="header-title mt-0 mb-2">Menunggu</h4>
            <div class="widget-box-2">
                <div class="widget-detail-2 text-right">
                    <span class="badge badge-warning badge-pill float-left mt-3">Menunggu <i class="fe-clock ml-1"></i></span>
                    <h2 class="font-weight-normal mb-1"> {{ $pendingServices }} </h2>
                    <p class="text-muted mb-3">Layanan</p>
                </div>
                <div class="progress progress-bar-alt-warning progress-sm">
                    <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ $totalServices > 0 ? ($pendingServices / $totalServices) * 100 : 0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $totalServices > 0 ? ($pendingServices / $totalServices) * 100 : 0 }}%;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card-box">
            <h4 class="header-title mt-0 mb-2">Diproses</h4>
            <div class="widget-box-2">
                <div class="widget-detail-2 text-right">
                    <span class="badge badge-primary badge-pill float-left mt-3">Diproses <i class="fe-loader ml-1"></i></span>
                    <h2 class="font-weight-normal mb-1"> {{ $processedServices }} </h2>
                    <p class="text-muted mb-3">Layanan</p>
                </div>
                <div class="progress progress-bar-alt-primary progress-sm">
                    <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="{{ $totalServices > 0 ? ($processedServices / $totalServices) * 100 : 0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $totalServices > 0 ? ($processedServices / $totalServices) * 100 : 0 }}%;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card-box">
            <h4 class="header-title mt-0 mb-2">Selesai</h4>
            <div class="widget-box-2">
                <div class="widget-detail-2 text-right">
                    <span class="badge badge-success badge-pill float-left mt-3">Selesai <i class="fe-check-circle ml-1"></i></span>
                    <h2 class="font-weight-normal mb-1"> {{ $completedServices }} </h2>
                    <p class="text-muted mb-3">Layanan</p>
                </div>
                <div class="progress progress-bar-alt-success progress-sm">
                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ $totalServices > 0 ? ($completedServices / $totalServices) * 100 : 0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $totalServices > 0 ? ($completedServices / $totalServices) * 100 : 0 }}%;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-12">
        <div class="card-box">
            <h4 class="header-title mb-3">Layanan Terbaru Anda</h4>

            <div class="table-responsive">
                <table class="table table-hover table-centered m-0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Jenis Permintaan</th>
                            <th>Tanggal Uji</th>
                            <th>Jenis Pengujian</th>
                            <th>Total Sampel</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($latestServices as $service)
                        <tr>
                            <td># {{ $service->id }}</td>
                            <td>{{ $service->jenis_permintaan }}</td>
                            <td>{{ \Carbon\Carbon::parse($service->tanggal_uji)->format('d M Y') }}</td>
                            <td>{{ $service->pengujian_kualitas_air }}</td>
                            <td>{{ $service->total_sampel }}</td>
                            <td>
                                @if($service->status == 'Menunggu')
                                <span class="badge badge-warning">Menunggu</span>
                                @elseif($service->status == 'Diterima')
                                <span class="badge badge-info">Diterima</span>
                                @elseif($service->status == 'Diproses')
                                <span class="badge badge-primary">Diproses</span>
                                @elseif($service->status == 'Selesai')
                                <span class="badge badge-success">Selesai</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('services.show', $service->id) }}" class="btn btn-sm btn-info">
                                    <i class="fe-eye"></i> Detail
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center">Belum ada layanan yang diajukan</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            @if(count($latestServices) > 0)
            <div class="mt-3 text-right">
                <a href="{{ route('services.index') }}" class="btn btn-outline-info btn-sm">
                    Lihat Semua Layanan <i class="fe-arrow-right ml-1"></i>
                </a>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Plugins js-->
<script src="{{ asset('DB/assets/libs/jquery-sparkline/jquery.sparkline.min.js') }}"></script>
@endsection