@extends('layouts.app')

@section('title', 'Ringkasan Keuangan - Dazry Laundry App')
@section('page_title', 'Ringkasan Keuangan')

@section('content')
<section class="bg-white shadow-md rounded-xl p-6 mb-8">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">Ringkasan Keuangan</h2>
        <a href="{{ route('pengeluaran.index') }}" class="bg-purple-600 hover:bg-purple-700 text-white px-5 py-2.5 rounded-lg shadow-md transition-all duration-200 transform hover:scale-105">
            <svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
            Kelola Pengeluaran Umum
        </a>
    </div>

    <form action="{{ route('keuangan.index') }}" method="GET" class="mb-6 bg-gray-50 p-4 rounded-lg shadow-sm flex items-center space-x-4">
        <div class="flex-1">
            <label for="start_date" class="block text-sm font-medium text-gray-700">Dari Tanggal:</label>
            <input type="date" id="start_date" name="start_date" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="{{ $startDate }}">
        </div>
        <div class="flex-1">
            <label for="end_date" class="block text-sm font-medium text-gray-700">Sampai Tanggal:</label>
            <input type="date" id="end_date" name="end_date" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="{{ $endDate }}">
        </div>
        <div>
            <button type="submit" class="mt-5 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md shadow-sm transition-colors duration-200">
                Filter
            </button>
        </div>
    </form>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div class="bg-green-50 border border-green-200 rounded-lg p-5 shadow-sm">
            <p class="text-green-700 text-lg font-semibold">Total Pendapatan</p>
            <p class="text-green-900 text-3xl font-bold mt-2">Rp {{ number_format($totalPendapatan, 2, ',', '.') }}</p>
            <p class="text-sm text-green-600 mt-1">(Dari Penjualan)</p>
        </div>
        <div class="bg-red-50 border border-red-200 rounded-lg p-5 shadow-sm">
            <p class="text-red-700 text-lg font-semibold">Total Pengeluaran</p>
            <p class="text-red-900 text-3xl font-bold mt-2">Rp {{ number_format($totalPengeluaran, 2, ',', '.') }}</p>
            <p class="text-sm text-red-600 mt-1">(Pembelian & Umum)</p>
        </div>
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-5 shadow-sm">
            <p class="text-blue-700 text-lg font-semibold">Laba/Rugi Bersih</p>
            <p class="text-blue-900 text-3xl font-bold mt-2">
                Rp {{ number_format($labaRugi, 2, ',', '.') }}
                @if ($labaRugi >= 0)
                    <span class="text-green-600 text-base">(Laba)</span>
                @else
                    <span class="text-red-600 text-base">(Rugi)</span>
                @endif
            </p>
            <p class="text-sm text-blue-600 mt-1">(Pendapatan - Pengeluaran)</p>
        </div>
    </div>

    <h3 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Rincian Pengeluaran</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 shadow-sm">
            <p class="text-yellow-700 text-base font-semibold">Pengeluaran dari Pembelian Bahan Baku:</p>
            <p class="text-yellow-900 text-2xl font-bold mt-1">Rp {{ number_format($totalPengeluaranPembelian, 2, ',', '.') }}</p>
        </div>
        <div class="bg-orange-50 border border-orange-200 rounded-lg p-4 shadow-sm">
            <p class="text-orange-700 text-base font-semibold">Pengeluaran Umum:</p>
            <p class="text-orange-900 text-2xl font-bold mt-1">Rp {{ number_format($totalPengeluaranUmum, 2, ',', '.') }}</p>
        </div>
    </div>
</section>
@endsection