<title>Finance Dashboard</title>
@extends('ui::layouts.app')

@section('content')
<style>
    body {
        background-color: #f0f2f5;
    }

    .ui.container {
        max-width: 100% !important;
        overflow-x: hidden;
        padding: 0 5rem 0 2rem;
        box-sizing: border-box;
        margin-top: 3rem;
    }

    h2.ui.header {
        font-size: 1.8rem;
        font-weight: 700;
        color: #1b1c1d;
        margin-bottom: 0.5rem;
    }

    h3.ui.dividing.header {
        font-size: 1.3rem;
        font-weight: 600;
        color: #444;
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #ddd;
        padding-bottom: 0.5rem;
    }

    .ui.statistics {
        display: flex !important;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 1.5rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .ui.statistic {
        flex: 1;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        text-align: center;
        transition: transform 0.2s ease-in-out;
    }

    .ui.statistic:hover {
        transform: translateY(-4px);
    }

    .ui.statistic .value {
        font-size: 2rem;
        font-weight: bold;
        color: #2185d0;
    }

    .ui.statistic .label {
        font-size: 1rem;
        color: #555;
        margin-top: 0.3rem;
    }

    /* Filter bar (aligned right side of header) */
    .header-with-filter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.2rem;
    }

    .filter-bar {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        padding: 0.5rem 1rem;
        width: fit-content;
    }

    .filter-bar label {
        font-weight: 600;
        color: #333;
        margin-right: 0.5rem;
    }

    .filter-bar input[type="month"] {
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        padding: 0.4rem 0.6rem;
        font-size: 1rem;
        color: #333;
        transition: all 0.2s ease;
    }

    .filter-bar input[type="month"]:focus {
        border-color: #21ba45;
        outline: none;
        box-shadow: 0 0 0 2px rgba(33, 186, 69, 0.15);
    }

    .ui.table {
        margin-top: 1rem !important;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .ui.table th {
        background: #f9fafb !important;
        color: #444;
        font-weight: 600;
    }

    .status-label {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff;
        text-transform: capitalize;
        border: none;
        opacity: 0.9;
    }

    .status-Diproses { background-color: rgba(33, 133, 208, 0.3); color: #1b4f72; }
    .status-Disokong { background-color: rgba(46, 204, 113, 0.3); color: #1d5d38; }
    .status-Disahkan { background-color: rgba(241, 196, 15, 0.3); color: #7a6000; }
    .status-Disemak { background-color: rgba(155, 89, 182, 0.3); color: #4a2c63; }
    .status-Dibayar { background-color: rgba(26, 188, 156, 0.3); color: #0b5449; }
    .status-Ditolak { background-color: rgba(231, 76, 60, 0.3); color: #7e2018; }

    @media (max-width: 768px) {
        .ui.container { padding: 0 2rem; }
        .header-row, .header-with-filter { flex-direction: column; align-items: flex-start; gap: 1rem; }
        .filter-bar { flex-direction: column; align-items: flex-start; width: 100%; }
        .filter-bar button { width: 100%; }
        .ui.statistics { flex-wrap: wrap; }
        .ui.statistic { flex: 0 0 48%; }
    }

    @media (max-width: 600px) {
        .ui.statistic { flex: 0 0 100%; }
    }
</style>

<div class="ui container mt-5" style="margin-top: 10px">
    {{-- Header --}}
    <br>
    <div class="header-row" style="display: flex; justify-content: space-between; align-items: center;">
        <h2 class="ui header">Finance Dashboard</h2>

        {{-- Excel Export Button --}}
        <button class="ui teal button" id="openExportModal">
            <i class="file excel icon"></i> Muat Turun Laporan Excel
        </button>
    </div>

    {{-- Statistic Section --}}
    <div class="ui statistics">
        <div class="statistic"><div class="value">{{ $summary['processed'] }}</div><div class="label">Diproses</div></div>
        <div class="statistic"><div class="value">{{ $summary['verified'] }}</div><div class="label">Disokong</div></div>
        <div class="statistic"><div class="value">{{ $summary['approved'] }}</div><div class="label">Disahkan</div></div>
        <div class="statistic"><div class="value">{{ $summary['reviewed'] }}</div><div class="label">Disemak</div></div>
        <div class="statistic"><div class="value">{{ $summary['paid'] }}</div><div class="label">Dibayar</div></div>
        <div class="statistic"><div class="value">{{ $summary['rejected'] }}</div><div class="label">Ditolak</div></div>
    </div>

    {{-- Header + Filter Bar in same row --}}
    <div class="header-with-filter">
            <h3 class="ui dividing header" style="margin-bottom: 0;">Senarai Tuntutan Mengikut Staf</h3>

        <form method="GET" class="filter-bar">
            <label for="month">Bulan:</label>
            <input type="month" id="month" name="month" value="{{ $month ?? now()->format('Y-m') }}" required>
            <button class="ui teal button">
                <i class="filter icon"></i> Tapis
            </button>
        </form>
    </div>

    {{-- Staff Summary Table --}}
    <table class="ui celled table">
        <thead>
            <tr>
                <th>Nama Staf</th>
                <th>Jumlah Tuntutan</th>
                <th>Jumlah Keseluruhan (RM)</th>
                <th>Tindakan</th>
            </tr>
        </thead>
        <tbody>
            @forelse($users as $user)
                <tr>
                    <td>{{ $user['name'] }}</td>
                    <td>{{ $user['total_claims'] }}</td>
                    <td>RM {{ number_format($user['total_amount'], 2) }}</td>
                    <td>
                        <a href="{{ route('mileage::finance.show', ['userId' => $user['id'], 'month' => $month]) }}"
                        class="ui blue button tiny">Lihat</a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="center aligned">Tiada tuntutan untuk bulan ini.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Filter Modal for Excel Export --}}
<div class="ui modal" id="exportModal">
    <div class="header">Penapis Laporan Excel</div>
    <div class="content">
        <form class="ui form" action="{{ route('mileage::finance.export') }}" method="GET">
            <div class="field">
                <label>Nama Staf</label>
                <select name="user_id" class="ui dropdown" required>
                    <option value="">-- Pilih Staf --</option>
                    @foreach($users as $user)
                        <option value="{{ $user['id'] }}">{{ $user['name'] }}</option>
                    @endforeach
                </select>
            </div>

            <div class="field">
                <label>Bulan Tuntutan</label>
                <input type="month" name="month" value="{{ $month ?? now()->format('Y-m') }}" required>
            </div>

            <div class="actions" style="text-align: right; margin-top: 2rem;">
                <button type="button" class="ui button" id="cancelExport">Batal</button>
                <button type="submit" class="ui teal button">
                    <i class="download icon"></i> Muat Turun
                </button>
            </div>
        </form>
    </div>
</div>

{{-- JS --}}
<script>
    document.getElementById('openExportModal').addEventListener('click', function() {
        $('#exportModal').modal('show');
    });

    document.getElementById('cancelExport').addEventListener('click', function() {
        $('#exportModal').modal('hide');
    });
</script>
@endsection
