{{-- resources/views/admin/dashboard.blade.php --}}

@extends('adminlte::page')

@section('title', env('APP_NAME').' - '.$pageName)

@section('content_header')
@if (getenv('MULTIACCOUNTS') == 'true')
@if (isset($selectedAccount))
<div class="row">
    <div class="col-sm-12">
        <div class="callout callout-info">
            {{$selectedAccount->selectionAccountInfo()}}
        </div>
    </div>
</div>
@else
<div class="row">
    <div class="col-sm-12">
        <div class="callout callout-danger">
            <p>Debes seleccionar una cuenta para operar.</p>
        </div>
    </div>
</div>
@endif
<hr>
@endif
<div class="row">
    <div class="col-sm-6">
        <h5>
            <i class="{{ $pageIcon }}"></i> {{ $pageName }}
        </h5>
    </div><!-- /.col -->
    <div class="col-sm-6 ">
        @if (isset($routeName))
        <nav aria-label="breadcrumb">
            {{ Breadcrumbs::render($routeName) }}
        </nav>
        @endif
    </div><!-- /.col -->
</div><!-- /.row -->
<hr>
@if (isset($headButtonsOnTop) && $headButtonsOnTop)
    @if (getenv('MULTIACCOUNTS') == 'true')
        @if (isset($selectedAccount) || $routeName == "accounts" || auth()->user()->hasRole('superadministrator'))
            @yield('head_buttons')
        @endif
    @else
        @yield('head_buttons')
    @endif
@endif

@stop

@section('content')

@yield('pre_index')
@yield('atplus_main_content')
@if (!isset($headButtonsOnTop))
<div class="mb-0">
    @if (getenv('MULTIACCOUNTS') == 'true')
        @if (isset($selectedAccount) || $routeName == "accounts" || auth()->user()->hasRole('superadministrator'))
            @yield('head_buttons')
        @endif
    @else
        @yield('head_buttons')
    @endif
</div>
@endif
</div>

@if (getenv('ENABLENOTIFICATIONS') == 'true')

<div id="jak_boxchanger" @if (auth()->user()->unreadNotifications()->count() < 1)style="display: none"@endif>
    <input type="hidden" id="_notifications_count" value="{{(auth()->user()->unreadNotifications()->count())}}">
    <div id="jak_boxcontent">
        <div align="center">
            <span class="text-center text-muted">Tienes <span id="_unread_notifications_label" style="font-weight: bold">{{(auth()->user()->unreadNotifications()->count())}}</span> Notificaciones Sin Leer</span>
        </div>
        <div class="dropdown-divider"></div>
        <div id="_list_of_notifications">
            @foreach (auth()->user()->unreadNotifications as $notification)

            <a href="#" class="dropdown-item" @if (isset($notification->data['action']))onclick="swalOnAlert('{{$notification->data['action']}}','{{$notification->data['notificationHash']}}')"@endif>
                <i class="fas fa-envelope mr-2"></i>                 <span class="float-right text-muted text-xs">{{$notification->data['time']}}</span>
            </a>
            <div class="dropdown-divider"></div>
            @endforeach
        </div>
        <a href="#" id="mark-all" class="dropdown-item dropdown-footer">Marcar todo como leído</a>
    </div>

    <div id="jak_boxbutton">
        <i class="far fa-bell"></i>
        <span class="right badge badge-danger" style="font-size:10px;position:fixed" id="_notification_badge_value">{{(auth()->user()->unreadNotifications()->count())}}</span>
    </div>

</div>

@endif


<div class="">
    &nbsp;
</div>
@endsection

@section('footer')
<form id="_logout_timer" method="POST" action="{{ route('logout') }}">
    @csrf
</form>
<div class="float-right d-none d-sm-block">
    <b>Version</b> {{ Config::get('atcore.app_version')}}
</div>
<strong>Copyright © 2020. Desarollado por <a href="https://www.atplus.cl">AT+</a>.</strong> Todos los derechos reservados.

@endsection

@section('css')



@yield('atplus_main_css')
@if (getenv('ENABLENOTIFICATIONS') == 'true')
<style>
    #jak_boxchanger {
        position: fixed;
        bottom: 45px;
        right: -365px;
        z-index: 9998;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
    }

    #jak_boxbutton {
        bottom: 0;
        float: right;
        text-align: left;
        font-size: 21px;
        cursor: pointer;
        padding: 6px 0px 0px 8px;
        background-color: #ffffff;
        -webkit-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
        width: 55px;
        height: 40px;
        background: #FAC106;
    }

    #jak_boxcontent {
        float: right;
        background-color: #ffffff;
        width: 360px;
        max-height: 450px;
        height: auto;
        padding: 10px;
        -webkit-border-radius: 0 0 0 5px;
        border-radius: 0 0 0 5px;
        overflow: auto;
        -webkit-box-shadow: -2px 2px 10px 1px #333333;
        box-shadow: -2px 2px 10px 1px #333333;
    }

    .moveboxchanger {
        right: 0 !important;
    }
</style>
@endif
@stop

@section('js')

<script>
    @if (getenv('ENABLENOTIFICATIONS') == 'true')
    var boxclosed = true;
    var el = document.getElementById("jak_boxbutton");
    var el1 = document.getElementById("jak_boxchanger");
    el.addEventListener("click", function() {

        if (boxclosed) {
            // add class
            if (el1.classList) {
                el1.classList.add("moveboxchanger");
            } else {
                el1.className += ' ' + "moveboxchanger";
            }
            boxclosed = false;
        } else {
            // remove class
            if (el1.classList) {
                el1.classList.remove("moveboxchanger");
            } else {
                el1.className = el.className.replace(new RegExp('(^|\b)' + className.split(' ').join('|') + '(\b|$)', 'gi'), ' ');
            }
            boxclosed = true;
        }

    });
    @endif

    @if (getenv('ENABLENOTIFICATIONS') == 'true')
    @if (auth()->user()->unreadNotifications()->count() > 0)
    document.getElementById('jak_boxchanger').style.display = "block";
    @endif
    @endif

    @if (session()->has('message'))

    toastr['{!! session('message_type') !!}']('{!! session('message') !!}')

    @endif

    @if (session()->has('message_alert'))

    toastr['error']('{!! session('message_alert') !!}')
    @endif
</script>
@if (getenv('ENABLENOTIFICATIONS') == 'true')
<script>
    function swalOnAlert(action,notificationHash,origin=null){

        action = JSON.parse(action);


        question = action['question'];
        buttons  = action['buttons'];
        actions  = action['actions'];

        console.log(action);
        if (buttons.length > 1){
            var el1 = document.getElementById("jak_boxchanger");
            if (el1.classList) {
                el1.classList.remove("moveboxchanger");
            } else {
                el1.className = el.className.replace(new RegExp('(^|\b)' + className.split(' ').join('|') + '(\b|$)', 'gi'), ' ');
            }

            Swal.fire({
                title: question,
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: buttons[0],
                denyButtonText: buttons[1],
                denyButtonColor: '#28A746',
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    sendMarkRequest(notificationHash);
                    window.location.href = actions[0];
                } else if (result.isDenied) {
                    sendMarkRequest(notificationHash);
                    window.location.href = actions[1];
                }

            })


        }else{
            Swal.fire({
                title: question,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#28a745',

                confirmButtonText: buttons[0],

                cancelButtonText: 'Volver'
            }).then((result) => {
                if (result.value == true){
                    sendMarkRequest(notificationHash);
                    window.location.href = actions[0];
                }

            }).catch(function (error) {
                console.log(error);
            });
        }
    }


    const app = new Vue({
        el: '#appMain',
        mounted(){
            window.Echo.channel('operations-channel')
            .listen('OperationEvent', (e) => {
                console.log(e);
                this.makeToast(e.dataMessage)
                const actualCount = document.getElementById('_notifications_count').value;
                if (actualCount == 0)
                document.getElementById('jak_boxchanger').style.display = "block";
                document.getElementById('_notifications_count').value = parseInt(actualCount)+1;
                document.getElementById('_notification_badge_value').innerHTML = parseInt(actualCount)+1;
                document.getElementById('_unread_notifications_label').innerHTML = parseInt(actualCount)+1;


                let divElement = document.getElementById('_list_of_notifications');

                let ahref = document.createElement('a');

                ahref.setAttribute('href','javascript:swalOnAlert(\''+(e.dataMessage.action)+'\',\''+(e.dataMessage.notificationHash)+'\',true)');
                ahref.setAttribute('class','dropdown-item');


                let i = document.createElement('i');
                i.setAttribute('class','fas fa-envelope mr-2');
                ahref.appendChild(i);

                let textNode = document.createTextNode(e.dataMessage.shortMessage);

                ahref.appendChild(textNode);


                let span = document.createElement('span');
                span.innerHTML = e.dataMessage.time;
                span.setAttribute('class','float-right text-muted text-xs');

                ahref.appendChild(span);
                divElement.appendChild(ahref);

                let divider = document.createElement("div");
                divider.setAttribute('class','dropdown-divider');
                divElement.appendChild(divider);
            });
        },
        methods: {
            makeToast(data) {

                if (data.status == 'warning'){
                    if (data.action){

                        toastr.warning(data.body, data.title, {
                            "closeButton": true,
                            "timeOut": '0',
                            "extendedTimeOut": "0",
                            "positionClass": "toast-top-right",
                            onclick: function (){
                                swalOnAlert(data.action,data.notificationHash);
                            }
                        });
                    }else{
                        toastr.warning(data.body, data.title, {
                            "closeButton": true,
                            "timeOut": '0',
                            "extendedTimeOut": "0",
                            "positionClass": "toast-top-right"
                        });
                    }
                }else{
                    if (data.swalQuestion){
                        toastr.success(data.body, data.title, {
                            "closeButton": true,
                            "timeOut": '0',
                            "extendedTimeOut": "0",
                            "positionClass": "toast-top-right",
                            onclick: function (){
                                swalOnAlert(data.action,data.notificationHash);
                            }
                        });
                    }else{
                        toastr.success(data.body, data.title, {
                            "closeButton": true,
                            "timeOut": '0',
                            "extendedTimeOut": "0",
                            "positionClass": "toast-top-right"
                        });
                    }
                }


            }
        }
    });


    function sendMarkRequest(hash = null){
        return $.ajax("{{ route ('mark_notification_as_read') }}", {
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                hash: hash
            }
        });
    }

    $(function () {
        $('#mark-all').click(function (){
            let request = sendMarkRequest();

            request.done(() => {
                console.log('hacer la magia');
                document.getElementById('_list_of_notifications').innerHTML = '';
                document.getElementById('_notifications_count').value = 0;
                document.getElementById('_notification_badge_value').innerHTML = 0;
                document.getElementById('_unread_notifications_label').innerHTML = 0;
                document.getElementById('jak_boxchanger').style.display = "none";
                toastr.clear();
            })
        })
    })
</script>
@endif
@yield('atplus_main_js')
@stop

@if (getenv('MULTIACCOUNTS'))
@section('right-sidebar')

<div class="p-3">
    @if ($accounts)
    <h6>SELECCIONA CUENTA</h6>
    <hr color="gray">
    <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            @foreach ($accounts as $account)
            <li class="nav-item">
                <a href="#" onclick="changeAccount({{$account->id}})" class="">
                    @if ($account->id == $selected_account)
                    <i class="fas fa-dot-circle nav-icon"></i>
                    @else
                    <i class="far fa-circle nav-icon"></i>
                    @endif
                    {{$account->short_name}}
                </a>
            </li>
            @endforeach
        </ul>
    </nav>
    @if (isset($selected_account))
    <hr color="gray">
    <h6><a href="#" onclick="leaveAccount()" class="">SALIR DE LA CUENTA  <i class="fas fa-sign-out-alt nav-icon"></i></a></h6>
    @endif
    @else
    <h6>SIN CUENTAS ASOCIADAS</h6>
    @endif
</div>


<script>
    function changeAccount(accountId){
        myHoldOn();
        let settings = { headers: { 'content-type': 'multipart/form-data' } };
        let data = new FormData();

        data.append('account_id', accountId);
        data.append('_token', $('meta[name="csrf-token"]').attr('content'));

        axios.post("{{route('select_account')}}", data, settings)
        .then(function (response) {
            myHoldOnClose();
            Swal.fire({
                icon: 'success',
                title: response.data.name,
                text: 'Cuenta Seleccionada',
                showConfirmButton: false,
                timer: 1500
            }).then(function (respo) {
                location.reload();
            })
        })
    }

    function leaveAccount(){
        myHoldOn();
        let settings = { headers: { 'content-type': 'multipart/form-data' } };
        let data = new FormData();

        data.append('_token', $('meta[name="csrf-token"]').attr('content'));

        axios.post("{{route('leave_account')}}", data, settings)
        .then(function (response) {
            myHoldOnClose();
            Swal.fire({
                icon: 'success',
                title: response.data.name,
                text: 'Has Salido de la Cuenta',
                showConfirmButton: false,
                timer: 1500
            }).then(function (respo) {
                location.reload();
            })
        })
    }

</script>



@stop
@endif