@extends('layouts.master')
@section('css')

<!-- Internal Data table css -->

<!--Internal  Datatable js -->
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
<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">

<!-- 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>
    /* =========================
   Modern UI + Inner Borders
   ========================= */

    /* الخط العام */
    body,
    table,
    td,
    th,
    input,
    button,
    .form-control {
        font-family: "Tajawal", sans-serif;
        font-weight: 600 !important;
        color: #000 !important;
    }

    /* جدول بحدود داخلية */
    table {
        border-collapse: collapse !important;
        width: 100%;
    }

    table thead th {
        background: #f1f3f9;
        padding: 12px;
        font-weight: 700 !important;
        color: #000 !important;
        text-align: center;
        border: 1px solid #d6d6d6 !important;
        /* حدود داخلية */
    }

    /* الصفوف */
    #productsTableBody tr {
        background: #ffffff;
        transition: background 0.2s ease;
    }

    #productsTableBody tr:hover {
        background: #f7f9ff;
    }

    /* حدود داخلية للـ <td> */
    #productsTableBody td {
        border: 1px solid #e0e0e0 !important;
        padding: 10px !important;
        vertical-align: middle;
    }

    /* الحقول */
    .form-control {
        border-radius: 6px !important;
        border: 1px solid #c8ccd4 !important;
        transition: .2s;
    }

    .form-control:focus {
        border-color: #478bff !important;
        box-shadow: 0 0 0 2px rgba(71, 139, 255, 0.25);
    }

    /* أزرار اختيار المنتج */
    .btn-info,
    .btn-primary {
        background: linear-gradient(135deg, #478bff, #357bff) !important;
        border: none !important;
        color: #fff !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
    }

    .btn-info:hover,
    .btn-primary:hover {
        background: linear-gradient(135deg, #3f79ff, #296bff) !important;
        transform: translateY(-1px);
    }

    /* زر الحذف */
    .btn-danger {
        background: linear-gradient(135deg, #ff5b5b, #ff3b3b) !important;
        border: none !important;
    }

    .btn-danger:hover {
        background: linear-gradient(135deg, #ff4343, #ff2020) !important;
        transform: scale(1.05);
    }

    /* زر إضافة صف */
    #addProductBtn,
    .btn-add-product {
        background: linear-gradient(135deg, #1a73e8, #0d5bd8) !important;
        padding: 8px 20px;
        border-radius: 8px !important;
        color: #fff !important;
        font-weight: 700 !important;
        border: none;
    }

    #addProductBtn:hover {
        transform: translateY(-2px);
    }

    /* المودال */
    .modal-content {
        border-radius: 12px !important;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    }

    .modal-header {
        background: #f1f3f9;
        border-bottom: 1px solid #ddd !important;
    }

    .modal-title {
        color: #000 !important;
        font-weight: 700 !important;
    }

    .modal-body {
        background: #fff;
    }

    /* جدول البحث داخل المودال */
    #productsTable th,
    #productsTable td {
        border: 1px solid #dcdcdc !important;
    }

    #productsTable tr:hover {
        background: #eef3ff !important;
    }

    /* تحسين الـ div */
    td .d-flex {
        align-items: center;
    }
</style>
@section('title')
    {{ __('home.purchases') }}
    @stop
@endsection
@section('page-header')
    <!-- breadcrumb -->
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between" 
         style="display: flex; align-items: center; background-color: #f8f9fa; padding: 10px 20px; border-bottom: 2px solid #23395D; margin-bottom: 20px; width: 100%; border-radius: 4px 4px 0 0;">
        
        <div class="my-auto">
            <h4 class="content-title mb-0" style="color: #23395D; font-weight: bold; font-size: 18px;">{{ __('home.purchases') }}</h4>
        </div>

        <div class="d-flex flex-wrap align-items-center" style="gap: 5px;">
            
            <a href="{{ url('/' . ($page = 'previousPurchasesInvoices')) }}" 
               class="btn btn-sm text-white" 
               style="background-color: #23395D; border: 1px solid #1a2a44; border-radius: 3px; padding: 6px 14px; font-size: 11px; white-space: nowrap; font-weight: 500;">
               <i class="fa fa-history" style="margin-left: 5px;"></i> {{ __('home.previousPurchasesInvoices') }}
            </a>

            @can('purchase return')
            <button class="btn btn-sm text-white" 
                    style="background-color: #23395D; border: 1px solid #1a2a44; border-radius: 3px; padding: 6px 14px; font-size: 11px; white-space: nowrap; font-weight: 500;" 
                    data-toggle="modal" href="#updateinvoicebyidmodale">
                <i class="fa fa-edit" style="margin-left: 5px;"></i> {{ __('home.invoice_purchase_update') }}
            </button>
            @endcan

            <button class="btn btn-sm text-white" 
                    style="background-color: #23395D; border: 1px solid #1a2a44; border-radius: 3px; padding: 6px 14px; font-size: 11px; white-space: nowrap; font-weight: 500;" 
                    data-toggle="modal" href="#createsupplier">
                <i class="fa fa-user-plus" style="margin-left: 5px;"></i> {{__('home.addnewsupplier')}}
            </button>

            <button class="btn btn-sm text-white" 
                    style="background-color: #23395D; border: 1px solid #1a2a44; border-radius: 3px; padding: 6px 14px; font-size: 11px; white-space: nowrap; font-weight: 500;" 
                    data-toggle="modal" href="#createproduct">
                <i class="fa fa-plus" style="margin-left: 5px;"></i> {{ __('supprocesses.addproduct') }}
            </button>
        </div>
    </div>
</div>




@endsection
@section('content')


    <!-- row -->
    <div class="row">

        <div class="col-xl-12">
            <div class="card mg-b-20">


                <div class="card-header pb-0">


                    <br />
<b>Fatal error</b>:  Uncaught Error: Class &quot;App\Models\Avt&quot; not found in /home/ebdea/public_html/araqa.ebdea.online/resources/views/products/purchases.blade.php:225
Stack trace:
#0 {main}
  thrown in <b>/home/ebdea/public_html/araqa.ebdea.online/resources/views/products/purchases.blade.php</b> on line <b>225</b><br />