@extends('layout.administrator.index')
@section('title', 'Analytic')

@section('css')
    <link href="{{ asset('assets/minimalpro/vendor_components/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            height: 31px;
            font-size: 0.875rem;
        }
        .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 29px;
            padding-left: 12px;
        }
        .select2-container .select2-selection--single .select2-selection__arrow {
            height: 29px;
        }
        .analytic-filter-select + .select2-container {
            width: 100% !important;
        }
        .analytic-filter-select + .select2-container .select2-selection--single,
        .analytic-filter-select + .select2-container .select2-selection--multiple {
            border: 1px solid #d2d6de;
            min-height: 31px;
            border-radius: 0;
            font-size: 0.875rem;
        }
        .analytic-filter-select + .select2-container .select2-selection--multiple {
            padding: 2px 4px;
        }
        .analytic-filter-select + .select2-container .select2-selection--multiple .select2-selection__choice {
            background: #3c8dbc;
            border: 1px solid #2f7697;
            color: #fff;
            border-radius: 3px;
            margin-top: 3px;
        }
        .analytic-filter-select + .select2-container .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }
        .pareto-filter-select + .select2-container {
            width: 100% !important;
        }
        .pareto-filter-select + .select2-container .select2-selection--single,
        .pareto-filter-select + .select2-container .select2-selection--multiple {
            border: 1px solid #d2d6de;
            min-height: 31px;
            border-radius: 0;
            font-size: 0.875rem;
        }
        .pareto-filter-select + .select2-container .select2-selection--multiple {
            padding: 2px 4px;
        }
        .sortable-header {
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
        }
        .sortable-header .sort-indicator {
            margin-left: 4px;
            font-size: 0.85em;
            color: #6c757d;
        }
        .nav-tabs .nav-link {
            font-weight: 600;
            color: #555;
            border: 1px solid transparent;
            border-radius: 4px 4px 0 0;
            padding: 8px 16px;
        }
        .nav-tabs .nav-link:hover {
            border-color: #eee #eee #ddd;
        }
        .nav-tabs .nav-link.active {
            color: #3c8dbc;
            border-color: #ddd #ddd #fff;
            background-color: #fff;
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper bg-white">
        <section class="content-header">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}"><i class="fa fa-dashboard"></i> Inicio</a></li>
                <li class="breadcrumb-item active">Analytic</li>
            </ol>
        </section>
        <section class="content">
            <div class="text-right mb-3">
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exportModal">
                    <i class="fa fa-download"></i> Exportar Datos
                </button>
            </div>

            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" href="#tab-hot-sheet" data-toggle="tab">
                        <i class="fa fa-fire"></i> Hot Sheet
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tab-pareto" data-toggle="tab">
                        <i class="fa fa-bar-chart"></i> Pareto
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tab-comparison" data-toggle="tab">
                        <i class="fa fa-line-chart"></i> Comparativas
                    </a>
                </li>
            </ul>

            <div class="tab-content pt-3">
                <div class="tab-pane active" id="tab-hot-sheet">
                    @include('system.administrator.analytic.partials.filters-hot-sheet')
                    @include('system.administrator.analytic.partials.hot-sheet-table')
                </div>
                <div class="tab-pane" id="tab-pareto">
                    @include('system.administrator.analytic.partials.filters-pareto')
                    @include('system.administrator.analytic.partials.pareto-charts')
                </div>
                <div class="tab-pane" id="tab-comparison">
                    @include('system.administrator.analytic.partials.comparison')
                </div>
            </div>
        </section>
    </div>
    @include('system.administrator.analytic.partials.export-modal')
@endsection

@section('js')
    <script src="{{ asset('assets/administrator/js/analytic-pareto-core.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script type="text/javascript">
        window.analyticConfig = {
            systemTypes: {!! json_encode($systemTypeOptions) !!},
            dataEndpoint: '{{ route("administrator.analytic.data") }}',
            sampleShowUrlPattern: @json(route('administrator.history.show', ['id' => '__ID__'])),
            paretoEndpoint: '{{ route("administrator.analytic.pareto") }}',
            paretoConsequencesEndpoint: '{{ route("administrator.analytic.pareto.consequences") }}',
            paretoCriticalEndpoint: '{{ route("administrator.analytic.pareto.critical") }}',
            sampleSearchUrl: '{{ route("administrator.analytic.sample-search") }}',
            comparisonDataUrl: '{{ route("administrator.analytic.comparison-data") }}',
            logoUrl: '{{ asset("assets/images/logo-sla.png") }}'
        };
    </script>
    <script src="{{ asset('assets/administrator/js/analytic-filters.js') }}"></script>
    <script src="{{ asset('assets/administrator/js/analytic-pareto-filters.js') }}"></script>
    <script src="{{ asset('assets/administrator/js/analytic-hot-sheet.js') }}"></script>
    <script src="{{ asset('assets/administrator/js/analytic-export.js') }}"></script>
    <script src="{{ asset('assets/administrator/js/analytic-comparison.js') }}"></script>
    <script type="text/javascript">
        $(function() {
            AnalyticFilters.initHotSheetSelect2();
            AnalyticHotSheet.init();
            AnalyticExport.init();

            var paretoInitialized = false;
            var comparisonInitialized = false;
            $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
                if (e.target.hash === '#tab-pareto' && !paretoInitialized) {
                    AnalyticFilters.initParetoSelect2();
                    AnalyticParetoFilters.init();
                    paretoInitialized = true;
                }
                if (e.target.hash === '#tab-comparison' && !comparisonInitialized) {
                    AnalyticComparison.init();
                    comparisonInitialized = true;
                }
            });
        });
    </script>
@endsection