<x-app-layout>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Subscription Plans</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    </head>
    <body>
        <div class="container mt-5">
            <h1 class="mb-4">Subscription Plans</h1>

            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <!-- Create New Subscription Plan Form -->
            <form method="POST" action="{{ route('subscription-plans.store') }}" enctype="multipart/form-data" class="mb-4">
                @csrf
                <div class="form-group">
                    <label for="name">Plan Name</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="Enter plan name" required>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control" id="description" name="description" placeholder="Enter plan description" required></textarea>
                </div>
                <div class="form-group">
                    <label for="price">Price</label>
                    <input type="number" step="0.01" class="form-control" id="price" name="price" placeholder="Enter price" required>
                </div>
                <div class="form-group">
                    <label for="user_type">User Type</label>
                    <select class="form-control" id="user_type" name="user_type" required>
                        <option value="user">User</option>
                        <option value="vendor">Vendor</option>
                        <option value="driver">Driver</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="valid_for">Valid For</label>
                    <select class="form-control" id="valid_for" name="valid_for" required>
                        <option value="week">Week</option>
                        <option value="month">Month</option>
                        <option value="year">Year</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="image">Image Upload</label>
                    <input type="file" class="form-control-file" id="image" name="image" accept="image/*">
                </div>
                <button type="submit" class="btn btn-primary">Create Plan</button>
            </form>

            <!-- Existing Plans Table -->
            <h2 class="mt-5">Existing Plans</h2>
            <table class="table table-bordered table-hover mt-3">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>User Type</th>
                        <th>Valid For</th>
                        <th>Image</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($plans as $plan)
                        <tr>
                            <td>{{ $plan->id }}</td>
                            <td>{{ $plan->name }}</td>
                            <td>{{ $plan->description }}</td>
                            <td>${{ number_format($plan->price, 2) }}</td>
                            <td>{{ ucfirst($plan->user_type) }}</td>
                            <td>{{ ucfirst($plan->valid_for) }}</td>
                            <td>
                                @if ($plan->image)
                                    <img src="{{ asset('storage/app/public/' . $plan->image) }}" alt="Plan Image" style="width: 100px; height: auto;">
                                @else
                                    <span>No image</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('subscription-plans.update', $plan->id) }}" class="btn btn-warning btn-sm">Edit</a>
                                <form action="{{ route('subscription-plans.destroy', $plan->id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this plan?');">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </body>
    </html>
</x-app-layout>
