@extends('layouts.master')

@section('css')
<!-- Internal Data table css -->
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">

<!-- Internal Spectrum-colorpicker css -->
<link href="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">

<style>
    /* ==========================================================
       Stock Quantity Alarms Modern UI
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

    /* كارت الصفحة الرئيسي */
    .alarm-stock-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
        margin-bottom: 24px;
        overflow: hidden;
    }

    .alarm-stock-card-header {
        background: #ffffff;
        border-bottom: 1.5px solid #f1f5f9;
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* جدول التنبيهات */
    .table-alarm-stock {
        margin-bottom: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e2e8f0 !important;
    }

    .table-alarm-stock thead th {
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        padding: 14px 12px !important;
        border: none !important;
        white-space: nowrap;
    }

    .table-alarm-stock tbody td {
        vertical-align: middle !important;
        padding: 13px 12px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        color: #1e293b;
    }

    .table-alarm-stock tbody tr:hover {
        background-color: #f8fafc !important;
    }

    /* شارات الكميات */
    .qty-badge-danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
        padding: 5px 14px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    }

    .qty-badge-safe {
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        color: #0f172a;
        font-size: 13px;
        font-weight: 800;
        padding: 5px 14px;
        border-radius: 8px;
        display: inline-block;
    }

    /* شارة كود الصنف */
    .product-code-pill {
        font-family: 'Inter', monospace;
        font-size: 12.5px;
        font-weight: 800;
        color: #2563eb;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        padding: 3px 8px;
        border-radius: 6px;
        display: inline-block;
    }

    .supplier-name-cell { min-width: 190px; font-weight: 700; color: #0f766e !important; }
    .stock-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
    .stock-pagination-info { color: #475569; font-size: 13px; font-weight: 700; }
    .stock-pagination-actions { display: flex; align-items: center; gap: 8px; }
    .stock-page-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #cbd5e1; border-radius: 7px; color: #0f2f57; background: #fff; font-size: 13px; font-weight: 700; text-decoration: none !important; transition: .15s ease; }
    .stock-page-link:hover { color: #fff; border-color: #0f2f57; background: #0f2f57; }
    .stock-page-link.disabled { opacity: .45; pointer-events: none; }
    @media (max-width: 576px) { .stock-pagination { align-items: stretch; flex-direction: column; text-align: center; } .stock-pagination-actions { justify-content: center; } }
</style>
@section('title')
{{ __('home.alarmproductQuantity') }}
@stop
@endsection

@section('page-header')
<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between mb-3">
    <div class="my-auto">
        <div class="d-flex align-items-center">
            <div class="bg-warning text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px; background-color: #f59e0b !important;">
                <i class="fa fa-bell" style="font-size: 18px;"></i>
            </div>
            <div>
                <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('home.alarmproductQuantity') }}</h4>
                <span class="text-muted tx-13 mr-2 font-weight-bold">- مراقبة الأصناف التي أوشكت على النفاد والتنبيهات المبكرة</span>
            </div>
        </div>
    </div>
</div>
<!-- breadcrumb -->
@endsection

@section('content')

@if (count($errors) > 0)
    <div class="alert alert-danger font-weight-bold shadow-sm" style="border-radius: 10px;">
        <button aria-label="Close" class="close" data-dismiss="alert" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>خطأ</strong>
        <ul class="mb-0 mt-1">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- row -->
<div class="row">
    <div class="col-xl-12">

        <div class="alarm-stock-card">

            <div class="alarm-stock-card-header">
                <div class="d-flex align-items-center gap-2">
                    <h5 class="mb-0 font-weight-bold text-dark">
                        <i class="fa fa-list-alt text-primary ml-1"></i> قائمة كميات الأصناف وحد التنبيه
                    </h5>
                </div>
                <div>
                    <span class="badge badge-light border px-3 py-2 font-weight-bold text-muted" style="font-size: 12.5px;">
                        <i class="fa fa-database ml-1 text-primary"></i> الفحص المباشر للمخزون
                    </span>
                </div>
            </div>

            <div class="card-body p-4">

                <form action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale().'/'. ($page = 'printavaliableproduct')) }}" method="POST" role="search" autocomplete="off">
                    {{ csrf_field() }}

                    <div class="table-responsive">
                        <table class="table table-hover text-center table-alarm-stock" width="100%">
                            <thead>
                                <tr>
                                    <th width="5%">#</th>
                                    <th width="13%">{{ __('home.productNo') }}</th>
                                    <th width="30%" class="text-right pr-4">{{ __('home.product') }}</th>
                                    <th width="17%">{{ __('home.branch') }}</th>
                                    <th width="17%">آخر مورد شراء</th>
                                    <th width="18%">{{ __('home.quantity') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($products as $product)
                                    @php
                                        $isLowStock = $product->numberofpice <= $product->minmum_quantity_stock_alart;
                                        $latestPurchase = $lastPurchases->get($product->id);
                                    @endphp
                                    <tr id="{{ $product->id }}" style="{{ $isLowStock ? 'background-color: #fff9f9;' : '' }}">
                                        {{-- 1. التسلسل --}}
                                        <td class="font-weight-bold text-muted">{{ $products->firstItem() + $loop->index }}</td>

                                        {{-- 2. كود المنتج --}}
                                        <td dir="ltr">
                                            <span class="product-code-pill">{{ $product->Product_Code }}</span>
                                        </td>

                                        {{-- 3. اسم المنتج --}}
                                        <td class="text-right pr-4 font-weight-bold text-dark" style="font-size: 14.5px;">
                                            @if($isLowStock)
                                                <i class="fa fa-exclamation-triangle text-danger ml-1" title="مخزون منخفض!"></i>
                                            @endif
                                            {{ $product->product_name }}
                                        </td>

                                        {{-- 4. الفرع --}}
                                        <td class="font-weight-semibold text-secondary">
                                            <i class="fa fa-building-o text-muted ml-1"></i>
                                            {{ $product->branch?->name ?? '---' }}
                                        </td>

                                        {{-- 5. آخر مورد تم الشراء منه --}}
                                        <td class="supplier-name-cell">
                                            {{ $latestPurchase?->supllier?->supllier?->name ?? 'لا يوجد سجل شراء' }}
                                        </td>

                                        {{-- 6. الرصيد / الكمية --}}
                                        <td>
                                            @if($isLowStock)
                                                <span class="qty-badge-danger">
                                                    <i class="fa fa-warning"></i> {{ $product->numberofpice }} (منخفض)
                                                </span>
                                            @else
                                                <span class="qty-badge-safe">
                                                    {{ $product->numberofpice }}
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted py-4">لا توجد منتجات لعرضها</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                </form>

                <div class="stock-pagination" dir="rtl">
                    <div class="stock-pagination-info">
                        صفحة {{ $products->currentPage() }} من {{ max($products->lastPage(), 1) }}
                        <span class="text-muted mx-1">|</span>
                        {{ $products->total() }} منتج
                    </div>
                    <nav class="stock-pagination-actions" aria-label="ترقيم الصفحات">
                        <a class="stock-page-link {{ $products->onFirstPage() ? 'disabled' : '' }}" href="{{ $products->previousPageUrl() ?? '#' }}" aria-label="الصفحة السابقة">
                            <i class="fa fa-chevron-right" aria-hidden="true"></i> السابق
                        </a>
                        <a class="stock-page-link {{ $products->hasMorePages() ? '' : 'disabled' }}" href="{{ $products->nextPageUrl() ?? '#' }}" aria-label="الصفحة التالية">
                            التالي <i class="fa fa-chevron-left" aria-hidden="true"></i>
                        </a>
                    </nav>
                </div>

            </div>
        </div>

    </div>
</div>
<!-- row closed -->

@endsection

@section('js')
<!-- Select2 & Datepicker -->
<script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/form-elements.js') }}"></script>

<script>
    var date = $('.fc-datepicker').datepicker({
        dateFormat: 'yy-mm-dd'
    }).val();

    $(document).ready(function() {
        $('select[name="clientnamesearch"]').on('change', function() {
            var selectclientid = $(this).val();
            if (selectclientid) {
                $.ajax({
                    url: "{{ URL::to('getcustomer') }}/" + selectclientid,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('#clientName').val(data['name']);
                        $('#address').val(data['address']);
                        $('#phonenumber').val(data['phone']);
                        $('#notes').val(data['notes']);
                    },
                });
            }
        });

        $('select[name="searchproductNo"]').on('change', function() {
            var selectclientid = $(this).val();
            if (selectclientid) {
                $.ajax({
                    url: "{{ URL::to('getproduct') }}/" + selectclientid,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('#quentity').val(data['numberofpice']);
                    },
                });
            }
        });
    });
</script>
@endsection