@extends('backend.app')
@push('style')
    <link rel="stylesheet" href="{{ asset('backend/assets/datatable/css/datatables.min.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    <style>
        .subscription-card {
            transition: all 0.3s ease;
        }
        .subscription-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .featured-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .price-display {
            font-size: 1.5rem;
            font-weight: 700;
        }
        .discounted-price {
            text-decoration: line-through;
            color: #999;
            font-size: 1rem;
        }
        .status-toggle {
            cursor: pointer;
        }
        .duration-badge {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        .action-buttons .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
    </style>
@endpush
@section('title', 'Subscription Plans')
@section('content')
    <div class="app-content content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-crown me-2"></i>Subscription Plans
                </h3>
                <div>
                    <a href="{{ route('subscriptions.create') }}" class="btn btn-primary" type="button">
                        <i class="fas fa-plus me-1"></i>
                        <span>Add Plan</span>
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive mt-4 p-4 card-datatable table-responsive pt-0">
                    <table class="table table-hover" id="data-table">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Price (SAR)</th>
                                <th>Duration</th>
                                <th>Features Count</th>
                                <th>Status</th>
                                <th>Stripe Payment</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($plans as $plan)
                            <tr data-plan-id="{{ $plan->id }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <div class="fw-bold">{{ $plan->title }}</div>
                                            @if($plan->subtitle)
                                                <small class="text-muted">{{ $plan->subtitle }}</small>
                                            @endif
                                        </div>
                                        @if($plan->is_featured)
                                            <span class="badge featured-badge ms-2">
                                                <i class="fas fa-star"></i>
                                            </span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div class="price-display">
                                        @if($plan->discounted_price)
                                            <span class="discounted-price">{{ number_format($plan->price, 2) }} ر.س</span>
                                            <span class="text-success">{{ number_format($plan->discounted_price, 2) }} ر.س</span>
                                        @else
                                            <span>{{ number_format($plan->price, 2) }} ر.س</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <span class="badge duration-badge">{{ ucfirst($plan->duration) }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ count($plan->getFeaturesList()) }} features</span>
                                </td>
                                <td>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input status-toggle"
                                               type="checkbox"
                                               @if($plan->is_active) checked @endif
                                               onchange="toggleStatus({{ $plan->id }})"
                                               id="status-{{ $plan->id }}">
                                        
                                    </div>
                                </td>
                                <td>
                                    @if($plan->stripe_price_id)
                                        <span class="badge bg-success">
                                            <i class="fas fa-check me-1"></i>Configured
                                        </span>
                                        <small class="d-block text-muted">{{ $plan->getFinalPriceAttribute() }} SAR</small>
                                    @else
                                        <span class="badge bg-warning">
                                            <i class="fas fa-exclamation-triangle me-1"></i>Not Configured
                                        </span>
                                        <small class="d-block text-muted">Missing Stripe Price ID</small>
                                    @endif
                                </td>
                                <td class="action-buttons">
                                    <a href="{{ route('subscriptions.show', $plan) }}"
                                       class="btn btn-info btn-sm"
                                       title="View">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('subscriptions.edit', $plan) }}"
                                       class="btn btn-primary btn-sm"
                                       title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button type="button"
                                            class="btn btn-danger btn-sm"
                                            onclick="showDeleteAlert({{ $plan->id }})"
                                            title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('script')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="{{ asset('backend/assets/datatable/js/datatables.min.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            $(document).ready(function() {
                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    }
                });

                if (!$.fn.DataTable.isDataTable('#data-table')) {
                    $('#data-table').DataTable({
                        order: [[0, 'asc']],
                        pageLength: 25,
                        responsive: true,
                        language: {
                            search: "_INPUT_",
                            searchPlaceholder: "Search plans...",
                        }
                    });
                }
            });

            function showDeleteAlert(id) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "This will also delete the plan from Stripe! You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!',
                }).then((result) => {
                    if (result.isConfirmed) {
                        deletePlan(id);
                    }
                });
            }

            function deletePlan(id) {
                let deleteUrl = '{{ route('subscriptions.destroy', ':id') }}'.replace(':id', id);
                fetch(deleteUrl, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status) {
                            Swal.fire(
                                'Deleted!',
                                'Subscription plan has been deleted.',
                                'success'
                            );
                            setTimeout(() => window.location.reload(), 1500);
                        } else {
                            Swal.fire(
                                'Error!',
                                data.message || 'An error occurred while deleting the plan.',
                                'error'
                            );
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.fire(
                            'Error!',
                            'An unexpected error occurred.',
                            'error'
                        );
                    });
            }

            function toggleStatus(id) {
                let url = '{{ route('subscriptions.toggle', ':id') }}'.replace(':id', id);
                $.ajax({
                    type: "POST",
                    url: url,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(resp) {
                        if (resp.status) {
                            toastr.success(resp.message);
                            setTimeout(() => window.location.reload(), 1000);
                        } else {
                            toastr.error(resp.message || 'Failed to update status');
                            window.location.reload();
                        }
                    },
                    error: function(error) {
                        toastr.error('An error occurred while updating status');
                        window.location.reload();
                    }
                });
            }
        </script>
    @endpush
@endsection