@extends('layouts.admin')

@section('content')

{{-- Include Font Awesome for icons --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

<style>
    /* Base card styles */
    .small-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 0.75rem;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: #fff;
        overflow: hidden;
        word-break: break-word;
    }

    .small-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }

    .small-box h4 {
        font-weight: 600;
        margin-bottom: 0.8rem;
        color: #1f2d3d;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.1rem;
    }

    /* Professional 2-column line design */
    .small-box .line {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2 columns */
        align-items: center;
        padding: 4px 0;
        font-weight: 500;
        font-size: 0.95rem;
        color: #3b3b3b;
    }

    .small-box .line span:first-child {
        text-align: left;
        color: #007bff;
        font-weight: 600;
    }

    .small-box .line span:last-child {
        text-align: right;
        color: #333;
    }

    /* Total line */
    .small-box .line.total {
        font-weight: 700;
        border-top: 1px solid #dee2e6;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }

    /* Progress bars */
    .progress-wrapper {
        width: 100%;
        background: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
        height: 8px;
        margin: 8px 0;
    }

    .progress-bar {
        height: 8px;
        border-radius: 4px;
    }

    /* Card background variants */
    .bg-info-soft {
        background-color: #e3f2fd !important;
    }

    .bg-success-soft {
        background-color: #e6f4ea !important;
    }

    .bg-warning-soft {
        background-color: #fff4e5 !important;
    }

    .card-header-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        /* Allow wrap on small screens */
        padding: 10px 15px;
    }

    .card-header-custom h3 {
        margin: 0;
        font-size: 18px;
    }

    .card-header-custom p {
        margin: 0;
        font-size: 13px;
        color: #666;
    }

    /* Metric icon */
    .metric-icon {
        font-size: 1.3rem;
        color: #007bff;
    }

    /* Dashboard grid */
    .dashboard-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    @media (max-width: 992px) {
        .dashboard-row {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        .dashboard-row {
            grid-template-columns: 1fr;
        }

        .small-box .line {
            grid-template-columns: 1fr;
            gap: 2px;
        }

        .small-box .line span:last-child {
            text-align: left;
        }

        .small-box h4 {
            font-size: 1rem;
        }

        .small-box {
            padding: 0.8rem;
        }
    }
</style>

<section class="content mt-4">

    <div>
        @if( isset($expiringSoonCount) && $expiringSoonCount > 0)
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>Attention!</strong> {{ $expiringSoonCount }} license(s) are expiring soon.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif
    </div>
    <div class="container-fluid">

        @php
        $outlet_id = Auth::user()->outlet_id;
        $username = Auth::user()->username;
        @endphp



        @if(!in_array($username, ['AdminOne', 'store', 'kitchen']))
        <div class="card-header-custom">
            <h3 class="card-title">Dashboard</h3>
            <p>{{ $toDate ?? '' }}</p>
        </div>
        @endif

        <div class="dashboard-row">

            @if($outlet_id == 1)

            {{-- Daily Sales --}}
            <div>
                <div class="small-box bg-info-soft">
                    <h4><i class="fa-solid fa-calendar-day metric-icon"></i> Daily Sale</h4>
                    @php $totalTodaySale = 0; $totalTodayDiscount = 0; @endphp

                    {{-- Header --}}
                    <div class="line">
                        <span>Outlet</span>
                        <span>Dis.Amt / Total Amt</span>
                    </div>

                    @foreach($allData as $data)
                    <div class="line">
                        <span>{{ $data['outlet']->name ?? $data['outlet']->outlet_name }}</span>
                        <span>{{ $data['todaySale']->totalDis ?? '0.00' }} / {{ $data['todaySale']->total ?? '0.00' }}</span>
                    </div>
                    @php
                    $totalTodaySale += $data['todaySale']->total ?? 0;
                    $totalTodayDiscount += $data['todaySale']->totalDis ?? 0;
                    @endphp
                    @endforeach

                    <div class="line total">
                        <span>Total</span>
                        <span>{{$totalTodayDiscount}} / {{$totalTodaySale ?? '0.00'}}</span>
                    </div>

                    <div class="progress-wrapper">
                        <div class="progress-bar bg-info" style="width: {{ min($totalTodaySale/1000*100,100) }}%"></div>
                    </div>
                </div>
            </div>

            {{-- Monthly Sales --}}
            <div>
                <div class="small-box bg-success-soft">
                    <h4><i class="fa-solid fa-calendar-day metric-icon"></i> Monthly Sale</h4>
                    @php $totalMonthlySale = 0; $totalMonthlyDiscount = 0; @endphp

                    <div class="line">
                        <span>Outlet</span>
                        <span>Dis.Amt / Total Amt</span>
                    </div>

                    @foreach($allData as $data)
                    <div class="line">
                        <span>{{ $data['outlet']->name ?? $data['outlet']->outlet_name }}</span>
                        <span>{{ $data['thisMonth']->totalDis ?? '0.00' }} / {{ $data['thisMonth']->total ?? '0.00' }}</span>
                    </div>
                    @php
                    $totalMonthlySale += $data['thisMonth']->total ?? 0;
                    $totalMonthlyDiscount += $data['thisMonth']->totalDis ?? 0;
                    @endphp
                    @endforeach

                    <div class="line total">
                        <span>Total</span>
                        <span>{{$totalMonthlyDiscount}} / {{$totalMonthlySale ?? '0.00'}}</span>
                    </div>

                    <div class="progress-wrapper">
                        <div class="progress-bar bg-success" style="width: {{ min($totalMonthlySale/10000*100,100) }}%"></div>
                    </div>
                </div>
            </div>

            {{-- Payroll --}}
            <!-- <div>
                <div class="small-box bg-warning-soft">
                    <h4><i class="fa-solid fa-user-group metric-icon"></i> Payroll</h4>

                    <div class="line">
                        <span>Administration</span>
                        <span>{{ $administration }}</span>
                    </div>
                    <div class="line">
                        <span>F&B Production</span>
                        <span>{{ $FBProduction }}</span>
                    </div>
                    <div class="line">
                        <span>F&B Service</span>
                        <span>{{ $FBService }}</span>
                    </div>
                    <div class="line total">
                        <span>Total Employees</span>
                        <span>{{ $administration + $FBProduction + $FBService }}</span>
                    </div>
                    <div class="line">
                        <span>Last Month Salary</span>
                        <span>{{ $lastMonthSalary }}</span>
                    </div>

                    <div class="progress-wrapper">
                        <div class="progress-bar bg-warning" style="width: {{ min(($administration + $FBProduction + $FBService)/50*100,100) }}%"></div>
                    </div>
                </div>
            </div> -->

            {{-- License Update --}}
            <!-- <div>
                <div class="small-box bg-info-soft">
                    <h4><i class="fa-solid fa-key metric-icon"></i> License Update</h4>

                    <div class="line">
                        <span>Total License</span>
                        <span>{{$license ?? 0}}</span>
                    </div>
                    <div class="line">
                        <span>Updated License</span>
                        <span>{{$updatedThisMonth ?? 0}} </span>
                    </div>
                    <div class="line total">
                        <span>Pending License</span>
                        <span>{{$expiringSoonCount ?? 0}}</span>
                    </div>

                    <div class="progress-wrapper">
                        <div class="progress-bar bg-info" style="width: {{ min($license * 100, 100) }}%"></div>
                    </div>
                </div>
            </div> -->

            {{-- Report --}}
            <!-- <div>
                <div class="small-box bg-success-soft">
                    <h4><i class="fa-solid fa-chart-line metric-icon"></i> Report</h4>

                    <div class="line">
                        <span>Total Sale</span>
                        <span>{{ $totalMonthlySale }}</span>
                    </div>
                    <div class="line">
                        <span>Purchase</span>
                        <span>{{$totalPurchase}} ({{ number_format(($totalPurchase / max($totalMonthlySale,1))*100,2) }}%)</span>
                    </div>
                    <div class="line">
                        <span>Expenditure</span>
                        <span>{{$totalExpenditure}} ({{ number_format(($totalExpenditure / max($totalMonthlySale,1))*100,2) }}%)</span>
                    </div>

                    <div class="progress-wrapper">
                        <div class="progress-bar bg-danger" style="width: {{ min(($totalPurchase / max($totalMonthlySale,1))*100,100) }}%"></div>
                        <div class="progress-bar bg-warning" style="width: {{ min(($totalExpenditure / max($totalMonthlySale,1))*100,100) }}%"></div>
                    </div>
                </div>
            </div> -->

            @endif

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

@endsection