@extends('partial.mobile')
@php
$userRole = auth()->user()->roles[0]->id;
$page_name = 'Jantri';

// JSON Data (Simulated)

$jantriData = $transactionsdata['transaction'] ?? [];

// Step 1: Generate all numbers (ensuring full 120 entries)
$groupA = []; // 1 - 100
$groupB = []; // 000 - 999
$groupC = []; // 0000 - 9999

// Generate 1 to 100
for ($i = 1; $i <= 100; $i++) {
    $groupA[] = ["Number" => $i, "Amount" => null];
}

// Generate 000 - 999 (3-digit)
for ($i = 0; $i <= 999; $i += 111) {
    $groupB[] = ["Number" => str_pad($i, 3, "0", STR_PAD_LEFT), "Amount" => null];
}

// Generate 0000 - 9999 (4-digit)
for ($i = 0; $i <= 9999; $i += 1111) {
    $groupC[] = ["Number" => str_pad($i, 4, "0", STR_PAD_LEFT), "Amount" => null];
}

// Step 2: Merge existing data into the correct group
foreach ($jantriData as $entry) {
    if ($entry["Number"] <= 100) {
        // Update Group A (1-100)
        foreach ($groupA as &$num) {
            if ($num["Number"] == $entry["Number"]) {
                $num["Amount"] = $entry["Amount"] ?? 0;
            }
        }
    } elseif (strlen($entry["Number"]) == 3) {
        // Update Group B (000-999)
        foreach ($groupB as &$num) {
            if ($num["Number"] == $entry["Number"]) {
                $num["Amount"] = $entry["Amount"];
            }
        }
    } elseif (strlen($entry["Number"]) == 4) {
        // Update Group C (0000-9999)
        foreach ($groupC as &$num) {
            if ($num["Number"] == $entry["Number"]) {
                $num["Amount"] = $entry["Amount"];
            }
        }
    }
}

// Step 3: Sort each group separately
usort($groupA, function ($a, $b) {
    return intval($a["Number"]) - intval($b["Number"]);
});

usort($groupB, function ($a, $b) {
    return intval($a["Number"]) - intval($b["Number"]);
});

usort($groupC, function ($a, $b) {
    return intval($a["Number"]) - intval($b["Number"]);
});

// Step 4: Merge groups in the correct order
$fullJantriNumbers = array_merge($groupA, $groupB, $groupC);
@endphp
@include('partial.header')
@include('partial.loader')
<div class="container-fluid mobile-container special-mobile-container">
    <div class="main-container mobile-main-container">
        <div class="content-wrapper mobile-wrapper">
            @if (session('message'))
                <div class="alert alert-danger">{{ session('message') }}</div>
            @endif
            <div class="header-bar">
                <a href="/dashboard_mobile" class="back-button">&larr;</a>
                <h4 class="section-title">{{$shift_details->shift_name}} - {{ucfirst($jantri_type)}} Jantri</h4>
            </div>

            <!-- Jantri Grid -->
            <div class="jantri-grid">
                @php
                    $totalAmount = 0;
                @endphp
                @foreach ($fullJantriNumbers as $data)
                    <div class="jantri-box">
                        <span class="number">{{ $data['Number'] }}</span>
                        <span class="amount">{{ $data['Amount'] ? round($data['Amount']) : '-' }}</span>
                    </div>
                    @php
                        $totalAmount += round($data['Amount']) ?? 0;
                    @endphp
                @endforeach
            </div>


            <!-- Total Row -->
            <div class="total-bar">
                <span>Total</span>
                <span>{{$totalAmount}}/-</span>
            </div>
        </div>
    </div>
</div>

@section('style')
<style>
    .header-bar {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 10px;
        background: #007c70;
        color: white;
        font-size: 18px;
        font-weight: bold;
    }

    .back-button {
        font-size: 24px;
        color: white;
        margin-right: 10px;
        text-decoration: none;
        margin-top: -8px;
    }
    /* Jantri Grid */
    .jantri-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1px;
        overflow-y: auto;
    }

    /* Jantri Box */
    .jantri-box {
        position: relative;
        background: white;
        padding: 5px;
        text-align: right;
        border-radius: 0px;
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .jantri-box .number {
        position: absolute;
        top: 2px;
        left: 4px;
        font-size: 11px;
        color: #555;
    }

    .jantri-box .amount {
        font-size: 12px;
        font-weight: bold;
        color: #007c70;
    }



    /* Total Bar */
    .total-bar {
        background: #007c70;
        color: white;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-weight: bold;
        font-size: 18px;
        position: fixed;
        width: 100%;
        bottom: 0px;
    }
    .container-fluid.mobile-container.special-mobile-container {
        padding: 0px;
    }
    .content-wrapper.mobile-wrapper {
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-top: 0px;
    }
    .header {
        display: none;
    }
    body{
        background: #dee2ee;
    }
   
    
</style>
@endsection