@extends('layouts.master_app')
@section('title') Reporte de merma | {{$company_product->name}} @endsection
@section('menu_tickets', 'here show')
@section('css')
<link href="/assets/app/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
	<!--begin::Toolbar-->
	<div class="toolbar py-2" id="kt_toolbar">
		<!--begin::Container-->
		<div id="kt_toolbar_container" class="container-fluid d-flex align-items-center">
			<!--begin::Page title-->
			<div class="flex-grow-1 flex-shrink-0 me-5">
				<!--begin::Page title-->
				<div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
					<!--begin::Title-->
					<h1 class="d-flex align-items-center text-dark fw-bold my-1 fs-3">Reporte de Merma: {{$company_product->name}}
						<!--begin::Separator-->
						<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
						<!--end::Separator-->
                        <small class="text-muted fs-7 fw-semibold my-1 ms-1">  {{ $start }} - {{ $end }}</small>
						<!--begin::Description-->
					<!--end::Description-->
					</h1>
					<!--end::Title-->
				</div>
				<!--end::Page title-->
			</div>
			<!--end::Page title-->
			<!--begin::Action group-->
			<div class="d-flex align-items-center flex-wrap">
				<!--begin::Wrapper-->
				<div class="flex-shrink-0 me-2">
					
				</div>
				<!--end::Wrapper-->
				<!--begin::Wrapper-->
				<div class="d-flex align-items-center">
				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Action group-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Toolbar-->
	
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
		<!--begin::Container--> 
		<div id="kt_content_container" class="container-xxl">
			<div class="row g-5 g-xl-10 mb-xl-10">

				<div class="col-lg-12 col-xl-12 col-xxl-12 mb-12 mb-xl-0">
					<!--begin::Card-->
					<div class="card">
						<!--begin::Card header-->
						<div class="card-header border-0 pt-6">
							<!--begin::Card title-->
							<div class="card-title">
								
							</div>
							<!--begin::Card title-->
							<!--begin::Card toolbar-->
                            <div class="card-toolbar">
                                <!--begin::Toolbar-->
                                <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                                    <!--begin::Filter-->
                                    <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                        <!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
                                        <span class="svg-icon svg-icon-2">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="currentColor" />
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->Filtro
                                    </button>
                                    <!--begin::Menu 1-->
                                    <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true">
                                        <!--begin::Header-->
                                        <div class="px-7 py-5">
                                            <div class="fs-5 text-dark fw-bold">Opciones</div>
                                        </div>
                                        <!--end::Header-->
                                        <!--begin::Separator-->
                                        <div class="separator border-gray-200"></div>
                                        <!--end::Separator-->
                                        <!--begin::Content-->
                                        <div class="px-7 py-5" data-kt-user-table-filter="form">
                                        
                                            <!--begin::Input group-->
                                            <div class="mb-10">
                                                <label class="form-label fs-6 fw-semibold">Fechas:</label>
                                                <input class="form-control form-control-solid" placeholder="Pick date rage" id="kt_daterangepicker_1"/>
                                            </div>
                                            <!--end::Input group-->
                                            <!--begin::Actions-->
                                            <div class="d-flex justify-content-end">
                                                <!--<button type="reset" class="btn btn-light btn-active-light-primary fw-semibold me-2 px-6" data-kt-menu-dismiss="true" data-kt-user-table-filter="reset">Reset</button> -->
                                                <button type="submit" class="btn btn-primary fw-semibold px-6" data-kt-menu-dismiss="true" data-kt-user-table-filter="filter">Aplicar</button>
                                            </div>
                                            <!--end::Actions-->
                                        </div>
                                        <!--end::Content-->
                                    </div>
                                    <!--end::Menu 1-->
                                
                                
                                </div>
                                <!--end::Toolbar-->
                                <!--begin::Group actions-->
                                <div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
                                    <div class="fw-bold me-5">
                                    <span class="me-2" data-kt-user-table-select="selected_count"></span>Selected</div>
                                    <button type="button" class="btn btn-danger" data-kt-user-table-select="delete_selected">Delete Selected</button>
                                </div>
                                <!--end::Group actions-->
                            </div>
                            <!--end::Card toolbar-->
						</div>
						<!--end::Card header-->
						<!--begin::Card body-->
						<div class="card-body py-4">
							@include('partials.success')
							<!--begin::Table-->
							<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
								<!--begin::Table head-->
								<thead>
									<!--begin::Table row-->
									<tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
										
										<th class="min-w-125px">Fecha</th>
                                        <th class="min-w-125px">Merma</th>
                                        <th class="min-w-125px">Vendedor</th>
									</tr>
									<!--end::Table row-->
								</thead>
								<!--end::Table head-->
								<!--begin::Table body-->
								<tbody class="text-gray-600 fw-semibold">
									@foreach( $loss as $item )
									<!--begin::Table row-->
									<tr>
										<td>{{ $item->date }}</td>
										<td> {{ $item->loss }} KG</td>
                                        <td> {{ $item->user->person->fullname }}</td>
									</tr>
									<!--end::Table row-->
									@endforeach

                                    <tr>
										<td><strong>TOTAL</strong></td>
                                        <td><strong> {{ $total_loss }} KG </strong></td>
									</tr>
								</tbody>
								<!--end::Table body-->
							</table>
							<!--end::Table-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Card-->
				</div>
			</div>

		</div>
		<!--end::Container-->
	</div>



@endsection

@section('js')
<script src="/assets/app/js/custom/confirm_delete.js"></script>
<script src="/assets/app/plugins/custom/datatables/datatables.bundle.js"></script>

<script src="/assets/app/js/custom/apps/user-management/users/list/table.js"></script>
<script src="/assets/app/js/custom/apps/user-management/users/list/add.js"></script>
<script src="/assets/app/js/custom/utilities/modals/create-campaign.js"></script>

<script src="/assets/app/js/custom/documentation/forms/flatpickr.js"></script>


<script>
	$("#kt_daterangepicker_1").daterangepicker({
    }, function(start, end, label) {
		location.href ='/inventories/loss/{{ $company_product->id }}/'+ start.format('YYYY-MM-DD') + "," + end.format('YYYY-MM-DD');
    });
</script>

@endsection