@php
    $isAdmin = $data['role_id'] == \App\Models\Users::ROLE_ADMIN;
@endphp

<style>
    td {
        text-align: center;
    }

    th {
        text-align: center;
    }

    .download {
        text-align: center;
    }

    .download a {
        text-align: center;
        color: #000000;
    }

    .download a {
        text-align: center;
        color: #000000;
        cursor: pointer;
        text-decoration: underline;
    }

    #pagination {
        text-align: center;
    }

    .dropdown-menu>li>a {
        white-space: nowrap;
    }

    .multiselect-container > li > a {
        white-space: normal;
    }

    .multiselect.dropdown-toggle {
        width: 180px;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .multiselect-selected-text {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-grid;
    }
    
    .panel-title {
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: 600;
    }
    
    .panel-heading {
        padding: 15px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }
    
    .btn-group {
        margin-left: 10px;
    }
    
    .btn {
        margin-left: 5px;
    }
</style>

<script id="tmpl_counter_pirate_load" type="text/html">
    <tr>
        <th width="100%" colspan="10">
            <div id="loading" style="text-align: center;"><img src="/images/loading.gif" border="0"></div>
        </th>
    </tr>
</script>

<script id="tmpl_modal_error" type="text/html">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">${text_message_title}</h4>
    </div>
    <div class="modal-body">
        <div style="float: left; width: 50px;">
            <span class="fa fa-exclamation-triangle fa-3x"></span>
        </div>
        <p>${text_message_body}</p>
    </div>
</script>

<script id="tmpl_modal_export" type="text/html">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Export</h4>
    </div>
    <div class="modal-body">
        <p style="text-align: center;">Export was successful.</p>
        <div class="download">
            <i class="fa fa-download"></i> <a href="${href}" title="Download" target="_blank">Download</a>
        </div>
    </div>
</script>

<script type="text/javascript">
    var wait_counter_actions = {};
    var selected_reference_ids = new Set();

    $(document).ready(function(){
        // Clear local storage before entering
        window.localStorage.clear();

        var $modal = $('#ModalCounterReference');
        var table_counter_list = $('#table-counter-list');

        $(".input-daterange")
            .datepicker({
                language: 'en',
                inputs: $('.input-daterange input'),
                multidate: true,
                format: 'yyyy-mm-dd'
            })
            .on('changeDate', function (ev) {
                update_counter_list(0);
            });

        $('select[name="select_project[]"]').multiselect({
            includeSelectAllOption: true,
            selectAllText: 'Select all',
            nonSelectedText: 'Projects',
            inheritClass: true,
            onSelectAll: function () {
                update_counter_list(0);
            },
            onDeselectAll: function() {
                update_counter_list(0);
            },
            onChange: function(element, checked) {
                update_counter_list(0);
            }
        });

        update_counter_list(0);

        $('#pagination').on('click', 'a', function(e) {
            e.preventDefault();
            var position = $(this).attr("href").split(/\//g).pop();
            update_counter_list(position);
            return false;
        });

        table_counter_list.on('click', '#filter', function(e) {
            e.preventDefault();
            update_counter_list(0);
            return false;
        });

        table_counter_list.on('click', 'a.btn-counter-status', function(e) {
            e.preventDefault();
            var counter_id = $(this).data("counter_id"),
                counter_status = $(this).data("counter_status");

            var button = $(this);
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            $.ajax({
                type: "POST",
                url: "/counter/pirate/status",
                data: {'submit': 1, 'counter_status': counter_status, 'counter_id': counter_id},
                success: function (response) {
                    if(response.result == 0){
                        info_message("Status changed successfully.", "success");
                        counter_status = counter_status == 0 ? 1 : 0;
                        button.data("counter_status", counter_status);
                        button.find("font").css("color", response.color);
                        button.find("font").text(response.text);
                    } else {
                        info_message("Status not changed", "danger");
                    }
                },
                dataType: 'json'
            });
            return false;
        });

        table_counter_list.on('click', 'a.btn-change-link-status', function(e) {
            e.preventDefault();
            var counter_id = $(this).data("counter_id"),
                counter_status = $(this).data("counter_status");

            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            $.ajax({
                type: "POST",
                url: "/counter/pirate/change_status",
                data: {'submit': 1, 'counter_id': counter_id, 'current_status': counter_status},
                success: function (response) {
                    if(response.result == 0){
                        info_message("Link status changed successfully.", "success");
                        update_counter_list(0);
                    } else {
                        info_message("Failed to change link status", "danger");
                    }
                },
                dataType: 'json'
            });
            return false;
        });

        $('a.btn-remove-counter-selected').click(function(e) {
            e.preventDefault();
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            $.ajax({
                type: "POST",
                url: "/counter/pirate/delete",
                data: {
                    'submit': 1,
                    'wait_actions': wait_counter_actions
                },
                success: function (data) {
                    if(data.result == 0){
                        if(wait_counter_actions){
                            for ( var website_id in wait_counter_actions ){
                                for( var project_id in wait_counter_actions[website_id] ){
                                    for(var i=0; i<wait_counter_actions[website_id][project_id].length; i++){
                                        var counter_id=wait_counter_actions[website_id][project_id][i];
                                        var $row = $('.row-id-'+counter_id);
                                        $row.remove();
                                    }
                                }
                            }
                        }
                        wait_counter_actions = {};
                        update_counter_list(0);
                        info_message("Counter notice was successfully deleted", "success");
                    } else {
                        update_counter_list(0);
                        info_message("Counter notice was not deleted", "danger");
                    }
                },
                dataType: 'json',
                beforeSend : function(xhr, opts){
                    info_message("Wait for the operation to complete.", "warning");
                }
            });
        });

        table_counter_list.on('click', 'a.btn-remove-counter', function(e) {
            e.preventDefault();
            var counter_id = $(this).data("counter_id"),
                $row = $(this).parent().parent().parent().parent().parent();

            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            $.ajax({
                type: "POST",
                url: "/counter/pirate/delete",
                data: {
                    'submit': 1,
                    'counter_id': counter_id
                },
                success: function (data) {
                    if(data.result == 0){
                        $row.remove();
                        info_message("Counter notice was successfully deleted", "success");
                    } else {
                        update_counter_list(0);
                        info_message("Counter notice was not deleted", "danger");
                    }
                },
                dataType: 'json',
                beforeSend : function(xhr, opts){
                    info_message("Wait for the operation to complete.", "warning");
                }
            });
        });

        $("ul#tablist li").click(function(e){
            e.preventDefault();
            var mode = $(this).find("a").attr("aria-controls");
            if(mode == "all"){
                $("#mode").val(2);
            } else if(mode == "deleted"){
                $("#mode").val(1);
            } else if(mode == "notdeleted"){
                $("#mode").val(0);
            } else if(mode == "pending"){
                $("#mode").val(3);
            } else if(mode == "denied"){
                $("#mode").val(4);
            } else {
                $("#mode").val(0);
            }
            update_counter_list(0);
        });

        $("#export").click(function(e){
            e.preventDefault();
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            $.ajax({
                type: "POST",
                url: "/counter/pirate/export_csv",
                data: {
                    'submit': 1,
                    'mode': $("#mode").val(),
                    'begin_date': $("input[name='begin_date']").val(),
                    'end_date': $("input[name='end_date']").val(),
                    'href': $("#href").val(),
                    'select_project': $("select[name='select_project[]']").val()
                },
                success: function (data) {
                    if(data.result == 0){
                        $modal.find(".modal-content").empty();
                        $("#tmpl_modal_export").tmpl({href: data.href}).appendTo($modal.find(".modal-content"));
                        $modal.modal('show');
                    } else {
                        $modal.find(".modal-content").empty();
                        $("#tmpl_modal_error").tmpl({text_message_title: "Error", text_message_body: "An error occurred while exporting"}).appendTo($modal.find(".modal-content"));
                        $modal.modal('show');
                    }
                },
                dataType: 'json',
                beforeSend : function(xhr, opts){
                    $modal.find(".modal-content").empty();
                    $("#tmpl_counter_pirate_load").tmpl({text_message_title: "Loading", text_message_body: "Please wait for processing"}).appendTo($modal.find(".modal-content"));
                    $modal.modal('show');
                }
            });
        });

        $(".pirate-select").change(onChangeCounterSelect);

        $("#select_all_3").change(function() {
            if($(this).is(":checked")) {
                // Select all visible checkboxes
                $('.pirate-select').prop('checked', true);
                $('.pirate-select').each(function() {
                    var reference_id = parseInt($(this).data("reference_id"));
                    selected_reference_ids.add(reference_id);
                });
                
                // Get all links for current filters
                check_all_links();
            } else {
                // Unselect all checkboxes
                $('.pirate-select').prop('checked', false);
                selected_reference_ids.clear();
                wait_counter_actions = {};
            }
        });

        var updateSortDirectionIcon = function(direction, element){
            if(direction=='desc') {
                element.removeClass('fa-arrow-up');
                element.addClass('fa-arrow-down');
            }else{
                element.removeClass('fa-arrow-down');
                element.addClass('fa-arrow-up');
            }
        }

        $("#sortDateButton").click(function(){
            var direction;
            if($(this).hasClass("activeSort")){
                direction = $(this).data("direction");
                direction = direction == 'desc' ? 'asc' : 'desc';
                $(this).data("direction", direction);
                updateSortDirectionIcon(direction, $('.sort-direction-date'));
            }else{
                $('.activeSort').removeClass('activeSort');
                $(this).addClass("activeSort");
                $('.sort-direction-icon').css("display", 'none');
                $('.sort-direction-date').css("display", 'inline');
                direction = 'desc';
                $(this).data("direction", direction);
                updateSortDirectionIcon(direction, $('.sort-direction-date'));
            }
            update_counter_list(0);
        });

        $("#sortLinkButton").click(function(){
            var direction;
            if($(this).hasClass("activeSort")){
                direction = $(this).data("direction");
                direction = direction == 'desc' ? 'asc' : 'desc';
                $(this).data("direction", direction);
                updateSortDirectionIcon(direction, $('.sort-direction-link'));
            }else{
                $('.activeSort').removeClass('activeSort');
                $(this).addClass("activeSort");
                $('.sort-direction-icon').css("display", 'none');
                $('.sort-direction-link').css("display", 'inline');
                direction = 'asc';
                $(this).data("direction", direction);
                updateSortDirectionIcon(direction, $('.sort-direction-link'));
            }
            update_counter_list(0);
        });
    });

    function onChangeCounterSelect() {
        var reference_id = parseInt($(this).data("reference_id"));

        if($(this).is(":checked")) {
            selected_reference_ids.add(reference_id);
        } else {
            selected_reference_ids.delete(reference_id);
        }

        if(check_select_all_counter_actions()){
            $('#select_all_3').prop('checked', true);
        }else{
            $('#select_all_3').prop('checked', false);
        }
    }

    function select_counter_actions(item){
        var website_id = $(item).data("website_id"),
            project_id = $(item).data("project_id"),
            counter_id = $(item).data("counter_id"),
            value = wait_counter_actions;

        if(!$(item).is(":checked")) {
            if (typeof value == "undefined") {
                value = {};
                value[project_id] = [];
            } else {
                if (typeof value[project_id] == "undefined") {
                    value[project_id] = [];
                }
            }
            value[project_id].push(counter_id);
            wait_counter_actions = value;
            $(item).prop('checked', true)
        }
    }

    function unselect_counter_actions(item){
        var website_id = $(item).data("website_id"),
            project_id = $(item).data("project_id"),
            counter_id = $(item).data("counter_id"),
            value = wait_counter_actions;

        if($(item).is(":checked")) {
            for (var k=0; k<value[project_id].length; k++) {
                if(value[project_id][k] == counter_id){
                    value[project_id].splice(k, 1);
                    $(item).prop('checked', false)
                    break;
                }
            }
        }
    }

    function check_select_all_counter_actions(){
        var select_all = true;
        if($('.pirate-select').length <= 0) return false;
        $.each($('.pirate-select'), function(key, value){
            if(!$(value).is(":checked")){
                select_all = false;
            }
        });
        return select_all;
    }

    function check_all_links() {
        $.ajax({
            type: "POST",
            url: "/counter/pirate/check_links",
            dataType: 'json',
            data: {
                'submit': 1,
                'mode': $("#mode").val(),
                'begin_date': $("input[name='begin_date']").val(),
                'end_date': $("input[name='end_date']").val(),
                'select_project': $("select[name='select_project[]']").val(),
                'href': $("#href").val(),
                'se_codes': $("select[name='se_codes[]']").val(),
                'website_id': $('#website_id').val()
            },
            success: function (response) {
                // Store all reference IDs for the current filters
                if (response.reference_id_list && response.reference_id_list.length > 0) {
                    response.reference_id_list.forEach(function(id) {
                        selected_reference_ids.add(parseInt(id));
                    });
                }
                
                $modal.find(".modal-content").empty();
                $modal.modal('hide');
            },
            beforeSend: function (xhr, opts) {
                $modal.find(".modal-content").empty();
                $("#tmpl_modal_select").tmpl().appendTo($modal.find(".modal-content"));
                $modal.modal('show');
            },
            error: function (xhr, opts) {
                $modal.find(".modal-content").empty();
                $("#tmpl_modal_error").tmpl({
                    text_message_title: "Error",
                    text_message_body: "An error occurred while selection links, please select fewer days."
                }).appendTo($modal.find(".modal-content"));
                $modal.modal('show');
            }
        });
    }

    function update_counter_list(position)
    {
        if (position != "#") {
            var sort_field = $('.activeSort').data("name");
            var sort_direction = $('.activeSort').data("direction");
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            $.ajax({
                type: "POST",
                url: "/counter/pirate/" + position,
                dataType: 'json',
                data: {
                    'submit': 1,
                    'mode': $("#mode").val(),
                    'begin_date': $("input[name='begin_date']").val(),
                    'end_date': $("input[name='end_date']").val(),
                    'position': position,
                    'href': $("#href").val(),
                    'select_project': $("select[name='select_project[]']").val(),
                    'wait_actions': wait_counter_actions,
                    'sort_field' : sort_field,
                    'sort_direction' : sort_direction
                 },
                success: function (response) {
                    $("#tbody-list").empty().html(response.html);
                    $('[data-toggle="tooltip"]').tooltip();
                    $("#pagination").empty().prepend(response.pagination);

                    if(check_select_all_counter_actions()){
                        $('#select_all_3').prop('checked', true);
                    }else{
                        $('#select_all_3').prop('checked', false);
                    }

                    $(".pirate-select").change(onChangeCounterSelect);
                },
                beforeSend : function(xhr, opts){
                    // Loading state handled by template
                }
            });
        }
    }

    function info_message(message, type) {
        var alertClass = type === 'danger' ? 'alert-danger' : type === 'warning' ? 'alert-warning' : 'alert-success';
        var alertHtml = '<div class="alert ' + alertClass + ' alert-dismissible" role="alert">' +
            '<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>' +
            message + '</div>';
        
        $('.alert').remove();
        $('.panel-body').prepend(alertHtml);
        
        setTimeout(function() {
            $('.alert').fadeOut();
        }, 3000);
    }

    function copyLink(link) {
        navigator.clipboard.writeText(link).then(function() {
            info_message("Link copied to clipboard!", "success");
        }, function(err) {
            console.error('Could not copy text: ', err);
            info_message("Failed to copy link", "danger");
        });
    }

    // Counter Notice button handler
    $(document).on('click', '#counter_notice', function(e) {
        e.preventDefault();
        
        // Store original button content
        var $button = $(this);
        var originalContent = $button.html();
        
        // Show loading state
        $button.prop('disabled', true);
        $button.html('<i class="fa fa-spinner fa-spin"></i> Processing...');
        
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });

        var data = {};
        
        // Check for select all checkbox
        if ($("#select_all_3").is(":checked")) {
            data = {
                'submit': 2,
                'mode': $("#mode").val(),
                'begin_date': $("input[name='begin_date']").val(),
                'end_date': $("input[name='end_date']").val(),
                'select_project': $("select[name='select_project[]']").val(),
                'href': $("#href").val(),
                'se_codes': $("select[name='se_codes[]']").val(),
                'website_id': $('#website_id').val()
            };
        } else {
            data = {
                'submit': 1,
                'reference_ids': Array.from(selected_reference_ids)
            };
        }

        $.ajax({
            type: "POST",
            url: "/counter/pirate/counter_notice",
            dataType: 'json',
            data: data,
            success: function (response) {
                // Restore button state
                $button.prop('disabled', false);
                $button.html(originalContent);
                
                if (response.result == 0) {
                    info_message("Counter notice sent successfully!", "success");
                    selected_reference_ids.clear();
                    update_counter_list(0);
                } else {
                    info_message("Failed to send counter notice: " + response.message, "danger");
                }
            },
            error: function (xhr, status, error) {
                // Restore button state
                $button.prop('disabled', false);
                $button.html(originalContent);
                
                info_message("Error sending counter notice: " + error, "danger");
            },
            beforeSend: function (xhr, opts) {
                info_message("Sending counter notice...", "warning");
            }
        });
    });

    // Change Link Status button handler
    $(document).on('click', '.btn-change-link-selected', function(e) {
        e.preventDefault();
        var type = $(this).data("type");
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });

        var data = {};
        
        // Check for select all checkbox
        if ($("#select_all_3").is(":checked")) {
            data = {
                'submit': 2,
                'type': type,
                'mode': $("#mode").val(),
                'begin_date': $("input[name='begin_date']").val(),
                'end_date': $("input[name='end_date']").val(),
                'select_project': $("select[name='select_project[]']").val(),
                'href': $("#href").val(),
                'se_codes': $("select[name='se_codes[]']").val(),
                'website_id': $('#website_id').val()
            };
        } else {
            data = {
                'submit': 1,
                'type': type,
                'reference_ids': Array.from(selected_reference_ids)
            };
        }

        $.ajax({
            type: "POST",
            url: "/counter/pirate/pirate_status",
            data: data,
            success: function (response) {
                if (response.result == 0) {
                    info_message("Status changed successfully!", "success");
                    selected_reference_ids.clear();
                    update_counter_list(0);
                } else {
                    info_message("Failed to change status: " + response.message, "danger");
                }
            },
            error: function (xhr, status, error) {
                info_message("Error changing status: " + error, "danger");
            },
            dataType: 'json',
            beforeSend: function (xhr, opts) {
                info_message("Changing status...", "warning");
            }
        });
    });
</script>

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4">
                <h3 class="panel-title" style="margin-top: 0.5em;">Counter Links</h3>
            </div>
            <div class="col-xs-6 col-md-8 text-right">
                                <button id="export" class="btn btn-default">Export</button>