@extends('admin.layout.content')

@section('content')
<div class="container-fluid px-3 px-lg-4 py-5">
    <!-- Header with Back Button -->
    <div class="d-flex align-items-center mb-4 gap-3">
        <a href="{{ route('admin.reports.index', ['code' => session('admin_route_code')]) }}" class="text-secondary d-flex justify-content-center align-items-center text-decoration-none">
            <span class="material-symbols-outlined" style="font-size: 28px;">arrow_back</span>
        </a>
        <div>
            <h2 class="fw-bold mb-0">Detail Laporan</h2>
            <p class="text-muted mb-0">Periode: {{ $reportData['period']->period_code }} ({{ $reportData['period']->product->product_name ?? 'Produk Tidak Diketahui' }})</p>
        </div>
    </div>

    <!-- Report Detail Section -->
    <div class="tf-card p-4 mb-4">
        <h4 class="fw-bold mb-4">Ringkasan Finansial</h4>
        
        @if(strtolower($reportData['financial']['status']) !== 'panen')
        <div class="alert alert-info d-flex align-items-center gap-2">
            <span class="material-symbols-outlined">info</span>
            <div>
                Masa tanam ini berstatus <strong>{{ $reportData['financial']['status'] }}</strong>. Data penjualan tidak akan dihitung atau mengurangi modal sampai status berubah menjadi <strong>Panen</strong>.
            </div>
        </div>
        @endif

        <div class="row g-4 mb-4">
            <div class="col-sm-6 col-md-3">
                <div class="p-3 bg-light rounded-3">
                    <small class="text-muted d-block mb-1">Modal</small>
                    <h5 class="fw-bold mb-0 text-dark">Rp {{ number_format($reportData['financial']['modal'], 0, ',', '.') }}</h5>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="p-3 bg-light rounded-3">
                    <small class="text-muted d-block mb-1">Total Pendapatan</small>
                    <h5 class="fw-bold mb-0 text-primary">Rp {{ number_format($reportData['financial']['total_revenue'], 0, ',', '.') }}</h5>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="p-3 bg-light rounded-3">
                    <small class="text-muted d-block mb-1">Pendapatan (POS)</small>
                    <h5 class="fw-bold mb-0 text-success">Rp {{ number_format($reportData['financial']['revenue_pos'], 0, ',', '.') }}</h5>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="p-3 bg-light rounded-3">
                    <small class="text-muted d-block mb-1">Pendapatan (Online)</small>
                    <h5 class="fw-bold mb-0 text-info">Rp {{ number_format($reportData['financial']['revenue_online'], 0, ',', '.') }}</h5>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="p-3 bg-light rounded-3 border {{ $reportData['financial']['profit'] >= 0 ? 'border-success' : 'border-danger' }}">
                    <small class="text-muted d-block mb-1">Keuntungan / Laba</small>
                    <h5 class="fw-bold mb-0 {{ $reportData['financial']['profit'] >= 0 ? 'text-success' : 'text-danger' }}">
                        Rp {{ number_format($reportData['financial']['profit'], 0, ',', '.') }}
                    </h5>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="p-3 bg-light rounded-3">
                    <small class="text-muted d-block mb-1">Kupon Terpakai</small>
                    <h5 class="fw-bold mb-0 text-warning">Rp {{ number_format($reportData['financial']['total_discount'], 0, ',', '.') }}</h5>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="p-3 bg-light rounded-3">
                    <small class="text-muted d-block mb-1">Ongkir Terpakai</small>
                    <h5 class="fw-bold mb-0 text-secondary">Rp {{ number_format($reportData['financial']['total_shipping'], 0, ',', '.') }}</h5>
                </div>
            </div>
        </div>

        <ul class="nav nav-pills mb-3 custom-pills" id="reportTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active rounded-pill px-4" id="pos-tab" data-bs-toggle="tab" data-bs-target="#pos" type="button" role="tab">Transaksi POS</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill px-4" id="online-tab" data-bs-toggle="tab" data-bs-target="#online" type="button" role="tab">Pesanan Online</button>
            </li>
        </ul>
        
        <div class="tab-content" id="reportTabsContent">
            <!-- POS Tab -->
            <div class="tab-pane fade show active" id="pos" role="tabpanel">
                <div class="table-responsive">
                    <table class="table tf-table align-middle">
                        <thead>
                            <tr>
                                <th>Tanggal</th>
                                <th>Invoice</th>
                                <th>Kasir</th>
                                <th>Item</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reportData['pos'] as $pos)
                            <tr>
                                <td>{{ $pos['date'] }}</td>
                                <td class="fw-bold text-success">{{ $pos['invoice'] }}</td>
                                <td>{{ $pos['cashier'] }}</td>
                                <td>{{ $pos['items'] }}</td>
                                <td class="fw-bold">Rp {{ number_format($pos['total'], 0, ',', '.') }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center py-3 text-muted">Belum ada transaksi POS.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Online Tab -->
            <div class="tab-pane fade" id="online" role="tabpanel">
                <div class="table-responsive">
                    <table class="table tf-table align-middle">
                        <thead>
                            <tr>
                                <th>Tanggal</th>
                                <th>Invoice</th>
                                <th>Pelanggan</th>
                                <th>Status</th>
                                <th>Item</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reportData['online'] as $online)
                            <tr>
                                <td>{{ $online['date'] }}</td>
                                <td class="fw-bold text-success">{{ $online['invoice'] }}</td>
                                <td>{{ $online['customer'] }}</td>
                                <td>
                                    <span class="badge bg-primary-subtle text-primary rounded-pill px-2">
                                        {{ $online['status'] }}
                                    </span>
                                </td>
                                <td>{{ $online['items'] }}</td>
                                <td class="fw-bold">Rp {{ number_format($online['total'], 0, ',', '.') }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center py-3 text-muted">Belum ada pesanan online.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<style>
    .custom-pills .nav-link.active {
        background-color: #024e32 !important; /* Hijau Tanjoeng Farm */
        color: #ffffff !important;
    }
    .custom-pills .nav-link {
        color: #024e32;
    }
    .custom-pills .nav-link:hover {
        background-color: rgba(2, 78, 50, 0.1);
    }
</style>
@endsection