@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;
    }

    .short_description,
    .description,
    .apply_to,
    .includes,
    .when {
        /* min-width: 400px !important;
        white-space: normal; */
    }
</style>
@php
$page_prefix = "experience_settings";
@endphp
<div class="box-header">
    <a class="auxiliar-black" href="{{ url('/experience_settings/add') }}{{ '/' . $experience_type }}">
        <button class="btn btnAdd pull-right">
            <i style="margin-right:5px;" class="fa fa-plus"></i>
            {{ Lang::get('experiences.settings.create') }}
        </button>
    </a>
</div>

<!-- List experience settings -->
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title"><b>{{ Lang::get('experiences.settings.title') }}</b></h3>
    </div>

    <!-- /.box-header -->
    <table id="{{$page_prefix}}" class="stripe row-border order-column" style="width:100%" role="grid" aria-describedby="{{$page_prefix}}_info"></table>
    <!-- /.box-body -->
</div>
@endsection

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

    function getData() {

        if ($(`#${SELECTOR_PREFIX}`).html()) {
            $(`#${SELECTOR_PREFIX}`).DataTable().destroy();
        }

        var experienceType = <?php echo json_encode($experience_type); ?>;

        let fixedColumns = false;
        let isMobileDevice = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (!isMobileDevice) {
            fixedColumns = {
                left: 1,
                right: 2
            };
        }
        $(`#${SELECTOR_PREFIX}`).DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            order: [
                [8, 'asc']
            ],
            language: {
                url: window.DATATABLES_LANGUAGE_URL,
            },
            scrollX: true,
            scrollCollapse: true,
            paging: true,
            fixedColumns: fixedColumns,
            ajax: {
                url: "{{ route('experience_settings.table') }}",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                type: "POST"
            },
            columns: [{
                    data: 'name',
                    name: 'name',
                    title: Lang.get('experiences.settings.datatables.columns.name'),
                },
                {
                    data: 'icon',
                    name: 'icon',
                    title: Lang.get('experiences.settings.datatables.columns.icon'),
                },
                {
                    data: 'short_description',
                    name: 'short_description',
                    className: "short_description",
                    title: Lang.get('experiences.settings.datatables.columns.short_description'),
                },
                {
                    data: 'description',
                    name: 'description',
                    className: "description",
                    title: Lang.get('experiences.settings.datatables.columns.description'),
                },
                {
                    data: 'apply_to',
                    name: 'apply_to',
                    className: "apply_to",
                    title: Lang.get('experiences.settings.datatables.columns.apply_to'),
                },
                {
                    data: 'includes',
                    name: 'includes',
                    className: "includes",
                    title: Lang.get('experiences.settings.datatables.columns.includes'),
                },
                {
                    data: 'when',
                    name: 'when',
                    className: "when",
                    title: Lang.get('experiences.settings.datatables.columns.when'),
                },
                {
                    data: 'experience_type',
                    name: 'experience_type',
                    title: Lang.get('experiences.settings.datatables.columns.experience_type'),
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    title: Lang.get('experiences.settings.datatables.columns.created_at'),
                },
                {
                    data: 'active',
                    name: 'active',
                    title: Lang.get('experiences.settings.datatables.columns.active'),
                },
                {
                    data: 'actions',
                    name: 'actions',
                    title: Lang.get('experiences.settings.datatables.columns.actions'),
                    orderable: false,
                    searchable: false,
                },
            ]
        });
    }

    function getExperiencePlans(id) {
        window.location.href = "{{ url('/experience_plans') }}/" + id;
    }
</script>