@extends('dashboard.layouts.app')

@section('title', __('dashboard.Schedule 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.schedules.index') }}"
        class="text-decoration-none">{{ __('dashboard.Schedules') }}</a>
</li>
<li class="breadcrumb-item active">{{ __('dashboard.Schedule Subscribers') }} - {{ $schedule->id }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title">{{ __('dashboard.Schedule Subscribers') }} - Schedule #{{ $schedule->id }}</h3>
         <div class="card-toolbar">
            <a href="{{ route('dashboard.schedules.add_subscriber.form', $schedule) }}" class="btn btn-sm btn-primary">
                    <i class="bi bi-plus-lg"></i> {{ __('dashboard.Add Subscriber') }}
            </a>
        </div>
    </div>
    <div class="card-body">
        <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>

        <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>{{ __('dashboard.Email') }}</th>
                        <th>{{ __('dashboard.Phone') }}</th>
                        <th>{{ __('dashboard.Wallet Balance') }}</th>
                        <th>{{ __('dashboard.Invoice') }}</th>
                        <th class="text-center">{{ __('dashboard.Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($subscribers as $subscriber)
                    <tr>
                        <td>{{ $subscriber->id }}</td>
                         <td>{{ $subscriber->first_name . " " . $subscriber->last_name }}</td>
                        <td>{{ $subscriber->email }}</td>
                        <td>{{ $subscriber->phone }}</td>
                        <td>
                            @if ($subscriber->wallet)
                            {{ $subscriber->wallet->balance }} {{ $subscriber->wallet->currency }}
                            @else
                            {{ __('dashboard.N/A') }}
                            @endif
                        </td>
                        <td>
                            @if ($subscriber->pivot->invoice_id)
                            <a href="{{ route('dashboard.invoices.show', $subscriber->pivot->invoice_id) }}"
                                class="text-decoration-none">
                                {{ __('dashboard.Invoice') }} #{{ $subscriber->pivot->invoice_id }}
                            </a>
                            @else
                            {{ __('dashboard.N/A') }}
                            @endif
                        </td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-danger remove-subscriber"
                                data-schedule-id="{{ $schedule->id }}" data-user-id="{{ $subscriber->id }}"  type="button">
                                {{ __('dashboard.Remove') }}
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center">{{ __('dashboard.No subscribers found.') }}</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
         <div class="mt-5">
            {{ $subscribers->appends(request()->query())->links() }}
        </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() {
        let removeUserId;
        let removeScheduleId;
        let removeRow;

        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();
            }
        }


        $(document).on('click', '.remove-subscriber', function() {
            removeUserId = $(this).data('user-id');
            removeScheduleId = $(this).data('schedule-id');
            removeRow = $(`.remove-subscriber[data-user-id="${removeUserId}"]`).closest('tr');
            $('#confirm-remove').modal('show');
        });

        $('#confirm-remove-button').on('click', function() {
            $.ajax({
                url: `/dashboard/schedule-subscribe/${removeScheduleId}/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) {
                    console.error("Error removing subscriber:", xhr);
                    showAlert('error', '{{__('dashboard.Failed to remove subscriber')}}.');
                    $('#confirm-remove').modal('hide');
                }
            });
        });
    });
</script>
@endsection