@extends('layout')

@section('cssUrl')
    <link rel="stylesheet" href="{{ asset('assets/plugins/morrisjs/morris.css') }}" />
    <!-- Colorpicker Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" />
    <!-- Multi Select Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/multi-select/css/multi-select.css') }}">
    <!-- Bootstrap Spinner Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/jquery-spinner/css/bootstrap-spinner.css') }}">
    <!-- Bootstrap Tagsinput Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}">
    <!-- Bootstrap Select Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-select/css/bootstrap-select.css') }}" />
    <!-- noUISlider Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/nouislider/nouislider.min.css') }}" />
@endsection

@section('csss')

@endsection

@php
    $title = 'Cadastro de Plano'    
@endphp

@section('title')
    {{ $title }}
@endsection

@section('conteudo')
    <section class="content">
        <div class="body_scroll">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-7 col-md-6 col-sm-12">
                        <h2 class="uppercase">{{ $title }}</h2>
                        <button class="btn btn-primary btn-icon mobile_menu" type="button"><i
                            class="zmdi zmdi-sort-amount-desc"></i></button>
                    </div>
                    <div class="col-sm-12">
                        <button id="btNovo" style="width: 150px;" class="btn btn-primary btn-icon float-left"
                            type="button"  data-urlnew="{{ route('planoprovedor.show', '0') }}"><i>Novo Plano</i></button>
                    </div>
                </div>
            </div>
            <form action="{{ route('planoprovedor.store') }}" id="frmCadastro" class="form-horizontal">
                <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                <input type="hidden" id="desc_provedor_planos_old" name="desc_provedor_planos_old" value="{{ $dataShow->desc_provedor_planos }}">
                <div class="card">
                    <div class="body">                        
                        <div class="row">
                            <div class="col-lg-2">
                                <label>Id.:</label><br>
                                <input style="width: 100%;" name="id_provedor_planos" id="id_provedor_planos" readonly
                                    class="form-control bg-light" required value="{{ $dataShow->id_provedor_planos }}"><br>
                            </div>
                            <div class="col-lg-7">
                                <label>Descrição:</label><br>
                                <input style="width: 100%;" maxlength="80" type="text" name="desc_provedor_planos" id="desc_provedor_planos"
                                    value="{{ $dataShow->desc_provedor_planos }}" class="form-control bg-light text-uppercase">
                                <br><br>
                            </div>
                            <div class="col-lg-3">
                                <label>Valor:</label><br>
                                <input style="width: 100%;" maxlength="80" type="text" name="valor_provedor_planos" id="valor_provedor_planos"
                                    value="{{ Funcoes::mysqlToMoeda($dataShow->valor_provedor_planos) }}" class="form-control bg-light text-uppercase">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <label>Pool:</label><br>
                                <select class="form-control show-tick" id="pool_provedor_planos" name="pool_provedor_planos" readonly></select><br><br>
                            </div>
                            <div class="col-lg-4">
                                <label>Limites:</label><br>
                                <input style="width: 100%;" maxlength="80" type="text" name="limit_provedor_planos" id="limit_provedor_planos"
                                    value="{{ $dataShow->limit_provedor_planos }}" class="form-control bg-light text-uppercase">
                                <div class="help-info">Dow/Up - Ex: 30M/30M</div>
                            </div>                       
                            <div class="col-lg-4">
                                <label>Status:</label><br>
                                <select name="idstatus_provedor_planos" id="idstatus_provedor_planos"
                                    class="col-lg-12 form-control" required>
                                    <option value="0" selected>Selecione um status</option>
                                    @forelse ($dataStatus as $itemStatus)
                                        @if ($itemStatus->id_status === $dataShow->idstatus_provedor_planos)
                                            <option value="{{ $itemStatus->id_status }}" selected>{{ $itemStatus->nome_status }}</option>
                                        @else
                                            <option value="{{ $itemStatus->id_status }}">{{ $itemStatus->nome_status }}</option>
                                        @endif
                                        @empty
                                            <option value="0" selected>Sem Status</option>
                                    @endforelse
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="body">
                        <div class="row">
                            <div class="col-lg-6" id="msgReturn">
                                
                            </div>
                            <div class="col-lg-2">
                                <button type="button" id="btVoltar" data-urlaction="" 
                                    class="btn btn-raised btn-primary bg-default btn-lg">Voltar</button>
                            </div>
                            <div class="col-lg-2">
                                <button type="button" id="btexcluir" data-urlaction="{{ route('planoprovedor.delete') }}" data-idcampo="{{ $dataShow->id_provedor_planos }}"
                                    data-return="{{ route('planoprovedor.index') }}" class="btn btn-raised btn-primary bg-danger btn-lg">Excluir</button>
                            </div>
                            <div class="col-lg-2">
                                <button type="submit" id="btSalvar" class="btn btn-raised btn-primary btn-lg">Salvar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
    </section>
@endsection

@section('scriptUrl')
    <script src="{{ asset('assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js') }}"></script><!-- Bootstrap Colorpicker Js -->
    <script src="{{ asset('assets/plugins/jquery-inputmask/jquery.inputmask.bundle.js') }}"></script><!-- Input Mask Plugin Js -->
    <script src="{{ asset('assets/plugins/multi-select/js/jquery.multi-select.js') }}"></script><!-- Multi Select Plugin Js -->
    <script src="{{ asset('assets/plugins/jquery-spinner/js/jquery.spinner.js') }}"></script><!-- Jquery Spinner Plugin Js -->
    <script src="{{ asset('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js') }}"></script><!-- Bootstrap Tags Input Plugin Js -->
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script> <!-- Select2 Js -->
    <script src="{{ asset('assets/plugins/bootstrap-notify/bootstrap-notify.js') }}"></script>
    <script src="{{ asset('assets/js/formjs.js') }}"></script>    
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "{{ route('mikrotik.listarpool') }}",
            headers: {'X-CSRF-TOKEN': $('#_token').val()},
            data: {},
            dataType: "json",
            success: function (data) {
                if (data.code == 1000){
                    showNotification(data.message, 'alert-success');                    
                    let arryData    = data.data;                     
                    $('#pool_provedor_planos').find('option').remove();
                    let varOption   = '<option value="0">Selecione um Pool</option>';
                    $('#pool_provedor_planos').append(varOption);
                    $.each(arryData, function(key, value){                      
                       varOption   += '<option value="' + value.name + '">' + value.name + ' / ' + value.ranges + '</option>';                        
                    });
                    $('#pool_provedor_planos').html(varOption);
                    $("#pool_provedor_planos").selectpicker('refresh');
        
                } else {
                    showNotification(data.message, 'alert-danger');
                }
            }
        });
        
        $('#idstatus_provedor_planos').val("{{ $dataShow->idstatus_provedor_planos }}").change();        
            
    });
    $('#btVoltar').click(function() {
        $(location).attr('href', "{{  route('planoprovedor.index') }}");
    });
    $('#btSalvar').click(function() {
        if ($('#id_provedor_planos').val() != 0){
            $.ajax({
                type: "POST",
                url: "{{ route('mikrotik.addProfile') }}",
                headers: {'X-CSRF-TOKEN': $('#_token').val()},
                data: {
                    id_provedor_planos:     $('#id_provedor_planos').val()
                },
                dataType: "json",
                success: function (data) {
                    if (data.code == 1000){
                        showNotification(data.message, 'alert-success');
                        $('#desc_provedor_planos_old').val($('#desc_provedor_planos').val());
                    } else {
                        showNotification(data.message, 'alert-danger');
                    }
                }
            });
        } else {
            showNotification("Não foi criado no servidor, clique em salvar novamente", 'alert-danger');
        }
    });
    function showNotification(text, colorName = null) {
        if (colorName === null || colorName === '') { colorName = 'bg-black'; }
        let animateEnter = 'animated fadeInDown'; 
        let animateExit = 'animated fadeOutUp'; 
        let allowDismiss = true;
        let placementFrom = 'bottom';
        let placementAlign = 'right';

        $.notify({
            message: text
        },
        {
            type: colorName,
            allow_dismiss: allowDismiss,
            newest_on_top: true,
            timer: 10000,
            placement: {
                from: placementFrom,
                align: placementAlign
            },
            animate: {
                enter: animateEnter,
                exit: animateExit
            },
            template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "" : "") + '" role="alert">' +
            '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
            '<span data-notify="icon"></span> ' +
            '<span data-notify="title">{1}</span> ' +
            '<span data-notify="message">{2}</span>' +
            '<div class="progress" data-notify="progressbar">' +
            '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
            '</div>' +
            '<a href="{3}" target="{4}" data-notify="url"></a>' +
            '</div>'
        });
    }
</script>
@endsection