{% extends "fleetfinder/base.html" %}

{% load aa_i18n %}
{% load i18n %}

{% block page_title %}
    {% translate "Fleet details" %} » {% translate "Fleet Finder" %}
{% endblock %}

{% block aa_fleetfinder_body %}
    <div class="row">
        <div class="col-lg-6 col-lg-push-6">
            <div class="card card-primary">
                <div class="card-header">
                    <div class="card-title mb-0">
                        {% translate "Fleet composition" %}
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-vertical-middle w-100" id="table_fleet_composition">
                            <thead>
                                <tr>
                                    <th>{% translate "Ship class" %}</th>
                                    <th>{% translate "Count" %}</th>
                                </tr>
                            </thead>

                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-lg-pull-6">
            <div class="card card-primary">
                <div class="card-header">
                    <div class="card-title mb-0">
                        {% translate "Fleet members" %}
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-vertical-middle w-100" id="table_fleet_members">
                            <thead>
                                <tr>
                                    <th>{% translate "Name" %}</th>
                                    <th>{% translate "Ship class" %}</th>
                                    <th>{% translate "System" %}</th>
                                    <th><!-- {% translate "Action" %} --></th>
                                </tr>
                            </thead>

                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include "fleetfinder/modals/kick-fleet-member.html" %}
{% endblock %}

{% block extra_css %}
    {% include "bundles/datatables-css-bs5.html" %}
    {% include "fleetfinder/bundles/css/fleetfinder-css.html" %}
{% endblock %}

{% block extra_javascript %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include "fleetfinder/bundles/js/fleetfinder-js.html" %}

    {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}

    {% translate "Fleet boss" as l10nFleetBoss %}
    {% translate "Kick member from fleet" as l10nKickMemberFromFleet %}
    {% translate "An unknown error occurred." as l10nUnknownError %}

    <script>
        $(document).ready(() => {
            /* DataTables
            ------------------------------------------------------------------------- */
            const table_fleet_members = $('#table_fleet_members');
            const table_fleet_composition = $('#table_fleet_composition');
            const url = {
                kickFleetMember: '{% url "fleetfinder:ajax_fleet_kick_member" fleet_id %}',
                fleetDetails: '{% url "fleetfinder:ajax_fleet_details" fleet_id %}'
            };
            const dataTableConfig = {
                language: {
                    url: '{{ DT_LANG_PATH }}'
                },
                paging: false,
                destroy: true
            };

            const populateDatatables = () => {
                fetchGet({
                    url: url.fleetDetails,
                })
                .then((data) => {
                    table_fleet_members.DataTable({
                        ...dataTableConfig,
                        data: data.fleet_member,
                        columns: [
                            {
                                render: (data, type, row) => {
                                    const fwIcon = '<i class="fa-solid fa-star"></i>';

                                    return row.is_fleet_boss
                                        ? `${row.character_name} <sup data-bs-tooltip="aa-fleetfinder" title="{{ l10nFleetBoss|escapejs }}"><small>${fwIcon}</small></sup>`
                                        : row.character_name;
                                }
                            },
                            {data: 'ship_type_name'},
                            {data: 'solar_system_name'},
                            {
                                render: (data, type, row) => {
                                    const fwIcon = '<i class="fa-solid fa-user-minus"></i>';
                                    const dataAttributes = Object.entries({
                                        'data-character-id': row.character_id,
                                        'data-character-name': row.character_name,
                                        'data-bs-toggle': 'modal',
                                        'data-bs-target': '#kick-fleet-member',
                                        'data-bs-tooltip': 'aa-fleetfinder'
                                    }).map(([key, value]) => {
                                        return `${key}="${value}"`;
                                    }).join(' ');

                                    return row.is_fleet_boss
                                        ? ''
                                        : `<button type="button" class="btn btn-sm btn-danger" ${dataAttributes} title="{{ l10nKickMemberFromFleet|escapejs }}">${fwIcon}</button>`;
                                },
                                orderable: false,
                                searchable: false,
                                width: '50px',
                                className: 'text-end'
                            }
                        ],
                        createdRow: (row, data, rowIndex) => {
                            $(row).attr('data-row-id', rowIndex);
                            $(row).attr('data-character-id', data.character_id);
                        }
                    });

                    table_fleet_composition.DataTable({
                        ...dataTableConfig,
                        data: data.fleet_composition,
                        columns: [
                            {data: 'ship_type_name'},
                            {data: 'number', className: 'text-right', width: '100px'}
                        ],
                        order: [[1, 'desc']]
                    });
                })
                .then(() => {
                    // Initialize tooltips for the kick buttons
                    fleetfinderBootstrapTooltip({selector: '#table_fleet_members'});
                })
                .catch((error) => {
                    console.error('Error fetching fleet details:', error);
                });
            };

            populateDatatables();

            setInterval(populateDatatables, 30000);

            /* Modals
            ------------------------------------------------------------------------- */
            // Handle the kick fleet member modal
            $('#kick-fleet-member')
                .on('show.bs.modal', (event) => {
                    const button = $(event.relatedTarget);
                    const characterId = button.data('character-id');
                    const characterName = button.data('character-name');
                    const link = url.kickFleetMember;
                    const csrfToken = '{{ csrf_token }}';

                    // Populate the modal content
                    $('#kick-fleet-member-character-name').text(characterName);

                    $('#modal-button-confirm-kick-fleet-member')
                        // Remove any previous click handlers to avoid multiple bindings
                        .off('click.kickMember')
                        // Bind the click event for the confirmation button
                        .on('click.kickMember', () => {
                        fetchPost({
                            url: link,
                            csrfToken: csrfToken,
                            payload: {
                                memberId: characterId
                            },
                            responseIsJson: true
                        })
                        .then((data) => {
                            if (data.success) {
                                populateDatatables();

                                $('#kick-fleet-member').modal('hide');
                            } else {
                                $('#kick-fleet-member .modal-kick-fleet-member-error')
                                    .removeClass('d-none')
                                    .find('.modal-kick-fleet-member-error-message')
                                    .text(data.error || '{{ l10nUnknownError|escapejs }}');
                            }
                        })
                        .catch((error) => {
                            console.error('Error kicking fleet member:', error);
                        });
                    });
                })
                .on('hide.bs.modal', () => {
                    // Reset modal content
                    $('#kick-fleet-member-character-name').empty();
                    $('#kick-fleet-member .modal-kick-fleet-member-error')
                        .addClass('d-none')
                        .find('.modal-kick-fleet-member-error-message')
                        .empty();

                    // Clean up event handler
                    $('#modal-button-confirm-kick-fleet-member').off('click.kickMember');
                });
        });
    </script>
{% endblock %}