[% USE KohaDates %]

[% IF enrollments %]
    <h4>Clubs currently enrolled in</h4>

    <table id="table_clubenrollments">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Date enrolled</th>
                [% IF CAN_user_clubs_enroll %]<th class="NoSort">Actions</th>[% END %]
            </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>
                    [% IF CAN_user_clubs_enroll %]
                        <td>
                            <button class="btn btn-xs btn-default" onclick="loadEnrollmentForm([% e.club.id | html %],[% e.id | html %])">
                                <i class="fa-solid fa-pencil"></i> Modify enrollment
                            </button>
                            <button class="btn btn-xs btn-default" onclick="cancelEnrollment( [% e.id | html %] )">
                                <i class="fa fa-times"></i> Cancel enrollment
                            </button>
                        </td>
                    [% END %]
                </tr>
            [% END %]
        </tbody>
    </table>
[% END %]

[% IF clubs %]

    <h4>Clubs not enrolled in</h4>

    <table id="table_clubnoenrollmemnts">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                [% IF CAN_user_clubs_enroll %]<th class="NoSort">Actions</th>[% END %]
            </tr>
        </thead>

        <tbody>
            [% FOREACH c IN clubs %]
                <tr>
                    <td>[% c.name | html %]</td>
                    <td>[% c.description | html %]</td>
                    [% IF CAN_user_clubs_enroll %]
                        <td class="action">
                            <button class="btn btn-xs btn-default" onclick="loadEnrollmentForm([% c.id | html %])">
                                <i class="fa fa-plus"></i> Enroll
                            </button>
                        </td>
                    [% END %]
                </tr>
            [% END %]
        </tbody>
    </table>
[% END %]

<script>
$("#table_clubnoenrollmemnts, #table_clubenrollments").dataTable($.extend(true, {}, dataTablesDefaults, {
    "columnDefs": [
        { 'sortable': false, 'targets': [ 'NoSort' ] }
    ],
    paginate: true
}));

[% IF CAN_user_clubs_enroll %]
function loadEnrollmentForm( id, enrollent_id = 0 ) {
    $("body").css("cursor", "progress");
    $('#clubs_panel').load('/cgi-bin/koha/clubs/patron-enroll.pl?borrowernumber=[% borrowernumber | html %]&id=' + id +'&enrollent_id='+ enrollent_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 ) {
                $('#clubs_panel').load('/cgi-bin/koha/clubs/patron-clubs-tab.pl?borrowernumber=[% borrowernumber | html %]', function() {
                    $("body").css("cursor", "default");
                });
            } else {
                alert(_("Unable to cancel enrollment!"));
            }
        },
        dataType: 'json'
    });
    return false;
}
</script>
[% END %]