@extends('layouts.admin')

{{-- <link rel="stylesheet" type="text/css"
    href="https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/app-assets/css/bootstrap-extended.min.css">
<link rel="stylesheet" type="text/css"
    href="https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/app-assets/fonts/simple-line-icons/style.min.css">
<link rel="stylesheet" type="text/css"
    href="https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/app-assets/css/colors.min.css">
<link rel="stylesheet" type="text/css"
    href="https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/app-assets/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> --}}


@section('content')
    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col titulo" style="font-size:20px; margin-bottom:20px;">
                    <i class="fa-solid fa-chart-line"></i> Dashboard
                </div>
            </div>
        </div>
    </div>

    @if (!auth()->user()->isSuperAdmin())
        @if ($api_key_asaas->value == '')
            <div class="alert alert-danger">
                Não há chave API cadastrada.
                Caso não possua, clique no botão ao lado, faça seu cadastro, e insira a chave nas configurações do sistema.
                <a href="https://asaas.com" class="btn btn-info btn-sm" style="margin-left:10px;" target="_blank">Cadastrar</a>
            </div>
        @else
            @if ($api_key_asaas_valid->value == 'false')
                <div class="alert alert-danger">
                    Chave API inválida.
                    Altere a chave de API inserida nas configurações do sistema. <a
                        href="{{ route('admin.configurations.index') }}" class="btn btn-info btn-sm">Acessar
                        configurações</a>
                </div>
            @endif
        @endif
    @endif

    <section>
        <div class="row">
            <div class="col-lg-4">
                <div class="card mb-4" style="height:220px;">
                    <div class="card-body text-center">
                        @if (!auth()->user()->photo == '')
                            @if (file_exists(public_path('/storage/users/' . auth()->user()->uuid . '/' . auth()->user()->photo)))
                                <img src="data:image/png;base64, {{ base64_encode(file_get_contents(public_path('/storage/users/' . auth()->user()->uuid . '/' . auth()->user()->photo))) }} "
                                    class="rounded-circle img-fluid" alt="Sistema Esporte Total"
                                    style="width:130px; height:130px;">
                            @else
                                <img src="{{ asset('images/sem_foto.jpg') }}" class="rounded-circle img-fluid"
                                    style="width:130px; height:130px;" alt="Sistema Esporte Total">
                            @endif
                        @else
                            <img src="{{ asset('images/sem_foto.jpg') }}" class="rounded-circle img-fluid"
                                alt="Sistema Esporte Total" style="width:130px; height:130px;">
                        @endif
                        <h5 class="my-2 titulo">{{ auth()->user()->name }}</h5>
                        <h6 class="text-muted mb-1" style="font-size:12px;">{{ auth()->user()->contractor->name ?? '' }}
                        </h6>
                        <p></p>
                        {{-- <p class="text-muted mb-0">E-mail: {{ auth()->user()->email }}</p> --}}
                        {{-- <p class="text-muted mb-0">Telefones: {{ auth()->user()->telephone ?? '' }} |
                            {{ auth()->user()->cellphone ?? '' }}</p> --}}
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="row">
                    <div class="col-12">
                        <div class="card_home radius-10 border-start border-0 border-3 border-success">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-success">Contas a Receber</p>
                                        <h4 class="my-1 text-success">
                                            {{ number_format($receivable[0]->total, 2, ',', '.') ?? 'R$ 0,00' }}</h4>
                                        <p class="mb-0 font-13">Total do dia {{ date('d/m/Y', strtotime(now())) }}</p>
                                    </div>
                                    <div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto">
                                        <i class="fa fa-dollar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card_home radius-10 border-start border-0 border-3 border-danger">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <p class="mb-0 text-danger">Contas a Pagar</p>
                                        <h4 class="my-1 text-danger">R$
                                            {{ number_format($payable[0]->total, 2, ',', '.') ?? 'R$ 0,00' }}</h4>
                                        <p class="mb-0 font-13">Total do dia {{ date('d/m/Y', strtotime(now())) }}</p>
                                    </div>
                                    <div class="widgets-icons-2 rounded-circle bg-gradient-bloody text-white ms-auto"><i
                                            class="fa fa-dollar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>



                {{-- <div class="card mb-4" style="height:280px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-3">
                                <p class="mb-0">Nome:</p>
                            </div>
                            <div class="col-sm-9">
                                <p class="text-muted mb-0">{{ auth()->user()->name }}</p>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-3">
                                <p class="mb-0">E-mail:</p>
                            </div>
                            <div class="col-sm-9">
                                <p class="text-muted mb-0">{{ auth()->user()->email }}</p>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-3">
                                <p class="mb-0">Telefone:</p>
                            </div>
                            <div class="col-sm-9">
                                <p class="text-muted mb-0">{{ auth()->user()->telephone ?? '' }}</p>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-3">
                                <p class="mb-0">Celular:</p>
                            </div>
                            <div class="col-sm-9">
                                <p class="text-muted mb-0">{{ auth()->user()->cellphone ?? '' }}</p>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-3">
                                <pclass="mb-0">Endereço:</p>
                            </div>
                            <div class="col-sm-9">
                                <p class="text-muted mb-0">
                                    {{ auth()->user()->address->address ?? (auth()->user()->student->address->address ?? '') }}
                                    ,
                                    {{ auth()->user()->address->number ?? (auth()->user()->student->address->number ?? '') }}
                                    |
                                    {{ auth()->user()->address->district ?? (auth()->user()->student->address->district ?? '') }}
                                    |
                                    {{ auth()->user()->address->city ?? (auth()->user()->student->address->city ?? '') }} /
                                    {{ auth()->user()->address->state ?? (auth()->user()->student->address->state ?? '') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </section>

    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="row pb-2">
                <div class="col-8">
                    <font class="titulo">
                        Contas a receber (5 dias)
                    </font>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <canvas id="receivablesChart" width="400" height="155"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="row pb-2">
                <div class="col-8">
                    <font class="titulo">
                        Contas a pagar (5 dias)
                    </font>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <canvas id="payablesChart" width="400" height="155"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="row pb-2">
                <div class="col-8">
                    <font class="titulo">
                        Contas a receber
                    </font>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover datatable datatable-receivables">
                            <thead>
                                <tr>
                                    <th>Contratante</th>
                                    <th>Sede</th>
                                    <th>Aluno</th>
                                    <th>Data de Vencimento</th>
                                    <th>Valor</th>
                                    <th>Valor Líquido</th>
                                    {{-- <th width="140">Ações</th> --}}
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="row pb-2">
                <div class="col-8">
                    <font class="titulo">
                        Contas a pagar
                    </font>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover datatable datatable-payables">
                            <thead>
                                <tr>
                                    <th>Contratante</th>
                                    <th>Sede</th>
                                    <th>Descrição</th>
                                    <th>Data de Vencimento</th>
                                    <th>Valor</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (auth()->user()->userable_type == 'App\Models\Contractor' ||
            auth()->user()->isSuperAdmin())
        <div class="row">
            <div class="col-12 mt-3 mb-1">
                <h5 class="titulo">Cadastros Principais</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-xl-4 col-sm-4">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="align-self-center">
                                    <i class="icon-home warning font-large-2 float-left"></i>
                                </div>
                                <div class="media-body text-right">
                                    @if ($headquarters->count() == 0)
                                        <h3>0 sedes</h3>
                                    @else
                                        @if ($headquarters->count() == 1)
                                            <h3>1 sede</h3>
                                        @else
                                            <h3>{{ $headquarters->count() }} sedes</h3>
                                        @endif
                                    @endif

                                    @if (auth()->user()->isSuperAdmin())
                                        <span>Sistema Esporte Total</span>
                                    @else
                                        <span>Total de sedes liberadas: {{ $contractor->headquarter_qty ?? '' }}</span>
                                    @endif
                                </div>
                            </div>
                            @if (auth()->user()->isSuperAdmin())
                                <div class="mt-1 mb-0" style="height: 7px;">
                                </div>
                            @else
                                <div class="progress mt-1 mb-0" style="height: 7px;">
                                    @php
                                        $total = 100 * ($headquarters->count() / $contractor->headquarter_qty);
                                    @endphp
                                    <div class="progress-bar bg-danger" role="progressbar"
                                        style="width: {{ $total }}%" aria-valuenow="{{ $total }}"
                                        aria-valuemin="0" aria-valuemax="{{ $contractor->headquarter_qty }}"></div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-4 col-sm-4">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="align-self-center">
                                    <i class="icon-users success font-large-2 float-left"></i>
                                </div>
                                <div class="media-body text-right">
                                    <h3>{{ $users->count() }}</h3>
                                    @if ($users->count() == 0)
                                        <span>Usuário</span>
                                    @else
                                        @if ($users->count() == 1)
                                            <span>Usuário</span>
                                        @else
                                            <span>Usuários</span>
                                        @endif
                                    @endif
                                </div>
                            </div>
                            <div class="mt-1 mb-0" style="height: 7px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-4 col-sm-4">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="align-self-center">
                                    <i class="icon-notebook primary font-large-2 float-left"></i>
                                </div>
                                <div class="media-body text-right">
                                    <h3>{{ $roles->count() }}</h3>
                                    @if ($roles->count() == 0)
                                        <span> Regras de Acesso</span>
                                    @else
                                        @if ($roles->count() == 1)
                                            <span>Regra de Acesso</span>
                                        @else
                                            <span> Regras de Acesso</span>
                                        @endif
                                    @endif
                                </div>
                            </div>
                            <div class="mt-1 mb-0" style="height: 7px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="card-footer text-right">
        Powered by Infinnitum Tecnologia
    </div>
@endsection

@section('scripts')
    @parent
    <script>
        $.fn.dataTable.ext.classes.sPageButton = '';
        $(function() {
            let visible_sadmin = false;
            let superadmin = "{{ auth()->user()->isSuperAdmin() }}";
            if (superadmin)
                visible_sadmin = true;

            let table = $('.datatable-receivables').DataTable({
                language: {
                    "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Portuguese-Brasil.json"
                },
                // order: [
                //     [1, 'desc'],
                //     [2, 'desc'],
                // ],
                lengthMenu: [
                    [5, 15],
                    [5, 15]
                    // [5, 15, 25, 50, -1],
                    // [5, 15, 25, 50, "Todos"]
                ],
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.home.load.receivables') }}",
                columnDefs: [{
                        targets: 0,
                        visible: visible_sadmin,
                    },
                    {
                        targets: 1,
                        visible: false,
                    },
                ],
                columns: [{
                        data: "contractor_name",
                        name: "contractor_name",
                        orderable: false,
                    },
                    {
                        data: "headquarter_name",
                        name: "headquarter_name",
                        orderable: false,
                    },
                    {
                        data: "student_name",
                        name: "student_name",
                        orderable: false,
                    },
                    {
                        data: "due_date",
                        name: "due_date",
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: "value",
                        name: "value",
                        className: 'text-right',
                        orderable: false,
                    },
                    {
                        data: "net_value",
                        name: "net_value",
                        className: 'text-right',
                        orderable: false,
                    },
                    // {
                    //     data: "action",
                    //     name: "action",
                    //     orderable: false,
                    //     searchable: false,
                    //     className: 'text-center',
                    // },
                ]
            });
        });
    </script>
    <script>
        $.fn.dataTable.ext.classes.sPageButton = '';
        $(function() {
            let visible_sadmin = false;
            let superadmin = "{{ auth()->user()->isSuperAdmin() }}";
            if (superadmin)
                visible_sadmin = true;

            let table = $('.datatable-payables').DataTable({
                language: {
                    "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Portuguese-Brasil.json"
                },
                // order: [
                //     [1, 'desc'],
                //     [2, 'desc'],
                // ],
                lengthMenu: [
                    [5, 15],
                    [5, 15]
                    // [5, 15, 25, 50, -1],
                    // [5, 15, 25, 50, "Todos"]
                ],
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.home.load.payables') }}",
                columnDefs: [{
                        targets: 0,
                        visible: visible_sadmin,
                    },
                    {
                        targets: 1,
                        visible: false,
                    },
                ],
                columns: [{
                        data: "contractor_name",
                        name: "contractor_name",
                        orderable: false,
                    },
                    {
                        data: "headquarter_name",
                        name: "headquarter_name",
                        orderable: false,
                    },
                    {
                        data: "description",
                        name: "description",
                        orderable: false,
                    },
                    {
                        data: "due_date",
                        name: "due_date",
                        className: 'text-center',
                        orderable: false,
                    },
                    {
                        data: "value",
                        name: "value",
                        className: 'text-right',
                        orderable: false,
                    },
                    // {
                    //     data: "action",
                    //     name: "action",
                    //     orderable: false,
                    //     searchable: false,
                    //     className: 'text-center',
                    // },
                ]
            });
        });
    </script>

    <script>
        $(document).ready(function() {

            $.fn.dataTable.moment('DD/MM/YYYY');

            var timeFormat = 'DD/MM/YYYY';

            var ctx = document.getElementById('receivablesChart').getContext('2d');

            var chartData = {!! $receivables_chart !!};

            var data = [];
            var data2 = [];
            var labels = [];

            for (var i in chartData) {

                if (chartData[i].total == null) {
                    valorSemFormatarTotal = 0.00;
                } else {
                    valorSemFormatarTotal = chartData[i].total;
                }

                if (chartData[i].total_liquido == null) {
                    valorSemFormatarTotalLiquido = 0.00;
                } else {
                    valorSemFormatarTotalLiquido = chartData[i].total_liquido;
                }

                // valorFormatadoLiquido = valorSemFormatarTotalLiquido.toLocaleString('pt-BR', {
                //     style: 'currency',
                //     currency: 'BRL'
                // });
                // valorFormatadoLiquido = valorSemFormatarTotalLiquido.toLocaleString('pt-BR', {
                //     minimumFractionDigits: 2
                // });

                // console.log(valorFormatado);

                dataSemFormatar = new Date(chartData[i].due_date);
                dataFormatada = dataSemFormatar.toLocaleDateString('pt-BR', {
                    timeZone: 'UTC'
                });

                data.push(valorSemFormatarTotal);
                data2.push(valorSemFormatarTotalLiquido);
                labels.push(dataFormatada);
            }

            var receivablesChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        // {
                        //     label: 'Valor Total',
                        //     data: data,
                        //     backgroundColor: [
                        //         'rgba(54, 162, 235, 0.2)',
                        //         'rgba(255, 206, 86, 0.2)',
                        //         'rgba(75, 192, 192, 0.2)',
                        //         'rgba(153, 102, 255, 0.2)',
                        //         'rgba(255, 159, 64, 0.2)',
                        //         'rgba(255, 99, 132, 0.2)',
                        //     ],
                        //     borderColor: [
                        //         'rgba(54, 162, 235, 1)',
                        //         'rgba(255, 206, 86, 1)',
                        //         'rgba(75, 192, 192, 1)',
                        //         'rgba(153, 102, 255, 1)',
                        //         'rgba(255, 159, 64, 1)',
                        //         'rgba(255, 99, 132, 1)',
                        //     ],
                        //     borderWidth: 1
                        // },
                        {
                            label: '',
                            data: data2,
                            backgroundColor: [
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 99, 132, 0.2)',
                            ],
                            borderColor: [
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)',
                                'rgba(255, 99, 132, 1)',
                            ],
                            borderWidth: 1
                        },

                    ]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        },
                        x: [{
                            type: 'time',
                            time: {
                                unit: 'due_date',
                                unitStepSize: 1,
                                displayFormats: {
                                    'due_date': 'DD MM YYYY'
                                }
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Data'
                            }
                        }],
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: 'Valores Líquidos'
                        },
                    },
                }
            })
        });
    </script>
    <script>
        $(document).ready(function() {

            $.fn.dataTable.moment('DD/MM/YYYY');

            var timeFormat = 'DD/MM/YYYY';

            var ctx = document.getElementById('payablesChart').getContext('2d');

            var chartData = {!! $payables_chart !!};

            var data = [];
            var data2 = [];
            var labels = [];

            for (var i in chartData) {

                if (chartData[i].total == null) {
                    valorSemFormatarTotal = 0.00;
                } else {
                    valorSemFormatarTotal = chartData[i].total;
                }

                // valorFormatadoLiquido = valorSemFormatarTotalLiquido.toLocaleString('pt-BR', {
                //     style: 'currency',
                //     currency: 'BRL'
                // });
                // valorFormatadoLiquido = valorSemFormatarTotalLiquido.toLocaleString('pt-BR', {
                //     minimumFractionDigits: 2
                // });

                // console.log(valorFormatado);

                dataSemFormatar = new Date(chartData[i].due_date);
                dataFormatada = dataSemFormatar.toLocaleDateString('pt-BR', {
                    timeZone: 'UTC'
                });

                data.push(valorSemFormatarTotal);
                labels.push(dataFormatada);
            }

            var receivablesChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Valor Total',
                        data: data,
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(255, 99, 132, 0.2)',
                        ],
                        borderColor: [
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(255, 99, 132, 1)',
                        ],
                        borderWidth: 1
                    }, ]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        },
                        x: [{
                            type: 'time',
                            time: {
                                unit: 'due_date',
                                unitStepSize: 1,
                                displayFormats: {
                                    'due_date': 'DD MM YYYY'
                                }
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Data'
                            }
                        }],
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: false,
                            text: 'Valores Líquidos'
                        },
                    },
                }
            })
        });
    </script>
@endsection