@extends('layouts.main')

@section('title', 'Add New Subscription Plan')

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #48cfc8;">
                            <i class="bx bx-plus"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Add New Subscription Plan</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-credit-card"></i>
                                Create a new subscription plan
                            </h5>
                        </div>
                    </div>
                    <a href="{{ route('subscriptions.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Back to List
                    </a>
                </div>

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <form action="{{ route('subscriptions.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="title" class="form-label">Plan Title <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('title') is-invalid @enderror" 
                                       id="title" 
                                       name="title" 
                                       value="{{ old('title') }}" 
                                       placeholder="Enter plan title">
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="frequency" class="form-label">Payment Frequency <span class="text-danger">*</span></label>
                                <select class="form-select @error('frequency') is-invalid @enderror" 
                                        id="frequency" 
                                        name="frequency">
                                    <option value="">Select frequency</option>
                                    <option value="1" {{ old('frequency') == '1' ? 'selected' : '' }}>Monthly</option>
                                    {{-- <option value="2" {{ old('frequency') == '2' ? 'selected' : '' }}>Every 3 months</option>
                                    <option value="3" {{ old('frequency') == '3' ? 'selected' : '' }}>Every 6 months</option> --}}
                                    <option value="4" {{ old('frequency') == '4' ? 'selected' : '' }}>Yearly</option>
                                    {{-- <option value="5" {{ old('frequency') == '5' ? 'selected' : '' }}>Daily</option>
                                    <option value="6" {{ old('frequency') == '6' ? 'selected' : '' }}>Weekly</option> --}}
                                </select>
                                @error('frequency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="price" class="form-label">Price <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" 
                                           class="form-control @error('price') is-invalid @enderror" 
                                           id="price" 
                                           name="price" 
                                           value="{{ old('price') }}" 
                                           step="0.01"
                                           min="0"
                                           placeholder="0.00">
                                </div>
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Price in USD per billing cycle</small>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_users" class="form-label">Maximum Users <span class="text-danger">*</span></label>
                                <input type="number" 
                                       class="form-control @error('max_users') is-invalid @enderror" 
                                       id="max_users" 
                                       name="max_users" 
                                       value="{{ old('max_users', 1) }}" 
                                       min="1"
                                       max="9999"
                                       placeholder="Enter maximum number of users">
                                @error('max_users')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Maximum number of users allowed for this plan</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="pipeline_count" class="form-label">Pipeline Count</label>
                                <input type="number" 
                                       class="form-control @error('pipeline_count') is-invalid @enderror" 
                                       id="pipeline_count" 
                                       name="pipeline_count" 
                                       value="{{ old('pipeline_count') }}" 
                                       min="0"
                                       placeholder="Enter maximum pipeline count">
                                @error('pipeline_count')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6 d-none">
                            <div class="mb-3">
                                <label for="pipeline_runs" class="form-label">Pipeline Runs</label>
                                <input type="number" 
                                       class="form-control @error('pipeline_runs') is-invalid @enderror" 
                                       id="pipeline_runs" 
                                       name="pipeline_runs" 
                                       value="{{ old('pipeline_runs') }}" 
                                       min="0"
                                       placeholder="Enter maximum pipeline runs">
                                @error('pipeline_runs')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="data_volume_processed" class="form-label">Data Volume Processed <small class="text-muted">(GB)</small></label>
                                <input type="number" 
                                       class="form-control @error('data_volume_processed') is-invalid @enderror" 
                                       id="data_volume_processed" 
                                       name="data_volume_processed" 
                                       value="{{ old('data_volume_processed') }}" 
                                       min="0"
                                       placeholder="Enter data volume in GB">
                                @error('data_volume_processed')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        
                    </div>

                    <div class="row d-none">                        

                        
                        <div class="col-md-6 d-none">
                            <div class="mb-3">
                                <label for="pipeline_frequency" class="form-label">Pipeline Frequency</label>
                                <select class="form-select @error('pipeline_frequency') is-invalid @enderror" 
                                        id="pipeline_frequency" 
                                        name="pipeline_frequency">
                                    <option value="">Select pipeline frequency</option>
                                    <option value="1" {{ old('pipeline_frequency') == '1' ? 'selected' : '' }}>Daily / Scheduled</option>
                                    <option value="2" {{ old('pipeline_frequency') == '2' ? 'selected' : '' }}>Hourly</option>
                                    <option value="3" {{ old('pipeline_frequency') == '3' ? 'selected' : '' }}>Event Based</option>
                                </select>
                                @error('pipeline_frequency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row ">
                        <div class="col-md-6 d-none">
                            <div class="mb-3">
                                <label for="included_monthly_pipeline_hours" class="form-label">Included Monthly Pipeline Hours</label>
                                <input type="number" 
                                       class="form-control @error('included_monthly_pipeline_hours') is-invalid @enderror" 
                                       id="included_monthly_pipeline_hours" 
                                       name="included_monthly_pipeline_hours" 
                                       value="{{ old('included_monthly_pipeline_hours') }}" 
                                       min="0"
                                       placeholder="Enter included monthly pipeline hours">
                                @error('included_monthly_pipeline_hours')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6 d-none">
                            <div class="mb-3">
                                <label for="data_sources_supported" class="form-label">Data Sources Supported</label>
                                <div class="data-sources-select-container">
                                    <div class="selected-data-sources mb-2" id="selectedDataSources">
                                        <!-- Selected data sources will appear here -->
                                    </div>
                                    <div class="input-group">
                                        <input type="text" 
                                               class="form-control" 
                                               id="dataSourceSearch" 
                                               placeholder="Search and select data sources...">
                                        <button class="btn btn-outline-secondary" type="button" id="clearDataSources">
                                            <i class="bx bx-x"></i>
                                        </button>
                                    </div>
                                    <div class="dropdown-menu w-100" id="dataSourceDropdown" style="display: none; max-height: 300px; overflow-y: auto;">
                                        <!-- Search results will appear here -->
                                    </div>
                                </div>
                                <!-- Hidden input to store comma-separated slugs -->
                                <input type="hidden" 
                                       name="data_sources_supported" 
                                       id="data_sources_supported" 
                                       value="{{ old('data_sources_supported') }}">
                                @error('data_sources_supported')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <div class="mt-2">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input @error('status') is-invalid @enderror" 
                                               type="radio" 
                                               name="status" 
                                               id="status_active" 
                                               value="1" 
                                               {{ old('status') == '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="status_active">
                                            <span class="badge bg-success">Active</span>
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline ms-3">
                                        <input class="form-check-input @error('status') is-invalid @enderror" 
                                               type="radio" 
                                               name="status" 
                                               id="status_inactive" 
                                               value="0" 
                                               {{ old('status') == '0' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="status_inactive">
                                            <span class="badge bg-danger">Inactive</span>
                                        </label>
                                    </div>
                                </div>
                                @error('status')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-2 justify-content-end mt-4">
                        <a href="{{ route('subscriptions.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-x"></i> Cancel
                        </a>
                        <button type="submit" class="btn" style="background: #48cfc8; border-color: #48cfc8; color: white;">
                            <i class="bx bx-check"></i> Create Plan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('dataSourceSearch');
    const dropdown = document.getElementById('dataSourceDropdown');
    const selectedContainer = document.getElementById('selectedDataSources');
    const hiddenInput = document.getElementById('data_sources_supported');
    const clearButton = document.getElementById('clearDataSources');
    
    let selectedDataSources = [];
    let searchTimeout;
    
    // Initialize with old values if any
    const oldValue = hiddenInput.value;
    if (oldValue) {
        const slugs = oldValue.split(',').filter(slug => slug.trim());
        // Load initial selected data sources
        if (slugs.length > 0) {
            loadSelectedDataSources(slugs);
        }
    }
    
    // Search input handler
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        if (query.length >= 2) {
            searchTimeout = setTimeout(() => {
                searchDataSources(query);
            }, 300);
        } else {
            hideDropdown();
        }
    });
    
    // Clear all selections
    clearButton.addEventListener('click', function() {
        selectedDataSources = [];
        updateDisplay();
        searchInput.value = '';
        hideDropdown();
    });
    
    // Hide dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.data-sources-select-container')) {
            hideDropdown();
        }
    });
    
    function searchDataSources(query) {
        fetch(`{{ route('api.data-sources.search') }}?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                displaySearchResults(data);
            })
            .catch(error => {
                console.error('Error searching data sources:', error);
            });
    }
    
    function displaySearchResults(dataSources) {
        if (dataSources.length === 0) {
            dropdown.innerHTML = '<div class="dropdown-item text-muted">No data sources found</div>';
        } else {
            dropdown.innerHTML = dataSources.map(ds => {
                const isSelected = selectedDataSources.some(selected => selected.slug === ds.slug);
                return `
                    <div class="dropdown-item ${isSelected ? 'disabled' : ''}" 
                         data-slug="${ds.slug}" 
                         data-title="${ds.title}" 
                         data-icon="${ds.icon_url || ''}"
                         style="cursor: ${isSelected ? 'not-allowed' : 'pointer'}; opacity: ${isSelected ? '0.5' : '1'};">
                        <div class="d-flex align-items-center gap-2">
                            ${ds.icon_url ? 
                                `<img src="${ds.icon_url}" alt="${ds.title}" style="width: 24px; height: 24px; object-fit: cover;" class="rounded">` :
                                `<div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 24px; height: 24px;"><i class="bx bx-data text-muted" style="font-size: 14px;"></i></div>`
                            }
                            <span>${ds.title}</span>
                            ${isSelected ? '<span class="text-muted ms-auto"><i class="bx bx-check"></i></span>' : ''}
                        </div>
                    </div>
                `;
            }).join('');
            
            // Add click handlers
            dropdown.querySelectorAll('.dropdown-item:not(.disabled)').forEach(item => {
                item.addEventListener('click', function() {
                    const slug = this.dataset.slug;
                    const title = this.dataset.title;
                    const iconUrl = this.dataset.icon;
                    
                    addDataSource({ slug, title, icon_url: iconUrl });
                    searchInput.value = '';
                    hideDropdown();
                });
            });
        }
        
        showDropdown();
    }
    
    function addDataSource(dataSource) {
        // Check if already selected
        if (selectedDataSources.some(ds => ds.slug === dataSource.slug)) {
            return;
        }
        
        selectedDataSources.push(dataSource);
        updateDisplay();
    }
    
    function removeDataSource(slug) {
        selectedDataSources = selectedDataSources.filter(ds => ds.slug !== slug);
        updateDisplay();
    }
    
    function updateDisplay() {
        // Update selected display
        selectedContainer.innerHTML = selectedDataSources.map(ds => `
            <span class="badge bg-primary me-2 mb-2 d-inline-flex align-items-center gap-1" style="font-size: 0.875rem; padding: 0.375rem 0.5rem;">
                ${ds.icon_url ? 
                    `<img src="${ds.icon_url}" alt="${ds.title}" style="width: 16px; height: 16px; object-fit: cover;" class="rounded">` :
                    `<i class="bx bx-data" style="font-size: 14px;"></i>`
                }
                <span>${ds.title}</span>
                <button type="button" class="btn-close btn-close-white ms-1" style="font-size: 0.65rem;" onclick="removeDataSourceBySlug('${ds.slug}')"></button>
            </span>
        `).join('');
        
        // Update hidden input
        hiddenInput.value = selectedDataSources.map(ds => ds.slug).join(',');
    }
    
    function showDropdown() {
        dropdown.style.display = 'block';
        dropdown.classList.add('show');
    }
    
    function hideDropdown() {
        dropdown.style.display = 'none';
        dropdown.classList.remove('show');
    }
    
    function loadSelectedDataSources(slugs) {
        // Fetch data source details for the selected slugs
        Promise.all(slugs.map(slug => 
            fetch(`{{ route('api.data-sources.search') }}?q=${encodeURIComponent(slug)}`)
                .then(response => response.json())
                .then(data => data.find(ds => ds.slug === slug))
        )).then(dataSources => {
            selectedDataSources = dataSources.filter(ds => ds); // Remove any null/undefined
            updateDisplay();
        });
    }
    
    // Global function for remove button onclick
    window.removeDataSourceBySlug = function(slug) {
        removeDataSource(slug);
    };
});
</script>
@endsection