@extends('layouts.master_admin')
@section('title') Pagos @endsection

@section('css')
<link href="/assets/app/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
	
	<!--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::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">
							<!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
							<span class="svg-icon svg-icon-1 position-absolute ms-6">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
									<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
								</svg>
							</span>
							<!--end::Svg Icon-->
							<input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Buscar" />
						</div>
						<!--end::Search-->
					</div>
					<div class="card-toolbar">
						<div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
							<a href="/admin/payments/export" type="button" class="btn btn-primary" >Exportar xls</a>
						</div>
						<!--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 pt-0">
					@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-gray-400 fw-bold fs-7 text-uppercase gs-0">
								<th></th>
								<th class="min-w-25px">Fecha</th>
								<th class="min-w-25px">Usuario</th>
								<th class="min-w-125px">Status</th>
								<th class="min-w-125px"></th>
								<th class="min-w-125px">Cantidad</th>
								<th class="min-w-130px">Forma de pago</th>
								<th class="text-end min-w-90px"></th>
							</tr>
							<!--end::Table row-->
						</thead>
						<!--end::Table head-->
						<!--begin::Table body-->
						<tbody class="fw-semibold text-gray-600">
							@foreach($payments as $item)
							<tr>
								<td></td>
								<td>
									<span class="text-gray-600 text-hover-primary mb-1">{{$item->date}}</span>
								</td>
								<td>
									<span class="text-gray-600 text-hover-primary mb-1"> <a href="/admin/users/detail/{{$item->user->id}}"> {{$item->user->person->fullname}} </a> </span>
									<br> <i class="fa fa-phone"></i> <a target="_blank" href="https://api.whatsapp.com/send?phone={{$item->lada}}{{$item->user->phone}}&text=Hola"> {{$item->user->phone}}</a>
								</td>
								<td>
									<span class="badge @if($item->status=='active') badge-light-success @else badge-light-danger @endif fw-bold me-auto px-4 py-3">{{$item->status }}</span>
								</td>
								<td>
									<span class="text-gray-800 text-hover-primary mb-1"> {{$item->subscription->plan->name ?? '' }}</span>
								</td>
								<td>
									<span class="text-gray-800 text-hover-primary mb-1"> {{$item->amount}} {{$item->currency}}</span>
								</td>
								<td>
									<span class="text-gray-800 text-hover-primary mb-1"> {{$item->type->name}}</span>
								</td>
								<td>
									<!--<button onclick="delete_item(this);" data="{{ route('payments.destroy', [$item->id]) }}" class="btn btn-sm btn-danger">Eliminar</button> -->
								</td>
							</tr>
							@endforeach
						</tbody>
						<!--end::Table body-->
					</table>
					<!--end::Table-->
				</div>
				<!--end::Card body-->
			</div>
			<!--end::Card-->

			<div class="card-body pt-0 pb-1">
				<div id="kt_charts_widget_271" class="min-h-auto"></div>
			</div>

		</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/custom/apps/user-management/users/list/table.js"></script>
<script src="/assets/app/js/custom/apps/user-management/users/list/add.js"></script>


<script>
		payments_mes = ;
		console.log(payments_mes);
		console.log("------------------------------");
		meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
		colores = ["#3E97FF", "#F1416C", "#50CD89", "#FFC700", "#7239EA", "#9B59B7", "#4CAF50", "#FF9800", "#8BC34A", "#4E942D", "#9C27B0", "#2E865F", "#9D6C41", "#3F51B5"];
		
		meses_nombre = [];
		totales = [];
		payments_mes = payments_mes.map((item, index) => {
			nombre_mes = meses[item.month - 1]+ " - " +  item.year;
			meses_nombre.push( nombre_mes );
			totales.push( item.total_amount );
		});

		console.log(totales);
		console.log(meses_nombre);

	var KTChartsWidget271 = (function() {
    var e = { self: null, rendered: !1 },
        t = function(e) {
            var t = document.getElementById("kt_charts_widget_271");
            if (t) {
                var a = KTUtil.getCssVariableValue("--kt-gray-800"),
                    l = KTUtil.getCssVariableValue("--kt-border-dashed-color"),
                    r = {
                        series: [{ name: "Total", data: totales }],
                        chart: { fontFamily: "inherit", type: "bar", height: 350, toolbar: { show: !1 } },
                        plotOptions: { bar: { borderRadius: 8, horizontal: !0, distributed: !0, barHeight: 50, dataLabels: { position: "bottom" } } },
                        dataLabels: {
                            enabled: !0,
                            textAnchor: "start",
                            offsetX: 0,
                            formatter: function(e, t) {
                                return wNumb({  }).to(e);
                            },
                            style: { fontSize: "14px", fontWeight: "600", align: "left" },
                        },
                        legend: { show: !1 },
                        colors: colores,
                        xaxis: {
                            categories: meses_nombre,
                            labels: {
                                formatter: function(e) {
                                    return e + "K";
                                },
                                style: { colors: a, fontSize: "14px", fontWeight: "600", align: "left" },
                            },
                            axisBorder: { show: !1 },
                        },
                        yaxis: {
                            labels: {
                                formatter: function(e, t) {
                                    return Number.isInteger(e) ? e + " - " + parseInt((100 * e) / 18).toString() + "%" : e;
                                },
                                style: { colors: a, fontSize: "14px", fontWeight: "600" },
                                offsetY: 2,
                                align: "left",
                            },
                        },
                        grid: { borderColor: l, xaxis: { lines: { show: !0 } }, yaxis: { lines: { show: !1 } }, strokeDashArray: 4 },
                        tooltip: {
                            style: { fontSize: "12px" },
                            y: {
                                formatter: function(e) {
                                    return e;
                                },
                            },
                        },
                    };
                (e.self = new ApexCharts(t, r)),
                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);
                });
        },
    };
})();
"undefined" != typeof module && (module.exports = KTChartsWidget271),
    KTUtil.onDOMContentLoaded(function() {
        KTChartsWidget271.init();
    });
</script>
@endsection