@extends('dashboard.layouts.app')

@section('title', __('dashboard.Invoice_Subscribers'))

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard.home') }}" class="text-decoration-none">{{ __('dashboard.Home') }}</a></li>
    <li class="breadcrumb-item"><a href="{{ route('dashboard.invoices.index') }}" class="text-decoration-none">{{ __('dashboard.Invoices') }}</a></li>
    <li class="breadcrumb-item active">{{ __('dashboard.Invoice_Subscribers') }} - {{ $invoice->id }}</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">{{ __('dashboard.Invoice_Subscribers') }} - {{ __('dashboard.Invoice') }} #{{ $invoice->id }}</h3>
        </div>
        <div class="card-body">
            <input type="hidden" id="invoice-id" value="{{ $invoice->id }}">

            <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert" style="display: none;">
                <span id="success-message"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>

            <div id="error-alert" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
                <span id="error-message"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>

            <div class="mb-3">
                <h4>{{ __('dashboard.Add_Subscribers') }}</h4>
                <div class="input-group mb-3">
                    <input type="text" id="search-users" class="form-control" placeholder="{{ __('dashboard.Search_users_by_name_email_or_phone') }}">
                    <button class="btn btn-primary" id="search-button" type="button">{{ __('dashboard.Search') }}</button>
                    <button class="btn btn-secondary" id="clear-search-button" type="button" style="display: none;">{{ __('dashboard.Clear_Search') }}</button>
                </div>
                <div id="search-results" class="mt-2"></div>
            </div>

            <h4>{{ __('dashboard.Subscribers') }}</h4>
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>ID</th>
                            <th>{{ __('dashboard.Name') }}</th>
                            <th class="text-center">{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($subscribers as $subscriber)
                            <tr>
                                <td>{{ $subscriber->id }}</td>
                                <td>
                                    <span class="fw-bold">{{ $subscriber->first_name . ' ' . $subscriber->last_name }}</span><br>
                                    <span class="text-muted small">{{ $subscriber->email }} / {{ $subscriber->phone }}</span>
                                </td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-danger remove-subscriber" data-invoice-id="{{ $invoice->id }}" data-user-id="{{ $subscriber->id }}" type="button">
                                        {{ __('dashboard.Remove') }}
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center">{{ __('dashboard.No_subscribers_found') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-remove" tabindex="-1" aria-labelledby="confirmRemoveLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmRemoveLabel">{{ __('dashboard.Confirm_Removal') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{ __('dashboard.Are_you_sure_you_want_to_remove_this_subscriber') }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('dashboard.Cancel') }}</button>
                    <button type="button" class="btn btn-danger" id="confirm-remove-button" type="button">{{ __('dashboard.Remove') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            const translations = {
                remove: '{{ __('dashboard.Remove') }}',
                failedToAdd: '{{ __('dashboard.Failed_to_add_subscriber') }}',
                failedToRemove: '{{ __('dashboard.Failed_to_remove_subscriber') }}'
            };

            let removeUserId;
            let removeInvoiceId;
            let removeRow;

            function addSubscriberToUI(user) {
                const invoiceId = $('#invoice-id').val();
                const newRow = `
                    <tr>
                        <td>${user.id}</td>
                        <td>
                            <span class="fw-bold">${user.full_name}</span><br>
                            <span class="text-muted small">${user.email} / ${user.phone}</span>
                        </td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-danger remove-subscriber"
                                    data-invoice-id="${invoiceId}"
                                    data-user-id="${user.id}" type="button">
                                ${translations.remove}
                            </button>
                        </td>
                    </tr>`;
                $('table tbody').append(newRow);
            }

            function showAlert(type, message) {
                if (type === 'success') {
                    $('#success-message').text(message);
                    $('#success-alert').show();
                } else if (type === 'error') {
                    $('#error-message').text(message);
                    $('#error-alert').show();
                }
            }

            $('#search-button').on('click', function(event) {
                event.preventDefault();
                const searchTerm = $('#search-users').val();
                const invoiceId = $('#invoice-id').val();
                if (searchTerm.trim() === '') {
                    return;
                }

                $.ajax({
                    url: "{{ route('dashboard.invoices.search-users') }}",
                    method: "GET",
                    data: {
                        search: searchTerm,
                        invoice_id: invoiceId
                    },
                    success: function(response) {
                        const resultsContainer = $('#search-results');
                        resultsContainer.empty();

                        if (response.users.length > 0) {
                            $('#clear-search-button').show();
                            const usersList = $('<ul class="list-group"></ul>');
                            response.users.forEach(user => {
                                const listItem = $(`<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"></li>`);
                                let userInfo = `
                                    <div>
                                        <span class="fw-bold">${user.full_name}</span><br>
                                        <span class="text-muted small">${user.email} / ${user.phone}</span>
                                    </div>`;
                                if (!user.can_be_added) {
                                    userInfo += `<div class="text-muted ms-2"><small>(${user.reason})</small></div>`;
                                }
                                let buttonHtml = user.can_be_added ?
                                    `<button class="btn btn-sm btn-primary add-subscriber" type="button" data-user-id="${user.id}">{{ __('dashboard.Add') }}</button>` :
                                    `<button class="btn btn-sm btn-secondary" type="button" disabled>{{ __('dashboard.Add') }}</button>`;
                                listItem.html(userInfo + buttonHtml);
                                usersList.append(listItem);
                            });
                            resultsContainer.append(usersList);
                        } else {
                            resultsContainer.html('<p class="text-center">{{ __('dashboard.No_users_found') }}</p>');
                        }
                    },
                    error: function(xhr) {
                        showAlert('error', 'Error searching users.');
                    }
                });
            });

            $('#clear-search-button').on('click', function() {
                $('#search-users').val('');
                $('#search-results').empty();
                $(this).hide();
            });

            $(document).on('click', '.add-subscriber', function() {
                const userId = $(this).data('user-id');
                const invoiceId = $('#invoice-id').val();

                $.ajax({
                    url: `/dashboard/invoice/${invoiceId}/add-subscriber`,
                    method: 'POST',
                    data: {
                        user_id: userId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        addSubscriberToUI(response.user);
                        $(`.add-subscriber[data-user-id="${userId}"]`).closest('li').remove();
                        showAlert('success', response.success);
                    },
                    error: function(xhr) {
                        let errorMessage = translations.failedToAdd;
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMessage = xhr.responseJSON.error;
                        }
                        showAlert('error', errorMessage);
                    }
                });
            });

            $(document).on('click', '.remove-subscriber', function() {
                removeUserId = $(this).data('user-id');
                removeInvoiceId = $(this).data('invoice-id');
                removeRow = $(this).closest('tr');
                $('#confirm-remove').modal('show');
            });

            $('#confirm-remove-button').on('click', function() {
                $.ajax({
                    url: `/dashboard/invoice/${removeInvoiceId}/remove-subscriber/${removeUserId}`,
                    method: 'DELETE',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        removeRow.remove();
                        showAlert('success', response.success);
                        $('#confirm-remove').modal('hide');
                    },
                    error: function(xhr) {
                        showAlert('error', translations.failedToRemove);
                        $('#confirm-remove').modal('hide');
                    }
                });
            });
        });
    </script>
@endsection