@extends('layouts.menu')

@section('tittle')
    DOCUMENTOS
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="page-sub-header">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><b class="menu-item-head" id="manualesMenu"><span
                                class="badge badge-pill badge-warning text-white">MANUALES</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="procesosMenu"><span
                                class="badge badge-pill badge-success text-white">PROCESOS/PROCEDIMIENTOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="politicasMenu"><span
                                class="badge badge-pill badge-danger text-white">POLÍTICAS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="diagramasMenu"><span
                                class="badge badge-pill badge-info text-white">DIAGRAMAS</span></b></li>
                </ul>
            </div>

            <div class="manualesSection">
                <div class="card card-table comman-shadow shadow-lg bg-manuales">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">MANUALES</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp" style="display: none">
                                <label for="" class="form-label">Filtrar Grupo:</label>
                                <select class="form-select form-select-sm" name="groupFilterManuales"
                                    id="groupFilterManuales">
                                    <option selected value="">TODOS</option>
                                    @foreach ($gruposData as $grupos)
                                        <option value="{{ $grupos->nombre }}">{{ $grupos->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="manualesTable" class="table table-hover table-center table-bordered table-striped"
                                style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">Manual</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Grupo</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="procesosSection">
                <div class="card card-table comman-shadow shadow-lg bg-manuales">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">PROCESOS/PROCEDIMIENTOS</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp" style="display: none">
                                <label for="" class="form-label">Filtrar Grupo:</label>
                                <select class="form-select form-select-sm" name="groupFilterProcesos"
                                    id="groupFilterProcesos">
                                    <option selected value="">TODOS</option>
                                    @foreach ($gruposData as $grupos)
                                        <option value="{{ $grupos->nombre }}">{{ $grupos->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="procesosTable" class="table table-hover table-center table-bordered table-striped"
                                style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">Proceso</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Grupo</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="politicasSection">
                <div class="card card-table comman-shadow shadow-lg bg-manuales">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">POLÍTICAS</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp" style="display: none">
                                <label for="" class="form-label">Filtrar Grupo:</label>
                                <select class="form-select form-select-sm" name="groupFilterPoliticas"
                                    id="groupFilterPoliticas">
                                    <option selected value="">TODOS</option>
                                    @foreach ($gruposData as $grupos)
                                        <option value="{{ $grupos->nombre }}">{{ $grupos->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="politicasTable" class="table table-hover table-center table-bordered table-striped"
                                style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">Política</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Grupo</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="diagramasSection">
                <div class="card card-table comman-shadow shadow-lg bg-manuales">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">DIAGRAMAS</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp" style="display: none">
                                <label for="" class="form-label">Filtrar Grupo:</label>
                                <select class="form-select form-select-sm" name="groupFilterPoliticas"
                                    id="groupFilterDiagramas">
                                    <option selected value="">TODOS</option>
                                    @foreach ($gruposData as $grupos)
                                        <option value="{{ $grupos->nombre }}">{{ $grupos->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="diagramasTable" class="table table-hover table-center table-bordered table-striped"
                                style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">Política</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Grupo</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#manualesUsuario, #misDocumentos').addClass('active');

            $('.manualesSection').css('display', 'block');
            $('.procesosSection').css('display', 'none');
            $('.politicasSection').css('display', 'none');
            $('.diagramasSection').css('display', 'none');

            $('#manualesMenu').click(function(e) {
                e.preventDefault();

                $('.manualesSection').css('display', 'block');
                $('.procesosSection').css('display', 'none');
                $('.politicasSection').css('display', 'none');
                $('.diagramasSection').css('display', 'none');
            });
            $('#procesosMenu').click(function(e) {
                e.preventDefault();

                $('.manualesSection').css('display', 'none');
                $('.procesosSection').css('display', 'block');
                $('.politicasSection').css('display', 'none');
                $('.diagramasSection').css('display', 'none');
            });
            $('#politicasMenu').click(function(e) {
                e.preventDefault();

                $('.manualesSection').css('display', 'none');
                $('.procesosSection').css('display', 'none');
                $('.politicasSection').css('display', 'block');
                $('.diagramasSection').css('display', 'none');
            });
            $('#diagramasMenu').click(function(e) {
                e.preventDefault();

                $('.manualesSection').css('display', 'none');
                $('.procesosSection').css('display', 'none');
                $('.politicasSection').css('display', 'none');
                $('.diagramasSection').css('display', 'block');
            });

            var manualesTable = $("#manualesTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/get/user/tipos/manuales') }}" + "/" + 21,
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "nombre_manual"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "nombre_grupo"
                    },
                    {
                        data: "url",
                        render: function(data, type, row) {
                            var badge = "";

                            badge += '<div class="text-center"><div class="btn-group"><a href="' +
                                data +
                                '" target="_blank"><button class="btn btn-info btn-sm viewManual" title="Ver Manual"><i class="material-icons">visibility</i></button></a></div></div>';

                            return badge;
                        },
                    }
                ],
                order: [
                    [1, "asc"]
                ]
            });

            $('#groupFilterManuales').change(function() {
                manualesTable.column(2).search(this.value, true, false, false).draw();
            });

            var procesosTable = $("#procesosTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/get/user/tipos/manuales') }}" + "/" + 22,
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "nombre_manual"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "nombre_grupo"
                    },
                    {
                        data: "url",
                        render: function(data, type, row) {
                            var badge = "";

                            badge += '<div class="text-center"><div class="btn-group"><a href="' +
                                data +
                                '" target="_blank"><button class="btn btn-info btn-sm viewManual" title="Ver Manual"><i class="material-icons">visibility</i></button></a></div></div>';

                            return badge;
                        },
                    }
                ],
                order: [
                    [1, "asc"]
                ]
            });

            $('#groupFilterProcesos').change(function(e) {
                e.preventDefault();

                procesosTable.column(2).search($.trim(this.value), true, false, false).draw();
            });

            var politicasTable = $("#politicasTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/get/user/tipos/manuales') }}" + "/" + 23,
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "nombre_manual"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "nombre_grupo"
                    },
                    {
                        data: "url",
                        render: function(data, type, row) {
                            var badge = "";

                            badge += '<div class="text-center"><div class="btn-group"><a href="' +
                                data +
                                '" target="_blank"><button class="btn btn-info btn-sm viewManual" title="Ver Documento"><i class="material-icons">visibility</i></button></a></div></div>';

                            return badge;
                        },
                    }
                ],
                order: [
                    [1, "asc"]
                ]
            });

            $('#groupFilterPoliticas').change(function(e) {
                e.preventDefault();

                politicasTable.column(2).search($.trim(this.value), true, false, false).draw();
            });

            var diagramasTable = $("#diagramasTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/get/user/tipos/manuales') }}" + "/" + 27,
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "nombre_manual"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "nombre_grupo"
                    },
                    {
                        data: "url",
                        render: function(data, type, row) {
                            var badge = "";

                            badge += '<div class="text-center"><div class="btn-group"><a href="' +
                                data +
                                '" target="_blank"><button class="btn btn-info btn-sm viewManual" title="Ver Documento"><i class="material-icons">visibility</i></button></a></div></div>';

                            return badge;
                        },
                    }
                ],
                order: [
                    [1, "asc"]
                ]
            });

            $('#groupFilterDiagramas').change(function(e) {
                e.preventDefault();

                diagramasTable.column(2).search($.trim(this.value), true, false, false).draw();
            });

        });
    </script>
@endsection