@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': 'PetiBesi', 'icon': 'fas fa-users' }]">
            </breadcrumb>

            <div class="container">
                <div class="flex w-full">
                    <div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">
                        <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">
                            <a href="{{ route('reports') }}" class="router-link-active">
                                <i class="fas fa-backspace text-white"></i>
                            </a>
                            <span class="text-center mx-auto text-white font-bold">Peti Besi</span>
                        </div>
                        <form method="get" id="formpetibesi" action="{{ route('reports.petibesi.index') }}">
                            <input type="hidden" id="formAction" name="action" value="search"> <!-- Hidden field to store action -->
                            <div class="rounded bg-white shadow p-6">
                                <div class="pb-6">
                                    <label class="font-semibold text-gray-700 block pb-1">Tarikh</label>
                                    <div class="flex space-x-2">
                                        <input name="endDate" type="date"
                                            value="{{ request()->endDate ?? $endDate }}"
                                            class="border border-2 rounded px-4 py-2 w-full" placeholder="Hingga">

                                        <button type="submit" onclick="setAction('search')" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 ml-5">
                                            <i class="fas fa-magnifying-glass mr-2"></i> Search
                                        </button>

                                        <button type="submit" onclick="setAction('excel')" class="border border-yellow-600 text-yellow-600 py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 ml-2">
                                            <i class="fas fa-file-excel mr-2"></i> Excel
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

            <div kodcaw="operasi">
                <table class="min-w-full leading-normal">
                    <thead class="text-center">
                        <tr>
                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider">No</th>
                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider">Kod Cawangan</th>
                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider">Cawangan</th>
                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider">Nilai (RM)</th>
                            <!-- <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider">Action</th> -->
                        </tr>
                    </thead>
                    @php
                        $totalbakieod = 0;     // LAMA

                        $totalAllbakieod = 0;   // SEMUA
                    @endphp
                    <tbody>
                        @forelse ($petibesi as $outs)
                        @php
                            $totalbakieod += $outs['bakieod'];

                            $totalAllbakieod += $outs['bakieod'];
                        @endphp
                            <tr>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $loop->iteration }}</td>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $outs['kodcaw'] }}</td>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $outs['details_caw'] }}</td>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ number_format($outs['bakieod'],2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center text-gray-500">Data not available</td>
                            </tr>
                        @endforelse
                        <tr class="font-semibold bg-gray-50">
                            <td colspan="3" class="px-5 py-5 border-b border-gray-200 text-sm">Jumlah Keseluruhan</td>
                            <td class="px-5 py-5 border-b border-gray-200 text-sm">{{ number_format($totalAllbakieod ,2)}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
    @include('layouts.footer')
</div>
@endsection

<script>
    function setAction(action) {
        document.getElementById('formAction').value = action;
        document.getElementById('formpetibesi').submit(); 
    }
</script>