<title>HR 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.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;
    }

    .ui.button {
        margin-right: 0.3rem !important;
    }

    /* 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);
    }

    @media (max-width: 768px) {
        .ui.container {
            padding: 0 2rem;
        }

        .header-row {
            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%;
        }
    }
</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">Human Resources (HR) Dashboard</h2>

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

    {{-- 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 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::HR.show', ['userId' => $user['id'], 'month' => $month]) }}"
                           class="ui blue button tiny">Lihat</a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="center aligned">Tiada rekod 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::HR.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" 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
