<title>Butiran Tuntutan Staf</title>
@extends('ui::layouts.app')

@section('content')
<style>
    body { 
        background-color: #f0f2f5; 
    }
    .ui.container { 
        padding: 0 5rem 3rem 2rem; 
        margin-top: 3rem; 
    }
    h2.ui.header { 
        font-size: 1.8rem; 
        font-weight: 700; 
        margin-bottom: .5rem; 
    }
    .ui.table { 
        background: white; 
        border-radius: 10px; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    }
    .ui.segment {
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-top: 2rem;
        padding: 1.5rem;
    }
    .ui.button { margin-top: 1rem; }

    .summary-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border-radius: 8px;
        padding: 1rem 1.5rem;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        margin-top: 2rem;
    }

    .status-label {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: capitalize;
        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-Diluluskan { 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; }
        .summary-box { flex-direction: column; gap: 0.5rem; }
    }

    .approval-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 1rem;
    }

    .approval-actions .ui.button {
        height: 42px;
        text-align: center;
    }
</style>

<div class="ui container">

    <h2 class="ui header">{{ $user->name }}</h2>
    <p>
        <strong>Bulan:</strong> {{ \Carbon\Carbon::parse($month)->translatedFormat('F Y') }}<br>
        <strong>Projek:</strong> {{ $project->p_project_description ?? $project->project_name ?? 'Tanpa Projek' }}
    </p>

    <a href="{{ route('mileage::projectDirector.index', ['month' => $month]) }}" class="ui grey button">
        <i class="arrow left icon"></i> Kembali
    </a>

    <table class="ui celled table">
        <thead>
        <tr>
            <th>Tarikh</th>
            <th>Butiran</th>
            <th>Dari</th>
            <th>Ke</th>
            <th>Jumlah KM</th>
            <th>Tol (RM)</th>
            <th>Lain-lain (RM)</th>
            <th>Status</th>
            <th>Jumlah (RM)</th>
            <th>Tindakan</th>
        </tr>
        </thead>
        <tbody>
        @php
            $total = 0;
            $totalMileage = 0;
        @endphp

        @forelse($claims as $claim)
            @php
                $total += $claim->total_claim_amount;
                $totalMileage += $claim->total_mileage;
            @endphp

            <tr>
                <td>{{ \Carbon\Carbon::parse($claim->claim_date)->format('d/m/Y') }}</td>
                <td>{{ $claim->description }}</td>
                <td>{{ $claim->distance_from }}</td>
                <td>{{ $claim->distance_to }}</td>
                <td>{{ $claim->total_mileage }}</td>
                <td>{{ number_format($claim->toll_amount ?? 0, 2) }}</td>
                <td>{{ number_format($claim->others_amount ?? 0, 2) }}</td>
                <td><span class="status-label status-{{ $claim->status }}">{{ $claim->status }}</span></td>
                <td>{{ number_format($claim->total_claim_amount, 2) }}</td>

                <td>
                    @if($claim->status === 'Disokong')
                        <form action="{{ route('mileage::projectDirector.approveClaim', $claim->id) }}" method="POST" style="display:inline;">
                            @csrf
                            <button type="submit" class="ui green tiny button"><i class="check icon"></i> Sahkan</button>
                        </form>

                        <button class="ui red tiny button reject-single-btn"
                                data-claim-id="{{ $claim->id }}"
                                data-project="{{ $project->id }}"
                                data-user="{{ $user->id }}"
                                data-month="{{ $month }}">
                            <i class="times icon"></i> Tolak
                        </button>
                    @else
                        <span style="color:#999;">—</span>
                    @endif
                </td>
            </tr>

            @if($claim->others_amount > 0 && $claim->others_description)
                <tr style="background:#fafafa;">
                    <td colspan="10"><strong>Butiran Lain-lain:</strong> {{ $claim->others_description }}</td>
                </tr>
            @endif

        @empty
            <tr><td colspan="10" class="center aligned">Tiada tuntutan.</td></tr>
        @endforelse
        </tbody>

        @if($claims->count())
        <tfoot>
            <tr>
                <th colspan="9" class="right aligned">Jumlah Keseluruhan</th>
                <th>RM {{ number_format($total, 2) }}</th>
            </tr>
        </tfoot>
        @endif
    </table>

    @php
        $hasPending = $claims->where('status', 'Disokong')->count() > 0;
    @endphp

    @if($hasPending)
    <div class="summary-box">
        <div>
            <strong>Status Semasa:</strong>
            <span class="status-label status-{{ $claims->first()->status }}">{{ $claims->pluck('status')->unique()->implode(', ') }}</span>
        </div>

        <div class="approval-actions">
            <form action="{{ route('mileage::projectDirector.approveMonth') }}" method="POST">
                @csrf
                <input type="hidden" name="project_id" value="{{ $project->id }}">
                <input type="hidden" name="user_id" value="{{ $user->id }}">
                <input type="hidden" name="month" value="{{ $month }}">
                <button type="submit" class="ui green button"><i class="check icon"></i> Sahkan Semua</button>
            </form>

            <button class="ui red button reject-btn"
                    data-project="{{ $project->id }}"
                    data-user="{{ $user->id }}"
                    data-month="{{ $month }}">
                <i class="times icon"></i> Tolak Semua</button>
        </div>
    </div>
    @endif
    {{-- Calculation Summary Section --}}
    @if($claims->count() > 0)
        @php
            $totalMileage = $claims->sum('total_mileage');
            $totalClaimAmount = $claims->sum('total_claim_amount');
            $totalToll = $claims->sum('toll_amount');
            $totalOthers = $claims->sum('others_amount');
            $latestClaim = $claims->sortByDesc('claim_date')->first();
            $penaltyAmount = $latestClaim->penalty_amount ?? 0;
            $penaltyReason = $latestClaim->penalty_reason ?? '-';
            $vehicleType = strtolower($claims->first()->jenisKenderaan->name ?? 'kereta');

            $uniqueDates = $claims->pluck('claim_date')->unique()->count();
            $deduction = 40 * $uniqueDates;
            $claimableDistance = max(0, $totalMileage - $deduction);

            if ($vehicleType === 'motosikal' || $vehicleType === 'motorcycle') {
                $rateNote = "Motosikal – RM0.30/km";
            } else {
                if ($claimableDistance <= 500) {
                    $rateNote = "Kereta – RM0.55/km (≤500km)";
                } else {
                    $firstPartKm = 500;
                    $secondPartKm = $claimableDistance - 500;
                    $rateNote = "Kereta – 500km × RM0.55 + " . number_format($secondPartKm, 1) . "km × RM0.50";
                }
            }

            $finalTotal = $totalClaimAmount - $penaltyAmount;
        @endphp

        <div class="ui segment">
            <h4><i class="calculator icon"></i> Ringkasan Pengiraan (Mengikut Rekod Sistem)</h4>
            <table class="ui definition table">
                <tbody>
                    <tr><td><strong>Jumlah Jarak (Sebenar)</strong></td><td>{{ number_format($totalMileage, 1) }} KM</td></tr>
                    <tr><td><strong>Jumlah Hari Tuntutan</strong></td><td>{{ $uniqueDates }} hari</td></tr>
                    <tr><td><strong>Potongan 40KM/Hari</strong></td><td>40 × {{ $uniqueDates }} = {{ $deduction }} KM</td></tr>
                    <tr><td><strong>Jumlah Jarak Boleh Tuntut</strong></td><td>{{ number_format($claimableDistance, 1) }} KM</td></tr>
                    <tr><td><strong>Kadar Kiraan</strong></td><td>{{ $rateNote }}</td></tr>
                    <tr><td><strong>Jumlah Mileage (Dari Sistem)</strong></td><td>RM {{ number_format($totalClaimAmount, 2) }}</td></tr>
                    <tr><td><strong>Jumlah Tol</strong></td><td>RM {{ number_format($totalToll, 2) }}</td></tr>
                    <tr><td><strong>Jumlah Lain-lain</strong></td><td>RM {{ number_format($totalOthers, 2) }}</td></tr>
                    <tr><td><strong>Penalti</strong></td><td>RM {{ number_format($penaltyAmount, 2) }} ({{ $penaltyReason }})</td></tr>
                    <tr><td><strong><span style="color:#21ba45;">Jumlah Akhir</span></strong></td><td><strong>RM {{ number_format($finalTotal, 2) }}</strong></td></tr>
                </tbody>
            </table>
        </div>
    @endif

</div>

{{-- Reject Reason Modal --}}
<div class="ui small modal" id="rejectModal">
    <div class="header">Sebab Penolakan</div>
    <div class="content">
        <form id="rejectForm" method="POST">
            @csrf
            <input type="hidden" name="project_id" id="rejectProjectId">
            <input type="hidden" name="user_id" id="rejectUserId">
            <input type="hidden" name="month" id="rejectMonth">

            <div class="ui form">
                <div class="field required">
                    <label>Sebab:</label>
                    <textarea name="reject_reason" id="rejectReason" rows="3" required></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="actions">
        <div class="ui cancel button">Batal</div>
        <button type="submit" form="rejectForm" class="ui red button">Hantar Penolakan</button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('.reject-single-btn').click(function(){
    $('#rejectForm').attr('action', "{{ route('mileage::projectDirector.rejectClaim', ':id') }}".replace(':id', $(this).data('claim-id')));
    $('#rejectProjectId').val($(this).data('project'));
    $('#rejectUserId').val($(this).data('user'));
    $('#rejectMonth').val($(this).data('month'));
    $('#rejectReason').val('');
    $('#rejectModal').modal('show');
});

$('.reject-btn').click(function(){
    $('#rejectForm').attr('action', "{{ route('mileage::projectDirector.rejectMonth') }}");
    $('#rejectProjectId').val($(this).data('project'));
    $('#rejectUserId').val($(this).data('user'));
    $('#rejectMonth').val($(this).data('month'));
    $('#rejectReason').val('');
    $('#rejectModal').modal('show');
});
</script>
@endsection