@extends('layouts.app')

@section('title', 'Manage Billing Plans - Admin Panel')
@section('page_title', 'Billing Plans')

@section('styles')
<style>
    .custom-control-label {
        cursor: pointer;
    }
    .drag-handle {
        cursor: move;
        color: #888;
        font-size: 18px;
    }
    .drag-handle:hover {
        color: #333;
    }
    tr.sortable-ghost {
        background-color: #f0f4f8 !important;
        opacity: 0.6;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-sm-12">
        <!-- Alert container for AJAX operations -->
        <div id="alert-container"></div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

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

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
    </div>

    <!-- Actions Bar -->
    <div class="col-sm-12 mb-3">
        <div class="d-flex justify-content-between align-items-center bg-white p-3 rounded shadow-sm">
            <h5 class="mb-0 text-secondary">Billing Plans Management</h5>
            <div>
                <form action="{{ route('billing-plans.sync') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="feather icon-refresh-cw"></i> Sync from RevenueCat
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Subscriptions Table -->
    <div class="col-md-12 col-xl-12 mb-4">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="feather icon-repeat mr-2"></i>Subscriptions</h5>
            </div>
            <div class="card-body table-border-style">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 50px;"></th>
                                <th style="width: 100px;">Sort Order</th>
                                <th>Product ID (RevenueCat)</th>
                                <th>Plan Name</th>
                                <th>Credits</th>
                                <th>Badge</th>
                                <th>Type</th>
                                <th style="width: 130px;">Default Selected</th>
                                <th style="width: 100px;">Status</th>
                                <th style="width: 180px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="subscriptions-table-body">
                            @forelse($subscriptions as $plan)
                            <tr data-id="{{ $plan->id }}">
                                <td class="text-center align-middle">
                                    <i class="feather icon-menu drag-handle"></i>
                                </td>
                                <td class="align-middle"><span class="sort-order-text">{{ $plan->sort_order }}</span></td>
                                <td class="align-middle"><code>{{ $plan->product_id }}</code></td>
                                <td class="align-middle"><strong>{{ $plan->name }}</strong></td>
                                <td class="align-middle"><span class="badge badge-primary" style="font-size: 13px;">{{ $plan->credits }}</span></td>
                                <td class="align-middle">
                                    @if($plan->offer_type === 'discount')
                                        <span class="badge badge-danger">{{ $plan->discount_percentage }}% OFF</span>
                                    @elseif($plan->offer_type === 'promo_badge' && $plan->badge)
                                        <span class="badge badge-warning">{{ $plan->badge }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="align-middle">
                                    <span class="badge badge-success">
                                        {{ ucfirst($plan->type) }}
                                    </span>
                                </td>
                                <td class="align-middle text-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" 
                                               class="custom-control-input default-switch" 
                                               id="default_switch_{{ $plan->id }}" 
                                               data-id="{{ $plan->id }}"
                                               {{ $plan->is_default ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="default_switch_{{ $plan->id }}">
                                            @if($plan->is_default)
                                                <span class="badge badge-success default-label">Default</span>
                                            @else
                                                <span class="badge badge-secondary default-label">No</span>
                                            @endif
                                        </label>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" 
                                               class="custom-control-input active-switch" 
                                               id="active_switch_{{ $plan->id }}" 
                                               data-id="{{ $plan->id }}"
                                               {{ $plan->is_active ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="active_switch_{{ $plan->id }}">
                                            @if($plan->is_active)
                                                <span class="badge badge-success active-label">Active</span>
                                            @else
                                                <span class="badge badge-secondary active-label">Inactive</span>
                                            @endif
                                        </label>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="d-flex">
                                        <a href="{{ route('billing-plans.edit', $plan->id) }}" class="btn btn-info btn-sm mr-2">
                                            <i class="feather icon-edit"></i> Edit
                                        </a>
                                        <form action="{{ route('billing-plans.destroy', $plan->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this plan?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm">
                                                <i class="feather icon-trash-2"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center">No subscriptions found.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Credit Packs Table -->
    <div class="col-md-12 col-xl-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="feather icon-credit-card mr-2"></i>Credit Packs</h5>
            </div>
            <div class="card-body table-border-style">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 50px;"></th>
                                <th style="width: 100px;">Sort Order</th>
                                <th>Product ID (RevenueCat)</th>
                                <th>Plan Name</th>
                                <th>Credits</th>
                                <th>Badge</th>
                                <th>Type</th>
                                <th style="width: 130px;">Default Selected</th>
                                <th style="width: 100px;">Status</th>
                                <th style="width: 180px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="credit-packs-table-body">
                            @forelse($creditPacks as $plan)
                            <tr data-id="{{ $plan->id }}">
                                <td class="text-center align-middle">
                                    <i class="feather icon-menu drag-handle"></i>
                                </td>
                                <td class="align-middle"><span class="sort-order-text">{{ $plan->sort_order }}</span></td>
                                <td class="align-middle"><code>{{ $plan->product_id }}</code></td>
                                <td class="align-middle"><strong>{{ $plan->name }}</strong></td>
                                <td class="align-middle"><span class="badge badge-primary" style="font-size: 13px;">{{ $plan->credits }}</span></td>
                                <td class="align-middle">
                                    @if($plan->offer_type === 'discount')
                                        <span class="badge badge-danger">{{ $plan->discount_percentage }}% OFF</span>
                                    @elseif($plan->offer_type === 'promo_badge' && $plan->badge)
                                        <span class="badge badge-warning">{{ $plan->badge }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="align-middle">
                                    <span class="badge badge-info">
                                        Credit Pack
                                    </span>
                                </td>
                                <td class="align-middle text-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" 
                                               class="custom-control-input default-switch" 
                                               id="default_switch_{{ $plan->id }}" 
                                               data-id="{{ $plan->id }}"
                                               {{ $plan->is_default ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="default_switch_{{ $plan->id }}">
                                            @if($plan->is_default)
                                                <span class="badge badge-success default-label">Default</span>
                                            @else
                                                <span class="badge badge-secondary default-label">No</span>
                                            @endif
                                        </label>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" 
                                               class="custom-control-input active-switch" 
                                               id="active_switch_{{ $plan->id }}" 
                                               data-id="{{ $plan->id }}"
                                               {{ $plan->is_active ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="active_switch_{{ $plan->id }}">
                                            @if($plan->is_active)
                                                <span class="badge badge-success active-label">Active</span>
                                            @else
                                                <span class="badge badge-secondary active-label">Inactive</span>
                                            @endif
                                        </label>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="d-flex">
                                        <a href="{{ route('billing-plans.edit', $plan->id) }}" class="btn btn-info btn-sm mr-2">
                                            <i class="feather icon-edit"></i> Edit
                                        </a>
                                        <form action="{{ route('billing-plans.destroy', $plan->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this plan?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm">
                                                <i class="feather icon-trash-2"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center">No credit packs found.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Load SortableJS -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>

<script>
    $(document).ready(function () {
        // Helper to show dynamic alert banners
        function showToast(type, message) {
            let container = $('#alert-container');
            let alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;
            container.html(alertHtml);
            
            // Auto close after 3.5 seconds
            setTimeout(function() {
                container.find('.alert').alert('close');
            }, 3500);
        }

        // Initialize Sortable for Subscriptions
        const subEl = document.getElementById('subscriptions-table-body');
        if (subEl) {
            new Sortable(subEl, {
                handle: '.drag-handle',
                animation: 150,
                ghostClass: 'sortable-ghost',
                onEnd: function () {
                    updateOrder(subEl);
                }
            });
        }

        // Initialize Sortable for Credit Packs
        const packEl = document.getElementById('credit-packs-table-body');
        if (packEl) {
            new Sortable(packEl, {
                handle: '.drag-handle',
                animation: 150,
                ghostClass: 'sortable-ghost',
                onEnd: function () {
                    updateOrder(packEl);
                }
            });
        }

        function updateOrder(container) {
            const order = [];
            $(container).find('tr').each(function (index) {
                const id = $(this).data('id');
                if (id) {
                    order.push(id);
                    // Update the visible sort order text
                    $(this).find('.sort-order-text').text(index + 1);
                }
            });

            $.ajax({
                url: "{{ route('billing-plans.reorder') }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    order: order
                },
                success: function (response) {
                    if (response.success) {
                        showToast('success', response.message);
                    } else {
                        showToast('danger', 'Failed to update order.');
                    }
                },
                error: function (xhr) {
                    showToast('danger', 'An error occurred while updating order.');
                }
            });
        }

        // AJAX Switch Toggle for Active status
        $('.active-switch').on('change', function () {
            const id = $(this).data('id');
            const checkbox = $(this);
            const originalChecked = checkbox.prop('checked');
            
            let url = "{{ route('billing-plans.toggle-active', ':id') }}";
            url = url.replace(':id', id);

            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response.success) {
                        const label = checkbox.closest('.custom-switch').find('.active-label');
                        if (response.is_active) {
                            label.text('Active').removeClass('badge-secondary').addClass('badge-success');
                        } else {
                            label.text('Inactive').removeClass('badge-success').addClass('badge-secondary');
                        }
                        showToast('success', response.message);
                    } else {
                        checkbox.prop('checked', originalChecked);
                        showToast('danger', 'Failed to toggle active status.');
                    }
                },
                error: function (xhr) {
                    checkbox.prop('checked', originalChecked);
                    showToast('danger', 'An error occurred while updating active status.');
                }
            });
        });

        // AJAX Switch Toggle for Default status
        $('.default-switch').on('change', function () {
            const id = $(this).data('id');
            const checkbox = $(this);
            const isChecked = checkbox.prop('checked');
            
            let url = "{{ route('billing-plans.toggle-default', ':id') }}";
            url = url.replace(':id', id);

            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response.success) {
                        if (response.is_default) {
                            // Turn off all other checkboxes in the same table
                            const tableBody = checkbox.closest('tbody');
                            tableBody.find('.default-switch').each(function() {
                                if ($(this).data('id') !== id) {
                                    $(this).prop('checked', false);
                                    const otherLabel = $(this).closest('.custom-switch').find('.default-label');
                                    otherLabel.text('No').removeClass('badge-success').addClass('badge-secondary');
                                }
                            });
                            
                            const label = checkbox.closest('.custom-switch').find('.default-label');
                            label.text('Default').removeClass('badge-secondary').addClass('badge-success');
                        } else {
                            const label = checkbox.closest('.custom-switch').find('.default-label');
                            label.text('No').removeClass('badge-success').addClass('badge-secondary');
                        }
                        showToast('success', response.message);
                    } else {
                        checkbox.prop('checked', !isChecked);
                        showToast('danger', 'Failed to toggle default status.');
                    }
                },
                error: function (xhr) {
                    checkbox.prop('checked', !isChecked);
                    showToast('danger', 'An error occurred while updating default status.');
                }
            });
        });
    });
</script>
@endsection