@extends('layouts.app')
@section('title', 'Daily Orders Summary Calendar')

@section('content')
<div class="container-fluid py-4">

    <h2 class="fw-bold text-dark mb-4 text-center">
        Daily Orders – {{ date('F', mktime(0,0,0,$month,1)) }} {{ $year }}
    </h2>

    @php
        $prevMonth = $month == 1 ? 12 : $month - 1;
        $prevYear  = $month == 1 ? $year - 1 : $year;

        $nextMonth = $month == 12 ? 1 : $month + 1;
        $nextYear  = $month == 12 ? $year + 1 : $year;

        $today = date('Y-m-d');
    @endphp

    <div class="d-flex justify-content-between mb-3">
        <a href="{{ route('reports.daily', [$prevMonth, $prevYear]) }}" class="btn btn-outline-primary">
            &laquo; Prev
        </a>

        <a href="{{ route('reports.daily', [$nextMonth, $nextYear]) }}" class="btn btn-outline-primary">
            Next &raquo;
        </a>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered calendar-table text-center">
            <thead class="table-light">
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
            </thead>
            <tbody>
                @php $day = 1; @endphp
                @for ($week = 0; $week < 6; $week++)
                    <tr style="height: 130px;">
                        @for ($dow = 0; $dow < 7; $dow++)
                            @if ($week == 0 && $dow < $startWeekDay)
                                <td></td>
                            @elseif ($day <= $daysInMonth)
                                @php
                                    $data = $calendar[$day];
                                    $dateString = sprintf('%04d-%02d-%02d', $year, $month, $day);
                                @endphp
                                <td class="{{ $dow == 0 ? 'weekend' : ($dow == 6 ? 'weekend' : '') }} {{ $dateString == $today ? 'today' : '' }}">
                                    <div class="calendar-box" 
                                        @if($data['total_price'] > 0) 
                                            title="Total: {{ number_format($data['total_price'],0) }} $, Qty: {{ $data['total_qty'] }}" 
                                        @endif>
                                        <strong>{{ $day }}</strong>
                                        @if ($data['total_price'] > 0)
                                            <div class="mt-1 small">
                                                <div>តម្លៃសរុប: <b>{{ number_format($data['total_price'], 0) }} $</b></div>
                                                <div>ចំនួនសរុប: <b>{{ $data['total_qty'] }}</b></div>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                @php $day++; @endphp
                            @else
                                <td></td>
                            @endif
                        @endfor
                    </tr>
                @endfor
            </tbody>
        </table>
    </div>
</div>

<style>
    .calendar-table th {
        background: #f0f4ff;
        color: #24478f;
        font-weight: 600;
        text-align: center;
    }

    .calendar-table td {
        padding: 6px;
        border: 1px solid #e5e9f2;
        vertical-align: top;
        background: #fff;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .calendar-table td:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .calendar-box {
        height: 120px;
        padding: 6px;
        border-radius: 6px;
        background: #fafcff;
        overflow: hidden;
    }

    .calendar-box strong {
        display: inline-block;
        margin-bottom: 4px;
        font-size: 15px;
        color: #263238;
    }

    .calendar-box div {
        font-size: 13px;
    }

    .calendar-box b {
        color: #d32f2f;
    }

    .today {
        border: 2px solid #3f51b5;
        background: #e8eaf6;
        border-radius: 6px;
    }

    .weekend {
        background: #f9f9fb;
    }

    @media(max-width: 768px){
        .calendar-table th, .calendar-table td {
            width: 80px;
            font-size: 12px;
        }
        .calendar-box {
            height: 90px;
            padding: 4px;
        }
    }
</style>
@endsection