@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.
                            Setelah pendaftaran uji kualitas air, kami akan menginformasikan tindak lanjut terkait informasi pelayanan paling lambat 3 hari kerja.
                        </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-0 ml-md-2 mt-md-0 mt-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="{{ $totalServices > 0 ? 100 : 0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $totalServices > 0 ? '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">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-2 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-2 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 class="col-xl-2 col-md-6">
        <div class="card-box">
            <h4 class="header-title mt-0 mb-2">Ditolak</h4>
            <div class="widget-box-2">
                <div class="widget-detail-2 text-right">
                    <span class="badge badge-danger badge-pill float-left mt-3">Ditolak <i class="fe-x-circle ml-1"></i></span>
                    <h2 class="font-weight-normal mb-1"> {{ $rejectedServices }} </h2>
                    <p class="text-muted mb-3">Layanan</p>
                </div>
                <div class="progress progress-bar-alt-danger progress-sm">
                    <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ $totalServices > 0 ? ($rejectedServices / $totalServices) * 100 : 0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $totalServices > 0 ? ($rejectedServices / $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>No</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>{{ $loop->iteration }}</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>
                                @elseif($service->status == 'Ditolak')
                                <span class="badge badge-danger">Ditolak</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