@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: 200px !important;
        white-space: normal;
    }
</style>
@php
$page_prefix = "experience_plans";
@endphp
<div class="box-header">
    <a class="auxiliar-black" href="{{ url('/experience_plans/add/' . $experience->id) }}">
        <button class="btn btnAdd pull-right">
            <i style="margin-right:5px;" class="fa fa-plus"></i>
            {{ Lang::get('experiences.plans.create') }}
        </button>
    </a>
</div>

<!-- List experience plans -->
<div class="box">
    <div class="box-header with-border">
        <a class="ruta" class="" href="{{ url('/experience_settings') }}">
            {{ Lang::get('experiences.default_buttons.back') }}
        </a>
        <span class="separador-ruta">|</span>
        <h3 class="box-title"><b>{{ Lang::get('experiences.plans.title') }} ({{ $experience->name }})</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_plans.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 experienceId = <?php echo json_encode($experience->id); ?>;
        localStorage.setItem("experienceId", experienceId);

        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,
            language: {
                url: window.DATATABLES_LANGUAGE_URL,
            },
            scrollX: true,
            scrollCollapse: true,
            paging: true,
            fixedColumns: fixedColumns,
            ajax: {
                url: "{{ route('experience_plans.table') }}",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                type: "POST",
                data: {
                    experienceId: experienceId,
                }
            },
            columns: [{
                    data: 'name',
                    name: 'name',
                    title: Lang.get('experiences.plans.datatables.columns.name'),
                },
                {
                    data: 'description',
                    name: 'description',
                    className: "description",
                    title: Lang.get('experiences.plans.datatables.columns.description'),
                },
                {
                    data: 'type',
                    name: 'type',
                    title: Lang.get('experiences.plans.datatables.columns.type'),
                },
                {
                    data: 'total_capacity',
                    name: 'total_capacity',
                    title: Lang.get('experiences.plans.datatables.columns.total_capacity'),
                },
                {
                    data: 'available_slots',
                    name: 'available_slots',
                    title: Lang.get('experiences.plans.datatables.columns.available_slots'),
                },
                {
                    data: 'entries_per_purchase',
                    name: 'entries_per_purchase',
                    title: Lang.get('experiences.plans.datatables.columns.entries_per_purchase'),
                },
                {
                    data: 'buy_limit',
                    name: 'buy_limit',
                    title: Lang.get('experiences.plans.datatables.columns.buy_limit'),
                },
                {
                    data: 'display_index',
                    name: 'display_index',
                    title: Lang.get('experiences.plans.datatables.columns.display_index'),
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    title: Lang.get('experiences.plans.datatables.columns.created_at'),
                },
                {
                    data: 'actions',
                    name: 'actions',
                    title: Lang.get('experiences.plans.datatables.columns.actions'),
                    orderable: false,
                    searchable: false,
                },
            ]
        });
    }

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