@extends('template')

@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="page-content-inner">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light">
                            <div class="mt-element-step">
                                <div class="row">
                                    <div class="col-md-12">
                                        <span class="font-blue-madison title"><i class="fa fa-phone-square"></i> Dids</span>
                                        <hr>
                                    </div>
                                </div>
                                <div class="row step-thin">
                                    <div class="mt-step-desc">
                                        <div id="number" style="cursor: pointer;" class="col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison">
                                            <div id="number-title" class="mt-step-title uppercase font-white">
                                                Números Virtuais
                                            </div>
                                            <div id="number-description" class="mt-step-content font-white">
                                                Escolhidos no sistema ou portados
                                            </div>
                                        </div>

                                        <div id="portability" style="cursor: pointer;" class="col-md-6 mt-step-col bg-grey">
                                            <div id="portability-title" class="mt-step-title uppercase font-grey-cascade">
                                                Portabilidade
                                            </div>
                                            <div id="portability-description" class="mt-step-content font-grey-cascade">
                                                Solicitados pelo sistema
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="tab-number">
                                <div class="portlet-body">

                                    <table class="table table-striped table-hover table-light" id="table-numbers">
                                        <thead>
                                            <tr class="uppercase bg-blue-madison">
                                                <th class="col-md-3 font-white">ID Siptek</th>
                                                <th class="col-md-3 font-white">Nome</th>
                                                <th class="col-md-3 font-white">Email</th>
                                                <th class="col-md-3 font-white">Número</th>
                                                <th class="col-md-3 font-white"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($numbers as $number)
                                                <tr>
                                                    <td>#{{ $number->remote_id }}</td>
                                                    <td>{{ $number->name }}</td>
                                                    <td>{{ $number->email }}</td>
                                                    <td>({{ $number->ddd }}) {{ $number->number }}</td>
                                                    <td>
                                                        <a class='btn red popovers' data-container="body" data-trigger="hover" data-placement="top" data-content="Remover Número"  onclick="removeRegistro('remover-numero/','{{ $number->remote_id }}')" title="Remover">
                                                            <i class="fa fa-times"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div id="tab-portability" style="display:none;">
                                <div class="portlet-body">

                                    <div class="alert alert-success" id="message_portability" style="display:none;">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                        Número enviado com sucesso.
                                    </div>

                                    {!! Form::open(['route' => 'admin.portability', 'method' => 'post']) !!}
                                        <table class="table table-striped table-hover table-light" id="table-portabilites">
                                            <thead>
                                                <tr class="uppercase bg-blue-madison">
                                                    <th class="col-md-3 font-white">Nome</th>
                                                    <th class="col-md-3 font-white">Email</th>
                                                    <th class="col-md-2 font-white">Número</th>
                                                    <th class="col-md-2 font-white">Operadora</th>
                                                    <th class="col-md-1 font-white">Status</th>
                                                    <th class="col-md-1 font-white">
                                                        Ações
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($portabilities as $portability)
                                                    <tr>
                                                        <td>{{ $portability->name }}</td>
                                                        <td>{{ $portability->email }}</td>
                                                        <td>({{ $portability->ddd }}) {{ $portability->number_portability }}</td>
                                                        <td>{{ $portability->origin_operator }}</td>
                                                        <td title="{{ $portability->status == 'agendado' ? dateToBR($portability->data_agendado) : 'Status'}}">{{ $portability->status == '' ? 'Aguardando portabilidade' : $status[$portability->status]}}</td>
                                                        <td>
                                                        <a class='btn blue-madison popovers' data-container="body" data-trigger="hover" data-placement="top" data-content="Editar Portabilidade" href="{{ route('admin.portability.edit', ['id' => $portability->id ]) }}" title="Editar">
                                                            <i class="fa fa-edit"></i>
                                                        </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop()

@section('js-admin-number')
<script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
<script src="{{asset('/assets/global/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        /**
         * Tabela padrão, com paginação, busca registros por página
         */
        $('#table-numbers').DataTable({
            "aoColumnDefs": [
              {'bSortable': false, 'aTargets': ["no-sort"]}
            ],
            "iDisplayLength": 15,
            "language": {
                "lengthMenu": "Exibir _MENU_",
                "zeroRecords": "Nenhum registro",
                "info": "Exibindo página(s) _PAGE_ de _PAGES_",
                "infoEmpty": "Não há registros disponíveis",
                "search" : "Pesquisar ",
                "paginate": {
                    "first":    "Primeiro",
                    "previous": "Anterior",
                    "next":     "Próximo",
                    "last":     "Último"
                }
            }
        });

        /**
         * Tabela padrão, com paginação, busca registros por página
         */
        $('#table-portabilites').DataTable({
            "aoColumnDefs": [
              {'bSortable': false, 'aTargets': ["no-sort"]}
            ],
            "iDisplayLength": 15,
            "language": {
                "lengthMenu": "Exibir _MENU_",
                "zeroRecords": "Nenhum registro",
                "info": "Exibindo página(s) _PAGE_ de _PAGES_",
                "infoEmpty": "Não há registros disponíveis",
                "search" : "Pesquisar ",
                "paginate": {
                    "first":    "Primeiro",
                    "previous": "Anterior",
                    "next":     "Próximo",
                    "last":     "Último"
                }
            }
        });

        $("#portability").click(function() {
            // Mostra ou esconde tab
            $("#tab-number").css('display', 'none');
            $("#tab-portability").css('display', 'block');

            // Removendo classe atual da aba
            $("#number").removeClass('col-md-4 mt-step-col bg-blue-madison bg-font-blue-madison');
            $("#number-number").removeClass('mt-step-number bg-white font-blue-madison');
            $("#number-title").removeClass('mt-step-title uppercase font-white');
            $("#number-description").removeClass('mt-step-content font-white');

            $("#portability").removeClass('col-md-6 mt-step-col bg-grey');
            $("#portability-number").removeClass('mt-step-number bg-white font-grey-cascade');
            $("#portability-title").removeClass('mt-step-title uppercase font-grey-cascade');
            $("#portability-description").removeClass('mt-step-content font-grey-cascade');

            // Adicionando classe atual da aba
            $("#number").addClass('col-md-4 mt-step-col bg-grey');
            $("#number-number").addClass('mt-step-number bg-white font-grey-cascade');
            $("#number-title").addClass('mt-step-title uppercase font-grey-cascade');
            $("#number-description").addClass('mt-step-content font-grey-cascade');

            $("#portability").addClass('col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison');
            $("#portability-number").addClass('mt-step-number bg-white font-blue-madison');
            $("#portability-title").addClass('mt-step-title uppercase font-white');
            $("#portability-description").addClass('mt-step-content font-white');
        });

        $("#number").click(function() {
            // Mostra ou esconde tab
            $("#tab-number").css('display', 'block');
            $("#tab-portability").css('display', 'none');

            // Removendo classe atual da aba
            $("#portability").removeClass('col-md-4 mt-step-col bg-blue-madison bg-font-blue-madison');
            $("#portability-number").removeClass('mt-step-number bg-white font-blue-madison');
            $("#portability-title").removeClass('mt-step-title uppercase font-white');
            $("#portability-description").removeClass('mt-step-content font-white');

            $("#number").removeClass('col-md-6 mt-step-col bg-grey');
            $("#number-number").removeClass('mt-step-number bg-white font-grey-cascade');
            $("#number-title").removeClass('mt-step-title uppercase font-grey-cascade');
            $("#number-description").removeClass('mt-step-content font-grey-cascade');

            // Adicionando classe atual da aba
            $("#portability").addClass('col-md-4 mt-step-col bg-grey');
            $("#portability-number").addClass('mt-step-number bg-white font-grey-cascade');
            $("#portability-title").addClass('mt-step-title uppercase font-grey-cascade');
            $("#portability-description").addClass('mt-step-content font-grey-cascade');

            $("#number").addClass('col-md-6 mt-step-col bg-blue-madison bg-font-blue-madison');
            $("#number-number").addClass('mt-step-number bg-white font-blue-madison');
            $("#number-title").addClass('mt-step-title uppercase font-white');
            $("#number-description").addClass('mt-step-content font-white');
        });
    });
</script>
@stop()