@extends('admin.layouts.adminApp', ["title" => "Telbanda admin"])

@section('content')

	<section class="container-fluid pt-3 mt-4">
		<div class="">
			<div class="row pb-3">
				<div class="col-12 col-lg-10">
					<div class="input-group ">

						<input type="text" class="form-control  border-right-0 rounded-left text-std-2"
							   placeholder="Pesquisar por planos">
						<div class="input-group-prepend">
                                    <span class="input-group-text rounded-right bg-white border-left-0 rounded-right "><i
												class="fa fa-search text-palid-2"></i></span>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-2">
					<button class="btn btn-outline-secondary text-std d-block mx-auto px-4 text-violet " data-toggle="modal"
							data-target="#add-plan-modal">
						<i class="material-icons float-left mr-2">add</i>
						Plano
					</button>
				</div>
			</div>

			<div class="row justify-content-center" id="plans-holder">
				@foreach($plans as $plan)
					<div class="col-12 col-lg-3 pb-3 ">
						<div class="plan-selection rounded border grid-container py-4 bg-white shadow-sm   position-relative hover-shadow-green" >
							@if($plan->plan_status == 1 )
								<div class="bg-success plan-status rounded-x py-2 px-3 position-absolute on-top-1 on-left-1" data-status="{{$plan->plan_status}}">
									<p class="sm-font-1 text-std-2 text-light mb-0 font-weight-bold">Activo</p>
								</div>
							@else
								<div class="bg-danger rounded-x py-2 px-3 position-absolute on-top-1 on-left-1" data-status="{{$plan->plan_status}}">
									<p class="sm-font-1 text-std-2 text-light mb-0 font-weight-bold">N activado</p>
								</div>
							@endif
							<h5 class=" text-center mb-2 text-std font-weight-bold p_name">{{$plan->plan_name}}</h5>
							<div class=" pb-3">
								<div class="row">
									<div class="col-12 col-lg-12 pb-3 border-bottom">
										<h3 class=" sm-font text-center  text-std-2" >
											<span class="p_price" data-non-formated-price = "{{$plan->plan_price}}">{{number_format($plan->plan_price,2,', ',' ')}}</span>
											<span class="sm-font ">AOA</span>
										</h3>
									</div>
									<div class="col-12 col-lg-6 border-right">
										<div class="  py-3 rounded-right container-fluid text-std-2">
											<h5 class=" sm-font text-center sm-font text-std-2 ">Download</h5>
											<h5 class=" sm-font text-center text-std-2 p_download">{{$plan->plan_characteristics->Download}}</h5>
										</div>
									</div>
									<div class="col-12 col-lg-6">
										<div class=" sm-font py-3 rounded container-fluid text-std-2">
											<h5 class="sm-font text-center  sm-font">Upload</h5>
											<h5 class=" sm-font text-center text-std-2 p_upload">{{$plan->plan_characteristics->Upload}}</h5>
										</div>
									</div>

								</div>
							</div>
							@if($plan->plan_status == 1 )
									<button class="btn btn-outline-danger btn-cancel-plan-data w-100 border text-std-2 sm-font" data-id = "{{$plan->id_plan}}" data-toggle="modal" data-target="#remove-plan-modal">
										Desativar plano
										<i class="float-right fa fa-trash ml-2 mt-1"></i>
									</button>
								@else
									<button class="btn btn-outline-secondary btn-cancel-plan-data w-100 border text-std-2 sm-font" data-id = "{{$plan->id_plan}}" data-toggle="modal" data-target="#remove-plan-modal">
										Re-activar plano
										<i class="float-right fa fa-check-circle ml-2 mt-1"></i>
									</button>
							@endif
							<button class="btn btn-outline-success btn-edit-plan-data mt-2  w-100 border text-std-2 sm-font"
									data-toggle="modal" data-target="#add-plan-modal" data-id = "{{$plan->id_plan}}">
								Editar plano
								<i class="float-right fa fa-edit ml-2 mt-1"></i>
							</button>
						</div>
					</div>
				@endforeach
			</div>

		</div>
	</section>
	<div class="modal fade" id="add-plan-modal">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">

				<!-- Modal Header -->
				<div class="modal-header "><h6 class="text-std-2 sm-font text-violet mb-0 modal-title plan-modal-title">Registro de plano</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- Modal body -->
				<div class="modal-body px-0 bg-light">
					<form class="container-fluid py-3">
						<div class="form-group">
							<label class="sm-font text-std-2" for="usr">Descrição:</label>
							<input type="text" class="form-control border-x text-std-2" placeholder="Descrição" id="p_name">
						</div>
						<div class="form-group">
							<label class="sm-font text-std-2" for="pwd">Preço:</label>
							<input type="text" class="form-control border-x text-std-2" placeholder="Preço" id="p_price">
						</div>
						<div class="form-group">
							<label class="sm-font text-std-2" for="pwd">Download:</label>
							<input type="text" class="form-control border-x text-std-2" placeholder="Download" id="p_download">
						</div>
						<div class="form-group">
							<label class="sm-font text-std-2" for="pwd">Upload:</label>
							<input type="text" class="form-control border-x text-std-2" placeholder="Upload" id="p_upload">
						</div>
					</form>
				</div>

				<!-- Modal footer -->
				<div class="modal-footer bg-light border-top-0">
					<button class="btn btn-outline-dark text-std submit-plan-data py-2 rounded-x px-4 text-violet "
							style="border:2px solid rgba(209,196,233 ,1); background: transparent;">
						<i class="material-icons float-left mr-2">add</i>
						plano
					</button>
				</div>

			</div>
		</div>
	</div>

	<div class="modal fade" id="remove-plan-modal">
		<div class="modal-dialog modal-dialog-centered rounded">
			<div class="modal-content">

				<!-- Modal Header -->
				<div class="modal-header "><h6 class="text-std-2 sm-font text-violet mb-0 modal-title">Desativar plano</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<!-- Modal body -->
				<div class="modal-body  bg-light">
					<p class="text-std-2">
						Tem a certeza que deseja desativar este plano ?
					</p>
				</div>

				<!-- Modal footer -->
				<div class="modal-footer bg-light border-top-0">
					<button class="btn btn-success text-std-2 font-weight-normal btn-remove-plan  py-2 rounded-x px-4 sm-font ">
						Sim
					</button>
					<button class="btn btn-outline-danger text-std-2 font-weight-normal  py-2 rounded-x px-4 sm-font ">
						Não
					</button>
				</div>

			</div>
		</div>
	</div>
	@push("scripts")
		<script src="assets/js/main.js"></script>
		<script src="views/admin/assets/js/plan.js"></script>
	@endpush

@endsection