@extends('backend.app')

@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" />
    <style>
        .form-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .form-section-title {
            font-weight: 600;
            color: #667eea;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #667eea;
        }
        .search-results {
            max-height: 300px;
            overflow-y: auto;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            margin-top: 1rem;
        }
        .user-item {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.2s;
        }
        .user-item:hover {
            background: #f8f7ff;
        }
        .user-item:last-child {
            border-bottom: none;
        }
        .selected-user {
            background: linear-gradient(135deg, #d4f4e4 0%, #c3f0dc 100%);
            border: 2px solid #28c76f;
            border-radius: 10px;
            padding: 1rem;
            margin-top: 1rem;
        }
    </style>

@section('title', 'Create Manual Subscription')

@section('content')
    <div class="app-content content">
        <!-- General setting Form section start -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Create Manual Subscription</h3>
                <div>
                    <a href="{{ route('admin.manual-subscriptions.index') }}" class="btn btn-primary" type="button">
                        <span><i class="fas fa-list me-1"></i>Subscription List</span>
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form class="form" method="POST" action="{{ route('admin.manual-subscriptions.store') }}">
                    @csrf

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible">
                            <strong>Success!</strong> {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible">
                            <strong>Error:</strong> Please fix the following issues:
                            <ul class="mb-0 mt-2">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <div class="row">
                        <!-- User Selection Section -->
                        <div class="col-md-6 col-12">
                            <div class="form-section">
                                <h5 class="form-section-title"><i class="fas fa-user me-2"></i>Select User</h5>

                                <div class="form-group">
                                    <label for="userSearch">Search User <span class="text-danger">*</span></label>
                                    <input type="text"
                                           id="userSearch"
                                           class="form-control"
                                           placeholder="Search by name or email..."
                                           autocomplete="off">
                                    <input type="hidden" name="user_id" id="userId" required>
                                    @error('user_id')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div id="selectedUserCard" style="display: none;"></div>
                                <div id="searchResults" style="display: none;"></div>
                            </div>
                        </div>

                        <!-- Plan Selection Section -->
                        <div class="col-md-6 col-12">
                            <div class="form-section">
                                <h5 class="form-section-title"><i class="fas fa-crown me-2"></i>Select Plan</h5>

                                <div class="form-group">
                                    <label for="planSelect">Choose Plan <span class="text-danger">*</span></label>
                                    <select name="plan_id" class="form-select" required id="planSelect">
                                        <option value="">-- Select a Plan --</option>
                                        @foreach($plans ?? [] as $plan)
                                            <option value="{{ $plan->id }}">
                                                {{ $plan->title }} - {{ $plan->currency ?? 'SAR' }} {{ number_format($plan->getFinalPriceAttribute(), 2) }}/{{ $plan->duration }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('plan_id')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Dates Configuration -->
                        <div class="col-md-6 col-12">
                            <div class="form-section">
                                <h5 class="form-section-title"><i class="fas fa-calendar-alt me-2"></i>Configure Dates</h5>

                                <div class="form-group">
                                    <label for="startsAt">Start Date <span class="text-danger">*</span></label>
                                    <input type="date"
                                           name="starts_at"
                                           class="form-control"
                                           id="startsAt"
                                           required
                                           min="{{ now()->format('Y-m-d') }}">
                                    <small class="text-muted">When the subscription begins</small>
                                    @error('starts_at')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="endsAt">End Date <span class="text-danger">*</span></label>
                                    <input type="date"
                                           name="ends_at"
                                           class="form-control"
                                           id="endsAt"
                                           required
                                           min="{{ now()->format('Y-m-d') }}">
                                    <small class="text-muted">When the subscription expires</small>
                                    @error('ends_at')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Summary Section -->
                        <div class="col-md-6 col-12">
                            <div class="form-section">
                                <h5 class="form-section-title"><i class="fas fa-clipboard-check me-2"></i>Summary</h5>

                                <div id="summaryContent">
                                    <div class="alert alert-info text-center">
                                        <i class="fas fa-info-circle fa-2x mb-2"></i>
                                        <p class="mb-0">Complete all fields to see the summary</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="col-12 mt-3">
                            <button type="submit" class="btn btn-primary mr-1" id="submitBtn" disabled>
                                <i class="fas fa-check-circle me-1"></i> Create Subscription
                            </button>
                            <a href="{{ route('admin.manual-subscriptions.index') }}" class="btn btn-outline-danger">
                                <i class="fas fa-times me-1"></i> Cancel
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('script')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            let selectedUser = null;
            let searchTimeout = null;

            $(document).ready(function() {
                // Real-time user search with debounce
                $('#userSearch').on('keyup', function() {
                    let search = $(this).val().trim();
                    clearTimeout(searchTimeout);

                    if (search.length < 2) {
                        $('#searchResults').empty().hide();
                        return;
                    }

                    // Show loading indicator
                    $('#searchResults').html('<div class="p-3 text-center"><div class="spinner-border spinner-border-sm text-primary" role="status"></div></div>').show();

                    searchTimeout = setTimeout(function() {
                        $.ajax({
                            url: "{{ route('admin.manual-subscriptions.search.users') }}",
                            type: 'GET',
                            data: { q: search },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                console.log('Search response:', response);
                                if (response.success && response.data) {
                                    displaySearchResults(response.data);
                                } else {
                                    $('#searchResults').html('<div class="p-3 text-center text-muted"><p class="mb-0">' + (response.message || 'No users found') + '</p></div>').show();
                                }
                            },
                            error: function(xhr) {
                                console.error('Search error:', xhr);
                                console.error('Error response:', xhr.responseText);
                                let errorMsg = 'Search failed. Please try again.';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    errorMsg = xhr.responseJSON.message;
                                }
                                $('#searchResults').html('<div class="p-3 text-center text-danger"><p class="mb-0"><i class="fas fa-exclamation-circle me-1"></i>' + errorMsg + '</p></div>').show();
                            }
                        });
                    }, 300);
                });

                // Hide search results when clicking outside
                $(document).on('click', function(e) {
                    if (!$(e.target).closest('#userSearch, #searchResults').length) {
                        $('#searchResults').hide();
                    }
                });

                // Plan selection change
                $('#planSelect').on('change', function() {
                    validateForm();
                    updateSummary();
                });

                // Date changes
                $('#startsAt, #endsAt').on('change', function() {
                    validateForm();
                    updateSummary();
                });
            });

            function displaySearchResults(users) {
                let html = '';

                if (users.length === 0) {
                    html = '<div class="p-3 text-center"><p class="text-muted mb-0">No users found</p></div>';
                } else {
                    users.forEach(function(user) {
                        const isDisabled = user.has_subscription ? 'opacity: 0.6; pointer-events: none;' : '';
                        html += `
                            <div class="user-item" style="${isDisabled}"
                                 data-user-id="${user.id}"
                                 data-user-name="${user.name}"
                                 data-user-email="${user.email}"
                                 data-company-name="${user.company_name || ''}">
                                <div class="d-flex align-items-center">
                                    <div class="avatar bg-light-primary me-3" style="width: 40px; height: 40px;">
                                        <div class="avatar-content">${user.name.charAt(0).toUpperCase()}</div>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">${user.name}</h6>
                                        <small class="text-muted">${user.email}</small>
                                        ${user.company_name ? `<br><span class="badge bg-light-primary">${user.company_name}</span>` : ''}
                                        ${user.has_subscription ? '<span class="badge bg-warning ms-1">Already Subscribed</span>' : ''}
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                }

                $('#searchResults').html('<div class="bg-white">' + html + '</div>').show();

                // Add click handlers
                $('.user-item').on('click', function() {
                    const hasSubscription = $(this).find('.badge.bg-warning').length > 0;

                    if (hasSubscription) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'User Already Has Subscription',
                            text: 'This user already has an active subscription. Please choose a different user.',
                            confirmButtonColor: '#7367f0'
                        });
                        return;
                    }

                    selectUser(
                        $(this).data('user-id'),
                        $(this).data('user-name'),
                        $(this).data('user-email'),
                        $(this).data('company-name')
                    );
                });
            }

            function selectUser(userId, userName, userEmail, companyName) {
                selectedUser = { id: userId, name: userName, email: userEmail, companyName: companyName };

                $('#userId').val(userId);
                $('#userSearch').val(userName);
                $('#searchResults').hide();

                $('#selectedUserCard').html(`
                    <div class="selected-user">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-success me-3" style="width: 40px; height: 40px;">
                                    <div class="avatar-content text-white">${userName.charAt(0).toUpperCase()}</div>
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-bold">${userName}</h6>
                                    <small class="text-muted">${userEmail}</small>
                                    ${companyName ? `<br><small><i class="fas fa-building me-1"></i>${companyName}</small>` : ''}
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-danger" onclick="clearUser()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                `).show();

                validateForm();
                updateSummary();
            }

            function clearUser() {
                selectedUser = null;
                $('#userId').val('');
                $('#userSearch').val('');
                $('#selectedUserCard').hide();
                validateForm();
                updateSummary();
            }

            function validateForm() {
                const userId = $('#userId').val();
                const startsAt = $('#startsAt').val();
                const endsAt = $('#endsAt').val();
                const planId = $('#planSelect').val();

                const isValid = userId && startsAt && endsAt && planId;
                $('#submitBtn').prop('disabled', !isValid);
            }

            function updateSummary() {
                const userId = $('#userId').val();
                const startsAt = $('#startsAt').val();
                const endsAt = $('#endsAt').val();
                const planId = $('#planSelect').val();
                const selectedOption = $('#planSelect option:selected');

                if (!userId || !startsAt || !endsAt || !planId) {
                    $('#summaryContent').html(`
                        <div class="alert alert-info text-center">
                            <i class="fas fa-info-circle fa-2x mb-2"></i>
                            <p class="mb-0">Complete all fields to see the summary</p>
                        </div>
                    `);
                    return;
                }

                const startDate = new Date(startsAt);
                const endDate = new Date(endsAt);
                const diffTime = Math.abs(endDate - startDate);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                $('#summaryContent').html(`
                    <div class="alert alert-success">
                        <h6 class="alert-heading"><i class="fas fa-check-circle me-2"></i>Ready to Create!</h6>
                        <hr>
                        <div class="small">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">User:</span>
                                <strong>${selectedUser?.name || 'N/A'}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Plan:</span>
                                <strong>${selectedOption.text().split(' - ')[0]}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Duration:</span>
                                <strong>${diffDays} days</strong>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Period:</span>
                                <strong>${startDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} - ${endDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</strong>
                            </div>
                        </div>
                    </div>
                `);
            }
        </script>
    @endpush
@endsection