@extends('modules.head')
@section('contenido')
<style>
    td {
        white-space: nowrap;
    }

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

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

    .scroll-ul {
        height: 140px;
        overflow: scroll;
        overflow-x: hidden;
    }
</style>
@php
    $page_prefix = "memberships";
@endphp
<div class="box-header">
    <a class="auxiliar-black" href="{{ url('/memberships/create') }}">
        <button class="btn btnAdd pull-right">
            <i style="margin-right:5px;" class="fa fa-plus"></i>
            {{__('memberships.texts.create')}}
        </button>
    </a>
</div>

<!-- List Data -->
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">{{__('memberships.texts.memberships')}}</h3>
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">


        <table id="{{$page_prefix}}" class="stripe row-border order-column" style="width:100%" role="grid" aria-describedby="{{$page_prefix}}_info"></table>
    </div>
    <!-- /.box-body -->
</div>
@endsection
@section('inline-js')
<script type="text/javascript">
    const SELECTOR_PREFIX = "{{$page_prefix}}";

    $(document).ready(function() {
        $(`#${SELECTOR_PREFIX}`).DataTable({
            stateSave: true,
            stateSaveCallback: function(settings,data) {
                localStore(`DataTables_${SELECTOR_PREFIX}`, data)
            },
            stateLoadCallback: function(settings) {
                return localRetrieve(`DataTables_${SELECTOR_PREFIX}` )
            },
            responsive: true,
            processing: true,
            serverSide: true,
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },
            ajax: {
                url: '/memberships/list',
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                type: "POST",
                dataSrc: function (json) {
                    var totalRows = json.total;
                    json.recordsTotal = totalRows;
                    json.recordsFiltered = totalRows;
                    console.log( json );
                    return json.data;
                }
            },
            columns: [
                {
                    name: 'name',
                    data: 'name',
                    title: Lang.get('memberships.datatables.columns.name'),
                },
                {
                    name: 'billing_interval',
                    data: 'billing_interval',
                    title: Lang.get('memberships.datatables.columns.billing_interval'),
                },
                {
                    name: 'price',
                    data: 'price',
                    title: Lang.get('memberships.datatables.columns.price'),
                },
                {
                    name:'active',
                    data:'active',
                    title: Lang.get('memberships.datatables.columns.active'),
                    orderable: false,
                    searchable: false,
                    render: function ( data, type, row, meta ) {
                        return activeToggleColumn(row);
                    }
                },
                {
                    width: '10%',
                    name:'actions',
                    data:'actions',
                    title: Lang.get('memberships.datatables.columns.actions'),
                    orderable: false,
                    searchable: false,
                    render: function ( data, type, row, meta ) {
                        return [
                            '<a href="/memberships/edit/' + row.id + '"><i class="fa fa-pencil iconMini" title="' + Lang.get('memberships.datatables.actions.edit') + '"></i></a>',
                        ].join('');
                    }
                }
            ]
        });
    });

    const activeToggleColumn = (row) => {
        return `<div class="switch">
                    <label>
                        <div class="checkbox checbox-switch switch-success">
                            <label> ${Lang.get('memberships.defaults.no')}
                                <input type="checkbox" onChange="activeToogleAction(${row.id})" name="Checkactivo" ${row.active ? 'checked' : ''}/>
                                <span></span>
                                ${Lang.get('memberships.defaults.yes')}
                            </label>
                        </div>
                    </label>
                </div>`;
    }

    const activeToogleAction = (id) => {
        $.ajax({
            type: 'PUT',
            url: `/memberships/${id}/active-toggle`,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            success: function (response) {
                console.log(response);
            }
        });
    }
</script>
@endsection