{% extends "admin/change_form.html" %}
{% load static %}
{% block extrastyle %}
	<style>
		.month_cot:hover *{
			cursor: pointer;
			font-weight: bold;
		}
	</style>
    <link rel="stylesheet" href="{% static 'alertify/alertify.min.css' %}">
    <script src="{% static 'hub/js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'alertify/alertify.min.js' %}"></script>
{% endblock %}

{% block field_sets %}
<!--<div class='col-12'> INformations Generales </div>-->
<div class='col-12'>
{{ block.super }}
</div>
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <style>
    #jazzy-actions div:first-child  {
      display: flex;
      flex-wrap: wraps;
      gap: 10px;
      justify-content: flex-start;
    }
    .submit-row input {
      margin: 0 !important;
    }
    .ajs-ok{
    display:none;
    }

@media (min-width: 30px) and (max-width: 564px) {
   #jazzy-actions div:first-child  {
      display: block;
      padding-left:8px;
      gap: 10px;
      justify-content: flex-start;
    }
    #jazzy-actions div{
    	padding-left: 8px;
    }
    .object-tools a{
    	padding-left: 10px;
    	display: none;
    }
    }
}

  </style>
{% endblock %}

{% block after_field_sets %}
{% if original != None %}
<!--
<div> <i class="fas fa-plus"></i> Nouvelle Cotisation </div>
-->
<div class="d-flex flex-wrap col-lg-12">
	<div class="col-lg-3">
		<div onclick="new_versement_launch()" class="card bg-info" data-toggle="modal" data-target="#newItemModal" style="min-width:200px;">
			<div class="card-content">
				<div class="card-body">
					<div class="card-title">
						<div>
						 <i class="fas fa-plus"></i> Nouveau Versement
						 </div>
					</div>
				</div>
			</div>
		</div>
	</div>

	
	<div class="col-lg-3">
		<div onclick="retrait_launch()" class="card bg-success" data-toggle="modal" data-target="#newItemModal" style="min-width:200px;">
			<div class="card-content">
				<div class="card-body">
					<div class="card-title">
						<div>
						 <i class="fas fa-exchange"></i> Beneficiaire
						 </div>
					</div>
				</div>
			</div>
		</div>
	</div>


</div>

<div class="d-flex justify-content-between flex-wrap col-lg-12">
<div class="col-lg-3">
	<div class="card" style="min-width:200px;">
		<div class="card-content">
			<div class="card-body">
				<div class="card-title">
					<div> Montant de l'Epargne </div>
					{% if True %}
					<div class="h6 text-bold"> {{original.epargne_count}} FCFA </div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

<div  class="col-lg-3">
	<div class="card" style="min-width:200px;">
		<div class="card-content">
			<div class="card-body">
				<div class="card-title">
					<div> Montant des Cotisations </div>
					{% if True %}
					<div class="h6 text-bold"> {{original.cotisation_count}} FCFA </div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

<div class="col-lg-3">
	<div class="card" style="min-width:200px;">
		<div class="card-content">
			<div class="card-body">
				<div class="card-title">
					<div> Statut de la Caisse </div>
					{% if original.check_complete %}
					<div class="text-success text-bold"> <i class="fas fa-check"></i> <span> Complete </span> </div>
					{% else %}
					<div class="text-danger text-bold"> <i class="fas fa-times"></i> <span> Incomplete </span> </div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

<div class="col-lg-3">
	<div class="card" style="min-width:200px;">
		<div class="card-content">
			<div class="card-body">
				<div class="card-title">
					<div> Caisse Solidarite </div>
					{% if True %}
					<div class="text-bold"> {{original.solidarite_count}} FCFA </div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

 
<div class="col-lg-12 d-flex flex-wrap">
	<div class="col-lg-6">
		<div class="d-flex py-3">
			<div class="p-1"> <span class="badge bg-success"> Cotisations </span> </div>
			<div class="p-1"> <span class="badge bg-white"> Epargne </span> </div>
			<div class="p-1"> <span class="badge bg-light"> Solidarite </span> </div>
		</div>

		<div class="card" style="min-width:300px;max-width: 100%;">
			<div class="card-content">
				<div class="card-body">
					<div class="card-title">
						<div> Historique des Cotisations </div>
						<!--
						<div>
							<div> 
								<div> <span class="badge"> Janvier </span> </div>
								<div> <span class="badge"> Fevrier </span> </div>
								<div> <span class="badge"> Mars </span> </div>
								<div> <span class="badge"> Avril </span> </div>
								<div> <span class="badge"> Mai </span> </div>
								<div> <span class="badge"> Juin </span> </div>
								<div> <span class="badge"> Juillet </span> </div>
								<div> <span class="badge"> Aout </span> </div>
								<div> <span class="badge"> Septembre </span> </div>
								<div> <span class="badge"> Octobre </span> </div>
								<div> <span class="badge"> Novembre </span> </div>
								<div> <span class="badge"> Decembre </span> </div>
								<div> </div>
							</div>
						</div>
						-->
						<div class='col-12'>
							<canvas id="barGraph" style="width:100%;" height="400"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div>
			<div class="card" style="min-width:300px;">
				<div class="card-content">
					<div class="card-body">
						<div> Evolution des Cotisations </div>
						<div class='col-12'>
							<canvas id="lineGraph" style="width:100%;" height="200"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>



			<div class="card" style="min-width:300px;">
				<div class="card-content">
					<div class="card-body d-flex">
						<div> Frais d'Adhesion</div>
						{% if original.adhesion_payed %}
						<div class="text-success pl-2"> <span class='badges'> <i class='fas fa-check'></i> OK </span> </div>
						{% else %}
						<div class="text-danger pl-2"> <span class='badges'> <i class='fas fa-times'></i> Pas Encore </span> </div>
						{% endif %}
					</div>
				</div>
			</div>

			<div class="card" style="min-width:300px;">
				<div class="card-content">
					<div class="card-body d-flex">
						<div> Cotisations de ce Mois : </div>
						{% if original.actu_cotisation > 0 %}
						<div class="text-success pl-2"> <span class='badges'> OK </span> </div>
						{% else %}
						<div class="text-danger pl-2"> <span class='badges'> Pas Encore </span> </div>
						{% endif %}
					</div>
				</div>
			</div>

			<div class="card" style="min-width:300px;">
				<div class="card-content">
					<div class="card-body">
						<div> Solidarite complete </div>
						{% if original.solidarite_complete %}
						<div class="text-success"> <span class='badges'> <i class='fas fa-check'></i> Oui </span> </div>
						{% else %}
						<div class="text-danger"> <span class='badges'> <i class='fas fa-times'></i> Pas Encore </span> </div>
						{% endif %}
					</div>
				</div>
			</div>


		</div>
		
		<!-- Retraits -->
		{% if original.last_retrait != None %}
		<div>
			<div class="card bg-success" style="min-width:300px;">
				<div class="card-content">
					<div class="card-body">
						<div> <i class='fas fa-exchange'></i> Dernier Retrait : <b> {{original.last_retrait.date_versement}} </b> </div>
					</div>
				</div>
			</div>
		</div>
		{% endif %}
	</div>
</div>


<div class="col-12 d-md-flex d-none flex-wrap">

	<div class="col-lg-12 p-2">
		<div> Cotisations recentes </div>
		<div class="col-lg-12 my-2 d-flex" style="overflow: auto;">
			{% for cotisation in original.cotisations %}
			<div class='p-2'>
				<a href="/admin/hub/cotisation/{{cotisation.id}}/" class="card bg-info {% cycle 'bg-success' 'bg-info' %}" style="min-width:300px;">
					<div class="card-content">
						<div class="card-body">
							<div class="d-flex justify-content-between">
								<div class="card-titles"> {{cotisation.versement.date_details}} </div>
								<div> <i class="fas fa-angle-right"></i> </div>
							</div>
							<div>
							<div class="card-sub-titleS"><small> {{cotisation.versement.montant}} FCFA </small></div>
							</div>
						</div>
					</div>
				</a>
			</div>
			{% empty %}
			<div class='p-2'>
				<div class="card" style="min-width:300px;">
					<div class="card-content">
						<div class="card-body">
							<div class="d-flex justify-content-between">
								<div class="card-title"> Aucun pour le moment </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			{% endfor %}

		</div>
	</div>

{% if original.epargnes.count > 0 %}
	<div class="col-lg-12 p-2">
		<div> Epargnes recentes </div>
		<div class="col-lg-12 my-2 d-flex" style="overflow: auto;">
			{% for epargne in original.epargnes %}
			<div class='p-2'>
				<a href="/admin/hub/epargne/{{epargne.id}}/" class="card bg-info {% cycle 'bg-success' 'bg-info' %}" style="min-width:300px;">
					<div class="card-content">
						<div class="card-body">
							<div class="d-flex justify-content-between">
								<div class="card-titles"> {{epargne.versement.date_details}}} </div>
								<div> <i class="fas fa-angle-right"></i> </div>
							</div>
							<div>
							<div class="card-sub-titleS"><small> {{epargne.versement.montant}} FCFA </small></div>
							</div>
						</div>
					</div>
				</a>
			</div>
			{% empty %}
			<div class='p-2'>
				<div class="card" style="min-width:300px;">
					<div class="card-content">
						<div class="card-body">
							<div class="d-flex justify-content-between">
								<div class="card-title"> Aucun pour le moment </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			{% endfor %}
		</div>
	</div>
	{% endif %}

{% if original.solidarites.count > 0 %}
	<div class="col-lg-12 p-2">
		<div> Frais de Solidarite recents </div>
		<div class="col-lg-12 my-2 d-flex " style="overflow: auto;">
			{% for epargne in original.solidarites %}
			<div class='p-2'>
				<a href="/admin/hub/epargne/{{epargne.id}}/" class="card bg-info {% cycle 'bg-success' 'bg-info' %}" style="min-width:300px;">
					<div class="card-content">
						<div class="card-body">
							<div class="d-flex justify-content-between">
								<div class="card-titles"> {{epargne.versement.date_details}} </div>
								<div> <i class="fas fa-angle-right"></i> </div>
							</div>
							<div>
							<div class="card-sub-titleS"><small> {{epargne.versement.montant}} FCFA </small></div>
							</div>
						</div>
					</div>
				</a>
			</div>
			{% empty %}
			<div class='p-2'>
				<div class="card" style="min-width:300px;">
					<div class="card-content">
						<div class="card-body">
							<div class="d-flex justify-content-between">
								<div class="card-title"> Aucun pour le moment </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			{% endfor %}
		</div>
	</div>
{% endif %}

</div>

</div>

<script src="{% static 'hub/js/chart.js' %}"></script>
<script>
  const ctx = document.getElementById('barGraph');
  const ctx2 = document.getElementById('lineGraph');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [
      	{% for m in original.cotisation_actual_year.months %}
        "{{m}}",
      	{% endfor %}
      ],
      datasets: [{
        label: 'Montant cotisé (FCFA)',
        data: [
      	{% for m in original.cotisation_actual_year.sommes %}
        {{m}},
      	{% endfor %}
        ],
        //Array(12).fill(0),  // 12 valeurs à zéro
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'rgba(54, 162, 235, 1)' 
      }]
    },
    options: {
      indexAxis: 'y',  // ➤ Barres horizontales
      scales: {
        x: {
          beginAtZero: true,
          title: {
            display: true,
            text: 'Montant (FCFA)'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Mois'
          }
        }
      },
      plugins: {
        title: {
          display: false,
          text: 'Répartition mensuelle des cotisations'
        }
      }
    }
  });
  
  new Chart(ctx2, {
    type: 'line',  
	data: {
	      labels: [
		"Jan", "Fév", "Mar", "Avr", "Mai", "Jui",
		"Jui", "Aoû", "Sep", "Oct", "Nov", "Déc"
	      ],
	      datasets: [{
		label: 'Montant cotisé (FCFA)',
		data: [      	{% for m in original.cotisation_actual_year.sommes %}
        {{m}},
      	{% endfor %}],  // 12 valeurs à zéro
		backgroundColor: 'rgba(54, 162, 235, 0.6)',
		borderColor: 'rgba(54, 162, 235, 1)' 
	      }]
	}
    })
</script>
<script>
var months = ["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
var actuMonth = new Date().getMonth()+1;


function retrait_launch(){
alertify.alert("<div class='text-success'> Nouveau Retrait </div>",`
<form action='/save_versement/' method='POST'>
	{% csrf_token %}
	<div>
		<div class="py-1">
			<div> <label> Compte </label> </div>
			<input type='hidden' value='{{original.id}}' name='compte'>
			<div>
			{{original}}
			</div>
	</div>

	<div>
			<div class="py-1">
				<div> <label> Montant Percu </label> </div>
				<div> <input type='number' class='form-control' value='' name='compte'> </div>
		</div>
  </div>



	<div class="pt-3">
		<div>
			<input value='Enregistrer le Retrait' type='submit' class='btn btn-success'>
		</div>
	</div>

</form>
`);	
}

var months_per = "<div style='overflow-y:auto;max-height:200px;' class='per_cot_div col-12 list-groups d-flex flex-wraps'>";
for (var i=0;i<12;i++){
	months_per += "  <div data-value="+i+" class='p-1 month_cot btn-light' onclick='akasha(this)'> <div class='p-2 d-flex'>  <div class='d-none'> <input value='"+i+"' class='period_check' type='checkbox'> </div>  <div>  <label> &nbsp;"+months[i]+" </label> </div> </div> </div>";
}
months_per += "</div>";

function akasha(elt){
	if ( $(elt).hasClass("btn-light") ){
		$(elt).removeClass("btn-light");
		$(elt).addClass("btn-primary");
	}
	else{
		$(elt).removeClass("btn-primary");
		$(elt).addClass("btn-light");
	}
}

function new_versement_launch(){

alertify.alert("Nouveau Versement",`
<form action='/save_versement/' method='POST' onsubmit='check_periods_clk()'>
{% csrf_token %}
<div>
	<div class="py-1">
		<div> <label> Compte </label> </div>
		<input type='hidden' value='{{original.id}}' name='compte'>
		<div>
		{{original}}
		</div>
	</div>
	
	<div class="py-1">
		<div> <label> Date de Versement </label> </div>
		<div>
		<input value='${new Date().getFullYear()}-${ (new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1) }-${new Date().getDate()}' type='date' name='date_versement' class='form-control'>
		</div>
	</div>
	
	
	<div class="py-1">
		<div> <label> Cotisation </label> </div>
		<div>
			<input placeholder='Montant en FCFA' type='number' name='cotisation' class='form-control'>
		</div>
	<div class="pt-1 pb-3">
		<div>
			<div> <small> Periodes de Cotisation </small> </div>
	    <div id='period-cnt-1'>
					${months_per}
	    </div>
    </div>
	</div>
	</div>

	<div class="py-1">
		<div> <label> Solidarite </label> </div>
		<div>
			<input placeholder='Montant en FCFA' type='number' name='solidarite' class='form-control'>
		</div>
	</div>

	<div class="pt-1 pb-3">
		<div>
			<div> <small> Periodes pour la Caisse de Solidarite</small> </div>
	    <div id='period-cnt-2'>
					${months_per}
	    </div>
    </div>
	</div>

	<div class="py-1">
		<div> <label> Epargne </label> </div>
		<div>
			<input placeholder='Montant en FCFA' type='number' name='epargne' class='form-control'>
		</div>


	</div>

	<div class="pt-3">
		<div>
			<input value='Enregistrer le Versement' type='submit' class='btn btn-success'>
		</div>
	</div>
</div>
<input type='hidden' value='' id='period_check_input1' name='period_check_input1'>
<input type='hidden' value='' id='period_check_input2' name='period_check_input2'>
</form>
`);
per_cot_div = document.getElementsByClassName("per_cot_div");
for (var j=0;j<2;j++)
{
	per_btn = per_cot_div[j].getElementsByClassName("month_cot")[ (actuMonth-1) ]
	$(per_btn).removeClass("btn-light");
	$(per_btn).addClass("btn-primary");
	per_cot_div[j].scrollTo({
	  left: per_btn.offsetLeft,
	  behavior: 'smooth'
	});
	}
}

function check_periods_clk(){
	//alert("sdsd asas");
	period_check = document.getElementsByClassName("period_check");
	period_check_input1 = document.getElementById("period_check_input1");
	period_check_input2 = document.getElementById("period_check_input2");

  pc1 = document.getElementById("period-cnt-1");
  pc2 = document.getElementById("period-cnt-2");
  month_cot1 = pc1.getElementsByClassName("month_cot");
  month_cot2 = pc2.getElementsByClassName("month_cot");

  // Shitty Code 1 ----------------------
	tmp = "";
	for (var i = month_cot1.length - 1; i >= 0; i--) {
		if ( $(month_cot1[i]).hasClass("btn-primary") ){
			tmp += month_cot1[i].getAttribute("data-value") + "#";
		}
	}
	period_check_input1.value = tmp;

	// Shitty Code 2 ----------------------
	tmp = "";
	for (var i = month_cot2.length - 1; i >= 0; i--) {
		if ( $(month_cot2[i]).hasClass("btn-primary") ){
			tmp += month_cot2[i].getAttribute("data-value") + "#";
		}
	}
	period_check_input2.value = tmp;


	return false;
}

</script>
{% endif %}
{% endblock %}



{% block extrabody %}
{% include './modals/new-item-modal.html' %}
{% endblock %}

