@extends('layouts.master_app')
@section('title') Reportes de pagos @endsection
@section('menu_payments', '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">Pagos
					<!--begin::Separator-->
					<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
					<!--end::Separator-->
					<!--begin::Description-->
					<small class="text-muted fs-7 fw-semibold my-1 ms-1"> Reportes </small>
					<!--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-->
	
	<!--begin::Content-->
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			<!--begin::Row-->
			<div class="row g-5 g-xl-10 mb-xl-10">
				<!--begin::Col-->
				<div class="col-lg-12 col-xl-12 col-xxl-6 mb-5 mb-xl-0">
					<!--begin::Chart widget 3-->
					<div class="card card-flush overflow-hidden h-md-100">
						<!--begin::Header-->
						<div class="card-header py-5">
							<!--begin::Title-->
							<h3 class="card-title align-items-start flex-column">
								<span class="card-label fw-bold text-dark">Pagos mensuales</span>
							</h3>
							<!--end::Title-->
						</div>
						<!--end::Header-->
						<!--begin::Card body-->
						<div class="card-body d-flex justify-content-between flex-column pb-1 px-0">
							<!--begin::Statistics-->
							<div class="px-9 mb-5">
								<!--begin::Statistics-->
								<div class="d-flex mb-2">
									<span class="fs-4 fw-semibold text-gray-400 me-1">$</span>
									<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">14,094</span>
								</div>
								<!--end::Statistics-->
								<!--begin::Description-->
								<span class="fs-6 fw-semibold text-gray-400">VENTAS TOTALES</span>
								<!--end::Description-->
							</div>
							<!--end::Statistics-->
							<!--begin::Chart-->
							<div id="kt_apexcharts_3" style="height: 350px;"></div>
							<!--end::Chart-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Chart widget 3-->
				</div>
				<!--end::Col-->

				<!--begin::Col-->
				<div class="col-lg-12 col-xl-12 col-xxl-6 mb-5 mb-xl-0">
					<!--begin::Chart widget 3-->
					<div class="card card-flush overflow-hidden h-md-100">
						<!--begin::Header-->
						<div class="card-header py-5">
							<!--begin::Title-->
							<h3 class="card-title align-items-start flex-column">
								<span class="card-label fw-bold text-dark">Pagos del mes actual</span>
								
							</h3>
							<!--end::Title-->
						</div>
						<!--end::Header-->
						<!--begin::Card body-->
						<div class="card-body d-flex justify-content-between flex-column pb-1 px-0">
							<!--begin::Statistics-->
							<div class="px-9 mb-5">
								<!--begin::Statistics-->
								<div class="d-flex mb-2">
									<span class="fs-4 fw-semibold text-gray-400 me-1">$</span>
									<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">{{ number_format($total_payments_current_month, 2, '.', ',')}}</span>
								</div>
								<!--end::Statistics-->
								<!--begin::Description-->
								<!--end::Description-->
							</div>
							<!--end::Statistics-->
							<!--begin::Chart-->
							<div id="kt_charts_widget_3" class="min-h-auto ps-4 pe-6" style="height: 300px"></div>
							<!--end::Chart-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Chart widget 3-->
				</div>
				<!--end::Col-->
				
			</div>
			<!--end::Row-->
			<!--begin::Row-->
			<div class="row g-5 g-xl-10 mb-xl-10">

				<!--begin::Col-->
				<div class="col-lg-12 col-xl-12 col-xxl-12 mb-5 mb-xl-0">
					<!--begin::Chart widget 3-->
					<div class="card card-flush overflow-hidden h-md-100">
						<!--begin::Header-->
						<div class="card-header py-5">
							<!--begin::Title-->
							<h3 class="card-title align-items-start flex-column">
								<span class="card-label fw-bold text-dark">Pagos estimados para el próximo mes</span>
							</h3>
							<!--end::Title-->
						</div>
						<!--end::Header-->
						<!--begin::Card body-->
						<div class="card-body d-flex justify-content-between flex-column pb-1 px-0">
							<!--begin::Statistics-->
							<div class="px-9 mb-5">
								<!--begin::Statistics-->
								<div class="d-flex mb-2">
									<span class="fs-4 fw-semibold text-gray-400 me-1">$</span>
									<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">{{ number_format($estimated_payments_next_month, 2, '.', ',')}}</span>
								</div>
								<!--end::Statistics-->
								<!--begin::Description-->
								<!--end::Description-->
							</div>
							<!--end::Statistics-->
							<!--begin::Chart-->
							<div id="estimated_payments_next_month" class="min-h-auto ps-4 pe-6" style="height: 500px"></div>
							<!--end::Chart-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Chart widget 3-->
				</div>
				<!--end::Col-->
				
			</div>
			<!--end::Row-->
			
		</div>
		<!--end::Container-->
	</div>
	<!--end::Content-->

@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/widgets.bundle.js"></script>
<script src="/assets/app/js/custom/widgets.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 src="/assets/app/plugins/global/plugins.bundle.js"></script>
<script src="a/ssets/app/js/custom/documentation/charts/apexcharts.js"></script>
<script>
	//Pagos x mes
      	var options = {
          	series: [
				{
				name: 'Ventas',
				data: [11, 32, 45, 32, 34, 52, 41,60]
				}
			],
			chart: {
				height: 350,
				type: 'area',
				toolbar: {
					show: false
				}
			},
			dataLabels: {
				enabled: false
			},
			stroke: {
				curve: 'smooth'
			},
			xaxis: {
				type: 'text',
				categories: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
				axisBorder: {
					show: false,
				},
				axisTicks: {
					show: false
				},
			},
			tooltip: {
				y: {
					formatter: function (val) {
						return '$' + val 
					}
				}
			},
        };
        var chart = new ApexCharts(document.querySelector("#kt_apexcharts_3"), options);
        chart.render();

		//Pagos del mes actual
		var KTChartsWidget3 = (function() {
			var e = { self: null, rendered: !1 },
				t = function(e) {
					var t = document.getElementById("kt_charts_widget_3");
					if (t) {
						var a = parseInt(KTUtil.css(t, "height")),
							l = KTUtil.getCssVariableValue("--kt-gray-500"),
							r = KTUtil.getCssVariableValue("--kt-border-dashed-color"),
							o = KTUtil.getCssVariableValue("--kt-success"),
							i = {
								series: [{ name: "Pagos", data: [18, 18, 20, 20, 18, 18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 18, 20, 20, 22] }],
								chart: { fontFamily: "inherit", type: "area", height: a, toolbar: { show: !1 } },
								plotOptions: {},
								legend: { show: !1 },
								dataLabels: { enabled: !1 },
								fill: { type: "gradient", gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0, stops: [0, 80, 100] } },
								stroke: { curve: "smooth", show: !0, width: 3, colors: [o] },
								xaxis: {
									categories: ["", "Apr 02", "Apr 03", "Apr 04", "Apr 05", "Apr 06", "Apr 07", "Apr 08", "Apr 09", "Apr 10", "Apr 11", "Apr 12", "Apr 13", "Apr 14", "Apr 15", "Apr 16", "Apr 17", "Apr 18", ""],
									axisBorder: { show: !1 },
									axisTicks: { show: !1 },
									tickAmount: 6,
									labels: { rotate: 0, rotateAlways: !0, style: { colors: l, fontSize: "12px" } },
									crosshairs: { position: "front", stroke: { color: o, width: 1, dashArray: 3 } },
									tooltip: { enabled: !0, formatter: void 0, offsetY: 0, style: { fontSize: "12px" } },
								},
								yaxis: {
									tickAmount: 4,
									max: 24,
									min: 10,
									labels: {
										style: { colors: l, fontSize: "12px" },
										formatter: function(e) {
											return "$" + e + "K";
										},
									},
								},
								states: { normal: { filter: { type: "none", value: 0 } }, hover: { filter: { type: "none", value: 0 } }, active: { allowMultipleDataPointsSelection: !1, filter: { type: "none", value: 0 } } },
								tooltip: {
									style: { fontSize: "12px" },
									y: {
										formatter: function(e) {
											return "$" + e + "K";
										},
									},
								},
								colors: [KTUtil.getCssVariableValue("--kt-success")],
								grid: { borderColor: r, strokeDashArray: 4, yaxis: { lines: { show: !0 } } },
								markers: { strokeColor: o, strokeWidth: 3 },
							};
						(e.self = new ApexCharts(t, i)),
						setTimeout(function() {
							e.self.render(), (e.rendered = !0);
						}, 200);
					}
				};
			return {
				init: function() {
					t(e),
						KTThemeMode.on("kt.thememode.change", function() {
							e.rendered && e.self.destroy(), t(e);
						});
				},
			};
		})();

		// Pagos estimados para el próximo mes
		var options_2 = {
          	series: [
				{
				name: 'Pagos',
				data: [11, 32, 45, 32, 34, 52, 41,60]
				}
			],
			colors: [KTUtil.getCssVariableValue("--kt-warning")],
			chart: {
				height: 350,
				type: 'area',
				toolbar: {
					show: false
				}
			},
			dataLabels: {
				enabled: false
			},
			stroke: {
				curve: 'smooth'
			},

			xaxis: {
				type: 'text',
				categories: ["1", "2", "3", "4", "5", "6", "7","8","9","10","12","13",'14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
				axisBorder: {
					show: false,
				},
				axisTicks: {
					show: false
				},
			},
			tooltip: {
				y: {
					formatter: function (val) {
						return '$' + val 
					}
				}
			},
        };
        var chart = new ApexCharts(document.querySelector("#estimated_payments_next_month"), options_2);
        chart.render();
</script>
@endsection