@include('junta::sidebar.dyna')

<ol class="breadcrumb">
    <li>
        <a href="/dashboard"><i class="entypo-home"></i> INICIO</a>
    </li>
    <li>
        <a href="/dashboard/15/junta?company=dyna"><i class="fa fa-dollar"></i> JUNTA DIRECTIVA</a>
    </li>

    <li>
        <a href="/dashboard/15/junta?company=dyna"><i class="fa fa-building-o"></i> DYNA</a>
    </li>

    <li class="active">
        <strong><i class="{{ $icon }}" aria-hidden="true"></i> {{ $title }}</strong>
    </li>
</ol>

<hr />

<div class="row">

    <div class="col-md-12">

        <div class="panel panel-warning">
            <div class="panel-heading">
                <div class="panel-title">
                    <h2><i class="{{ $icon }}" aria-hidden="true"></i> {{ $title }}</h2>
                </div>
                <div class="panel-options">

                </div>
            </div>
            <div class="panel-body">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">GRÁFICA 1</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">GRÁFICA 2</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">

                        <div id="graph-1" style="min-width: 100%; height: 600px; margin: 0 auto"></div>

                        <hr />

                        <div class="alert alert-danger">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                            <strong style="font-weight: bold; font-size: 16px;">NOTA:</strong> La compañía al cierre del mes de análisis cuenta con una provisión de $592 millones de pesos, lo que cubre el total la cartera de difícil cobro a mas de un año.
                        </div>

                    </div>
                    <div role="tabpanel" class="tab-pane fade in" id="profile">
                        <div id="graph-2" style="width: 100%; height: 600px; margin: 0 auto"></div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

<div class="clearfix"></div>

@section('header')
    <style>
        /* bootstrap hack: fix content width inside hidden tabs */
        .tab-content > .tab-pane,
        .pill-content > .pill-pane {
            display: block;     /* undo display:none          */
            height: 0;          /* height:0 is also invisible */
            overflow-y: hidden; /* no-overflow                */
        }
        .tab-content > .active,
        .pill-content > .active {
            height: auto;       /* let the content decide it  */
        } /* bootstrap hack end */
    </style>
@stop

@section('footer')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <script>
        $(function () {
            Highcharts.setOptions({
                lang: {
                    decimalPoint: ',',
                    thousandsSep: '.'
                }
            });

            $('#graph-1').highcharts({
                chart: {
                    type: 'column',
                    zoomType:'xy'
                },
                title: {
                    text: 'ANÁLISIS DE CARTERA "VENCIMIENTO A FECHA DE FACTURA"'
                },
                subtitle: {
                    text: 'Plazo a clientes:  Nacionales 45 días - Exterior 120 días fecha de salida de puerto.'
                },
                colors: [
                    '#FFA4A4',
                    '#949491',
                    '#222222'
                ],
                xAxis: {
                    categories: [
                        'Corriente',
                        'De 1 a 90',
                        'De 91 a 180',
                        'De 181 a 360',
                        '361 o más',
                        'Total'
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Valores en millones'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>${point.y:,.0f} </b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true,
                    crosshairs: [true,true]
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    name: 'Nacional',
                    data: [  16265265, 6908471, 584973, 258213, 557402, 24574325  ]

                }, {
                    name: 'Exterior',
                    data: [ 504707, 1029011, 650719, 414489, 50636, 2649562 ]

                } , {
                    name: 'Total Compañía',
                    data: [ 16769972, 7937482, 1235692, 672701, 608539, 27224387  ]
                }]
            });


            $('#graph-2').highcharts({
                chart: {
                    type: 'column',
                    zoomType:'xy'
                },
                title: {
                    text: 'ANÁLISIS CARTERA NACIONAL "VENCIMIENTO A FECHA DE FACTURA - RANGO  180 A 360 DIAS"'
                },
                subtitle: {
                    text: 'Plazo a clientes:  Nacionales 45 días '
                },
                colors: [
                    '#FFA4A4',
                    '#949491',
                    '#222222'
                ],
                xAxis: {
                    categories: [
                        'Corriente',
                        'De 1 a 90',
                        'De 91 a 120',
                        'De 121 a 180',
                        'De 181 a 240',
                        'De 241 a 360',
                        '361 o más',
                        'Total'
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Valores en millones'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>${point.y:,.0f} </b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true,
                    crosshairs: [true,true]
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    name: 'Nacional',
                    data: [ 16265265, 6908471, 282098, 	302876, 130646, 127567, 557903, 24574825 ]

                }, {
                    name: 'Exterior',
                    data: [ 504707, 1029011, 29886, 620833, '', 414489, 50636, 2649562  ]

                }

                , {
                    name: 'Total Compañía',
                    data: [ 16769972, 7937482, 311983, 923709, 130646, 542056, 608539, 27224387 ]

                }]
            });

        });
    </script>
@stop