@extends('layouts.main_without_top_button')
@section('title')
    Dashboard
@stop
@section('navigation')
    <ul class="breadcrumb">
        <h2 style="color: #a0a0a0" class="active">Dashboard</h2>
    </ul>
@stop


{{--    <!-- Bootstrap 3.3.5 -->--}}
{{--    <link rel="stylesheet" href="{{ asset('/css/custom/bootstrap.mini.css') }}">--}}
{{--    <link rel="stylesheet" href="{{ asset('/css/custom/datatable.bootsrap.css') }}">--}}
{{--    <!-- Theme style -->--}}
{{--    <link rel="stylesheet" href="{{ asset('/css/custom/adminLTE.min.css') }}">--}}
{{--    <!-- Ionicons -->--}}
{{--    <link rel="stylesheet" href="{{ asset('/css/custom/ionIcon.css') }}">--}}

{{--    <link rel="stylesheet" href="{{ asset('/css/custom/epm.css') }}">--}}

<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="https://derm.epmtz.com/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://derm.epmtz.com/plugins/dataTables/dataTables.bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="https://derm.epmtz.com/css/AdminLTE.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://derm.epmtz.com/css/ionicons.css">

<link rel="stylesheet" href="https://derm.epmtz.com/css/epm.css">

<style>
    #maincontent {
        background-color: #a0a0a0;
        padding-top: 1% !important;
        padding-left: 1% !important;
        height: 100% !important;
        min-width: 1129px !important;

    }

    .mainwrapper {
        background-color: #a0a0a0 !important;
    }

    .breadcrumbwidget {
        background-color: #a0a0a0 !important;
    }

    /* Class or Id doesn't matter */
    .dynamic-badge {
        position: relative;
    }

    .enquiry-badge {
        position: relative;
    }

    .nomination-badge {
        position: relative;
    }

    .pipeline-badge {
        position: relative;
    }

    .amendment-badge {
        position: relative;
    }

    .diversion-badge {
        position: relative;
    }

    .cancellation-badge {
        position: relative;
    }

    .dynamic-badge[data-badge]:after {
        content: attr(data-badge);

        position: absolute;
        top: -50%;
        right: 44%;

        font-size: 11px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 600;

        text-align: center;
        line-height: 23px;

        background: #ff4081;
        color: white;

        width: 22px;
        height: 22px;

        border-radius: 50%;
        /* box-shadow:1px 2px 5px #888; */
    }

    .enquiry-badge[data-badge]:after {
        content: attr(data-badge);

        position: absolute;
        top: -50%;
        right: 44%;

        font-size: 11px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 600;

        text-align: center;
        line-height: 23px;

        background: red;
        color: white;

        width: 22px;
        height: 22px;

        border-radius: 50%;
        /* box-shadow:1px 2px 5px #888; */
    }

    .nomination-badge[data-badge]:after {
        content: attr(data-badge);

        position: absolute;
        top: -50%;
        right: 44%;

        font-size: 11px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 600;

        text-align: center;
        line-height: 23px;

        background: green;
        color: white;

        width: 22px;
        height: 22px;

        border-radius: 50%;
        /* box-shadow:1px 2px 5px #888; */
    }

    .pipeline-badge[data-badge]:after {
        content: attr(data-badge);

        position: absolute;
        top: -50%;
        right: 44%;

        font-size: 11px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 600;

        text-align: center;
        line-height: 23px;

        background: blue;
        color: white;

        width: 22px;
        height: 22px;

        border-radius: 50%;
        /* box-shadow:1px 2px 5px #888; */
    }

    .amendment-badge[data-badge]:after {
        content: attr(data-badge);

        position: absolute;
        top: -50%;
        right: 44%;

        font-size: 11px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 600;

        text-align: center;
        line-height: 23px;

        background: darkviolet;
        color: white;

        width: 22px;
        height: 22px;

        border-radius: 50%;
        /* box-shadow:1px 2px 5px #888; */
    }

    .diversion-badge[data-badge]:after {
        content: attr(data-badge);

        position: absolute;
        top: -50%;
        right: 44%;

        font-size: 11px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 600;

        text-align: center;
        line-height: 23px;

        background: black;
        color: white;

        width: 22px;
        height: 22px;

        border-radius: 50%;
        /* box-shadow:1px 2px 5px #888; */
    }

    .cancellation-badge[data-badge]:after {
        content: attr(data-badge);

        position: absolute;
        top: -50%;
        right: 44%;

        font-size: 11px;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 600;

        text-align: center;
        line-height: 23px;

        background: deeppink;
        color: white;

        width: 22px;
        height: 22px;

        border-radius: 50%;
        /* box-shadow:1px 2px 5px #888; */
    }
</style>
@section('contentinner')



    <style>
        #main_row {
            position: fixed;
            overflow-x: scroll;
        }

        .icon {
            font-size: 70px !important;
            top: 10px !important;
        }
    </style>

    <div id="global_div" style="position: relative; height: 100%; width: 100%;padding-bottom: 50px">
        <div id="main_row">
            <!--  NOTIFICATIONS -->
            <div onload="myFunction()" style="margin-top: -1%; font-size: 12px;"
                 class="col-md-4 col-xs-12">
                <div class=" box box-info">
                    <div class="box-header with-border">
                        <div class="row">
                            <div class="col-md-12">
                                <span class="box-title" style="font-size: 15px; padding-bottom: 1%; padding-right: 10%">
                                    <strong>NOTIFICATIONS</strong></span>
                                <select id="month" class="form-control searchable" style="width: 50%">
                                    <option value="12" {{ date('m') == 12 ? 'selected' : '' }}>December</option>
                                    <option value="11" {{ date('m') == 11 ? 'selected' : '' }}>November</option>
                                    <option value="10" {{ date('m') == 10 ? 'selected' : '' }}>October</option>
                                    <option value="09" {{ date('m') == 9 ? 'selected' : '' }}>September</option>
                                    <option value="08" {{ date('m') == 8 ? 'selected' : '' }}>August</option>
                                    <option value="07" {{ date('m') == 7 ? 'selected' : '' }}>July</option>
                                    <option value="06" {{ date('m') == 6 ? 'selected' : '' }}>June</option>
                                    <option value="05" {{ date('m') == 5 ? 'selected' : '' }}>May</option>
                                    <option value="04" {{ date('m') == 4 ? 'selected' : '' }}>April</option>
                                    <option value="03" {{ date('m') == 3 ? 'selected' : '' }}>March</option>
                                    <option value="02" {{ date('m') == 2 ? 'selected' : '' }}>February</option>
                                    <option value="01" {{ date('m') == 1 ? 'selected' : '' }}>January</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="box-body" style="min-height: 312px; padding-left: 22px">

                        <div class="progress-group" style="font-size: large">
                            <span class="progress-text"><a href="#">Pending Requisitions</a></span>
                            <span class="progress-number"
                                  id="requisition_progress"><b>{{ number_format($requisition_this_month['pending_requisition_this_month']) }}</b>/{{ number_format($requisition_this_month['all_requisitions_this_month']) }}</span>

                            <div class="progress sm" id="requisition_color" style="margin-top: 2%">
                                <div class="progress-bar progress-bar-{{$requisition_this_month['color']}}"
                                     style="width: {{$requisition_this_month['percents']}}%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->
                        <div class="progress-group" style="font-size: large">
                            <span class="progress-text"><a data-toggle="collapse" href="#lpo_drill_down" role="button"
                                                           aria-expanded="false" aria-controls="lpo_drill_down">Pending LPO's</a> </span>
                            <div class="collapse multi-collapse" id="lpo_drill_down">
                                <div class="card card-body">
                                    <div class="box-body">
                                        <table class="table table-bordered table-striped"
                                               style="width: 100%; font-size: small !important; border: solid 1px">
                                            <thead>
                                            <tr>
                                                <th style="text-align: left; border-bottom: solid 1px; background: lightgrey">
                                                    LOP Type
                                                </th>
                                                <th style="text-align: center; border-bottom: solid 1px; background: lightgrey">
                                                    Pending
                                                </th>
                                                <th style="text-align: center; border-bottom: solid 1px; background: lightgrey">
                                                    Total
                                                </th>
                                                <th style="border-bottom: solid 1px; background: lightgrey"></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>Fuel LPOs</td>
                                                <td style="text-align: center">{{ $purchase_order_this_month['pending_fuel_requisition'] }}</td>
                                                <td style="text-align: center">{{ $purchase_order_this_month['all_fuel_requisition'] }}</td>
                                                <td style="text-align: center">
                                                    <a target="_blank"
                                                       href="{{ route('procurement.purchase_orders.index', ['FUEL', date('m')]) }}"
                                                       class="btn btn-mini btn-info">More</a>
                                                </td>
                                            </tr>
                                            {{--                                            <tr>--}}
                                            {{--                                                <td>Trips LPOs</td>--}}
                                            {{--                                                <td style="text-align: center">{{ $purchase_order_this_month['pending_trip_requisition'] }}</td>--}}
                                            {{--                                                <td style="text-align: center">{{ $purchase_order_this_month['all_trip_requisition'] }}</td>--}}
                                            {{--                                                <td style="text-align: center">--}}
                                            {{--                                                    <a target="_blank" href="{{ route('procurement.purchase_orders.index', ['TRIP', date('m')]) }}" class="btn btn-mini btn-info">More</a>--}}
                                            {{--                                                </td>--}}
                                            {{--                                            </tr>--}}
                                            <tr>
                                                <td>Spare-Parts LPOs</td>
                                                <td style="text-align: center">{{ $purchase_order_this_month['pending_spare_parts_requisition'] }}</td>
                                                <td style="text-align: center">{{ $purchase_order_this_month['all_spare_parts_requisition'] }}</td>
                                                <td style="text-align: center">
                                                    <a target="_blank"
                                                       href="{{ route('procurement.purchase_orders.index', ['SPARE_PART', date('m')]) }}"
                                                       class="btn btn-mini btn-info">More</a>
                                                </td>
                                            </tr>
                                            {{--                                            <tr>--}}
                                            {{--                                                <td>Services LPOs</td>--}}
                                            {{--                                                <td style="text-align: center">{{ $purchase_order_this_month['pending_service_requisition'] }}</td>--}}
                                            {{--                                                <td style="text-align: center">{{ $purchase_order_this_month['all_service_requisition'] }}</td>--}}
                                            {{--                                                <td style="text-align: center">--}}
                                            {{--                                                    <a target="_blank" href="{{ route('procurement.purchase_orders.index', ['SERVICE', date('m')]) }}" class="btn btn-mini btn-info">More</a>--}}
                                            {{--                                                </td>--}}
                                            {{--                                            </tr>--}}
                                            {{--                                            <tr>--}}
                                            {{--                                                <td>General LPOs</td>--}}
                                            {{--                                                <td style="text-align: center">{{ $purchase_order_this_month['pending_general_requisition'] }}</td>--}}
                                            {{--                                                <td style="text-align: center">{{ $purchase_order_this_month['all_general_requisition'] }}</td>--}}
                                            {{--                                                <td style="text-align: center">--}}
                                            {{--                                                    <a target="_blank" href="{{ route('procurement.purchase_orders.index', ['GENERAL', date('m')]) }}" class="btn btn-mini btn-info">More</a>--}}
                                            {{--                                                </td>--}}
                                            {{--                                            </tr>--}}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <span class="progress-number"
                                  id="lpo_progress"><b>{{ number_format($purchase_order_this_month['pending_purchase_orders_this_month']) }}</b>/{{ number_format($purchase_order_this_month['all_purchase_orders_this_month']) }}</span>
                            <div class="progress sm" id="lpo_color" style="margin-top: 2%">
                                <div class="progress-bar progress-bar-{{$purchase_order_this_month['color']}}"
                                     style="width: {{$purchase_order_this_month['percents']}}%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->
                        <div class="progress-group" style="font-size: large">
                            <span class="progress-text"><a href="#">Pending GIN's</a> </span>
                            <span class="progress-number"
                                  id="gin_progress"><b>{{ number_format($gins_this_month['pending_gins_this_month']) }}</b>/{{ number_format($gins_this_month['all_gins_this_month']) }}</span>

                            <div class="progress sm" id="gin_color" style="margin-top: 2%">
                                <div class="progress-bar progress-bar-{{$gins_this_month['color']}}"
                                     style="width: {{$gins_this_month['percents']}}%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->
                        <div class="progress-group" style="font-size: large">
                            <span class="progress-text"><a href="#">Open Job-Cards</a></span>
                            <span class="progress-number"
                                  id="job_card_progress"><b>{{ number_format($job_cards_this_month['open_job_cards_this_month']) }}</b>/{{ number_format($job_cards_this_month['all_job_cards_this_month']) }}</span>

                            <div class="progress sm" id="job_card_color" style="margin-top: 2%">
                                <div class="progress-bar progress-bar-{{$job_cards_this_month['color']}}"
                                     style="width: {{$job_cards_this_month['percents']}}%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->
                        <div class="progress-group" style="font-size: large">
                            <span class="progress-text"><a
                                        href="{{ auth()->user()->can('VIEW INVOICES') ? route('reports.managements_reports.un_invoiced_trip_sales.print', ['start_date' => date('Y-m-1'), 'end_date' => date('Y-m-d'), 'client_id' => 'ALL', 'loading_order_id' => 'ALL']) : '#' }}">Un-Invoiced Sales</a> <br></span>
                            <span class="progress-number"
                                  id="invoice_progress"><b>{{ number_format($un_invoiced_trip_sales['month_un_invoiced_sales']) }}</b>/{{ number_format($un_invoiced_trip_sales['month_sales']) }}</span>

                            <div class="progress sm" id="invoice_color" style="margin-top: 2%">
                                <div class="progress-bar progress-bar-{{$un_invoiced_trip_sales['color']}}"
                                     style="width: {{$un_invoiced_trip_sales['percents']}}%"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <!-- APPROVALS -->

            <div class="box-body" style="min-height: 312px; margin-bottom: 200px">
                <a target="_blank" href="{{ route('clients.inquiry.index') }}" class="small-box-footer">
                    <div class="col-lg-3 col-xs-4">
                        <!-- small box -->
                        <div class="small-box bg-aqua">
                            <div class="inner">
                                <h3>{{ number_format($approval_requests['pending_inquiries']) }}</h3>

                                <h6>Enquiries</h6>
                            </div>
                            <div class="icon">
                                <i class="fa fa-envelope"></i>
                            </div>
                            More info <i class="fa fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
                <!-- ./col -->
                <a target="_blank" href="{{ route('loading_nominations.index') }}" class="small-box-footer">
                    <div class="col-lg-3 col-xs-4">
                        <!-- small box -->
                        <div class="small-box bg-green">
                            <div class="inner">
                                <h3>{{ number_format($approval_requests['pending_nominations']) }}</h3>

                                <h6> Nominations</h6>
                            </div>
                            <div class="icon">
                                <i class="fa fa-trophy"></i>
                            </div>
                            More
                            info <i class="fa fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
                <!-- ./col -->
                <a href="#" class="small-box-footer">
                    <div class="col-lg-3 col-xs-4">
                        <!-- small box -->
                        <div class="small-box bg-yellow">
                            <div class="inner">
                                <h3>{{ number_format($approval_requests['pending_pipeline_orders']) }}</h3>

                                <h6>Pipelines</h6>
                            </div>
                            <div class="icon">
                                <i class="fa fa-truck"></i>
                            </div>
                            More info <i class="fa fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
                <!-- ./col -->
                <a href="#" class="small-box-footer">
                    <div class="col-lg-3 col-xs-4">
                        <!-- small box -->
                        <div class="small-box bg-red">
                            <div class="inner">
                                <h3 style="color: white">{{ number_format($approval_requests['pending_amendment_requests']) }}</h3>

                                <h6>Amendments</h6>
                            </div>
                            <div class="icon">
                                <i class="fa fa-edit"></i>
                            </div>
                            More info <i class="fa fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
                <!-- ./col -->
                <a target="_blank" href="#" class="small-box-footer">
                    <div class="col-lg-3 col-xs-4">
                        <!-- small box -->
                        <div class="small-box bg-blue">
                            <div class="inner">
                                <h3 style="color: white">{{ number_format($approval_requests['pending_diversion_requests']) }}</h3>

                                <h6>Diversions</h6>
                            </div>
                            <div class="icon">
                                <i class="fa fa-random"></i>
                            </div>
                            More info <i
                                    class="fa fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
                <!-- ./col -->
                <a href="#" class="small-box-footer">
                    <div class="col-lg-3 col-xs-4">
                        <!-- small box -->
                        <div class="small-box bg-purple">
                            <div class="inner">
                                <h3 style="color: white">{{ number_format($approval_requests['pending_cancellation_requests']) }}</h3>

                                <h6>Cancellations</h6>
                            </div>
                            <div class="icon">
                                <i class="fa fa-remove"></i>
                            </div>
                            More info <i class="fa fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
                <!-- ./col -->
            </div>


        </div>

    </div>
    </div>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="{{asset('js/logistics/logistics-accounts-charts.js')}}"></script>

    <script type="text/javascript">

        if (window.orientation == 0) {
            $('#global_div').attr('style', 'position: relative; height: 100%; width: 100%');
        } else {
            $('#global_div').attr('style', 'position: relative; height: 220%; width: 100%');
        }

        // Listen for orientation changes
        window.addEventListener("orientationchange", function () {
            // Announce the new orientation number
            if (window.orientation == 0) {
                $('#global_div').attr('style', 'position: relative; height: 100%; width: 100%');
            } else {
                $('#global_div').attr('style', 'position: relative; height: 220%; width: 100%');
            }
        }, false);


        $('#month').change(function () {
            jQuery.ajax({
                type: "GET",
                cache: false,
                url: "{{route('load_monthly_data')}}",
                data: {
                    month: jQuery(this).val()
                },

                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    $('#requisition_progress').html("<b>" + data.requisition.pending_requisition_this_month + "</b>/" + data.requisition.all_requisitions_this_month)
                    $('#requisition_color').html('<div class="progress-bar progress-bar-' + data.requisition.color + '" style="width: ' + data.requisition.percents + '%"></div>')
                    $('#lpo_progress').html("<b>" + data.lpo.pending_purchase_orders_this_month + "</b>/" + data.lpo.all_purchase_orders_this_month)
                    $('#lpo_color').html('<div class="progress-bar progress-bar-' + data.lpo.color + '" style="width: ' + data.lpo.percents + '%"></div>')
                    $('#lpo_drill_down').html(data.lpo.drill_down)
                    $('#gin_progress').html("<b>" + data.gin.pending_gins_this_month + "</b>/" + data.gin.all_gins_this_month)
                    $('#gin_color').html('<div class="progress-bar progress-bar-' + data.gin.color + '" style="width: ' + data.gin.percents + '%"></div>')
                    $('#job_card_progress').html("<b>" + data.job_card.open_job_cards_this_month + "</b>/" + data.job_card.all_job_cards_this_month)
                    $('#job_card_color').html('<div class="progress-bar progress-bar-' + data.job_card.color + '" style="width: ' + data.job_card.percents + '%"></div>')
                    $('#invoice_progress').html("<b>" + data.invoice.month_un_invoiced_sales + "</b>/" + data.invoice.month_sales)
                    $('#invoice_color').html('<div class="progress-bar progress-bar-' + data.invoice.color + '" style="width: ' + data.invoice.percents + '%"></div>')
                    stopSpinner();
                    // onAjaxSuccess(data, 'POST');
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {


                }
            });

        })
        jQuery('.searchable').select2();
        jQuery('.breadcrumbwidget').attr('style', 'background: black');
        jQuery('#widgettitle_msghead').attr('style', 'display: none;');
        // jQuery('#widgettitle_msghead').attr('style', 'background: black;');
        // jQuery('.widgettitle').attr('style', 'background: black; !important; margin-top: 0px');


    </script>
@stop