[% USE KohaDates %]

[% IF enrollments %]

    <h2>Clubs currently enrolled in</h2>

    <table id="clubs-table-enrolled" class="table table-bordered table-striped">
        <caption class="sr-only">Clubs</caption>
        <thead>
            <tr>
                <th class="all">Name</th>
                <th>Description</th>
                <th>Date enrolled</th>
                <th class="NoSort all">&nbsp;</th>
                <th></th>
            </tr>
        </thead>

        <tbody>
            [% FOREACH e IN enrollments %]
                <tr>
                    <td>[% e.club.name | html %]</td>
                    <td>[% e.club.description | html %]</td>
                    <td>[% e.date_enrolled | $KohaDates %]</td>
                    <td>
                        [% IF e.club.club_template.is_enrollable_from_opac %]
                            <button class="btn btn-sm btn-danger cancel_enrollment" data-id="[% e.id | html %]">
                                <i class="fa fa-times" aria-hidden="true"></i> Cancel enrollment
                            </button>
                        [% ELSE %]
                            Contact your library to be disenrolled from this club.
                        [% END %]
                    </td>
                    <td></td>
                </tr>
            [% END %]
        </tbody>
    </table>
[% END %]

[% IF clubs %]

    <h2>Clubs you can enroll in</h2>

    <table id="clubs-table-unenrolled" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th class="all">Name</th>
                <th>Description</th>
                <th class="NoSort all">&nbsp;</th>
                <th></th>
            </tr>
        </thead>

        <tbody>
            [% FOREACH c IN clubs %]
                <tr>
                    <td>[% c.name | html %]</td>
                    <td>[% c.description | html %]</td>
                    <td>
                        [% IF !c.club_template.is_email_required || ( c.club_template.is_email_required && patron.notice_email_address ) %]
                            <button class="btn btn-sm btn-primary load_enrollment" data-id="[% c.id | html%]">
                                <i class="fa fa-plus" aria-hidden="true"></i> Enroll
                            </button>
                        [% ELSE %]
                            <span class="hint">You must have an email address to enroll</span>
                        [% END %]
                    </td>
                    <td></td>
                </tr>
            [% END %]
        </tbody>
    </table>
[% END %]

<script>
function loadEnrollmentForm( id ) {
    $("body").css("cursor", "progress");
    $('#opac-user-clubs_panel').load('/cgi-bin/koha/clubs/enroll.pl?borrowernumber=[% patron.borrowernumber | html %]&id=' + id, function() {
        $("body").css("cursor", "default");
    });

    return false;
}

function cancelEnrollment( id ) {
    $("body").css("cursor", "progress");
    $.ajax({
        type: "POST",
        url: '/cgi-bin/koha/svc/club/cancel_enrollment',
        data: { id: id },
        success: function( data ) {
            if ( data.success ) {
                $('#opac-user-clubs_panel').load('/cgi-bin/koha/clubs/clubs-tab.pl?borrowernumber=[% patron.borrowernumber | html %]', function() {
                    $("body").css("cursor", "default");
                });
            } else {
                alert(_("Unable to cancel enrollment!"));
            }
        },
        dataType: 'json'
    });
    return false;
}

    var Tables = $("#clubs-table-enrolled,#clubs-table-unenrolled");
    Tables.each(function(){
        $(this).dataTable($.extend(true, {}, dataTablesDefaults, {
            "searching": false,
            "paging": false,
            "info": false,
            "autoWidth": false,
            "responsive": {
                "details": { "type": "column", "target": -1 }
            },
            "columnDefs": [
                { "orderable": false, "searchable": false, "targets": [ 'NoSort' ] },
                { "className": "dtr-control", "orderable": false, "targets": -1 },
            ],
        }));
    });

    $(".cancel_enrollment").on("click", function(e){
        e.preventDefault();
        let clubid = $(this).data("id");
        cancelEnrollment( clubid );
    });

    $(".load_enrollment").on("click", function(e){
        e.preventDefault();
        let clubid = $(this).data("id");
        loadEnrollmentForm( clubid );
    });


</script>