@extends('admin.layouts.app')

@section('title', 'Plans Management')

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

    @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

    <div class="container-fluid">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="text-warning mb-1">
                            <i class="fas fa-crown me-2"></i>Plans Management
                        </h2>
                        <p class="text-white mb-0">Manage investment plans and their commission rates</p>
                    </div>
                    <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#planModal">
                        <i class="fas fa-plus me-2"></i>Add New Plan
                    </button>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-dark border-warning">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white mb-2">Total Plans</h6>
                                <h3 class="text-warning mb-0">{{ $plans->count() }}</h3>
                            </div>
                            <div class="bg-warning bg-opacity-10 p-3 rounded">
                                <i class="fas fa-crown text-warning fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-dark border-success">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white mb-2">Active Plans</h6>
                                <h3 class="text-success mb-0">{{ $plans->where('is_active', true)->count() }}</h3>
                            </div>
                            <div class="bg-success bg-opacity-10 p-3 rounded">
                                <i class="fas fa-check-circle text-success fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-dark border-info">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white mb-2">Total Subscribers</h6>
                                <h3 class="text-info mb-0">{{ $plans->sum('users_count') }}</h3>
                            </div>
                            <div class="bg-info bg-opacity-10 p-3 rounded">
                                <i class="fas fa-users text-info fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-dark border-danger">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white mb-2">Inactive Plans</h6>
                                <h3 class="text-danger mb-0">{{ $plans->where('is_active', false)->count() }}</h3>
                            </div>
                            <div class="bg-danger bg-opacity-10 p-3 rounded">
                                <i class="fas fa-times-circle text-danger fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Plans Table -->
        <div class="card bg-dark border-warning">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-dark table-hover align-middle">
                        <thead>
                            <tr>
                                <th class="text-warning"><i class="fas fa-crown me-2"></i>Plan Name</th>
                                <th class="text-warning"><i class="fas fa-dollar-sign me-2"></i>Price</th>
                                <th class="text-warning"><i class="fas fa-percentage me-2"></i>Commission Rate</th>
                                <th class="text-warning"><i class="fas fa-hand-holding-usd me-2"></i>Cashback</th>
                                <th class="text-warning"><i class="fas fa-users me-2"></i>Subscribers</th>
                                <th class="text-warning"><i class="fas fa-toggle-on me-2"></i>Status</th>
                                <th class="text-warning"><i class="fas fa-cog me-2"></i>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($plans as $plan)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-{{ $plan->icon ?? 'crown' }} text-warning me-2 fa-lg"></i>
                                            <div>
                                                <div class="text-white">{{ $plan->name }}</div>
                                                <small class="text-muted">{{ $plan->description }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-white">${{ number_format($plan->price, 2) }}</td>
                                    <td class="text-white">{{ $plan->commission_rate }}%</td>
                                    <td class="text-white">${{ number_format($plan->cashback, 2) }}</td>
                                    <td class="text-white">{{ $plan->users_count ?? 0 }}</td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox"
                                                {{ $plan->is_active ? 'checked' : '' }}
                                                onchange="togglePlanStatus({{ $plan->id }})">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <a href="{{ route('plans.edit', $plan->id) }}"
                                                class="btn btn-sm btn-dark border-warning text-warning">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button class="btn btn-sm btn-danger"
                                                onclick="deletePlan({{ $plan->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Plan Modal -->
    <div class="modal fade" id="planModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content bg-dark border-warning">
                <div class="modal-header border-warning">
                    <h5 class="modal-title text-warning">
                        <i class="fas fa-crown me-2"></i>Add New Plan
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="formError" class="alert alert-danger d-none"></div>
                    <form id="planForm" method="POST" action="{{ route('plans.store') }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label text-warning">Plan Name</label>
                            <input type="text" class="form-control bg-dark text-white border-warning" name="name"
                                id="planName" required>
                            <div id="nameError" class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Price ($)</label>
                            <input type="number" class="form-control bg-dark text-white border-warning" name="price"
                                id="planPrice" step="0.01" min="0" required>
                            <div id="priceError" class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Commission Rate (%)</label>
                            <input type="number" class="form-control bg-dark text-white border-warning"
                                name="commission_rate" id="planCommissionRate" step="0.01" min="0"
                                max="100" required>
                            <div id="commission_rateError" class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Cashback ($)</label>
                            <input type="number" class="form-control bg-dark text-white border-warning" name="cashback"
                                id="planCashback" step="0.01" min="0" required>
                            <div id="cashbackError" class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Owner Share ($)</label>
                            <input type="number" class="form-control bg-dark text-white border-warning"
                                name="owner_share" id="planOwnerShare" step="0.01" min="0" required>
                            <div id="owner_shareError" class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Total Distributed ($)</label>
                            <input type="number" class="form-control bg-dark text-white border-warning"
                                name="total_distributed" id="planTotalDistributed" step="0.01" min="0"
                                required>
                            <div id="total_distributedError" class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Indirect Levels (JSON)</label>
                            <textarea class="form-control bg-dark text-white border-warning" name="indirect_levels" id="planIndirectLevels"></textarea>
                            <div id="indirect_levelsError" class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Icon</label>
                            <select class="form-select bg-dark text-white border-warning" name="icon" id="planIcon"
                                required>
                                <option value="crown">Crown</option>
                                <option value="star">Star</option>
                                <option value="gem">Diamond</option>
                                <option value="rocket">Rocket</option>
                                <option value="shield-alt">Shield</option>
                                <option value="medal">Medal</option>
                                <option value="trophy">Trophy</option>
                            </select>
                            <div id="iconError" class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Description</label>
                            <textarea class="form-control bg-dark text-white border-warning" name="description" id="planDescription"></textarea>
                            <div id="descriptionError" class="invalid-feedback"></div>
                        </div>
                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" name="is_active" id="planStatus"
                                value="1" checked>
                            <label class="form-check-label text-warning">Active</label>
                        </div>
                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" name="ebook_access" id="planEbookAccess"
                                value="1">
                            <label class="form-check-label text-warning">Ebook Access</label>
                        </div>
                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" name="target_hitting_bonus"
                                id="planTargetHittingBonus" value="1">
                            <label class="form-check-label text-warning">Target Hitting Bonus</label>
                        </div>
                        <div class="modal-footer border-warning">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-warning">Save Plan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            console.log('Plans script loaded at:', new Date().toISOString());

            // Initialize modal
            let planModal;
            try {
                planModal = new bootstrap.Modal(document.getElementById('planModal'), {
                    keyboard: false
                });
                console.log('Modal initialized');
            } catch (e) {
                console.error('Error initializing modal:', e);
                alert('Modal initialization failed. Please ensure Bootstrap JS is loaded.');
            }

            // Helper functions
            function clearErrors() {
                console.log('Clearing errors');
                document.querySelectorAll('.invalid-feedback').forEach(el => el.textContent = '');
                document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
                document.getElementById('formError').classList.add('d-none');
            }

            function showError(field, message) {
                console.log(`Showing error for ${field}: ${message}`);
                const input = document.getElementById('plan' + field.charAt(0).toUpperCase() + field.slice(1));
                const error = document.getElementById(field + 'Error');
                if (input && error) {
                    input.classList.add('is-invalid');
                    error.textContent = message;
                }
            }

            // Save Plan (for modal)
            function savePlan(event) {
                event.preventDefault();
                console.log('savePlan called');
                clearErrors();

                const form = document.getElementById('planForm');
                const formData = new FormData(form);
                const data = Object.fromEntries(formData);
                data.is_active = formData.has('is_active');
                data.ebook_access = formData.has('ebook_access');
                data.target_hitting_bonus = formData.has('target_hitting_bonus');
                data._token = document.querySelector('meta[name="csrf-token"]').content;

                console.log('Form data:', data);

                fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': data._token
                        },
                        body: JSON.stringify(data)
                    })
                    .then(response => {
                        console.log('Save response status:', response.status);
                        if (!response.ok) throw new Error(`HTTP error ${response.status}`);
                        return response.json();
                    })
                    .then(data => {
                        console.log('Save response data:', data);
                        if (data.success) {
                            location.reload();
                        } else {
                            if (data.errors) {
                                Object.keys(data.errors).forEach(field => {
                                    showError(field, data.errors[field][0]);
                                });
                            } else {
                                document.getElementById('formError').textContent = data.message || 'An error occurred';
                                document.getElementById('formError').classList.remove('d-none');
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error in savePlan:', error);
                        document.getElementById('formError').textContent = 'An unexpected error occurred: ' + error.message;
                        document.getElementById('formError').classList.remove('d-none');
                    });
            }

            // Delete Plan
            function deletePlan(id) {
                console.log('deletePlan called with ID:', id);
                if (confirm('Are you sure you want to delete this plan? This action cannot be undone.')) {
                    fetch(`/admin/plans/${id}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            }
                        })
                        .then(response => {
                            console.log('Delete response status:', response.status);
                            if (!response.ok) throw new Error(`HTTP error ${response.status}`);
                            return response.json();
                        })
                        .then(data => {
                            console.log('Delete response data:', data);
                            if (data.success) {
                                location.reload();
                            } else {
                                alert(data.message || 'Error deleting plan');
                            }
                        })
                        .catch(error => {
                            console.error('Error in deletePlan:', error);
                            alert('An unexpected error occurred: ' + error.message);
                        });
                }
            }

            // Toggle Plan Status
            function togglePlanStatus(id) {
                console.log('togglePlanStatus called with ID:', id);
                fetch(`/admin/plans/${id}/toggle`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        }
                    })
                    .then(response => {
                        console.log('Toggle response status:', response.status);
                        if (!response.ok) throw new Error(`HTTP error ${response.status}`);
                        return response.json();
                    })
                    .then(data => {
                        console.log('Toggle response data:', data);
                        if (!data.success) {
                            alert(data.message || 'Error toggling plan status');
                            location.reload();
                        }
                    })
                    .catch(error => {
                        console.error('Error in togglePlanStatus:', error);
                        alert('An unexpected error occurred: ' + error.message);
                        location.reload();
                    });
            }

            // Modal reset
            document.addEventListener('DOMContentLoaded', function() {
                console.log('DOM fully loaded at:', new Date().toISOString());
                document.getElementById('planModal').addEventListener('hidden.bs.modal', function() {
                    console.log('Modal hidden, resetting form');
                    document.getElementById('planForm').reset();
                    clearErrors();
                });

                // Attach savePlan to form submit
                document.getElementById('planForm').addEventListener('submit', savePlan);
            });
        </script>
    @endpush
@endsection