@extends('modules.head') @section('contenido')
<style>
    /* Ensure that the demo table scrolls */
    /* th, */
    td {
        white-space: nowrap;
    }

    div.dataTables_wrapper {
        height: fit-content;
        margin: 0px 10px 0px 10px;
    }

    .dataTables_scrollBody {
        max-height: none !important;
    }

    .redBackground {
        background-color: #FB5656 !important;
    }

    .yellowBackground {
        background-color: #fbdd56 !important;
    }
</style>
@php
$page_prefix = 'academy_schedule';
@endphp

<div class="box-header">
    <a class="btn btn-app btnReportProducts" onclick="clickExportAll()">
        <i class="fa fa-file-excel-o"></i> {{ Lang::get('messages.academy_schedules.export') }}
    </a>
</div>

<div class="box-header">
    <a class="auxiliar-black" href="{{ url('/academy_schedules/add') }}">
        <button class="btn btnAdd pull-right">
            <i style="margin-right:5px;" class="fa fa-plus"></i>
            {{ Lang::get('messages.academy_schedules.title_create') }}
        </button></a>
</div>

<!-- List Data -->
<div class="box">
    <div class="box-header">
        <h3 class="box-title"><b>{{ Lang::get('messages.academy_users.filters') }}</b></h3>
        <div class="row">
            <div class="col-4 col-md-4">
                <label for="locations">{{ Lang::get('messages.academy_schedules.tag8') }}</label>
                <select class="form-control select2" multiple="multiple"
                    data-placeholder="{{ Lang::get('messages.academy_schedules.select') }}" name="locations" required>
                </select>
            </div>
            <div class="col-4 col-md-4">
                <label for="categories">{{ Lang::get('messages.screen_banners_tag6') }}</label>
                <select class="form-control select2" multiple="multiple"
                    data-placeholder="{{ Lang::get('messages.academy_schedules.select') }}" name="categories" required>
                </select>
            </div>
            <div class="col-4 col-md-4">
                <label for="coaches">{{ Lang::get('messages.academy_schedules.tag7') }}</label>
                <select class="form-control select2" multiple="multiple"
                    data-placeholder="{{ Lang::get('messages.academy_schedules.select') }}" name="coaches" required>
                </select>
            </div>
        </div>
        <p style="margin-top: 10px; border-bottom: 1px solid #D3D3D3;"></p>
        <h3 class="box-title"><b>{{ Lang::get('messages.academy_schedules.title_list') }}</b></h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="academy_schedules" class="stripe row-border order-column" style="width:100%" role="grid"
            aria-describedby="academy_schedules_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag1') }}
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag4') }}
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag8') }}
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag2') }}
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag3') }}
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag5') }}
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag9') }}
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag0') }}
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="academy_schedules" rowspan="1" colspan="1"
                        aria-label="Engine version: activate to sort column ascending">
                        {{ Lang::get('messages.academy_schedules.tag00') }}
                    </th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- /.box-body -->
</div>

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/crud.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/academy_schedules.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    const SELECTOR_PREFIX = "{{ $page_prefix }}";

    $(document).ready(function() {
        getAcademyLocations();
        getAcademyCategories();
        getAcademyCoaches();

        validateLocalStoreInformation();
        $('.select2').select2();
        getData();

        $("select[name='categories']").on('change', function() {
            getAcademyCoaches();
            cleanPagination();
            getData();
        });

        $("select[name='locations']").on('change', function() {
            getAcademyCategories();
            getAcademyCoaches();
            cleanPagination();
            getData();
        });

        $("select[name='coaches']").on('change', function() {
            cleanPagination();
            getData();
        });
    });

    let cleanPagination = function() {
        localRemove(`DataTables_${SELECTOR_PREFIX}`);
    }

    function getData() {
        let categories = $("select[name='categories']").val();
        let locations = $("select[name='locations']").val();
        let coaches = $("select[name='coaches']").val();

        localStore(`${SELECTOR_PREFIX}_filterCategories`, categories);
        localStore(`${SELECTOR_PREFIX}_filterLocatios`, locations);
        localStore(`${SELECTOR_PREFIX}_filterCoaches`, coaches);

        let fixedColumns = false;
        let isMobileDevice = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (!isMobileDevice) {
            fixedColumns = {
                left: 1,
                right: 2
            };
        }

        $("#academy_schedules").dataTable().fnDestroy();
        var sort_col = $('#academy_schedules').find("th:contains(" + Lang.get('messages.academy_schedules.tag9') + ")")[0].cellIndex;
        _table = $('#academy_schedules').DataTable({
            stateSave: true,
            stateSaveCallback: function(settings, data) {
                localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data))
            },
            stateLoadCallback: function(settings) {
                return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance))
            },
            responsive: true,
            processing: true,
            serverSide: true,
            order: [
                [sort_col, 'desc']
            ],
            language: {
                url: window.DATATABLES_LANGUAGE_URL,
            },
            scrollX: true,
            scrollCollapse: true,
            paging: true,
            fixedColumns: fixedColumns,
            ajax: {
                url: "{{ route('academy_schedules.table') }}",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                type: "POST",
                data: {
                    categories: categories,
                    locations: locations,
                    coaches: coaches
                }
            },
            columns: [{
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'academy_categories_schedules',
                    render: function(data, type, row) {
                        let categories = '';
                        if (row.academy_categories_schedules) {
                            let data = row.academy_categories_schedules.map(function(d) {
                                return '<li>' + (d.academy_category?.name || '') +
                                    '</li>';
                            });
                            categories = data.join('');
                        }
                        return categories;
                    },
                    name: 'academy_categories_schedules.academy_category.name'
                },
                {
                    data: 'academy_categories_schedules',
                    render: function(data, type, row) {
                        let response = '';
                        if (row.academy_categories_schedules) {
                            let data = row.academy_categories_schedules.map(function(d) {
                                if (d.academy_category) {
                                    return '<li>' + (d.academy_category?.academy_location?.name || '') +
                                        '</li>';
                                }
                            });
                            response = data.join('');
                        }
                        return response;
                    },
                    name: 'academy_categories_schedules.academy_category.academy_location.name'
                },
                {
                    data: 'total_capacity',
                    name: 'total_capacity'
                },
                {
                    data: 'current_capacity',
                    name: 'current_capacity'
                },
                {
                    data: 'id', // ENTRENADOR(ES)
                    render: function(data, type, row) {
                        let coaches = '';
                        if (row.academy_schedules_coaches) {
                            let academySchedules = row.academy_schedules_coaches.map(function(
                                d) {
                                if (d.user) {
                                    return '<li>' + (d.user?.first_name + ' ' + d.user
                                        ?.last_name) + ' (' + d.user?.email + ')</li>';
                                }
                            });
                            coaches = academySchedules.join('');
                        }
                        return coaches;
                    },
                    name: 'academy_schedules_coaches.user.first_name'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'active',
                    name: 'active'
                },
                {
                    data: 'actions',
                    name: 'actions'
                }
            ],
            "createdRow": function(row, data, dataIndex) {
                if (data['current_capacity'] <= 5) {
                    $(row).addClass('redBackground');
                } else if (data['current_capacity'] <= data['total_capacity'] / 2) {
                    $(row).addClass('yellowBackground');
                }
            }
        });

        var info =
            '<i class="fa  fa-info-circle"  id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Nombre, Orden y Link</p></div>';
        $('#academy_schedules_filter').append(info);
        $('#btn-info-busqueda').on('click', function() {
            $('#menuBusqueda').toggle();
        });
    }

    function validateLocalStoreInformation() {
        $("select[name='categories']").select2().val(localRetrieve(`${SELECTOR_PREFIX}_filterCategories`));
        $("select[name='locations']").select2().val(localRetrieve(`${SELECTOR_PREFIX}_filterLocatios`));
        $("select[name='coaches']").select2().val(localRetrieve(`${SELECTOR_PREFIX}_filterCoaches`));
    }
</script>
@endsection