@extends('dashboard.layouts.app')

@section('title', __('dashboard.Add Subscriber to Schedule'))

@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">
        <a href="{{ route('dashboard.schedules.show', $schedule) }}" class="text-decoration-none">{{
            $schedule->item_name ?? ($schedule->trackLevel ? $schedule->trackLevel->name : $schedule->item->name) }}</a>
    </li>
    <li class="breadcrumb-item">
        <a href="{{ route('dashboard.schedules.subscribers', $schedule) }}"
            class="text-decoration-none">{{ __('dashboard.Schedule Subscribers') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ __('dashboard.Add Subscriber') }}</li>
@endsection

@section('content')
<style>
    #invoices-container .select-invoice.selected {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
        color: white !important;
    }
</style>
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('dashboard.Add Subscriber to Schedule') }} #{{ $schedule->id }}</h3>
    </div>
    <div class="card-body">
        <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.Search for a user')}}:</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" type="button" id="search-button">{{ __('dashboard.Search') }}</button>
                <button class="btn btn-secondary" type="button" id="clear-search-button" style="display: none;">{{
                    __('dashboard.Clear Search') }}</button>
            </div>
            <div id="search-results" class="mt-2"></div>
        </div>
        <form id="add-subscriber-form" action="{{ route('dashboard.schedules.add-subscriber', $schedule) }}" method="POST">
            @csrf
            <input type="hidden" name="user_id" id="user_id" value="">
            <input type="hidden" name="invoice_id" id="invoice_id" value="">

            <div class="mb-3">
                <h4>{{ __('dashboard.Invoices') }}:</h4>
                <div id="invoices-container" class="row"></div>
            </div>

            <button type="submit" class="btn btn-primary" id="submit-add-subscriber">{{ __('dashboard.Add Subscriber') }}</button>
            <a href="{{ route('dashboard.schedules.subscribers', $schedule) }}"
                class="btn btn-secondary">{{__('dashboard.Cancel')}}</a>
        </form>
    </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() {
    function showAlert(type, message) {
        if (type === 'error') {
            $('#error-message').text(message);
            $('#error-alert').show();
        }
    }

    $('#search-button').on('click', function(e) {
        e.preventDefault();
        const searchTerm = $('#search-users').val();
        const scheduleId = {{ $schedule->id }};
        if (searchTerm.trim() === '') {
            return;
        }

        $.ajax({
            url: "{{ route('dashboard.schedules.search-users', $schedule) }}",
            method: "GET",
            data: { search: searchTerm, schedule_id: scheduleId },
            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 = `<span>${user.full_name} (${user.email} / ${user.phone})</span>`;
                        if (!user.can_be_added) {
                            userInfo += `<span class="text-muted ms-2"><small>(${user.reason})</small></span>`;
                        }
                        let buttonHtml = user.can_be_added ?
                            `<button class="btn btn-sm btn-primary select-user" type="button" data-user-id="${user.id}" data-user-name="${user.full_name}">{{ __('dashboard.Select') }}</button>` :
                            `<button class="btn btn-sm btn-secondary" type="button" disabled>{{ __('dashboard.Select') }}</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) {
                console.error("Error searching users:", xhr);
                showAlert('error', 'Error searching users.');
            }
        });
    });

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

    $(document).on('click', '.select-user', function() {
        const userId = $(this).data('user-id');
        const userName = $(this).data('user-name');
        $('#user_id').val(userId);
        $('#search-results').empty();
        $('#clear-search-button').hide();

        $.ajax({
            url: "{{ route('dashboard.schedules.get-invoices', $schedule) }}",
            method: "GET",
            data: { user_id: userId },
            success: function(response) {
                const invoicesContainer = $('#invoices-container');
                invoicesContainer.empty();

                if (response.invoices.length > 0) {
                    response.invoices.forEach(invoice => {
                        const invoiceHtml = `
                            <div class="col-md-4 mb-3">
                                <div class="card shadow-sm" data-invoice-id="${invoice.id}">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0">{{ __('dashboard.Invoice') }} #${invoice.id}</h6>
                                    </div>
                                    <div class="card-body">
                                        <p class="mb-1"><strong>{{ __('dashboard.Date') }}:</strong> ${invoice.date}</p>
                                        <p class="mb-1"><strong>{{ __('dashboard.Items') }}:</strong></p>
                                        <ul class="list-unstyled">
                                            ${invoice.items.map(item => `<li>${item.item_name} - الكمية: ${item.quantity}، قابلية التسليم: ${item.deliverability}</li>`).join('')}
                                        </ul>
                                        <button class="btn btn-sm btn-primary select-invoice" type="button">{{ __('dashboard.Select') }}</button>
                                    </div>
                                </div>
                            </div>`;
                        invoicesContainer.append(invoiceHtml);
                    });
                } else {
                    invoicesContainer.html('<p class="text-center">{{ __("dashboard.No invoices found for this user.") }}</p>');
                }
            },
            error: function(xhr) {
                console.error("Error fetching invoices:", xhr);
                $('#invoices-container').html('<p>Error fetching invoices.</p>');
            }
        });
    });

    $(document).on('click', '.select-invoice', function() {
        $('#invoices-container .select-invoice').removeClass('selected').text('{{ __('dashboard.Select') }}');

        $(this).addClass('selected').text('{{ __('dashboard.Selected') }}');

        const invoiceId = $(this).closest('.card').data('invoice-id');
        $('#invoice_id').val(invoiceId);
    });

    $('#add-subscriber-form').on('submit', function(e) {
        e.preventDefault();
        const userId = $('#user_id').val();
        const invoiceId = $('#invoice_id').val();

        if (!userId) {
            showAlert('error', "{{__('dashboard.Please select a user')}}.");
            return;
        }
        if (!invoiceId) {
            showAlert('error', "{{__('dashboard.Please select an invoice')}}.");
            return;
        }

        $.ajax({
            url: "{{ route('dashboard.schedules.add-subscriber', $schedule) }}",
            method: 'POST',
            data: {
                user_id: userId,
                invoice_id: invoiceId,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                window.location.href = "{{ route('dashboard.schedules.subscribers', $schedule->id) }}";
            },
            error: function(xhr) {
                let errorMessage = '{{__('dashboard.Failed to add subscriber')}}.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                }
                showAlert('error', errorMessage);
            }
        });
    });
});
</script>
@endsection