@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <div class="row">
                            <div class="col-6">
                                <h6>Dashboard MSJ - Shipping</h6>
                            </div>
                            <div class="col-6" style="text-align: right;">
                                <h6>{{ date('j F Y', strtotime(date('Y-m-d'))) }} | <span id="waktu">00:00:00 WIB</span></h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <div class="row">
                            <h5 style="text-align: center;">ALL LOADING</h5>
                            <div class="col-4">
                                <div class="numbers" style="text-align: center;">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Plan SO</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $plan_so }} KG
                                    </h5>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="numbers" style="text-align: center;">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Plan Delivery</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $total_tonase_plan }} KG
                                    </h5>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="numbers" style="text-align: center;">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Actual Delivery</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $total_tonase_actual }} KG
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header mx-2 pb-0 mx-auto">
                        <img alt="img-blur-shadow" src="{{ URL::to('/storage/logo_small.png') }}"
                            class="img-fluid d-block shadow border-radius-xl">
                    </div>
                    <div class="card-body pt-0 text-center">
                        <span class="text-xs">Loading A</span>
                        <hr class="horizontal dark my-1">
                        <a href="{{ URL::to('/truckloada/MSJloadingA!') }}" class="btn btn-outline-primary btn-sm mb-0" target="_blank">View</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header mx-2 pb-0 mx-auto">
                        <img alt="img-blur-shadow" src="{{ URL::to('/storage/logo_small.png') }}"
                            class="img-fluid d-block shadow border-radius-xl">
                    </div>
                    <div class="card-body pt-0 text-center">
                        <span class="text-xs">Loading C</span>
                        <hr class="horizontal dark my-1">
                        <a href="{{ URL::to('/truckloadc/MSJloadingC!') }}" class="btn btn-outline-primary btn-sm mb-0" target="_blank">View</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header mx-2 pb-0 mx-auto">
                        <img alt="img-blur-shadow" src="{{ URL::to('/storage/logo_small.png') }}"
                            class="img-fluid d-block shadow border-radius-xl">
                    </div>
                    <div class="card-body pt-0 text-center">
                        <span class="text-xs">Loading E</span>
                        <hr class="horizontal dark my-1">
                        <a href="{{ URL::to('/truckloade/MSJloadingE!') }}" class="btn btn-outline-primary btn-sm mb-0" target="_blank">View</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tonase Plan</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $tonase_plan_A }} KG
                                    </h5>
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tonase Actual</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $tonase_actual_A }} KG
                                    </h5>
                                </div>
                            </div>
                            <div class="col-4 text-end" style="align-content: center;">
                                <div class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                    <i class="fas fa-balance-scale text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tonase Plan</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $tonase_plan_C }} KG
                                    </h5>
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tonase Actual</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $tonase_actual_C }} KG
                                    </h5>
                                </div>
                            </div>
                            <div class="col-4 text-end" style="align-content: center;">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                    <i class="fas fa-balance-scale text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tonase Plan</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $tonase_plan_E }} KG
                                    </h5>
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tonase Actual</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $tonase_actual_E }} KG
                                    </h5>
                                </div>
                            </div>
                            <div class="col-4 text-end" style="align-content: center;">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                    <i class="fas fa-balance-scale text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th style="font-size: 15px;">Status</th>
                                    <th style="text-align: center; font-size: 15px;">Jumlah</th>
                                    <th style="text-align: center; font-size: 15px;">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $total = 0;
                                    $persen = 0;
                                @endphp
                                @foreach ($infoA as $item)
                                    <tr>
                                        <td>
                                            @if ($item->truck_status == 'Advanced')
                                                <span class="badge" style="background-color: dodgerblue; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @elseif ($item->truck_status == 'On Time')
                                                <span class="badge" style="background-color: green; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @elseif ($item->truck_status == 'Delayed')
                                                <span class="badge" style="background-color: red; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @endif
                                        </td>
                                        <td style="text-align: right; font-size: 12px;">{{ $item->jumlah }}</td>
                                        <td style="text-align: right; font-size: 12px;">{{ $item->percentage }}%</td>
                                    </tr>
                                    @php
                                        $total += $item->jumlah;
                                        $persen += $item->percentage;
                                    @endphp
                                @endforeach
                                    <tr>
                                        <td><span class="badge" style="background-color: black; font-size: 12px;">Total</span></td>
                                        <td style="text-align: right; font-size: 12px;">{{ $total }}</td>
                                        <td style="text-align: right; font-size: 12px;">{{ $persen }}%</td>
                                    </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body p-3">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th style="font-size: 15px;">Status</th>
                                    <th style="text-align: center; font-size: 15px;">Jumlah</th>
                                    <th style="text-align: center; font-size: 15px;">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $total = 0;
                                    $persen = 0;
                                @endphp
                                @foreach ($infoC as $item)
                                    <tr>
                                        <td>
                                            @if ($item->truck_status == 'Advanced')
                                                <span class="badge" style="background-color: dodgerblue; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @elseif ($item->truck_status == 'On Time')
                                                <span class="badge" style="background-color: green; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @elseif ($item->truck_status == 'Delayed')
                                                <span class="badge" style="background-color: red; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @endif
                                        </td>
                                        <td style="text-align: right; font-size: 12px;">{{ $item->jumlah }}</td>
                                        <td style="text-align: right; font-size: 12px;">{{ $item->percentage }}%</td>
                                    </tr>
                                    @php
                                        $total += $item->jumlah;
                                        $persen += $item->percentage;
                                    @endphp
                                @endforeach
                                    <tr>
                                        <td><span class="badge" style="background-color: black; font-size: 12px;">Total</span></td>
                                        <td style="text-align: right; font-size: 12px;">{{ $total }}</td>
                                        <td style="text-align: right; font-size: 12px;">{{ $persen }}%</td>
                                    </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body p-3">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th style="font-size: 15px;">Status</th>
                                    <th style="text-align: center; font-size: 15px;">Jumlah</th>
                                    <th style="text-align: center; font-size: 15px;">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $total = 0;
                                    $persen = 0;
                                @endphp
                                @foreach ($infoE as $item)
                                    <tr>
                                        <td>
                                            @if ($item->truck_status == 'Advanced')
                                                <span class="badge" style="background-color: dodgerblue; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @elseif ($item->truck_status == 'On Time')
                                                <span class="badge" style="background-color: green; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @elseif ($item->truck_status == 'Delayed')
                                                <span class="badge" style="background-color: red; font-size: 12px;">{{ $item->truck_status }}</span>
                                            @endif
                                        </td>
                                        <td style="text-align: right; font-size: 12px;">{{ $item->jumlah }}</td>
                                        <td style="text-align: right; font-size: 12px;">{{ $item->percentage }}%</td>
                                    </tr>
                                    @php
                                        $total += $item->jumlah;
                                        $persen += $item->percentage;
                                    @endphp
                                @endforeach
                                    <tr>
                                        <td><span class="badge" style="background-color: black; font-size: 12px;">Total</span></td>
                                        <td style="text-align: right; font-size: 12px;">{{ $total }}</td>
                                        <td style="text-align: right; font-size: 12px;">{{ $persen }}%</td>
                                    </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function tampilkanWaktu() {
            const sekarang = new Date();
            document.getElementById('waktu').textContent = 
                `${sekarang.getHours().toString().padStart(2, '0')}:${sekarang.getMinutes().toString().padStart(2, '0')}:${sekarang.getSeconds().toString().padStart(2, '0')} WIB`;
        }
        // Jalankan fungsi ketika halaman dimuat
        window.onload = () => {
            // Perbarui waktu setiap detik untuk ditampilkan
            setInterval(tampilkanWaktu, 1000);
        };
    </script>
@endpush