@extends('layouts.app')

@section('content')
    <div class="container mx-auto mt-10">
        @if (session('success'))
            <div class="bg-green-100 text-green-800 px-4 py-3 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif
        <h2 class="text-2xl font-bold mb-6">Senarai Batch Simulasi Untuk Tahun: {{ $year }}</h2>

        <div class="flex justify-end items-center mb-4">
            <h3 class="text-lg font-semibold">Jumlah Baki Lelong:
                <span id="total-baki" class="text-yellow-600">RM 0.00</span>
            </h3>
        </div>

        <form id="proses-wtd-form" method="POST" action="{{ route('wtd.simulasi.pengesahan') }}">
            @csrf
            <div class="overflow-x-auto">
                <table class="table-auto w-full border-collapse border border-gray-300">
                    <thead>
                        <tr class="bg-yellow-600 text-white">
                            <th class="border border-gray-200 px-4 py-2">#</th>
                            <th class="border border-gray-200 px-4 py-2">Bulan</th>
                            <th class="border border-gray-200 px-4 py-2">Jumlah SAG</th>
                            <th class="border border-gray-200 px-4 py-2">Pembiayaan</th>
                            <th class="border border-gray-200 px-4 py-2">Baki</th>
                            <th class="border border-gray-200 px-4 py-2 text-center">
                                <input id="select-all" type="checkbox" class="cursor-pointer">
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @dd($senaraiSimulasi);
                        @foreach ($senaraiSimulasi as $index => $item)
                            <input type="hidden" name="tahun" value="{{ $year }}"/>
                            <tr class="{{ $index % 2 == 0 ? 'bg-gray-100' : 'bg-white' }}">
                                <td class="border border-gray-300 px-4 py-2 text-center">{{ $index + 1 }}</td>

                                <td class="border border-gray-300 px-4 py-2">
                                    <a href="{{ route('wtd.simulasi.rekod', [
                                        'month' => $item['bulan'],
                                        'year' => $year,
                                        'kodcaw' => $item['kodcaw'],
                                    ]) }}"
                                        class="text-yellow-600 hover:underline">
                                        {{ $item['bulan'] }}
                                    </a>
                                    <input type="hidden" name="data[{{ $index }}][kodcaw]"
                                        value="{{ $item['kodcaw'] }}">

                                    <input type="hidden" name="data[{{ $index }}][bulan]"
                                        value="{{ $item['bulan'] }}">
                                </td>
                                <td class="border border-gray-300 px-4 py-2 text-center">
                                    {{ $item['jumlah_norujukan'] ?? 0 }}
                                    <input type="hidden" name="data[{{ $index }}][jumlah_norujukan]"
                                        value="{{ $item['jumlah_norujukan'] }}">
                                </td>
                                <td class="border border-gray-300 px-4 py-2">
                                    {{ number_format($item['pembiayaan'], 2) }}
                                    <input type="hidden" name="data[{{ $index }}][pembiayaan]"
                                        value="{{ $item['pembiayaan'] }}">
                                </td>
                                <td class="border border-gray-300 px-4 py-2" data-baki="{{ $item['baki'] }}">
                                    {{ number_format($item['baki'], 2) }}
                                    <input type="hidden" name="data[{{ $index }}][baki]"
                                        value="{{ $item['baki'] }}">
                                </td>
                                <td class="border border-gray-300 px-4 py-2 text-center">
                                    <input type="checkbox" class="row-checkbox" data-baki="{{ $item['baki'] }}"
                                        name="data[{{ $index }}][selected]">
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="flex justify-end mt-4">
                <button type="submit" id="proses-wtd-btn"
                    class="bg-yellow-600 text-white px-6 py-2 rounded cursor-pointer hover:bg-yellow-700">
                    Jana Simulasi
                </button>
            </div>
        </form>
    </div>
    @include('layouts.footer')
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectAllCheckbox = document.getElementById('select-all');
        const rowCheckboxes = document.querySelectorAll('.row-checkbox');
        const totalBakiElement = document.getElementById('total-baki');

        function formatCurrency(amount) {
            return `RM ${amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`;
        }

        function calculateTotalBaki() {
            let total = 0;
            rowCheckboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    total += parseFloat(checkbox.dataset.baki);
                }
            });
            totalBakiElement.textContent = formatCurrency(total);
        }

        selectAllCheckbox.addEventListener('change', function() {
            rowCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            calculateTotalBaki();
        });

        rowCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (!this.checked) {
                    selectAllCheckbox.checked = false;
                }
                if (Array.from(rowCheckboxes).every(cb => cb.checked)) {
                    selectAllCheckbox.checked = true;
                }
                calculateTotalBaki();
            });
        });
    });
</script>