@extends('layouts.app')

@section('content')
<div class="content-wrapper">
    {{-- Welcome Section --}}
    <div class="row">
        <div class="col-sm-6 mb-4 mb-xl-0">
            <div class="d-lg-flex align-items-center">
                <div>
                    <h3 class="text-dark font-weight-bold mb-2">{{ __('messages.dashboard_messages.welcome_back') }} {{ auth()->user()->name }}!</h3>
                    <h6 class="font-weight-normal mb-2">{{ $userRole }}</h6>
                </div>
            </div>
        </div>
    </div>

    @if($userRole === 'customer')
        {{-- Customer Dashboard --}}
        <div class="row">
            <div class="col-lg-3 grid-margin stretch-card">
                <div class="card dashboard-summary-card success-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3 class="text-success font-weight-bold">{{ $myShipments }}</h3>
                            <i class="mdi mdi-truck-delivery mdi-36px text-success" style="opacity: 0.8;"></i>
                        </div>
                        <p class="text-muted mt-2" style="font-size: 0.9rem; font-weight: 500;">{{ __('dashboard_page.my_shipments') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 grid-margin stretch-card">
                <div class="card dashboard-summary-card primary-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3 class="text-primary font-weight-bold">{{ $myProducts }}</h3>
                            <i class="mdi mdi-package-variant mdi-36px text-primary" style="opacity: 0.8;"></i>
                        </div>
                        <p class="text-muted mt-2" style="font-size: 0.9rem; font-weight: 500;">{{ __('dashboard_page.my_products') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 grid-margin stretch-card">
                <div class="card dashboard-summary-card info-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3 class="text-info font-weight-bold">{{ $myInvoices }}</h3>
                            <i class="mdi mdi-file-document-outline mdi-36px text-info" style="opacity: 0.8;"></i>
                        </div>
                        <p class="text-muted mt-2" style="font-size: 0.9rem; font-weight: 500;">{{ __('dashboard_page.my_invoices') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 grid-margin stretch-card">
                <div class="card dashboard-summary-card danger-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3 class="text-danger font-weight-bold">Rp {{ number_format($myOutstanding) }}</h3>
                            <i class="mdi mdi-cash-multiple mdi-36px text-danger" style="opacity: 0.8;"></i>
                        </div>
                        <p class="text-muted mt-2" style="font-size: 0.9rem; font-weight: 500;">{{ __('dashboard_page.outstanding_amount') }}</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Recent Shipments Table for Customer --}}
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title text-primary"><i class="mdi mdi-truck-delivery mr-2"></i>{{ __('dashboard_page.recent_shipments') }}</h4>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>{{ __('dashboard_page.tracking_number') }}</th>
                                        <th>{{ __('forms.status') }}</th>
                                        <th>{{ __('forms.date') }}</th>
                                        <th>{{ __('dashboard_page.amount') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentShipments as $shipment)
                                    <tr>
                                        <td><span class="font-weight-medium">{{ $shipment->resi_number }}</span></td>
                                        <td>
                                            @if($shipment->status == 'Delivered')
                                                <span class="badge bg-success text-white px-3 py-2">{{ $shipment->status }}</span>
                                            @elseif($shipment->status == 'In Transit')
                                                <span class="badge bg-info text-white px-3 py-2">{{ $shipment->status }}</span>
                                            @elseif($shipment->status == 'Pending')
                                                <span class="badge bg-warning text-white px-3 py-2">{{ $shipment->status }}</span>
                                            @else
                                                <span class="badge bg-secondary text-white px-3 py-2">{{ $shipment->status }}</span>
                                            @endif
                                        </td>
                                        <td>{{ $shipment->date_received }}</td>
                                        <td><strong>Rp {{ number_format($shipment->total_charge) }}</strong></td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-4">{{ __('dashboard_page.no_recent_shipments') }}</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        {{-- Admin/Owner/Super-admin Dashboard --}}
        {{-- Include existing summary cards --}}
        @include('dashboard.partials.summary_cards')

        @if($userRole === 'super-admin' || $userRole === 'owner')
            {{-- Include charts and top customers table --}}
            @include('dashboard.partials.charts')
            @include('dashboard.partials.top_customers')
        @endif

        @if($userRole === 'admin')
            {{-- Admin specific content --}}
            <div class="row">
                <div class="col-md-6 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('dashboard_page.todays_overview') }}</h4>
                            <div class="row mt-4">
                                <div class="col-md-4 text-center">
                                    <h5>{{ __('dashboard_page.new_shipments') }}</h5>
                                    <h3 class="text-primary">{{ $todayShipments }}</h3>
                                </div>
                                <div class="col-md-4 text-center">
                                    <h5>{{ __('dashboard_page.pending') }}</h5>
                                    <h3 class="text-warning">{{ $pendingShipments }}</h3>
                                </div>
                                <div class="col-md-4 text-center">
                                    <h5>{{ __('dashboard_page.unpaid_invoices') }}</h5>
                                    <h3 class="text-danger">{{ $unpaidInvoices }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endif
</div>
@endsection

@section('footer')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@include('dashboard.partials.fixed-charts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // This will ensure any chart that is rendered in the dashboard has access to the proper Chart.js methods
    if (typeof Chart !== 'undefined') {
        // Default configuration for all charts
        Chart.defaults.elements.line.borderWidth = 2;
        Chart.defaults.elements.point.radius = 3;
        Chart.defaults.elements.point.hoverRadius = 5;
    }
});
</script>
@endsection