@extends('layouts.master')

@section('css')
<link href="{{ URL::asset('assets/plugins/owl-carousel/owl.carousel.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/jqvmap/jqvmap.min.css') }}" rel="stylesheet">
<!-- مكتبة Animate.css للحركات الاحترافية -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
<style>
/* --- أيقونة وقائمة الإشعارات --- */
.nav-link.position-relative {
    display: inline-flex !important;
    padding: 8px !important;
}

.custom-badge {
    position: absolute !important;
    top: -2px;
    right: -2px;
    background-color: #ff4d4f;
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-menu {
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden;
    width: 250px !important;
}

.main-notification-list {
    max-height: 300px;
    overflow-y: auto;
}

/* تأثير تكبير ناعم عند الهوفر على الكاردز والبطاقات */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

/* تأخير زمني متدرج للحركات (Stagger) */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }
</style>
@endsection

@section('title')
{{ __('home.manufacturing_dashboard') }}
@stop

@section('page-header')
<!-- هيدر الصفحة مع حركة النزول للأسفل -->
<div class="breadcrumb-header justify-content-between align-items-center my-4 p-3 bg-white shadow-sm animate__animated animate__fadeInDown" style="border-radius: 15px;">
    <div class="left-content {{ App::getLocale() == 'en' ? 'text-left' : 'text-right' }}">
        <h2 class="main-content-title tx-24 mg-b-1 welcoming font-weight-bold" style="color: #004d44;">
            {{ __('home.welcome') }}
            <span class="text-dark">{{ Auth::user()->name }}</span> ! 🏭
        </h2>
        <p class="mg-b-0 text-muted fs-13 mt-2">{{ __('home.dashboard_subtitle') }}</p>
    </div>

    <div class="dropdown nav-item main-header-notification"></div>

    <div class="main-dashboard-header-right">
        <div class="datetime-wrapper d-flex align-items-center px-3 py-2" style="background: #f0f4f4; border-radius: 12px; border: 1px solid #e0e6e6;">
            <div class="ml-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: #004d44; border-radius: 10px; color: white;">
                <i class="far fa-calendar-alt" style="font-size: 18px;"></i>
            </div>
            <div class="text-right">
                <div id="display_date" class="font-weight-bold" style="font-size: 14px; color: #004d44;"></div>
                <div id="display_time" class="text-muted" style="font-size: 12px; font-weight: 600;"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
@can('Home')
<!-- 1. صف البطاقات السريعة المخصصة للتصنيع (KPIs) -->
<div class="row row-sm mb-4 animate__animated animate__fadeInUp animate-delay-2">
    <!-- أوامر قيد التشغيل -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-3 mb-xl-0">
        <div class="card bg-primary-gradient text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 opacity-75">{{ __('home.in_progress_orders') }} (WIP)</p>
                        <h3 class="mb-0 fw-bold">{{ $inProgressOrdersCount }} <small class="fs-6">{{ __('home.order_unit') }}</small></h3>
                    </div>
                    <div class="card-icon bg-white-20 rounded-circle p-3">
                        <i class="fas fa-cogs fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- الكميات المنتجة هذا الشهر -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-3 mb-xl-0">
        <div class="card bg-success-gradient text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 opacity-75">{{ __('home.monthly_fg_production') }}</p>
                        <h3 class="mb-0 fw-bold">{{ (float) $monthProducedQuantity }} <small class="fs-6">{{ __('home.piece_unit') }}</small></h3>
                    </div>
                    <div class="card-icon bg-white-20 rounded-circle p-3">
                        <i class="fas fa-boxes fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- تكاليف التصنيع الشهرية -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-3 mb-xl-0">
        <div class="card bg-danger-gradient text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 opacity-75">{{ __('home.monthly_manufacturing_cost') }}</p>
                        <h3 class="mb-0 fw-bold">
                            {{ number_format($monthTotalManufacturingCost, (floor($monthTotalManufacturingCost) == $monthTotalManufacturingCost ? 0 : 2)) }}
                            <small class="fs-6">{{ __('home.SAR') }}</small>
                        </h3>
                    </div>
                    <div class="card-icon bg-white-20 rounded-circle p-3">
                        <i class="fas fa-calculator fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- أشجار المكونات المسجلة -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-3 mb-xl-0">
        <div class="card bg-warning-gradient text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 opacity-75">{{ __('home.total_boms') }}</p>
                        <h3 class="mb-0 fw-bold">{{ $totalBomsCount }} <small class="fs-6">{{ __('home.bom_unit') }}</small></h3>
                    </div>
                    <div class="card-icon bg-white-20 rounded-circle p-3">
                        <i class="fas fa-sitemap fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 2. صف أحدث أوامر الإنتاج المكتملة + طباعة تقرير التكلفة مباشرة -->
<div class="row row-sm mb-4 animate__animated animate__fadeInUp animate-delay-3">
    <div class="col-12">
        <div class="card shadow-sm border-0" style="border-radius: 16px; overflow: hidden;">
            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3 px-4">
                <div class="d-flex align-items-center">
                    <div class="p-2 bg-success-transparent rounded-circle me-2 d-flex align-items-center justify-content-center" style="width: 38px; height: 38px;">
                        <i class="fas fa-file-invoice-dollar text-success fs-5"></i>
                    </div>
                    <div>
                        <h6 class="card-title mb-0 fw-bold fs-15 text-dark">{{ __('home.completed_order_cost_reports') }}</h6>
                        <small class="text-muted">{{ __('home.completed_order_cost_reports_sub') }}</small>
                    </div>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-center">
                        <thead>
                            <tr style="background-color: #f8fafc; color: #475569; font-size: 13px;">
                                <th class="py-3 px-3 text-start">{{ __('home.order_number') }}</th>
                                <th class="py-3 px-3 text-start">{{ __('home.finished_product') }}</th>
                                <th class="py-3 px-3">{{ __('home.produced_qty') }}</th>
                                <th class="py-3 px-3">{{ __('home.status') }}</th>
                                <th class="py-3 px-3">{{ __('home.report_and_print') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($latestCompletedOrders as $cOrder)
                            <tr style="border-bottom: 1px solid #f1f5f9;">
                                <td class="py-3 px-3 text-start">
                                    <span class="fw-bold px-2 py-1 rounded" style="background-color: #f1f5f9; color: #334155; font-family: monospace;">
                                        #{{ $cOrder->order_number }}
                                    </span>
                                </td>
                                <td class="py-3 px-3 text-start fw-semibold text-dark">
                                    <i class="fas fa-cube text-success me-1"></i>
                                    {{ $cOrder->finishedProduct->product_name ?? $cOrder->finishedProduct->name ?? '---' }}
                                </td>
                                <td class="py-3 px-3">
                                    <span class="badge bg-success-transparent text-success px-3 py-1.5 rounded-pill fw-bold fs-13">
                                        {{ (float) $cOrder->produced_quantity }}
                                    </span>
                                </td>
                                <td class="py-3 px-3">
                                    <span class="badge bg-success-transparent text-success px-2.5 py-1.5 rounded-pill fw-semibold fs-11">
                                        <i class="fas fa-check-circle me-1"></i> {{ __('home.completed') }}
                                    </span>
                                </td>
                                <td class="py-3 px-3">
                                    <a href="{{ url(App::getLocale() . '/manufacturing-reports/order-cost/' . $cOrder->id) }}" class="btn btn-sm btn-outline-success rounded-pill px-3 fw-semibold" target="_blank">
                                        <i class="fas fa-print me-1"></i> {{ __('home.print_cost_report') }}
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">{{ __('home.no_completed_orders') }}</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 3. صف تفاصيل أذونات المخزن والمصاريف الصناعية -->
<div class="row row-sm mb-4">
    <!-- كارت ملخص الحركة والتكاليف -->
    <div class="col-xl-4 col-lg-12 mb-3 mb-xl-0 animate__animated animate__fadeInLeft animate-delay-4">
        <div class="card h-100 shadow-sm border-0" style="border-radius: 16px;">
            <div class="card-header bg-white border-bottom py-3">
                <h6 class="card-title mb-0 fw-bold fs-15 text-dark">
                    <i class="fas fa-chart-pie text-primary me-2"></i> {{ __('home.monthly_activity_summary') }}
                </h6>
            </div>
            <div class="card-body d-flex flex-column justify-content-around p-3">
                <div class="d-flex align-items-center mb-3">
                    <div class="p-2.5 bg-primary-transparent rounded-circle me-3 text-center d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                        <i class="fas fa-file-invoice text-primary fs-5"></i>
                    </div>
                    <div>
                        <span class="text-muted fs-12 d-block">{{ __('home.raw_material_issues') }}</span>
                        <h6 class="mb-0 fw-bold fs-14">{{ $monthMaterialIssuesCount }} {{ __('home.issue_voucher') }}</h6>
                    </div>
                </div>

                <div class="d-flex align-items-center mb-3">
                    <div class="p-2.5 bg-success-transparent rounded-circle me-3 text-center d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                        <i class="fas fa-box-open text-success fs-5"></i>
                    </div>
                    <div>
                        <span class="text-muted fs-12 d-block">{{ __('home.fg_receipts') }}</span>
                        <h6 class="mb-0 fw-bold fs-14">{{ $monthFGReceiptsCount }} {{ __('home.receipt_voucher') }}</h6>
                    </div>
                </div>

                <div class="d-flex align-items-center mb-3">
                    <div class="p-2.5 bg-danger-transparent rounded-circle me-3 text-center d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                        <i class="fas fa-coins text-danger fs-5"></i>
                    </div>
                    <div>
                        <span class="text-muted fs-12 d-block">{{ __('home.total_raw_material_cost') }}</span>
                        <h6 class="mb-0 fw-bold fs-14 text-danger">
                            {{ number_format($monthMaterialsCost, (floor($monthMaterialsCost) == $monthMaterialsCost ? 0 : 2)) }} {{ __('home.SAR') }}
                        </h6>
                    </div>
                </div>

                <div class="d-flex align-items-center">
                    <div class="p-2.5 bg-warning-transparent rounded-circle me-3 text-center d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                        <i class="fas fa-bolt text-warning fs-5"></i>
                    </div>
                    <div>
                        <span class="text-muted fs-12 d-block">{{ __('home.total_overhead_cost') }}</span>
                        <h6 class="mb-0 fw-bold fs-14 text-warning">
                            {{ number_format($monthOverheadCost, (floor($monthOverheadCost) == $monthOverheadCost ? 0 : 2)) }} {{ __('home.SAR') }}
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- كارت أحدث المصاريف الصناعية المسجلة -->
    <div class="col-xl-8 col-lg-12 animate__animated animate__fadeInRight animate-delay-4">
        <div class="card h-100 shadow-sm border-0" style="border-radius: 16px;">
            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                <h6 class="card-title mb-0 fw-bold fs-15 text-dark">
                    <i class="fas fa-receipt text-warning me-2"></i> {{ __('home.latest_overhead_expenses') }}
                </h6>
                <a href="{{ route('manufacturing_expenses.index') }}" class="btn btn-sm btn-outline-warning rounded-pill px-3 fw-semibold">
                    {{ __('home.view_all') }}
                </a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-center">
                        <thead>
                            <tr style="background-color: #f8fafc; color: #475569; font-size: 13px;">
                                <th class="py-3 px-3">{{ __('home.expense_number') }}</th>
                                <th class="py-3 px-3">{{ __('home.linked_mo') }}</th>
                                <th class="py-3 px-3">{{ __('home.expense_type') }}</th>
                                <th class="py-3 px-3">{{ __('home.amount') }}</th>
                                <th class="py-3 px-3">{{ __('home.expense_date') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($latestExpenses as $expense)
                            @php
                                $expAmount = $expense->amount ?? 0;
                            @endphp
                            <tr style="border-bottom: 1px solid #f1f5f9;">
                                <td class="py-3 px-3">
                                    <span class="fw-bold px-2 py-1 rounded" style="background-color: #f1f5f9; color: #334155; font-family: monospace;">
                                        #{{ $expense->expense_number }}
                                    </span>
                                </td>
                                <td class="py-3 px-3 fw-semibold text-dark">
                                    {{ $expense->manufacturingOrder->order_number ?? __('home.general_unlinked') }}
                                </td>
                                <td class="py-3 px-3">
                                    @if($expense->expense_type == 'electricity')
                                        <span class="badge bg-warning-transparent text-warning px-2.5 py-1">{{ __('home.expense_type_electricity') }}</span>
                                    @elseif($expense->expense_type == 'labor')
                                        <span class="badge bg-info-transparent text-info px-2.5 py-1">{{ __('home.expense_type_labor') }}</span>
                                    @elseif($expense->expense_type == 'maintenance')
                                        <span class="badge bg-primary-transparent text-primary px-2.5 py-1">{{ __('home.expense_type_maintenance') }}</span>
                                    @elseif($expense->expense_type == 'depreciation')
                                        <span class="badge bg-secondary-transparent text-secondary px-2.5 py-1">{{ __('home.expense_type_depreciation') }}</span>
                                    @else
                                        <span class="badge bg-light text-dark px-2.5 py-1">{{ __('home.expense_type_other') }}</span>
                                    @endif
                                </td>
                                <td class="py-3 px-3">
                                    <strong class="text-danger fs-14">
                                        {{ number_format($expAmount, (floor($expAmount) == $expAmount ? 0 : 2)) }} {{ __('home.SAR') }}
                                    </strong>
                                </td>
                                <td class="py-3 px-3 text-muted fs-12">
                                    {{ $expense->expense_date }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">{{ __('home.no_overhead_expenses') }}</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endcan
@endsection

@section('js')
<script>
    function updateDateTime() {
        const now = new Date();

        // تحديد لغة العرض بناءً على لغة التطبيق
        const locale = '{{ App::getLocale() }}' === 'ar' ? 'ar-EG' : 'en-US';

        // تنسيق التاريخ (مثال: الجمعة، 15 أكتوبر 2023)
        const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        const formattedDate = now.toLocaleDateString(locale, dateOptions);

        // تنسيق الوقت (مثال: 02:30:15 م)
        const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
        const formattedTime = now.toLocaleTimeString(locale, timeOptions);

        // حقن القيم داخل الـ Divs
        document.getElementById('display_date').innerText = formattedDate;
        document.getElementById('display_time').innerText = formattedTime;
    }

    // تشغيل الدالة فور تحميل الصفحة
    updateDateTime();

    // تحديث الوقت كل ثانية (1000ms)
    setInterval(updateDateTime, 1000);
</script>
@endsection