@extends('client.layouts.app')
@section('title','عرض فواتير المشتريات')
@section('content')
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
          <div class="row breadcrumbs-top">
            <div class="col-12">

              <h2 class="content-header-title float-start mb-0">
                المشتريات
             </h2>
              <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{route('client.home')}}">لوحة التحكم </a>
                  </li>
                  <li class="breadcrumb-item active" >
                    المشتريات
                  </li>
                  <li class="breadcrumb-item active" >
                    عرض الفواتير
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
          <div class="mb-1 breadcrumb-right">
            <div class="dropdown">
              @can('اضافة فاتورة مشتريات جديدة')
                <a  href="{{ route('client.buy_bills.create') }}">
                    <button class="btn-icon btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-title="{{__("app.buttons.add-buy-bills")}}"><i data-feather='plus'> </i></button>
                </a>
              @endcan

            </div>
          </div>
        </div>
      </div>
      <div class="content-body">
        <!-- Basic Horizontal form layout section start -->
        <!-- Basic multiple Column Form section start -->
<section class="app-user-list">
    <div class="row">
      <div class="col-lg-3 col-sm-6">
        <div class="card">
          <div class="card-body d-flex align-items-center justify-content-between">
            <div >
              <h3 class="fw-bolder mb-75"  >{{$buy_bills->count()}}</h3>
              <span style="font-weight: bold">عدد الفواتير</span>
            </div>
            <div class="avatar bg-light-primary p-50">
              <span class="avatar-content">
                <i data-feather="file" class="font-medium-5"></i>
            </span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6">
        <div class="card">
          <div class="card-body d-flex align-items-center justify-content-between">
            <div >
              <h3 class="fw-bolder mb-75"  >{{$buy_bills->where('status','done')->count()}}</h3>
              <span style="font-weight: bold">عدد الفواتير المحفوظة </span>
            </div>
            <div class="avatar bg-light-success p-50">
                <span class="avatar-content">
                <i data-feather="file" class="font-medium-5"></i>
            </span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div >
                  <h3 class="fw-bolder mb-75"  >{{$buy_bills->where('status','open')->count()}}</h3>
                  <span style="font-weight: bold"> الفواتير الغير محفوظة </span>
                </div>
                <div class="avatar bg-light-danger p-50">
                    <span class="avatar-content">
                    <i data-feather="file" class="font-medium-5"></i>
                </span>
                </div>
              </div>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div >
                  <h3 class="fw-bolder mb-75"  >{{number_format($buy_bills->where('status','done')->sum('final_total'))}}</h3>
                  <span style="font-weight: bold"> إجمالي المشتريات</span>
                </div>
                <div class="avatar bg-light-warning p-50">
                    <span class="avatar-content">
                    <i data-feather="dollar-sign" class="font-medium-5"></i>
                </span>
                </div>
              </div>
        </div>
      </div>
    </div>
    <!-- list and filter start -->
    <div class="card">
      <div class="card-body border-bottom">
        <h4 class="card-title"  style="direction: rtl; text-align: right;">البحث &amp; و فلترة النتائج</h4>
        <div class="row">
          <div class="col-md-3 user_role">
            <label class="form-label " for="suppliers"  style=" font-weight:bold; direction: rtl; text-align: right;">الموردين</label>
            <select id="suppliers" class="form-select text-capitalize mb-md-0 mb-2 search">
                <option value="all" >كل الموردين</option>
                @foreach ($suppliers as $supplier)
                <option value="{{$supplier->id}}">{{$supplier->supplier_name}}</option>
                @endforeach

            </select>
        </div>
        <div class="col-md-3 user_role">
            <label class="form-label" for="products"  style="font-weight:bold; direction: rtl; text-align: right;">المنتجات</label>
            <select id="products" class="form-select text-capitalize mb-md-0 mb-2 search">
                <option value="all" >كل المنتجات</option>
                @foreach ($products as $product)
                <option value="{{$product->id}}">{{$product->product_name}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3 user_role">
          <label class="form-label" for="status"  style="font-weight:bold; direction: rtl; text-align: right;">حالة الفاتورة</label>
          <select id="status" class="form-select text-capitalize mb-md-0 mb-2 search">
              <option value="all">عرض الكل</option>
              <option value="done">تم الحفظ</option>
              <option value="open">لم تحفظ</option>

          </select>
      </div>
      <div class="col-md-3 user_role">
        <label class="form-label" for="status"  style="font-weight:bold; direction: rtl; text-align: right;">المسؤولين</label>
        <select id="clients" class="form-select text-capitalize mb-md-0 mb-2 search">
            <option value="all">عرض الكل</option>
            @foreach ($clients as $client)
            <option value="{{$client->id}}">{{$client->name}}</option>
            @endforeach
        </select>
    </div>

        </div>
        <br>
        <center>
        <a href="javascript:;" id="additionalButton" class="btn btn-link  waves-effect waves-float waves-light">
            خيارات إضافية
        </a>
      </center>
        <div  id="additional" style="display: none" class="row" >

          <div class="col-md-4 ">
            <label class="form-label" style="font-weight:bold; direction: rtl; text-align: right;">من تاريخ</label>
              <input type="date" name="from_date" class="form-control" id="from_date">
         </div>

         <div class="col-md-4 ">
          <label class="form-label" style="font-weight:bold; direction: rtl; text-align: right;">إلي تاريخ</label>
            <input type="date" name="to_date" class="form-control" id="to_date">
         </div>

        </div>

      </div>
      <div class="card-datatable table-responsive pt-0">
        <table id="example2" class="datatables-basic table dataTable no-footer dtr-column collapsed">
        <thead>
        <tr>
            <th>تحكم</th>
            <th>كود</th>
            <th> المورد</th>
            <th>تاريخ </th>
            <th> وقت </th>
            <th>الاجمالى النهائى</th>
            <th>الحالة</th>
            <th>المسؤول</th>



        </tr>
        </thead>
        <tbody>
                    </tbody>
    </table>
      </div>
    </div>
    <!-- list and filter end -->
  </section>
</div>
</div>
</div>
@endsection
@section('script')
<script src="{{asset('app-assets/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('app-assets/js/dataTables.bootstrap5.min.js')}}"></script>
<script src="{{asset('app-assets/js/sweetalert.min.js')}}"></script>
<script src="{{ asset('app-assets/js/select2.min.js') }}"></script>
<script>
  filter();

        $('.search').select2();
    var table =$('#example2').DataTable({
    "language": { "url": "{{asset('app-assets/data/locales/Arabic.json')}}"
    }});


$('#suppliers').on( 'change', function () {
  filter()
} );
$('#status').on( 'change', function () {
  filter();
});
$('#products').on( 'change', function () {
  filter();
});
$('#clients').on( 'change', function () {
  filter();
});
$('#from_date').on( 'change', function () {
  filter();
});
$('#to_date').on( 'change', function () {
  filter();
});
function filter() {

    var product_id = $('#products').val();
    var supplier = $('#suppliers').val();
    var status = $('#status').val();
    var clients = $('#clients').val();
    var from_date = $('#from_date').val();
    var to_date = $('#to_date').val();

    $.ajax({
        url: "{{route('client.buy_bills.search_filter')}}",
        type: "POST",
        data: {
            "_token": "{{ csrf_token() }}",
            product_id: product_id,
            supplier: supplier,
            status:status,
            clients:clients,
            from_date:from_date,
            to_date:to_date,
        },
        success: function (data) {
            table.clear().draw();
            $.map(data, function (value, index) {
              var url = "{{ route('client.buy_bills.print',['id'=>':id']) }}";
              url = url.replace(':id', value.buy_bill_number);
              //
              var editUrl = "{{ route('client.buy_bills.edit',['id'=>':id']) }}";
              editUrl = editUrl.replace(':id', value.buy_bill_number);
                table.row.add([
                  '<a class="pe-1 dropdown-toggle -arrow text-primary" data-bs-toggle="dropdown"><i class="las la-ellipsis-v"style="font-size:26px"></i></a><div class="dropdown-menu dropdown-menu-end"><a href="'+url+'" class="dropdown-item"><b> عرض </b></i></a>@can("تعديل فاتورة مشتريات") <a href="'+editUrl+'" class="dropdown-item"><b> تعديل </a>@endcan @can("حذف فاتورة مشتريات")<a id="'+value.id+'" onclick="deleteRow('+value.id+')" class="dropdown-item"><b> حذف </b></i></a> @endcan</div> ',
                    value.buy_bill_number,
                    value.supplier_id == null ? 'لا يوجد مورد' : value.supplier.supplier_name,
                    value.date,
                    value.time,
                    formatMoney(parseFloat(value.final_total)),
                    value.status == 'open' ? '<span class="badge rounded-pill badge-light-danger" text-capitalized=""> لم تحفظ </span>' : '<span class="badge rounded-pill badge-light-success" text-capitalized=""> تم الحفظ </span>',
                    value.client.name,
                ]).draw();
            });
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
};

function deleteRow(id){

swal({

title: "هل أنت متأكد من حذف هذة الفاتورة ",


type: "warning",

showCancelButton: true,

confirmButtonColor: "#DD6B55",

confirmButtonText: "تأكيد",

cancelButtonText: "إلغاء",

closeOnConfirm: false

}, function (isConfirm) {

if (!isConfirm) return;

$.ajax({

 url: "{{route('client.buy_bills.delete')}}",

   type: "post",

   data: {

       id: id,
       '_token':'{{csrf_token()}}'
   },

   dataType: "html",

beforeSend : function (){var ifConnected = window.navigator.onLine;if (!ifConnected) {toastr.info("يتم الآن إعادة الإتصال","لا يوجد إتصال بالإنترنت",{positionClass: "toast-top-right",tapToDismiss: !1,timeOut: 2e3,rtl: $("html").attr("data-textdirection")});}},


   success: function () {

       swal("تم الحذف بنجاح", "", "success");


  $("#" +id).closest('tr').remove();


   },

   error: function (xhr, ajaxOptions, thrownError) {

       swal("خطأ في الحذف ", "الرجاء المحاولة مرة آخري", "error");

   }

});

});
}

$('#additionalButton').on('click',function(){


  if($('#additional').is(':hidden')){
    $('#additional').show();
  }else{
    $('#additional').hide();
  }

});
</script>
@endsection

@section('style')
@endsection