{% extends 'base.html.twig' %}
{% block title %}Distributors{% endblock %}
{% block stylesheets %} 
	{{ parent() }}
	{{encore_entry_link_tags('mainCSS')}}
	<style>
		.collapsible-header{color: #084A7A;font-weight: bold;}
		table td, th {padding: 15px 25px !important;}
    	.active > .collapsible-header.active{ background-color: #084A7A; color:#FFF; }
    	.padding-container{padding-top: 10px !important; padding-bottom: 10px !important;}
		.search_number_results{
			color: #039be5;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size:16px;
		}
		.search_number_results span{
			margin-left: 5px;
		}
		.circle {
			border-radius: 50%; 
		}
		.table{
		border-collapse: collapse;
		width: 100%;
		}
		.distributor-info{
			padding: 5px;
            margin-bottom: 10px;
		}
	</style>
{% endblock %}
{% block body %}
	{{ include('./components/full-loader-container.html.twig') }}
	{{ include("mx/nav_menu.twig", {option : 'distributors'}) }}
	<main id="main">
		<div  class="row justify-content-center">
			<div class="col-12 col-md-10">
				<div class="row bg-white shadow-sm">
					<div class="container-form">
						<h5 class="text-center">Distributors</h5>
						<div class="line orange"></div>
						<div class="clearfix"></div>
						
						<div class="text-end">
							<button type="button" v-on:click="showSearchSection()" class="btn btn-outline-primary"> <i class="fa-solid fa-magnifying-glass"></i></button>
						</div>
						
						<div class="col-12 row" v-show="searchSection" style="display: flex; justify-content: flex-start; align-items: center;">
							<div class="col-lg-3 col-md-3 col-sm-12" style="margin: 0 !important;">
								<label for="search">Search</label>
								<input type="text" id="search" class="form-control" v-model="searchField" style="margin-bottom: 10px;">
							</div>
							<div class="col-lg-3 col-md-3 col-sm-12" style="margin: 0 !important;">
								<label for="searchBy">Option</label>
								<select id="searchBy" v-model="searchByField" class="form-select">
									<option value="product">Product</option>
									<option value="distributorCode">Distributor Code</option>
								</select>
							</div>
							<div class="col-lg-2 col-md-2 col-sm-12 text-center" style="margin: 0 !important;">
								<button class="btn btn-primary" v-on:click="search()">Submit</button>
							</div>
							<div class="col-lg-3 col-md-3 col-sm-12 text-start" style="margin: 0 !important;" v-if="resultsSearch != 0">
								<span class="search_number_results">
									<i class="fas fa-user"></i>
									<i class="fas fa-search"></i>
									Results: [[resultsSearch]]
								</span>
							</div>
						</div>

						<div v-if="showDistributorsResults">
							<div class="right-align">
								<button type="button" class="waves-effect waves-red btn btn-flat" v-on:click="closeResults()"><i class="fa-solid fa-xmark"></i></button>
							</div>
							<table class="bordered responsive-table table ">
								<tr v-for="result in searchResults">
									<td>
										[[ result.distributorName ]]
									</td>
									<td>
										[[ result.product ]]
									</td>
									<td>
										[[ result.code ]]
									</td>
									<td class="text-center">
										<a class="btn btn-link" data-bs-toggle="modal" data-bs-target="#description-modal"  v-on:click='distributorInfo(result.idDistributor)'>
											<i class="fa-solid fa-eye"></i>
										</a>
									</td>
									{% if userData.role == "ROLE_ADMIN" %}
										<td class="text-center">
											<a :href="result.form">
												<i class="fa-solid fa-pen-to-square"></i>
											</a>
										</td>
									{% endif %}
								</tr>
							</table>
						</div>						
						<div class="clearfix"></div>

						<div v-if="showDistributors">
							<h5 class="text-center">
								Results: <span>[[ results ]]</span>
							</h5>
							<table id="distributors-table" class="table ">
								<thead>
									<tr>
										<th class="text-center"></th>
										<th class="text-center">Distributor Name</th>
										<th class="text-center">View</th>
										{% if userData.role == "ROLE_ADMIN" %}
											<th class="text-center">Edit</th>
										{% endif %}
									</tr>
								</thead>
								<tbody>
									<tr v-for="distributor in distributors" >
										<td class="text-center">
											<div class="circle bg-primary text-white d-flex justify-content-center align-items-center" style="width: 45px; height: 45px; font-size: 26px;">
												[[ distributor.distributorName[0] ]]
											</div>
										</td>
										<td>[[ distributor.distributorName ]]</td>
										<td class="text-center">
											<a  class="btn btn-link" data-bs-toggle="modal" data-bs-target="#description-modal"  v-on:click="distributorInfo(distributor.idDistributor)">
												<i class="fa-solid fa-eye"></i>
											</a>
										</td>
										{% if userData.role == "ROLE_ADMIN" %}
											<td class="text-center">
												<a :href="distributor.form">
													<i class="fa-solid fa-pen-to-square"></i>
												</a>
											</td>
										{% endif %}
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
			</div>
		</div>
		{% if userData.role == "ROLE_ADMIN" %}
			<div class="position-fixed bottom-0 end-0 m-3 m-md-4">
				<a class="p-0 btn btn-large rounded-circle teal d-flex align-items-center justify-content-center add-circle" href="{{ path('mx_distributor_form') }}">
				<i class="fa fa-plus text-white" aria-hidden="true"></i>
				</a>
  			</div>
	  	{% endif %}
	  	<div id="description-modal" class="modal fade" tabindex="-1" aria-labelledby="description-modal-label" aria-hidden="true">>
			<div class="modal-dialog modal-xl">
				<div class="modal-content">
					<div class="text-center" v-show="showPreloaderProduct">
						<div class="spinner-border m-5" role="status">
							<span class="visually-hidden">Loading...</span>
						</div>
					</div>
					<div class="row g-2" v-show="showDistInfo">
						<div id="distImage" class="distributor-image text-center col-lg-6 offset-lg-3">
							<img :src="distributorImage" class="img-fluid">
						</div>
						
						<div class="col-lg-4 text-end distributor-info">
							<b>Distributor Name:</b>
						</div>
						<div class="col-lg-8 distributor-info">
							<span>[[ distributorName ]]</span>
						</div>

						<div class="col-lg-4 text-end distributor-info">
							<b>Contact Name:</b>
						</div>
						<div class="col-lg-8 distributor-info">
							<span>[[ contactName ]]</span>
						</div>

						<div class="col-lg-4 text-end distributor-info">
							<b>Email:</b>
						</div>
						<div class="col-lg-8 distributor-info">
							<a :href="'mailto:' + distributorEmail">[[ distributorEmail ]]</a>
						</div>

						<div class="col-lg-4 text-end distributor-info">
							<b>Phone:</b>
						</div>
						<div class="col-lg-8 distributor-info">
							<span>[[ distributorPhone ]]</span>
						</div>

						<div class="col-lg-4 text-end distributor-info">
							<b>Address:</b>
						</div>
						<div class="col-lg-8 distributor-info">
							<span>[[ distributorAddress ]]</span>
						</div>

						<div class="col-lg-4 text-end distributor-info">
							<b>Website:</b>
						</div>
						<div class="col-lg-8 distributor-info">
							<a :href="distributorWebsite">[[ distributorWebsite ]]</a>
						</div>
						
						<div class="table-responsive mt-4 p-3">
							<table id="distProduct" class="table table-striped table-hover">
								<thead>
									<tr>
										<th>Product</th>
										<th>Code</th>
										<th>Link</th>
										<th>Comm. %</th>
										<th>Registry Date</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="product in products">
										<td>[[ product.product ]]</td>
										<td>[[ product.code ]]</td>
										<td><a :href="product.link" target="_blank">View</a></td>
										<td>[[ product.commission ]]</td>
										<td>[[ product.registryDate ]]</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-teal modal-action modal-close" data-bs-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
	</main>	
{% endblock %}
{% block javascripts %}
    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
	 {% if app.environment != 'dev' %}    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
    {% endif %}
	<script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
	<script type="text/javascript" src="https://unpkg.com/axios@0.12.0/dist/axios.min.js" defer></script>
	<script>
		window.assetBaseUrl = "{{ asset('') }}"; // Definimos la URL base
	</script>
	<script defer>
		$(function(){
			var vm = new Vue({
				el: "#main",
				delimiters : ['[[', ']]'],
				data : {
					searchField: '',
					searchByField: 'product',
					searchSection : false,
					searchResults: {},
					contactName  : "",
					distributors  : {},
					distributorName  : "",
					distributorEmail : "",
					distributorPhone : "",
					distributorAddress : "",
					distributorWebsite : "",
					distributorImage   : "",
					products : {},
					results: 0,
					resultsSearch: 0,
					showDistInfo: false,
					showPreloaderProduct: true,
					showDistributors: true,
					showDistributorsResults: false
				},
				methods: {
					showSearchSection : function(){
						if(this.searchSection){
							this.searchSection = false;
						}else{
							this.searchSection = true;
						}
					},
					distributorInfo: function(distributorId){
						self = this;
						if(self.showDistInfo){
							self.showDistInfo = false;
							self.showPreloaderProduct = true;
						}
						$.ajax({
							method: 'POST',
							url :`${getUrlApiByEnvironment(ENV)}/${API_SERVICE.DISTRIBUTORS}`,
								data : JSON.stringify({
									search 	: '',
									option	: "getOne",
									distributorId: distributorId
								})
						}).then(function({response}){
							self.distributorName    = response.companyName;
							self.contactName 		= response.contactName + " " + response.contactLastName; 
							self.distributorEmail   = response.email;
							self.distributorPhone   = response.phone;
							self.distributorAddress = response.address  + " " + response.county +" " + response.city + " " + response.state + " " + response.country;
							self.distributorWebsite = "http://" + response.website;
							if(response.products.length > 0){
								self.distributorImage = response.products[0].logo;
							}
							else {
							    self.distributorImage = "";
							}
							self.products = response.products;
							self.showDistInfo = true;
							self.showPreloaderProduct = false;
						}).catch(function(error){
							swalErrorMessage({message:error});
						}); 
						
					},
					search: function(){
						self = this;
						console.log(self.searchField,self.searchByField)
						$.ajax({
							type: 'POST',
							url :`${getUrlApiByEnvironment(ENV)}/${API_SERVICE.DISTRIBUTORS}`,
							data : JSON.stringify({
								search 	: self.searchField,
								option	: "getAll",
								searchBy : self.searchByField,
							})
						}).then(function({response}){
							if(response.length > 0){
								self.resultsSearch = response.length;
								self.searchResults = response;
								self.showDistributors = false,
								self.showDistributorsResults = true;
							}else{
								toastInfo({message:"No results Found!", position:"center", timer: 1000});
							}
						}).fail(function(error){
							console.log(error);
						});
					},
					closeResults: function(){
						this.showDistributors = true,
						this.resultsSearch = 0,
						this.showDistributorsResults = false;
					}
				},
				created: function(){
					$("#loader-container").show();
					self = this;
					$.ajax({
						type: 'POST',
						url :`${getUrlApiByEnvironment(ENV)}/${API_SERVICE.DISTRIBUTORS}`,
						data : JSON.stringify({
							search 	: '',
							option	: "getAll"
						})
					}).then(function({response}){
						self.distributors = response;
						self.results =  response.length;
						$("#loader-container").hide();
						$("#description-modal").modal();
					}).catch(function(error){
						$("#loader-container").hide();
						alert(error);
					});
				}
			});
		});
	</script>
{% endblock %}