Se agrega menu mi cuenta

config/routes.yaml

@@ -40,10 +40,13 @@ front_listas_no_contratadas:
     path: app/listas/disponibles
     controller: App\FrontendBundle\Controller\ListadoController::listasNoContratadas
     methods: [POST]
-#PRUEBAS    
+front_mi_cuenta:
+    path: mi/cuenta
+    controller: App\FrontendBundle\Controller\IndexController::miCuenta
+    methods: GET     
 front_prueba:
     path: app/musica/fake
     controller: App\FrontendBundle\Controller\IndexController::fake
 front_test:
     path : app/musica/test
-    controller: App\FrontendBundle\Controller\IndexController::test
\ No newline at end of file
+    controller: App\FrontendBundle\Controller\IndexController::test   
\ No newline at end of file

public/frontend/NewDataTables/css/dataTables.bootstrap4.min.css

+table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important;border-spacing:0}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:auto;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:0.85em;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap;justify-content:flex-end}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:0.9em;display:block;opacity:0.3}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:before,div.dataTables_scrollBody table thead .sorting_asc:before,div.dataTables_scrollBody table thead .sorting_desc:before,div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot>.dataTables_scrollFootInner{box-sizing:content-box}div.dataTables_scrollFoot>.dataTables_scrollFootInner>table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-sm>thead>tr>th{padding-right:20px}table.dataTable.table-sm .sorting:before,table.dataTable.table-sm .sorting_asc:before,table.dataTable.table-sm .sorting_desc:before{top:5px;right:0.85em}table.dataTable.table-sm .sorting:after,table.dataTable.table-sm .sorting_asc:after,table.dataTable.table-sm .sorting_desc:after{top:5px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0}
+

public/frontend/NewDataTables/css/responsive.bootstrap4.min.css

+table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child,table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before{top:12px;left:4px;height:14px;width:14px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;text-indent:0 !important;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#0275d8}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:'-';background-color:#d33333}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before{top:5px;left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:16px;width:16px;margin-top:-10px;margin-left:-10px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;text-indent:0 !important;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#0275d8}table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:'-';background-color:#d33333}table.dataTable>tbody>tr.child{padding:0.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul.dtr-details{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul.dtr-details>li{border-bottom:1px solid #efefef;padding:0.5em 0}table.dataTable>tbody>tr.child ul.dtr-details>li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul.dtr-details>li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:0.5em;box-shadow:0 12px 30px rgba(0,0,0,0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0,0,0,0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}div.dtr-bs-modal table.table tr:first-child td{border-top:none}

public/frontend/NewDataTables/dataTables.bootstrap4.min.js

+/*!
+ DataTables Bootstrap 4 integration
+ ©2011-2017 SpryMedia Ltd - datatables.net/license
+*/
+(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return b(d,a,a.document)}:b(jQuery,window,document)})(function(b,a,d,m){var f=b.fn.dataTable;b.extend(!0,f.defaults,{dom:"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
+renderer:"bootstrap"});b.extend(f.ext.classes,{sWrapper:"dataTables_wrapper dt-bootstrap4",sFilterInput:"form-control form-control-sm",sLengthSelect:"custom-select custom-select-sm form-control form-control-sm",sProcessing:"dataTables_processing card",sPageButton:"paginate_button page-item"});f.ext.renderer.pageButton.bootstrap=function(a,h,r,s,j,n){var o=new f.Api(a),t=a.oClasses,k=a.oLanguage.oPaginate,u=a.oLanguage.oAria.paginate||{},e,g,p=0,q=function(d,f){var l,h,i,c,m=function(a){a.preventDefault();
+!b(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&o.page(a.data.action).draw("page")};l=0;for(h=f.length;l<h;l++)if(c=f[l],b.isArray(c))q(d,c);else{g=e="";switch(c){case "ellipsis":e="&#x2026;";g="disabled";break;case "first":e=k.sFirst;g=c+(0<j?"":" disabled");break;case "previous":e=k.sPrevious;g=c+(0<j?"":" disabled");break;case "next":e=k.sNext;g=c+(j<n-1?"":" disabled");break;case "last":e=k.sLast;g=c+(j<n-1?"":" disabled");break;default:e=c+1,g=j===c?"active":""}e&&(i=b("<li>",
+{"class":t.sPageButton+" "+g,id:0===r&&"string"===typeof c?a.sTableId+"_"+c:null}).append(b("<a>",{href:"#","aria-controls":a.sTableId,"aria-label":u[c],"data-dt-idx":p,tabindex:a.iTabIndex,"class":"page-link"}).html(e)).appendTo(d),a.oApi._fnBindAction(i,{action:c},m),p++)}},i;try{i=b(h).find(d.activeElement).data("dt-idx")}catch(v){}q(b(h).empty().html('<ul class="pagination"/>').children("ul"),s);i!==m&&b(h).find("[data-dt-idx="+i+"]").focus()};return f});
+

public/frontend/NewDataTables/plugin/responsive.bootstrap4.min.js

+/*!
+ Bootstrap 4 integration for DataTables' Responsive
+ ©2016 SpryMedia Ltd - datatables.net/license
+*/
+(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net-bs4","datatables.net-responsive"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);if(!b||!b.fn.dataTable)b=require("datatables.net-bs4")(a,b).$;b.fn.dataTable.Responsive||require("datatables.net-responsive")(a,b);return c(b,a,a.document)}:c(jQuery,window,document)})(function(c){var a=c.fn.dataTable,b=a.Responsive.display,g=b.modal,e=c('<div class="modal fade dtr-bs-modal" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"/></div></div></div>');
+b.modal=function(a){return function(b,d,f){if(c.fn.modal){if(!d){if(a&&a.header){var d=e.find("div.modal-header"),h=d.find("button").detach();d.empty().append('<h4 class="modal-title">'+a.header(b)+"</h4>").append(h)}e.find("div.modal-body").empty().append(f());e.appendTo("body").modal()}}else g(b,d,f)}};return a.Responsive});
+
+

src/FrontendBundle/Controller/IndexController.php

@@ -145,6 +145,35 @@ class IndexController extends AbstractController {
                     "modal" => $modal,
                     "isChrome" => Utiles::isWindowsChrome($ua)
         ]);
+    }
+    
+    public function miCuenta(Request $request): response{
+        $log = Utiles::setLog('App\FrontendBundle\Controller::IndexController::miCuenta', 'app/frontend/micuenta');
+        $em = $this->getDoctrine()->getManager('default');
+        $ua = $request->headers->get('User-Agent');
+        $host = $request->getSchemeAndHttpHost();
+        $ip = $request->getClientIp();
+        $session = $this->get("session");
+        $msisdnSesion = $session->get('msisdn');
+        $msisdnEntrante = $request->get("msisdn");
+        $log->debug("entrando...HOST : $host |IP : $ip |MSISDN ENTRANTE: $msisdnEntrante| MSISDN SESION : $msisdnSesion");
+        
+        
+        if($msisdnEntrante != $msisdnSesion || !Utiles::isMsisdn($msisdnEntrante)){
+            $log->debug("el msisdn entrante no cumple con el formato o es distinto al obtenido de la sesion...");
+            $url = $this->generateUrl('front_index', array('msisdn' => $msisdnSesion, 'm' => 0));
+            $statusCode = 302;
+            return new RedirectResponse($url, $statusCode);
+        }
+        $log->debug("obteniendo el historial de suscripciones para el usuario $msisdnEntrante");
+        $suscripciones = $em->getRepository(PluSuscripcion::class)->findBy(array("susMsisdn" => $msisdnEntrante, "susVigente" => 1));
+        
+        return $this->render('frontend/paginas/mi_cuenta.html.twig', [
+                    "suscripciones" => $suscripciones,
+        ]);
+        
+        
+        
     }
 
     public function validarMsisdn(Request $request): Response {

src/FrontendBundle/Controller/ListadoController.php

@@ -69,7 +69,7 @@ class ListadoController extends AbstractController
         $suscripcion->setSusMsisdn($msisdn);
         $suscripcion->setSusInicio($fechaActual);
         $suscripcion->setSusFin($fechaUnaSemana);
-        $suscripcion->setSusVigente(PluSuscripcion::VIGENTE);
+        $suscripcion->setSusVigente(PluSuscripcion::NO_VIGENTE);
         $suscripcion->setSusEliminado(PluSuscripcion::ELIMINADO_FALSE);
         $suscripcion->setCreatedAt(new \DateTime());
         $suscripcion->setUpdatedAt(new \DateTime());
@@ -126,7 +126,7 @@ class ListadoController extends AbstractController
         $suscripcion->setSusMsisdn($ultimaSuscripcionVigenteLista->getSusMsisdn());
         $suscripcion->setSusInicio($ultimaSuscripcionVigenteLista->getSusInicio());
         $suscripcion->setSusFin($ultimaSuscripcionVigenteLista->getSusFin());
-        $suscripcion->setSusVigente(PluSuscripcion::VIGENTE);
+        $suscripcion->setSusVigente(PluSuscripcion::NO_VIGENTE);
         $suscripcion->setSusEliminado(PluSuscripcion::ELIMINADO_FALSE);
         $suscripcion->setCreatedAt(new \DateTime());
         $suscripcion->setUpdatedAt(new \DateTime());

templates/frontend/base.html.twig

@@ -20,7 +20,6 @@
 
     <!-- Custom styles for this template -->
     <link href="{{asset('frontend/css/one-page-wonder.min.css')}}" rel="stylesheet">
-    <link href="{{asset('frontend/style.css')}}" rel="stylesheet">
     {% block stylesheets %}{% endblock %}
 </head>
 

templates/frontend/includes/modal_canciones_lista_contratada.html.twig

@@ -14,7 +14,7 @@
             </div>
         </div>
         <div class="modal-footer">
-          <button onclick="showUnsuscribeList(event)" type="button" class="btn btn-danger" data-dismiss="modal">Cancelar Suscripcion</button>  
+          {#<button onclick="showUnsuscribeList(event)" type="button" class="btn btn-danger" data-dismiss="modal">Cancelar Suscripcion</button> #} 
           <button onclick="closeCurrentList(event)" type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
         </div>
       </div>

templates/frontend/includes/navbar.html.twig

@@ -9,10 +9,13 @@
         </button>
         <div class="collapse navbar-collapse" id="navbarResponsive">
             <ul class="navbar-nav ml-auto">
-                
-                {#<li class="nav-item">
-                    <a class="nav-link" href="#">Contactanos</a>
-                </li>#}
+                {#falta agregar ir a inicio#}
+                <li class="nav-item">
+                   <a class="nav-link" href="{{path('front_index', {msisdn: app.session.get('msisdn'), m: 0})}}">Inicio</a> 
+                </li>    
+                <li class="nav-item">
+                    <a class="nav-link" href="{{path('front_mi_cuenta', {msisdn: app.session.get('msisdn')})}}">Mi cuenta</a>
+                </li>
                 
             </ul>
         </div>

templates/frontend/index.html.twig

 {% extends 'frontend/base.html.twig' %}
+{% block stylesheets %}
+    <link href="{{asset('frontend/style.css')}}" rel="stylesheet">
+{% endblock %}    
 {% block body %}
     <header class="masthead text-center text-white">
         <div class="masthead-content">
@@ -25,8 +28,6 @@
         {% include 'frontend/includes/modal_contratar_msisdn.html.twig' %}
         {% include 'frontend/includes/modal_contratar_msisdn_fallida.html.twig' %}
         {% include 'frontend/includes/modal_contratar_msisdn_verificada.html.twig' %}
-        {% include 'frontend/includes/modal_des_contratar_lista.html.twig' %}
-        {% include 'frontend/includes/modal_des_contratar_realizada.html.twig' %}
     {% endif %}
 {% endblock %}
 {% block javascripts %}
@@ -56,7 +57,7 @@
             }
 
         });
-        function recargarListas(event){
+        function recargarListas(event) {
             event.preventDefault();
             window.location.reload(true);
         }
@@ -610,5 +611,5 @@
                 // Document is focused
             }
         }, false);
-    </script>
+    </script>  
 {% endblock %}  

templates/frontend/paginas/mi_cuenta.html.twig

+{% extends 'frontend/base.html.twig' %}
+{% block title %}Mi Cuenta{% endblock %}
+{% block stylesheets %}
+    <link href="{{ asset('frontend/NewDataTables/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
+    <link href="{{ asset('frontend/NewDataTables/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" />
+{% endblock %}
+{% block body %}
+    <header class="masthead text-center text-white">
+        <div class="masthead-content">
+            <div class="container">
+                <h1 class="masthead-heading mb-0">Toda Tu Música</h1>
+                <h2 class="masthead-subheading mb-0">En Un Solo Lugar</h2>
+            </div>
+        </div>
+        <div class="bg-circle-1 bg-circle"></div>
+        <div class="bg-circle-2 bg-circle"></div>
+        <div class="bg-circle-3 bg-circle"></div>
+        <div class="bg-circle-4 bg-circle"></div>
+    </header>
+    <div class="container">
+        <div class="row align-items-center">
+            <h2>Suscripciones Activas</h2>  
+        </div>
+        <table class="table table-striped table-bordered dt-responsive nowrap" id="data-table">
+            <thead>
+            <th>Número</th>
+            <th>Imagen</th>
+            <th>Nombre Lista</th>
+            <th>Vigente</th>
+            <th>Precio Lista</th>
+            <th>Fecha Inicio Suscripción</th>
+            <th>Fecha Fin Suscripción</th>
+            <th>Tiempo Restante Suscripción</th>
+            <th>Acción</th>
+            </thead>
+            <tbody>
+                {%for suscripcion in suscripciones %}
+                    <tr>    
+                        <td>{{suscripcion.getSusMsisdn()}}</td>
+                        <td><img id="imgListaContratada_{{suscripcion.getLisId().getLisId()}}" class="img-fluid rounded-circle" style ="width:60px; height:60px;" src="http://newbackendcontenidos.gearlabs.cl{{suscripcion.getLisId().getPathImagen()}}"></td>
+                        <td>{{suscripcion.getLisId().getLisNombre()}}</td>
+                        <td>{% if suscripcion.getSusVigente() == 1 %}<span style="color:green">Si</span>{% else %}<span style="color:red">No</span>{% endif %}</td>
+                        <td><b>{{suscripcion.getLisId().getLisPrecio()}}</b> CLP</td>
+                        <td>{{suscripcion.getFechaInicioFormatted()}}</td>
+                        <td>{{suscripcion.getFechaFinFormatted()}}</td>
+                        <td>{% if suscripcion.getSusVigente() == 1 %}{{suscripcion.getTiempoRestanteSuscripcion()}}{% else %} 0 días {% endif %}</td>
+                        <td><button onclick="showUnsuscribeList(event, '{{suscripcion.getLisId().getLisNombre()}}',    {{suscripcion.getLisId().getLisId()}} )" type="button" class="btn btn-danger" data-dismiss="modal">Cancelar Suscripcion</button>  </td>
+                    </tr>    
+                {% endfor %}
+            </tbody> 
+        </table>
+    </div>
+    {% include 'frontend/includes/modal_des_contratar_lista.html.twig' %}
+    {% include 'frontend/includes/modal_des_contratar_realizada.html.twig' %}            
+{% endblock %}
+{% block javascripts %}
+    <script src="{{ asset('frontend/NewDataTables/jquery.dataTables.min.js')}}"></script>
+    <script src="{{ asset('frontend/NewDataTables/dataTables.bootstrap4.min.js')}}"></script>
+    <script src="{{ asset('frontend/NewDataTables/plugin/dataTables.responsive.min.js')}}"></script>
+    <script src="{{ asset('frontend/NewDataTables/plugin/responsive.bootstrap4.min.js')}}"></script>
+    <script>
+                            var msisdn = "{{ app.session.get('msisdn') }}";
+                            var idLista = 0;
+                            var nombreLista = "";
+
+                            function showUnsuscribeList(event, nombre, lista) {
+                                event.preventDefault();
+                                nombreLista = nombre;
+                                idLista = lista;
+                                $("#modalSongListContratada").modal("toggle");
+                                $("#modalDescontratarLista").modal("toggle");
+                                $("#nombreListaContratada").html(nombreLista);
+                            }
+
+                            function unsuscribe(event) {
+                                event.preventDefault();
+                                var url = "{{path('front_canciones_descontratar')}}";
+                                var formData = new FormData();
+                                formData.append("msisdn", msisdn);
+                                formData.append("lisId", idLista);
+                                $.ajax
+                                        ({
+                                            type: "POST",
+                                            url: url,
+                                            data: formData,
+                                            async: true,
+                                            cache: false,
+                                            contentType: false,
+                                            processData: false,
+                                            timeout: 60000,
+                                            statusCode: {
+                                                400: function (respuesta) {
+                                                    errorMessage(JSON.parse(respuesta.responseText).errors, "#message-container-descontratacion");
+                                                },
+                                                500: function (respuesta) {
+                                                    errorMessage("Ha ocurrido un error, favor reintente más tarde", "#message-container-descontratacion");
+                                                }
+                                            },
+                                            success: function (data) {
+                                                $("#modalDescontratarLista").modal("hide");
+                                                $("#modalDesContratarRealizada").modal({
+                                                    backdrop: 'static',
+                                                    keyboard: false
+                                                });
+                                                $("#nombreListaContratarVerificada").html(nombreLista);
+                                            },
+                                        });
+                            }
+
+                            function errorMessage(msg, container) {
+                                console.log(msg);
+                                var error = '<div class="alert alert-danger" role="alert">' + msg + '</div>';
+                                $(container).html(error);
+                            }
+
+                            function recargarListas(event) {
+                                event.preventDefault();
+                                window.location.reload(true);
+                            }
+
+
+
+    </script>
+    <script>
+        $(document).ready(function () {
+            TableManageResponsive.init();
+        });
+
+        var handleDataTableResponsive = function () {
+            "use strict";
+
+            if ($('#data-table').length !== 0) {
+                $('#data-table').DataTable({
+                    bPaginate: true,
+                    order: [[0, 'desc']],
+                    "language": {
+                        "lengthMenu": "Mostrando _MENU_ registros por página.",
+                        "zeroRecords": "No se encontró  ningún registro.",
+                        "info": "Mostrando página _PAGE_ de _PAGES_.",
+                        "infoEmpty": "No hay registros disponibles.",
+                        "infoFiltered": "(filtrado desde _MAX_ registros totales.)",
+                        "search": "Buscar",
+                        "paginate": {
+                            "first": "Primera Página",
+                            "last": "Última Página",
+                            "next": "Siguiente",
+                            "previous": "Anterior",
+                        }
+                    }
+                });
+            }
+        };
+
+        var TableManageResponsive = function () {
+            "use strict";
+            return {
+                //main function
+                init: function () {
+                    handleDataTableResponsive();
+                }
+            };
+        }();
+    </script>    
+{% endblock %}