@extends('layouts.app')

@section('content')
<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
    <main>

        <div class="pt-6 px-4">

            <breadcrumb
                :items="[{ 'title': 'Laporan Keseluruhan', 'icon': 'fas fa-users', 'url': '{{ route('reports') }}' }, { 'title': 'Laporan Aging', 'icon': 'fas fa-users' }]">
            </breadcrumb>

            <div class="container">
                <div class="flex w-full">
                    <div class="w-full xl:w-4/5 2xl:w-5/6 p-12 mx-auto">
                        <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">
                            <a href="/reports" class="router-link-active">
                                <i class="fas fa-backspace text-white"></i>
                            </a>
                            <span class="text-center mx-auto text-white font-bold">Laporan Aging Penebusan</span>
                        </div>

                        <form id="formAging" method="GET" action="{{ route('reports.agingtebus.show') }}">

                            <div class="rounded bg-white shadow p-6">
                            <div class="pb-6">

                                <label class="font-semibold text-gray-700 block pb-3">
                                    Pilih Tarikh
                                </label>

                                <div class="flex flex-wrap lg:flex-nowrap items-end gap-4">

                                    {{-- Dari --}}
                                    <div>
                                        <label class="text-gray-600 block pb-1">
                                            Dari
                                        </label>

                                        <input
                                            id="startDate"
                                            name="startDate"
                                            type="date"
                                            value="{{ request()->startDate ?? $startDate ?? '' }}"
                                            class="border border-yellow-600 rounded-lg px-4 py-3 bg-white text-gray-800 focus:ring-2 focus:ring-yellow-500 focus:outline-none transition-all duration-300 hover:border-yellow-500"
                                        />
                                    </div>

                                    {{-- Hingga --}}
                                    <div>
                                        <label class="text-gray-600 block pb-1">
                                            Hingga
                                        </label>

                                        <input
                                            id="endDate"
                                            name="endDate"
                                            type="date"
                                            value="{{ request()->endDate ?? $endDate ?? '' }}"
                                            class="border border-yellow-600 rounded-lg px-4 py-3 bg-white text-gray-800 focus:ring-2 focus:ring-yellow-500 focus:outline-none transition-all duration-300 hover:border-yellow-500"
                                        />
                                    </div>

                                    <input type="hidden" name="action" id="formAction" value="search">

                                    {{-- Button Group --}}
                                <div class="flex gap-3 w-full md:w-auto">

                                    {{-- Button Group --}}
                                    <div class="flex gap-3">

                                        {{-- Search --}}
                                        <button
                                            type="submit"
                                            onclick="setAction('search')"
                                            class="border border-yellow-600 text-yellow-600 font-montserrat py-3 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 whitespace-nowrap">

                                            <i class="fas fa-magnifying-glass mr-2"></i>
                                            Search
                                        </button>

                                        {{-- Excel --}}
                                        <button
                                            type="submit"
                                            onclick="setAction('excel')"
                                            class="border border-yellow-600 text-yellow-600 py-3 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 whitespace-nowrap">

                                            <i class="fas fa-file-excel mr-2"></i>
                                            Excel
                                        </button>

                                    </div>

                                </div>

                                </div>

                            </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
           
            <div kodcaw="operasi">
                <div>
                    <!---->
                    <!---->
                </div>
                <div>
                    <!---->
                    <!---->
                </div>
                <div class="flex justify-between mb-2">

                </div>

                @if(empty($aging))
                    <div class="alert alert-warning">
                        Tiada data dijumpai untuk tarikh {{ $endDate }}.
                    </div>
                @else
                    <!-- <h1>Summary Report</h1> -->

                    <div class="overflow-x-auto">
                        <!-- Create a table with horizontal headers -->
                        <table class="table-auto w-full border-collapse border border-gray-200">
                        <thead class="bg-yellow-500 text-white">
                        <tr>
                            <th class="px-4 py-2 border">Bil.</th> <!-- Add Bilangan here -->
                            <th class="px-4 py-2 border">Cawangan</th>
                            @foreach ($aging[0]['summary_by_tempoh'] as $summary)
                                <th class="px-4 py-2 border" colspan="2">{{ $summary['label'] }}</th> <!-- Merge Tempoh with Bilangan and Jumlah -->
                            @endforeach
                            <th class="px-4 py-2 border" colspan="2">Keseluruhan</th>
                        </tr>
                        <tr>
                            <th class="px-4 py-2 border"> </th> <!-- Empty for Bilangan Row -->
                            <th class="px-4 py-2 border"> </th> <!-- Empty for Cawangan Row -->
                            @foreach ($aging[0]['summary_by_tempoh'] as $summary)
                                <th class="px-4 py-2 border">Bil</th> <!-- Bilangan Column Title -->
                                <th class="px-4 py-2 border">RM</th> <!-- Jumlah Column Title -->
                            @endforeach
                            <th class="px-4 py-2 border">Bil</th>
                            <th class="px-4 py-2 border">RM</th>
                        </tr>
                    </thead>

                    <tbody>
                            @php
                                $counter = 1;

                                $totalGrandCountByTempoh = array_fill(
                                    0,
                                    count($aging[0]['summary_by_tempoh']),
                                    0
                                );

                                $totalGrandKeuntunganByTempoh = array_fill(
                                    0,
                                    count($aging[0]['summary_by_tempoh']),
                                    0
                                );
                            @endphp

                            @foreach ($aging as $branch)

                                @php
                                    $totalCount = 0;
                                    $totalKeuntungan = 0;
                                @endphp

                                <tr>
                                    <td class="px-4 py-2 border">
                                        {{ $counter++ }}
                                    </td>

                                    <td class="px-4 py-2 border font-bold">
                                        {{ $branch['cawangan'] }}
                                    </td>

                                    @foreach ($branch['summary_by_tempoh'] as $index => $summary)

                                        {{-- Bil --}}
                                        <td class="px-4 py-2 border">
                                            {{ $summary['count'] }}
                                        </td>

                                        {{-- RM --}}
                                        <td class="px-4 py-2 border">
                                            {{ number_format($summary['sum_bayaran_keuntungan_rebet'], 2) }}
                                        </td>

                                        @php
                                            // Total per cawangan
                                            $totalCount += $summary['count'];

                                            $totalKeuntungan +=
                                                $summary['sum_bayaran_keuntungan_rebet'];

                                            // Grand total
                                            $totalGrandCountByTempoh[$index] +=
                                                $summary['count'];

                                            $totalGrandKeuntunganByTempoh[$index] +=
                                                $summary['sum_bayaran_keuntungan_rebet'];
                                        @endphp

                                    @endforeach

                                    {{-- Keseluruhan --}}
                                    <td class="px-4 py-2 border">
                                        {{ $totalCount }}
                                    </td>

                                    <td class="px-4 py-2 border">
                                        {{ number_format($totalKeuntungan, 2) }}
                                    </td>
                                </tr>

                            @endforeach
                        </tbody>

                        <tfoot>
                            <tr>

                                <td class="px-4 py-2 border font-bold" colspan="2">
                                    Total
                                </td>

                                @foreach ($totalGrandCountByTempoh as $index => $grandCount)

                                    {{-- Grand total bil --}}
                                    <td class="px-4 py-2 border">
                                        {{ $grandCount }}
                                    </td>

                                    {{-- Grand total RM --}}
                                    <td class="px-4 py-2 border">
                                        {{ number_format($totalGrandKeuntunganByTempoh[$index], 2) }}
                                    </td>

                                @endforeach

                                {{-- Total keseluruhan --}}
                                <td class="px-4 py-2 border">
                                    {{ array_sum($totalGrandCountByTempoh) }}
                                </td>

                                <td class="px-4 py-2 border">
                                    {{ number_format(array_sum($totalGrandKeuntunganByTempoh), 2) }}
                                </td>

                            </tr>
                        </tfoot>
                        </table>
                    </div>

                @endif
            </div>
        </div>
    </main>
    @include('layouts.footer')

</div>
@endsection

<!-- JavaScript to Change Action -->
<script>
    function setAction(action) {
        document.getElementById('formAction').value = action;
        document.getElementById('formAging').submit(); 
    }
</script>