@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': 'Debug Proses WTD', 'icon': 'fas fa-users', 'url': '{{ route('wtd.debugWTD.home') }}' },
                        { 'title': 'Data WTD', '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=""
                                    class="router-link-active"><i class="fas fa-backspace text-white"></i></a> <span
                                    class="text-center mx-auto text-white font-bold">Selesai WTD</span>
                            </div>
                            <form method="get" id="formwtd" action="{{ route('wtd.debugWTD.trail') }}">
                                <div class="rounded bg-white shadow p-6">
                                    <div class="pb-6"><label for="username"
                                            class="font-semibold text-gray-700 block pb-1">Tarikh</label>
                                        <div class="flex">
                                            <span
                                                class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap"
                                                style="background-color: rgb(249, 250, 251);">Mula</span>
                                            <input id="tarikhmula" name="startDate" type="date"
                                                value="{{ request()->startDate ?? $startDate }}"
                                                class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2">
                                            <span
                                                class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap"
                                                style="background-color: rgb(249, 250, 251);">Hingga</span>
                                            <input id="tarikhhingga" name="endDate" type="date"
                                                value="{{ request()->endDate ?? $endDate }}"
                                                class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2">
                                            <button
                                                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>
                                        </div>

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


                    </div>

                    <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-left 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-left 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-left 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-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Table Serahbaki
                                </th>
                                <th
                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Table Tuntutbaki
                                </th>
                                <th
                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Table WTD
                                </th>                                
                                <th
                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Action
                                </th>
                            </tr>
                        </thead>

                        @php
                            $totalserahbaki = 0; 
                            $totaltuntutbaki = 0; 
                            $totalwtd = 0;                           
                        @endphp

                        <tbody>
                            
                            @forelse ($debugwtd ?? [] as $dwtd)
                                @php
                                    // Total
                                    $totalserahbaki += $dwtd['serahb'] ?? 0;
                                    $totaltuntutbaki += $dwtd['tuntutb'] ?? 0;
                                    $totalwtd += $dwtd['twtd'] ?? 0;
                                @endphp
                                <tr>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <div class="ml-3">{{ $loop->iteration }}</div>
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <div class="ml-3">{{ $dwtd['kodcaw'] }}</div>
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <div class="ml-3">{{ $dwtd['details_caw'] }}</div>
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <div class="ml-3 text-right">{{ number_format($dwtd['serahb'], 2) }}                                   
                                        @if($dwtd['serahb'] == $dwtd['tuntutb'] && $dwtd['serahb'] == $dwtd['twtd'])
                                            <span class="inline-block w-3 h-3 bg-green-500 rounded-full"></span>
                                        @else
                                            <span class="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
                                        @endif                                                                        
                                        </div>
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <div class="ml-3 text-right">{{ number_format($dwtd['tuntutb'], 2) }}                                 
                                        @if($dwtd['serahb'] == $dwtd['tuntutb'] && $dwtd['serahb'] == $dwtd['twtd'])
                                            <span class="inline-block w-3 h-3 bg-green-500 rounded-full"></span>
                                        @else
                                            <span class="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
                                        @endif
                                        </div>
                                    </td>
                                     <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <div class="ml-3 text-right">{{ number_format($dwtd['twtd'], 2) }}
                                        @if($dwtd['serahb'] == $dwtd['tuntutb'] && $dwtd['serahb'] == $dwtd['twtd'])
                                            <span class="inline-block w-3 h-3 bg-green-500 rounded-full"></span>
                                        @else
                                            <span class="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
                                        @endif
                                        </div>
                                    </td>
                

                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <div class="ml-3 text-center">
                                            
                                            @if($dwtd['serahb'] == $dwtd['tuntutb'] && $dwtd['serahb'] == $dwtd['twtd'])
                                            <span class="inline-block w-3 h-3"></span>
                                            @else
                                            <span style="color: red;">Perlu Semakan</span>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="11"
                                        class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
                                        Data not available
                                    </td>
                                </tr>
                            @endforelse

                            <tr>
                                <td colspan="3" class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                    Jumlah Keseluruhan
                                </td>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
                                  {{ number_format($totalserahbaki, 2) }} 
                                </td>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
                                  {{ number_format($totaltuntutbaki, 2) }}  
                                </td>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
                                  {{ number_format($totalwtd, 2) }}
                                </td>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right"></td>
                            </tr>
                        </tbody>

                    </table>

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