@extends('backend.layout.main')

@section('content')
@if(session()->has('not_permitted'))
    <div class="alert alert-danger alert-dismissible text-center">
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        {{ session('not_permitted') }}
    </div>
@endif
@if(session()->has('message'))
    <div class="alert alert-success alert-dismissible text-center">
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        {{ session('message') }}
    </div>
@endif

<section class="curtain-dashboard">
    <div class="container-fluid">
        <div class="dashboard-heading">
            <div>
                <h3>{{ trans('file.Curtain Shop Overview') }}</h3>
                <p>{{ $periodLabel }}</p>
            </div>
            <div class="dashboard-heading-actions">
                <nav class="period-filter" aria-label="{{ trans('file.Time Period') }}">
                    <a href="{{ url('dashboard') }}?period=day" class="{{ $selectedPeriod === 'day' ? 'active' : '' }}">{{ trans('file.Today') }}</a>
                    <a href="{{ url('dashboard') }}?period=week" class="{{ $selectedPeriod === 'week' ? 'active' : '' }}">{{ trans('file.This Week') }}</a>
                    <a href="{{ url('dashboard') }}?period=month" class="{{ $selectedPeriod === 'month' ? 'active' : '' }}">{{ trans('file.This Month') }}</a>
                    <a href="{{ url('dashboard') }}?period=year" class="{{ $selectedPeriod === 'year' ? 'active' : '' }}">{{ trans('file.This Year') }}</a>
                </nav>
                <a href="{{ route('tailoringproducts.create') }}" class="btn btn-success">
                    <i class="dripicons-plus"></i> {{ trans('file.add_order') }}
                </a>
            </div>
        </div>

        <div class="dashboard-section-title">{{ trans('file.Today Financial Summary') }}</div>
        <div class="metric-grid today-financial-metrics">
            <div class="metric-card">
                <span class="metric-icon icon-in"><i class="dripicons-arrow-thin-down"></i></span>
                <span>
                    <strong>{{ \App\Support\NumberFormatter::natural($todayIncome, config('decimal')) }}</strong>
                    <small>{{ trans('file.Today Income') }}</small>
                </span>
            </div>
            <div class="metric-card">
                <span class="metric-icon icon-out"><i class="dripicons-arrow-thin-up"></i></span>
                <span>
                    <strong>{{ \App\Support\NumberFormatter::natural($todayCashOut, config('decimal')) }}</strong>
                    <small>{{ trans('file.Today Cash Out') }}</small>
                </span>
            </div>
            <div class="metric-card">
                <span class="metric-icon {{ $todayNetCash >= 0 ? 'icon-in' : 'icon-out' }}"><i class="dripicons-pulse"></i></span>
                <span>
                    <strong class="{{ $todayNetCash < 0 ? 'negative-value' : '' }}">{{ \App\Support\NumberFormatter::natural($todayNetCash, config('decimal')) }}</strong>
                    <small>{{ trans('file.Today Net Cash') }}</small>
                </span>
            </div>
            <a href="{{ route('accounts.index') }}" class="metric-card">
                <span class="metric-icon icon-cash"><i class="dripicons-wallet"></i></span>
                <span>
                    <strong>{{ \App\Support\NumberFormatter::natural($mainCashBalance, config('decimal')) }}</strong>
                    <small>{{ trans('file.Main Cash Balance') }}</small>
                </span>
            </a>
        </div>

        <div class="dashboard-section-title">{{ trans('file.Order Progress') }}</div>
        <div class="metric-grid order-metrics">
            <a href="{{ route('tailoringproducts.index') }}" class="metric-card">
                <span class="metric-icon icon-active"><i class="dripicons-clock"></i></span>
                <span>
                    <strong>{{ $activeOrders }}</strong>
                    <small>{{ trans('file.Active Curtain Orders') }}</small>
                </span>
            </a>
            <a href="{{ route('tailoringproducts.completed') }}" class="metric-card">
                <span class="metric-icon icon-waiting"><i class="dripicons-checklist"></i></span>
                <span>
                    <strong>{{ $awaitingAcceptance }}</strong>
                    <small>{{ trans('file.Awaiting Acceptance') }}</small>
                </span>
            </a>
            <a href="{{ route('tailoringproducts.delivered') }}" class="metric-card">
                <span class="metric-icon icon-delivered"><i class="dripicons-box"></i></span>
                <span>
                    <strong>{{ $deliveredOrders }}</strong>
                    <small>{{ trans('file.Delivered Orders') }}</small>
                </span>
            </a>
        </div>

        <div class="dashboard-section-title">{{ trans('file.Financial Overview') }}</div>
        <div class="metric-grid financial-metrics">
            <a href="{{ route('tailoringproducts.index') }}" class="metric-card">
                <span class="metric-icon icon-customer"><i class="dripicons-user"></i></span>
                <span>
                    <strong>{{ \App\Support\NumberFormatter::natural($customerDue, config('decimal')) }}</strong>
                    <small>{{ trans('file.Customer Due') }}</small>
                </span>
            </a>
            <a href="{{ route('supplier.index') }}" class="metric-card">
                <span class="metric-icon icon-supplier"><i class="dripicons-store"></i></span>
                <span>
                    <strong>{{ \App\Support\NumberFormatter::natural($supplierDue, config('decimal')) }}</strong>
                    <small>{{ trans('file.Supplier Due') }}</small>
                </span>
            </a>
            <a href="{{ route('tailor.monthlySummary', ['month' => now()->format('Y-m')]) }}" class="metric-card">
                <span class="metric-icon icon-tailor"><i class="dripicons-cutlery"></i></span>
                <span>
                    <strong>{{ \App\Support\NumberFormatter::natural($tailorFeesDue, config('decimal')) }}</strong>
                    <small>{{ trans('file.Tailor Fees Due') }}</small>
                </span>
            </a>
        </div>

        <div class="dashboard-columns">
            <div class="dashboard-panel orders-panel">
                <div class="panel-heading">
                    <h4>{{ trans('file.Recent Curtain Orders') }}</h4>
                    <a href="{{ route('tailoringproducts.index') }}">{{ trans('file.View All') }}</a>
                </div>
                <div class="table-responsive">
                    <table class="table dashboard-table">
                        <thead>
                            <tr>
                                <th>{{ trans('file.Order Code') }}</th>
                                <th>{{ trans('file.Customer') }}</th>
                                <th>{{ trans('file.Tailor') }}</th>
                                <th>{{ trans('file.Completion Date') }}</th>
                                <th>{{ trans('file.Status') }}</th>
                                <th>{{ trans('file.Due Amount') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentOrders as $order)
                                @php
                                    $statusLabels = [
                                        'pending' => trans('file.Pending'),
                                        'completed' => trans('file.Awaiting Acceptance'),
                                        'delivered' => trans('file.Delivered'),
                                    ];
                                @endphp
                                <tr>
                                    <td><a href="{{ route('tailoringproducts.show', $order->id) }}">{{ $order->code }}</a></td>
                                    <td>{{ optional($order->customer)->name ?: '-' }}</td>
                                    <td>{{ optional(optional($order->curtain)->tailor)->name ?: '-' }}</td>
                                    <td>{{ optional($order->completion_date)->format(config('date_format')) ?: '-' }}</td>
                                    <td><span class="order-status status-{{ $order->status }}">{{ $statusLabels[$order->status] ?? $order->status }}</span></td>
                                    <td>{{ \App\Support\NumberFormatter::natural($order->due_amount, config('decimal')) }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="empty-row">{{ trans('file.No curtain orders found') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="dashboard-panel stock-panel">
                <div class="panel-heading">
                    <h4>{{ trans('file.Stock Attention') }}</h4>
                    <a href="{{ route('report.qtyAlert') }}">{{ trans('file.View All') }}</a>
                </div>
                <div class="table-responsive">
                    <table class="table dashboard-table">
                        <thead>
                            <tr>
                                <th>{{ trans('file.Product') }}</th>
                                <th>{{ trans('file.Current Stock') }}</th>
                                <th>{{ trans('file.Alert Level') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($lowStockItems as $item)
                                <tr>
                                    <td><strong>{{ $item->name }}</strong><small>{{ $item->code }}</small></td>
                                    <td class="stock-low">{{ \App\Support\NumberFormatter::natural($item->current_stock, config('decimal')) }}</td>
                                    <td>{{ \App\Support\NumberFormatter::natural($item->alert_quantity, config('decimal')) }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="empty-row">{{ trans('file.No low stock items') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="dashboard-panel transactions-panel">
            <div class="panel-heading">
                <h4>{{ trans('file.Recent Cash Movements') }}</h4>
                <a href="{{ route('accounts.index') }}">{{ trans('file.View All') }}</a>
            </div>
            <div class="table-responsive">
                <table class="table dashboard-table">
                    <thead>
                        <tr>
                            <th>{{ trans('file.Recorded') }}</th>
                            <th>{{ trans('file.reference') }}</th>
                            <th>{{ trans('file.Transaction Type') }}</th>
                            <th>{{ trans('file.Cash In') }}</th>
                            <th>{{ trans('file.Cash Out') }}</th>
                            <th>{{ trans('file.Balance') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentTransactions as $transaction)
                            <tr>
                                <td>{{ $transaction->created_at->format(config('date_format') . ' H:i') }}</td>
                                <td>{{ $transaction->reference_no ?: '-' }}</td>
                                <td>{{ trans('file.' . $transaction->category) }}</td>
                                <td class="cash-in">{{ $transaction->direction === 'in' ? \App\Support\NumberFormatter::natural($transaction->amount, config('decimal')) : '-' }}</td>
                                <td class="cash-out">{{ $transaction->direction === 'out' ? \App\Support\NumberFormatter::natural($transaction->amount, config('decimal')) : '-' }}</td>
                                <td>{{ \App\Support\NumberFormatter::natural($transaction->balance_after, config('decimal')) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="empty-row">{{ trans('file.No cash movements found') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@push('css')
<style>
    .curtain-dashboard { padding-bottom: 28px; }
    .dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 24px; }
    .dashboard-heading-actions { display: flex; align-items: center; gap: 12px; }
    .dashboard-heading h3 { margin: 0 0 4px; font-size: 22px; }
    .dashboard-heading p { margin: 0; color: #7a7e8f; }
    .period-filter { display: inline-flex; align-items: center; border: 1px solid #dfe3e8; background: #fff; }
    .period-filter a { min-width: 74px; padding: 9px 12px; border-inline-end: 1px solid #e7e9ed; color: #666a7d; font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; }
    .period-filter a:last-child { border-inline-end: 0; }
    .period-filter a:hover { color: #26951f; text-decoration: none; }
    .period-filter a.active { background: #26951f; color: #fff; }
    .dashboard-section-title { margin: 20px 0 10px; color: #6d7183; font-size: 12px; font-weight: 700; text-transform: uppercase; }
    .metric-grid { display: grid; gap: 12px; }
    .today-financial-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .order-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .financial-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metric-card { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 16px; border: 1px solid #e5e8ed; background: #fff; color: #4f5265; box-shadow: 0 5px 18px rgba(33, 38, 49, .04); }
    a.metric-card:hover { border-color: #b9dcb7; color: #26951f; text-decoration: none; }
    .metric-card strong { display: block; margin-bottom: 3px; color: #36394b; font-size: 21px; line-height: 1.2; }
    .metric-card strong.negative-value { color: #bd453c; }
    .metric-card small { display: block; color: #777b8d; font-size: 12px; }
    .metric-icon { display: inline-flex; flex: 0 0 42px; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 20px; }
    .icon-active { background: #e8f1ff; color: #276cbd; }
    .icon-waiting { background: #fff2d7; color: #a56a00; }
    .icon-delivered, .icon-in { background: #e1f5e8; color: #16844b; }
    .icon-cash { background: #e8f7e6; color: #26951f; }
    .icon-customer { background: #e8f1ff; color: #276cbd; }
    .icon-supplier { background: #f0eaff; color: #6f4fb3; }
    .icon-tailor { background: #fff0e7; color: #ad5c27; }
    .icon-out { background: #ffe9e7; color: #b6473d; }
    .dashboard-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; margin-top: 24px; }
    .dashboard-panel { border: 1px solid #e5e8ed; background: #fff; box-shadow: 0 5px 18px rgba(33, 38, 49, .04); }
    .panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 14px 18px; border-bottom: 1px solid #eceef2; }
    .panel-heading h4 { margin: 0; font-size: 15px; }
    .panel-heading a { color: #26951f; font-size: 12px; font-weight: 600; }
    .dashboard-table { margin: 0; }
    .dashboard-table th { padding: 11px 14px; border-top: 0; background: #f7f8fa; color: #717587; font-size: 11px; font-weight: 600; white-space: nowrap; }
    .dashboard-table td { padding: 12px 14px; border-top-color: #edf0f3; color: #565a6d; font-size: 12px; vertical-align: middle; }
    .dashboard-table td small { display: block; margin-top: 2px; color: #9195a3; }
    .order-status { display: inline-flex; padding: 4px 7px; font-size: 10px; font-weight: 700; white-space: nowrap; }
    .status-pending { background: #fff2d7; color: #966100; }
    .status-completed { background: #e8f1ff; color: #276cbd; }
    .status-delivered { background: #e1f5e8; color: #16844b; }
    .stock-low, .cash-out { color: #bd453c !important; font-weight: 700; }
    .cash-in { color: #16844b !important; font-weight: 700; }
    .transactions-panel { margin-top: 16px; }
    .empty-row { padding: 28px !important; color: #9296a5 !important; text-align: center; }
    @media (max-width: 991px) {
        .dashboard-heading { align-items: flex-start; }
        .dashboard-heading-actions { align-items: flex-end; flex-direction: column-reverse; }
        .today-financial-metrics, .financial-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .dashboard-columns { grid-template-columns: 1fr; }
    }
    @media (max-width: 575px) {
        .dashboard-heading { flex-direction: column; }
        .dashboard-heading-actions { align-items: stretch; width: 100%; }
        .period-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
        .period-filter a { min-width: 0; padding: 9px 5px; }
        .dashboard-heading .btn { padding: 8px 10px; font-size: 11px; }
        .today-financial-metrics, .order-metrics, .financial-metrics { grid-template-columns: 1fr; }
        .metric-card { min-height: 76px; }
    }
</style>
@endpush
