@extends('component.app')
@section('title', 'Data Transaksi')
@section('active3', 'active')
@section('content')

    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y">
            <!-- Invoice List Table -->
            <div class="card">
                <div class="header-menu d-flex justify-content-between align-items-center">
                    <h4 class="card-header">Data Transaksi</h4>

                </div>

                <div class="container mt-1">
                    <!-- Tabs Menu -->
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a href="{{ route('transaksi.index') }}"
                                class="nav-link {{ request()->routeIs('transaksi.index') ? 'active' : '' }}" id="home-tab"
                                role="tab" aria-controls="home"
                                aria-selected="{{ request()->routeIs('transaksi.index') ? 'true' : 'false' }}">Baru</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a href="{{ route('transaksi.proses') }}"
                                class="nav-link {{ request()->routeIs('transaksi.proses') ? 'active' : '' }}"
                                id="profile-tab" role="tab" aria-controls="profile"
                                aria-selected="{{ request()->routeIs('transaksi.proses') ? 'true' : 'false' }}">Proses</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {{ request()->routeIs('transaksi.selesai') ? 'active' : '' }}"
                                id="contact-tab" href="{{ route('transaksi.selesai') }}" role="tab"
                                aria-controls="contact"
                                aria-selected="{{ request()->routeIs('transaksi.selesai') ? 'true' : 'false' }}">Selesai</a>
                        </li>
                    </ul>



                    <hr>

                    <!-- Tabs Content -->
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="row">
                                @if ($data->count() == 0)

                                    <div class="col-md-12">
                                        <div class="alert alert-warning text-center" role="alert">
                                            Belum ada transaksi
                                        </div>
                                    </div>
                                @else
                                    @foreach ($data as $transaksi)
                                        <div class="col-md-4">
                                            <!-- Card for Each Transaction -->
                                            <div class="card card-custom">
                                                <!-- Example Image, you can replace with actual laundry photo -->
                                                <img src="{{ asset('laundry2.png') }}" alt="Laundry Image"
                                                    class="card-img-top" width="100%" height="100"
                                                    style="object-fit: cover;">
                                                <div class="card-body card-body-custom">
                                                    <h5 class="card-title">
                                                        <i class="bx bx-receipt text-primary"></i>
                                                        <span
                                                            class="text-uppercase">{{ $transaksi->kode_transaksi }}</span>
                                                    </h5>
                                                    <hr>
                                                    <p class="card-text">
                                                        <i class="bx bx-calendar text-muted"></i>
                                                        <strong>Tanggal:</strong>
                                                        {{ \Carbon\Carbon::parse($transaksi->tgl_transaksi)->format('d M Y') }}
                                                    </p>
                                                    <p class="card-text">
                                                        <i class="bx bx-user text-muted"></i>
                                                        <strong>Pelanggan:</strong> {{ $transaksi->pelanggan->nama }}
                                                    </p>
                                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                                        <span class="card-price text-success">
                                                            <i class="bx bx-money"></i> Rp
                                                            {{ number_format($transaksi->total_harga, 0, ',', '.') }}
                                                        </span>
                                                        <a href="{{ route('transaksi.show', $transaksi->id) }}"
                                                            class="btn btn-sm btn-primary">Kelola <i
                                                                class="bx bx-right-arrow-alt"></i></a>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    @endforeach
                                @endif

                            </div>
                        </div>
                        {{-- <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <h3>Proses</h3>
                            <p>This is the profile section. You can put information about a user or something else here.
                            </p>
                        </div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <h3>Selesai</h3>
                            <p>This is the contact section. You can display contact information or a form here.</p>
                        </div> --}}
                    </div>
                </div>




            </div>



        @endsection