@extends('layouts.master_app')
@section('title') Pagos @endsection
@section('menu_proposals', 'here show')
@section('css')
<link href="/assets/app/plugins/custom/datatables/datatables.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">Pagos
						<!--begin::Separator-->
						<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
						<!--end::Separator-->
					</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" ng-controller="crmController">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl" >
			<!--begin::Card-->
			<div class="card">
				<!--begin::Card header-->
				<div class="card-header border-0 pt-6">
					<!--begin::Card title-->
					<div class="card-title">
						<!--begin::Search-->
						<div class="d-flex align-items-center position-relative my-1">
					
						</div>
						<!--end::Search-->
					</div>
					<div class="card-toolbar">
					</div>
				</div>
				<!--end::Card header-->
				<!--begin::Card body-->
				<div class="card-body py-4">
					@include('partials.success')
					@include('partials.error')

					<div class="row">
						<div class="col-md-6"></div>
						<div class="col-md-6" style="text-align: right;"><a  data-bs-toggle="modal" data-bs-target="#kt_modal_proposal"  class="btn btn-light-success me-3" ng-click="newPaymentProposal('{{$proposal->id}}')">Agregar pago</a></div>
					</div>

                <!--begin::Modal - Add Advisor-->
                <div class="modal fade" id="kt_modal_proposal" tabindex="-1" aria-hidden="true">
                    <!--begin::Modal dialog-->
                    <div class="modal-dialog modal-dialog-centered mw-650px">
                        <!--begin::Modal content-->
                        <div class="modal-content">
                            <!--begin::Modal header-->
                            <div class="modal-header" id="kt_modal_add_user_header">
                                <!--begin::Modal title-->
                                <h2 class="fw-bold">Agregar pago</h2>
                                <!--end::Modal title-->
                                <!--begin::Close-->
                                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                    <span class="svg-icon svg-icon-1">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </div>
                                <!--end::Close-->
                            </div>
                            <!--end::Modal header-->
                            <!--begin::Modal body-->
                            <div class="modal-body ">
                            <!--begin::Form-->
                                <form id="proposal_payments" class="form" ng-submit="addPayment()">
                                    @csrf
                                    <input type="text" id="id_proposal" name="id_proposal"  ng-model="formData.id_proposal"  hidden>
                                    <div class="row">
                                        <div class="col-lg-4 fv-row">
                                            <label for="date">Fecha</label>
                                            <input id="kt_datepicker_1" id="date" name="date" ng-model="formData.date" class="form-control form-control-lg ">
                                        </div>
                                        <div class="col-lg-4 fv-row">
                                            <label for="monto">Monto</label>
                                            <input type="text" id="amount" name="amount" ng-model="formData.amount" class="form-control form-control-lg ">
                                        </div>
                                        <div class="col-lg-4 fv-row">
                                            <label for="observations">Concepto</label>
                                            <input type="text" id="concept" name="concept" ng-model="formData.concept" class="form-control form-control-lg">
                                        </div>
                                    </div>
                                    <div  class="row">
                                        <div class="col-lg-6 fv-row">
                                            <label for="archivo">Forma de pago</label>
                                            <select id="payment_method_id" name="payment_method_id" class="form-select" ng-model="formData.payment_method_id">
                                                @foreach($payment_methods as $item)
                                                    <option value="{{$item->id}}" ng-selected="formData.payment_method_id == {{$item->id}}"  >{{$item->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-6 fv-row">
                                            <label for="archivo">Estatus</label>
                                            <select id="status_id" name="status_id" class="form-select" ng-model="formData.status_id">
                                                @foreach($status_payments as $item)
                                                    <option value="{{$item->id}}" ng-selected="formData.status_id == {{$item->id}}"  >{{$item->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        
                                    </div>											
                                    <div class="row">		
                                    <div class="col-lg-8 fv-row">
                                            <label for="archivo">Adjuntar archivo</label>
                                            <input class="form-control form-control" type="file" file-change="upload()" ng-model="file" accept=".pdf"> 
                                        </div>																					
                                    </div>											
                                    <div  class="row">
                                        <div class="col-lg-12 fv-row">
                                            <label for="concept">Observaciones:</label>
                                            <textarea id="observations" name="observations" ng-model="formData.observations"  rows="4" cols="50" class="form-control form-control-lg">
                                            </textarea>
                                        </div>									
                                    </div>
                                    <div  class="row">
                                        <br>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Actualizar</button>
                                    &nbsp;
                                    &nbsp;
                                    <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cerrar</button>
                                </form>							
                            <!--end::Form-->
                            </div>
                            <!--end::Modal body-->
                        </div>
                        <!--end::Modal content-->
                    </div>
                    <!--end::Modal dialog-->
                </div>
                <!--end::Modal - Add Advisor-->   

					<div class="row">
						<h3>Pagos</h3>
					</div>

					<hr>
					<table class="table align-middle table-row-dashed fs-6 gy-5" >
						<thead>
							<tr class="text-start text-gray-400 fw-bolder fs-7 gs-0">
								<th class="min-w-25px">Fecha</th>
								<th class="min-w-125px">Monto</th>
								<th class="min-w-125px">Concepto</th>
								<th class="min-w-125px">Forma de pago</th>
								<th class="min-w-125px">Observaciones</th>
							</tr>
						</thead>
						<tbody class="fw-bold text-gray-600" >
							@php $totalAmountPagos= 0; @endphp
							@foreach($pagos as $index => $item)
							<tr>
								<td> 
									01-01-1970								</td>
								<td>
									${{ number_format($item->amount,2) }}
									<br>
									<div class="badge badge-light-{{$item->status->color ?? 'default'}} fw-bold">{{$item->status->name ?? ''}}</div>
								</td>
								<td> {{ $item->concept }} </td>
								<td> {{  $item->payment_methods->name ?? ''}} </td>		
								<td> {{ $item->observations }} </td>
								<td>
									<button type="button" class="btn btn-light-primary me-3" data-bs-toggle="modal" data-bs-target="#kt_modal_proposal_payments"  ng-click="pagoPropuesta({{$item->id}})"  class="fs-7 fw-bold text-muted">Editar</button>
									@if($item->proposal->sale_contract->purchase_type_id==2)
									<a  href="/proposal_payments/pagare/{{$item->id}}" class="btn btn-light-primary me-3"> Pagaré </a>
									@endif
								</td>														
							</tr>
							@php $totalAmountPagos += $item->amount; @endphp
							@endforeach
						</tbody>
					</table>					

					<hr>
					<div class="card-header border-0 pt-6">
						<!--begin::Card title-->
						<div class="card-title">
							Gastos
						</div>
						<!--begin::Card title-->
						<!--begin::Card toolbar-->
						<div class="card-toolbar">
							<div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
								<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_upload_invoices">
									<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">
											<rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="currentColor"></rect>
											<rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="currentColor"></rect>
										</svg>
									</span>Agregar
								</button>
							</div>
							
						</div>
						<!--end::Card toolbar-->
					</div>
					<table class="table align-middle table-row-dashed fs-6 gy-5" >
						<thead>
							<tr class="text-start text-gray-400 fw-bolder fs-7 gs-0">
								<th class="min-w-125px">Concepto</th>
								<th class="min-w-125px">Monto</th>
							</tr>
						</thead>
						<tbody class="fw-bold text-gray-600" >
							@php $totalAmountIventory = 0; @endphp
							@foreach($inventory as $index => $item)
							<tr>
								<td >
									{{ $item->name }}
								</td>								
								<td>
								${{ number_format($item->amount,2) }}
								</td>
								<td> 
									<a type="button" class="btn btn-sm btn-icon"  onclick="delete_item(this);" data="{{ route('inventory.destroy', [$item->id]) }}">
										<span class="svg-icon svg-icon-3 text-danger">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="currentColor" />
												<path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="currentColor" />
												<path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="currentColor" />
											</svg>
										</span>
									</a>
								</td>
							</tr>
							@php $totalAmountIventory += $item->amount; @endphp
							@endforeach
						</tbody>
					</table>

					<h3>Costos</h3>
					<hr>
					<div><h4><b>Ingresos:</b> ${{ number_format($totalAmountPagos,2) }} </h4></div>
					<br>
					<div><h4><b>Egresos:</b> ${{ number_format($totalAmountIventory,2) }}</h4></div>
					<br>
					<div><h4><b>Utilidad:</b> ${{ number_format($totalAmountPagos - $totalAmountIventory,2) }}</h4></div>
							
					<hr>
					<div class="container" style="width: 400px;"> 
						<canvas id="sales_months" style="height: 100px;"></canvas>
					</div>					

					<!--begin::Modal - Add Advisor-->
					<div class="modal fade" id="kt_modal_proposal_payments" tabindex="-1" aria-hidden="true">
						<!--begin::Modal dialog-->
						<div class="modal-dialog modal-dialog-centered mw-650px">
							<!--begin::Modal content-->
							<div class="modal-content">
								<!--begin::Modal header-->
								<div class="modal-header" id="kt_modal_add_user_header">
									<!--begin::Modal title-->
									<h2 class="fw-bold">Editar pago</h2>
									<!--end::Modal title-->
									<!--begin::Close-->
									<div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
										<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
										<span class="svg-icon svg-icon-1">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
												<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
											</svg>
										</span>
										<!--end::Svg Icon-->
									</div>
									<!--end::Close-->
								</div>
								<!--end::Modal header-->
								<!--begin::Modal body-->
								<div class="modal-body ">
								<!--begin::Form-->
									<form id="proposal_payments" class="form" ng-submit="editPago()">
										@csrf
										<input id="id" name="id"  ng-model="formData.id" hidden>
										<div class="row">
											<div class="col-lg-4 fv-row">
												<label for="date">Fecha</label>
												<input id="kt_datepicker_1" id="date" name="date" ng-model="formData.date" class="form-control form-control-lg ">
											</div>
											<div class="col-lg-4 fv-row">
												<label for="monto">Monto</label>
												<input type="text" id="amount" name="amount" ng-model="formData.amount" class="form-control form-control-lg ">
											</div>
											<div class="col-lg-4 fv-row">
												<label for="observations">Concepto</label>
												<input type="text" id="concept" name="concept" ng-model="formData.concept" class="form-control form-control-lg">
											</div>
										</div>
										<div  class="row">
											<div class="col-lg-6 fv-row">
												<label for="archivo">Forma de pago</label>
												<select id="payment_method_id" name="payment_method_id" class="form-select" ng-model="formData.payment_method_id">
													@foreach($payment_methods as $item)
														<option value="{{$item->id}}" ng-selected="formData.payment_method_id == {{$item->id}}"  >{{$item->name}}</option>
													@endforeach
												</select>
											</div>
											<div class="col-lg-6 fv-row">
												<label for="archivo">Estatus</label>
												<select id="status_id" name="status_id" class="form-select" ng-model="formData.status_id">
													@foreach($status_payments as $item)
														<option value="{{$item->id}}" ng-selected="formData.status_id == {{$item->id}}"  >{{$item->name}}</option>
													@endforeach
												</select>
											</div>
											
										</div>											
										<div class="row">		
										<div class="col-lg-8 fv-row">
												<label for="archivo">Adjuntar archivo</label>
												<input class="form-control form-control" type="file" file-change="upload()" ng-model="file" accept=".pdf"> 
											</div>																					
										</div>											
										<div  class="row">
											<div class="col-lg-12 fv-row">
												<label for="concept">Observaciones:</label>
												<textarea id="observations" name="observations" ng-model="formData.observations"  rows="4" cols="50" class="form-control form-control-lg">
												</textarea>
											</div>									
										</div>
										<div  class="row">
											<br>
										</div>
										<button type="submit" class="btn btn-primary">Actualizar</button>
										&nbsp;
										&nbsp;
										<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cerrar</button>
									</form>							
								<!--end::Form-->
								</div>
								<!--end::Modal body-->
							</div>
							<!--end::Modal content-->
						</div>
						<!--end::Modal dialog-->
					</div>
					<!--end::Modal - Add Advisor-->


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

		<!--begin::Modal - Upload Invoices-->
		<div class="modal fade" id="kt_modal_upload_invoices" tabindex="-1" aria-hidden="true">
			<!--begin::Modal dialog-->
			<div class="modal-dialog modal-dialog-centered mw-900px" >
				<!--begin::Modal content-->
				<div class="modal-content">
					<!--begin::Form-->
					<form class="form" action="/inventory" method="POST"  enctype="multipart/form-data">
						@csrf
						<input type="hidden" name="proposal_id" value="{{$proposal->id}}">
						<input type="hidden" name="type" value="invoice">
						<input type="hidden" id="id_Item" name="id_Item" value="0">
						<!--begin::Modal header-->
						<div class="modal-header" id="kt_modal_new_address_header">
							<!--begin::Modal title-->
							<h2>Subir Gasto</h2>
							<!--end::Modal title-->
							<!--begin::Close-->
							<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
								<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
								<span class="svg-icon svg-icon-1">
									<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
										<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
									</svg>
								</span>
								<!--end::Svg Icon-->
							</div>
							<!--end::Close-->
						</div>
						<!--end::Modal header-->
						<!--begin::Modal body-->
						<div class="modal-body py-10 px-lg-17">
							<div class="scroll-y me-n7 pe-7" id="kt_modal_new_address_scroll" >
								<div class="row g-9 mb-8">
									<div class="col-md-6 fv-row mb-1">
										<label class="required fw-semibold fs-6 mb-2">Concepto</label>
										<input type="text" id="name" name="name" class="form-control mb-3 mb-lg-0" placeholder="Concepto" required />
										<input type="hidden" name="equipment" value="0">
									</div>
									<div class="col-md-6 fv-row mb-1">
										<label class="required fw-semibold fs-6 mb-2">Cantidad $</label>
										<input type="text" id="amount" name="amount" class="form-control mb-3 mb-lg-0" placeholder="Introduce el total del monto" required />
									</div>
									<div class="col-md-6 fv-row mb-1">
										<label class="required fw-semibold fs-6 mb-2">Selecciona el archivo</label>
										<input class="form-control" type="file" name="file">
									</div>
								</div>
							</div>
						</div>
						<!--end::Modal body-->
						<!--begin::Modal footer-->
						<div class="modal-footer flex-center">
							<!--begin::Button-->
							<button type="reset" data-bs-dismiss="modal" class="btn btn-light me-3">Cancelar</button>
							<!--end::Button-->
							<!--begin::Button-->
							<button type="submit" id="kt_modal_new_address_submit" class="btn btn-primary">
								<span class="indicator-label">Subir </span>
							</button>
							<!--end::Button-->
						</div>
						<!--end::Modal footer-->
					</form>
					<!--end::Form-->
				</div>
			</div>
		</div>
		<!--end::Modal - Upload Invoices-->

	</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/widgets.bundle.js"></script>
<script src="/assets/app//js/custom/widgets.js"></script>
<script src="/assets/app/js/custom/apps/chat/chat.js"></script>
<script src="/assets/app/js/custom/utilities/modals/upgrade-plan.js"></script>
<script src="/assets/app/js/custom/utilities/modals/create-campaign.js"></script>
<script src="/assets/app/js/custom/utilities/modals/users-search.js"></script>

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

<script>
	var data = [{{ $totalAmountIventory; }},{{ $totalAmountPagos - $totalAmountIventory}}];
	var titulo = ['Egresos','Utilidad'];
	new Chart('sales_months', {
	type: 'doughnut',
	data: {
			labels: titulo,
			datasets: [{
				label: '',
				data: data,     
				borderWidth: 1,
				backgroundColor:['#e72a49','#2ab6e7','#33ff6e']
			}]
		}
	});
</script>
@endsection