<?php $_shouldextend[1]=1; ?>

<?php $this->startSection('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 clientes">
 <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">
 <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" >
 <div class="bg-success rounded-x py-2 px-3 position-absolute on-top-1 on-left-1">
 <p class="sm-font-1 text-std-2 text-light mb-0 font-weight-bold">Activo</p>
 </div>
 <h5 class=" text-center mb-2 text-std font-weight-bold">Tá fácil</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">
 300 000
 <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 ">2 MBPS</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">512 KBPS</h5>
 </div>
 </div>

 </div>
 </div>
 <button class="btn btn-outline-danger w-100 border text-std-2 sm-font" data-toggle="modal" data-target="#remove-plan-modal">
 Desativar plano
 <i class="float-right fa fa-trash ml-2 mt-1"></i>
 </button>
 <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">
 Editar plano
 <i class="float-right fa fa-edit ml-2 mt-1"></i>
 </button>
 </div>
 </div>
 </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">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">
 </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">
 </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">
 </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">
 </div>
 </form>
 </div>

 <!-- Modal footer -->
 <div class="modal-footer bg-light border-top-0">
 <button class="btn btn-outline-dark text-std  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  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>
	<?php $this->startPush("scripts"); ?>
 <script>
 mapboxgl.accessToken = 'pk.eyJ1Ijoiam9zaHVhY2FwaSIsImEiOiJjazAxczVwemowZ3F6M25sY3N6YXQ2MTZjIn0.jJfby9vMVvyOJUks0-skJg';
 var map = new mapboxgl.Map({
 container: 'map',
 style: 'mapbox://styles/mapbox/streets-v11',
 center: [13.23432,-8.83682],
 zoom: 13.15,
 attributionControl: false
 });
 </script>

 <!--<script src="views/admin/assets/js/main.js"></script>-->
	<?php $this->stopPush(); ?>

<?php $this->stopSection(); ?>

<?php if (@$_shouldextend[1]) { echo $this->runChild('admin.layouts.adminApp', ["title" => "Telbanda admin"]); } ?>