@extends('layouts.master')
@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Internal Spectrum-colorpicker css -->
<link href="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">
<!-- Internal Select2 css -->
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    /* ==========================================================
       Manufacturing Orders Log - Modern Styling
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

    /* كروت الأقسام */
    .orders-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
        margin-bottom: 20px;
        overflow: hidden;
    }

    .orders-card-header {
        background: #0f172a;
        color: #ffffff;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* قائمة بيانات الأمر الأساسية */
    .order-info-list .list-group-item {
        padding: 14px 18px;
        border-color: #f1f5f9;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .order-info-list .list-group-item:hover {
        background-color: #f8fafc;
    }

    .order-info-label {
        color: #64748b;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .order-info-value {
        font-weight: 800;
        color: #0f172a;
    }

    /* جدول المكونات */
    .table-mfg-orders {
        margin-bottom: 0;
    }

    .table-mfg-orders thead th {
        background: #1e293b !important;
        color: #f8fafc !important;
        font-size: 13.5px;
        font-weight: 800;
        padding: 13px 12px;
        border: none;
    }

    .table-mfg-orders tbody td {
        padding: 12px 12px;
        vertical-align: middle;
        font-size: 14px;
        border-bottom: 1px solid #f1f5f9;
    }

    .table-mfg-orders tbody tr:hover {
        background-color: #f8fafc;
    }

    /* أزرار وعناصر التحكم */
    .btn-new-order {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff !important;
        font-weight: 800;
        font-size: 13.5px;
        padding: 8px 18px;
        border-radius: 8px;
        border: none;
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
    }

    .btn-new-order:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

    .btn-print-order {
        background: #ffffff;
        border: 1.5px solid #cbd5e1;
        color: #1e293b;
        font-weight: 800;
        font-size: 13.5px;
        padding: 8px 18px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
    }

    .btn-print-order:hover {
        background: #0f172a;
        color: #ffffff;
        border-color: #0f172a;
    }

    /* ==================== تنسيقات الطباعة ==================== */
    @media print {
        .main-header, .main-sidebar, .main-footer, .no-print, .btn, form, .breadcrumb-header {
            display: none !important;
        }

        body {
            background: #ffffff !important;
            -webkit-print-color-adjust: exact;
        }

        .main-content, .container-fluid {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        .orders-card {
            border: 1px solid #cbd5e1 !important;
            box-shadow: none !important;
            margin-bottom: 15px !important;
        }

        .orders-card-header {
            background: #f1f5f9 !important;
            color: #000000 !important;
            border-bottom: 2px solid #0f172a !important;
        }

        .table-mfg-orders thead th {
            background: #e2e8f0 !important;
            color: #000000 !important;
        }
    }
</style>
@section('title')
{{ __('home.manufacturin_Logs') }}
@stop
@endsection

@section('content')

<div class="container-fluid p-2 mt-2">

    {{-- شريط التحكم واختيار الأوامر --}}
    <div class="orders-card p-3 no-print">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">

            <div class="d-flex align-items-center gap-2">
                <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center" style="width: 38px; height: 38px;">
                    <i class="fa fa-folder-open-o" style="font-size: 18px;"></i>
                </div>
                <div>
                    <h5 class="mb-0 font-weight-bold text-dark">{{ __('home.production_order_details') }}</h5>
                    <span class="text-muted small font-weight-bold">استعراض تفاصيل ومكونات أوامر التصنيع السابقة</span>
                </div>
            </div>

            <div class="d-flex flex-wrap align-items-center gap-2">
                <form action="{{ route('manufacturing.orders') }}" method="GET" class="d-flex align-items-center gap-2 mb-0">
                    <label class="mb-0 font-weight-bold text-muted small" style="white-space: nowrap;">
                        {{ __('home.select_previous_production_order') }}:
                    </label>
                    <select name="order_id" class="form-control select2" onchange="this.form.submit()" style="min-width: 280px;">
                        @foreach($allOrders as $order)
                            <option value="{{ $order->id }}" {{ isset($latestOrder) && $latestOrder->id == $order->id ? 'selected' : '' }}>
                                أمر رقم #{{ $order->id }} - {{ $order->template->template_name ?? '' }} ({{ $order->order_date }})
                            </option>
                        @endforeach
                    </select>
                </form>

                <button onclick="window.print()" class="btn-print-order">
                    <i class="fa fa-print text-primary"></i>
                    <span>{{ __('home.print_order') }}</span>
                </button>

                <a href="{{ route('manufacturing.index') }}" class="btn-new-order">
                    <i class="fa fa-plus"></i>
                    <span>أمر جديد</span>
                </a>
            </div>

        </div>
    </div>

    @if($latestOrder)
    <div class="row">

        {{-- الجانب الأيمن: بيانات الأمر الأساسية --}}
        <div class="col-lg-4 mb-3">
            <div class="orders-card h-100">
                <div class="orders-card-header">
                    <span><i class="fa fa-info-circle ml-2"></i> {{ __('home.basic_order_info') }}</span>
                    <span class="badge badge-pill badge-primary px-3 font-weight-bold">#{{ $latestOrder->id }}</span>
                </div>

                <div class="card-body p-0">
                    <ul class="list-group list-group-flush order-info-list">

                        <li class="list-group-item">
                            <span class="order-info-label"><i class="fa fa-hashtag text-muted"></i> {{ __('home.order_number') }}:</span>
                            <span class="order-info-value">#{{ $latestOrder->id }}</span>
                        </li>

                        <li class="list-group-item">
                            <span class="order-info-label"><i class="fa fa-calendar text-muted"></i> {{ __('home.date') }}:</span>
                            <span class="order-info-value">{{ $latestOrder->order_date }}</span>
                        </li>

                        <li class="list-group-item">
                            <span class="order-info-label"><i class="fa fa-file-text-o text-muted"></i> {{ __('home.invoice_number') }}:</span>
                            <span class="order-info-value">{{ $latestOrder->invoice_id ?? '---' }}</span>
                        </li>

                        <li class="list-group-item">
                            <span class="order-info-label"><i class="fa fa-tag text-muted"></i> {{ __('home.model') }}:</span>
                            <span class="order-info-value text-primary">
                                {{ $latestOrder->template->template_name ?? '---' }}
                            </span>
                        </li>

                        <li class="list-group-item">
                            <span class="order-info-label"><i class="fa fa-building-o text-muted"></i> {{ __('home.branch') }}:</span>
                            <span class="order-info-value">{{ $latestOrder->branch->name ?? __('home.default_branch') }}</span>
                        </li>

                        <li class="list-group-item" style="background: #f8fafc;">
                            <span class="order-info-label"><i class="fa fa-money text-success"></i> {{ __('home.total_cost') }}:</span>
                            <span class="order-info-value text-danger" style="font-size: 1.25rem;">
                                {{ number_format($latestOrder->total_cost, 2) }} <small style="font-size: 12px; color: #64748b;">ريال</small>
                            </span>
                        </li>

                        <li class="list-group-item">
                            <span class="order-info-label"><i class="fa fa-check-circle-o text-muted"></i> {{ __('home.status') }}:</span>
                            <span class="badge badge-success px-3 py-1 font-weight-bold">
                                {{ __('home.completed') }}
                            </span>
                        </li>

                    </ul>
                </div>
            </div>
        </div>

        {{-- الجانب الأيسر: جدول الخامات والمكونات المستهلكة --}}
        <div class="col-lg-8 mb-3">
            <div class="orders-card h-100">
                <div class="orders-card-header" style="background: #1e293b;">
                    <span><i class="fa fa-cubes ml-2"></i> {{ __('home.consumed_materials_components') }}</span>
                    <small class="text-muted" style="color: #94a3b8 !important;">إجمالي الأصناف: {{ count($latestOrder->items) }}</small>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover text-center table-mfg-orders">
                            <thead>
                                <tr>
                                    <th class="text-right pr-4">{{ __('home.material') }}</th>
                                    <th width="120">{{ __('home.quantity') }}</th>
                                    <th width="140">{{ __('home.unit_price') }}</th>
                                    <th width="140">{{ __('home.total') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($latestOrder->items as $item)
                                <tr>
                                    <td class="text-right pr-4 font-weight-bold text-dark">
                                        {{ $item->product->product_name ?? '---' }}
                                    </td>
                                    <td>
                                        <span class="badge badge-light border font-weight-bold px-3 py-1 text-dark" style="font-size: 13.5px;">
                                            {{ $item->quantity }}
                                        </span>
                                    </td>
                                    <td class="text-muted font-weight-bold">
                                        {{ number_format($item->unit_price, 2) }}
                                    </td>
                                    <td class="font-weight-bold text-primary" style="font-size: 14.5px;">
                                        {{ number_format($item->total_item_cost, 2) }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    @else
    <div class="alert alert-info text-center font-weight-bold py-4 orders-card">
        <i class="fa fa-info-circle fa-2x d-block mb-2 text-primary"></i>
        لا توجد سجلات أوامر إنتاج مسجلة حتى الآن.
    </div>
    @endif

</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection