@extends('backend.app')
@push('style')
@endpush
@section('title', 'Edit Subscription Plan')
@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row align-items-center">
                <div class="content-header-left col-md-9 col-12">
                    <h2 class="content-header-title mb-0">
                        <i class="fas fa-crown me-2 text-primary"></i>Edit Subscription Plan: {{ $subscription->title }}
                    </h2>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12">
                    <a href="{{ route('subscriptions.show', $subscription) }}" class="btn btn-info me-2">
                        <i class="fas fa-eye me-1"></i>
                        <span>View</span>
                    </a>
                    <a href="{{ route('subscriptions.index') }}" class="btn btn-primary">
                        <i class="fas fa-list me-1"></i>
                        <span>All Plans</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <form class="form" method="POST" action="{{ route('subscriptions.update', $subscription) }}">
                    @csrf
                    @method('PUT')

                    <!-- Basic Information -->
                    <div class="card mb-3">
                        <div class="card-header bg-primary">
                            <h5 class="mb-0">
                                <i class="fas fa-info-circle me-2"></i>Basic Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="title">
                                        Plan Title <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" id="title" class="form-control"
                                           placeholder="e.g., Premium Plan"
                                           value="{{ old('title', $subscription->title) }}"
                                           name="title" required />
                                    @error('title')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="subtitle">Subtitle</label>
                                    <input type="text" id="subtitle" class="form-control"
                                           placeholder="e.g., Perfect for growing businesses"
                                           value="{{ old('subtitle', $subscription->subtitle) }}"
                                           name="subtitle" />
                                    @error('subtitle')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="description">Description</label>
                                    <textarea name="description" class="form-control" id="description"
                                              rows="4"
                                              placeholder="Describe what this plan offers...">{{ old('description', $subscription->description) }}</textarea>
                                    @error('description')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pricing & Duration -->
                    <div class="card mb-3">
                        <div class="card-header bg-success">
                            <h5 class="mb-0">
                                <i class="fas fa-coins me-2"></i>Pricing & Duration (Stripe Payment)
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Current Configuration:</strong>
                                <span class="ms-2">{{ number_format($subscription->getFinalPriceAttribute(), 2) }} SAR</span>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Regular Price (SAR)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">ر.س</span>
                                        <input type="text" class="form-control fw-bold fs-5"
                                            value="{{ number_format($subscription->price, 2) }}" readonly />
                                    </div>
                                    <small class="text-muted mt-1">Current price</small>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Discounted Price (SAR)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">ر.س</span>
                                        <input type="text" class="form-control"
                                            value="{{ $subscription->discounted_price ? number_format($subscription->discounted_price, 2) : '' }}"
                                            placeholder="No discount" readonly />
                                    </div>
                                    <small class="text-muted mt-1">Current discounted price</small>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Duration</label>
                                    <select class="form-select" disabled>
                                        <option value="monthly" {{ $subscription->duration == 'monthly' ? 'selected' : '' }}>Monthly</option>
                                        </select>
                                    <small class="text-muted mt-1">Billing cycle (cannot be changed)</small>
                                </div>
                            </div>
                            <div class="alert alert-warning mt-3">
                                <strong>Note:</strong> To change the price, click the "Update Price" button below.
                                Duration cannot be changed after creation.
                            </div>
                            <button type="button"
                                    class="btn btn-warning"
                                    data-bs-toggle="modal"
                                    data-bs-target="#updatePriceModal">
                                <i class="fas fa-edit me-1"></i>Update Price
                            </button>
                        </div>
                    </div>

                    <!-- Features -->
                    <div class="card mb-3">
                        <div class="card-header bg-warning">
                            <div class="d-flex justify-content-between align-items-center w-100">
                                <div>
                                    <h5 class="mb-0">
                                        <i class="fas fa-list-check me-2"></i>
                                        Plan Features
                                    </h5>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-primary " onclick="addFeature()">
                                        <i class="fas fa-plus me-1"></i> Add Feature
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="features-container">
                                @foreach($subscription->getFeaturesList() as $feature)
                                    <div class="feature-item input-group">
                                        <input type="text" class="form-control" name="features[]"
                                               placeholder="e.g., Unlimited projects"
                                               value="{{ $feature }}">
                                        <button type="button" class="btn btn-outline-danger feature-remove-btn"
                                                onclick="removeFeature(this)">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                @endforeach
                                @if(empty($subscription->getFeaturesList()))
                                    <div class="feature-item input-group">
                                        <input type="text" class="form-control" name="features[]"
                                               placeholder="e.g., Unlimited projects">
                                        <button type="button" class="btn btn-outline-danger feature-remove-btn"
                                                onclick="removeFeature(this)">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>
                            <small class="text-muted">Click "Add Feature" to add more features</small>
                        </div>
                    </div>

                    <!-- Plan Options -->
                    <div class="card mb-3">
                        <div class="card-header bg-info">
                            <h5 class="mb-0">
                                <i class="fas fa-cog me-2"></i>Plan Options
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="card border">
                                        <div class="card-body d-flex align-items-center">
                                            <div class="form-check form-switch me-3">
                                                <input class="form-check-input" type="checkbox"
                                                       id="is_featured"
                                                       name="is_featured"
                                                       value="1"
                                                       {{ old('is_featured', $subscription->is_featured) ? 'checked' : '' }}>
                                            </div>
                                            <div>
                                                <label class="form-check-label fw-bold" for="is_featured">
                                                    <i class="fas fa-star text-warning me-1"></i>Featured Plan
                                                </label>
                                                <p class="small text-muted mb-0">Highlight this plan to users</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border">
                                        <div class="card-body d-flex align-items-center">
                                            <div class="form-check form-switch me-3">
                                                <input class="form-check-input" type="checkbox"
                                                       id="is_active"
                                                       name="is_active"
                                                       value="1"
                                                       {{ old('is_active', $subscription->is_active) ? 'checked' : '' }}>
                                            </div>
                                            <div>
                                                <label class="form-check-label fw-bold" for="is_active">
                                                    <i class="fas fa-toggle-on text-success me-1"></i>Active
                                                </label>
                                                <p class="small text-muted mb-0">Plan visible to users</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <a href="{{ route('subscriptions.index') }}" class="btn btn-outline-secondary btn-lg me-2">
                                        <i class="fas fa-times me-1 "></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-save me-1"></i>Update Plan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Update Price Modal -->
    <div class="modal fade" id="updatePriceModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-coins me-2"></i>Update Price
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="updatePriceForm" method="POST" action="{{ route('subscriptions.update-price', $subscription) }}">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-info">
                            <strong>Info:</strong> Updating the price will create a new Stripe price for new subscriptions.
                            Existing subscriptions will continue using the old price until renewal.
                        </div>
                        <div class="mb-3">
                            <label for="new_price" class="form-label">New Regular Price (SAR)</label>
                            <div class="input-group">
                                <span class="input-group-text">ر.س</span>
                                <input type="number" id="new_price" class="form-control"
                                       step="0.01" min="0"
                                       placeholder="99.99"
                                       name="price"
                                       value="{{ $subscription->price }}"
                                       required />
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="new_discounted_price" class="form-label">New Discounted Price (SAR)</label>
                            <div class="input-group">
                                <span class="input-group-text">ر.س</span>
                                <input type="number" id="new_discounted_price" class="form-control"
                                       step="0.01" min="0"
                                       placeholder="79.99"
                                       name="discounted_price"
                                       value="{{ $subscription->discounted_price }}" />
                            </div>
                            <small class="text-muted">Leave empty if no discount</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning" id="updatePriceBtn">
                            <i class="fas fa-save me-1"></i>Update Price
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('script')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
        <script>
            function addFeature() {
                const container = document.getElementById('features-container');
                const featureDiv = document.createElement('div');
                featureDiv.className = 'feature-item input-group';
                featureDiv.innerHTML = `
                    <input type="text" class="form-control" name="features[]"
                           placeholder="e.g., Unlimited projects">
                    <button type="button" class="btn btn-outline-danger feature-remove-btn"
                            onclick="removeFeature(this)">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                container.appendChild(featureDiv);
            }

            function removeFeature(button) {
                const container = document.getElementById('features-container');
                if (container.children.length > 1) {
                    button.closest('.feature-item').remove();
                } else {
                    alert('You must have at least one feature field.');
                }
            }

            // Handle price update via AJAX
            document.getElementById('updatePriceForm').addEventListener('submit', function(e) {
                e.preventDefault();

                const form = this;
                const submitBtn = document.getElementById('updatePriceBtn');
                const formData = new FormData(form);
                const originalBtnText = submitBtn.innerHTML;

                // Show loading state
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Updating...';

                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => {
                    // Check if response is OK (status 200-299)
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }

                    // Try to parse JSON
                    return response.json().catch(() => {
                        // If JSON parsing fails but response was OK, assume success
                        return { success: true, message: 'Price updated successfully' };
                    });
                })
                .then(data => {
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('updatePriceModal'));
                    modal.hide();

                    // Check if update was successful
                    if (data.success || data.status === true) {
                        // Show success message
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: data.message || 'Price updated successfully on Stripe.',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        // Show error message
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: data.message || 'Failed to update price.',
                            confirmButtonColor: '#7367f0'
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);

                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('updatePriceModal'));
                    modal.hide();

                    // Show error message
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'An unexpected error occurred. Please try again.',
                        confirmButtonColor: '#7367f0'
                    });
                })
                .finally(() => {
                    // Reset button state
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;

                    // Reset form
                    form.reset();
                });
            });
        </script>
    @endpush
@endsection