@extends('layouts.admin')

@section('content')
<main class="content">
    <div class="container-fluid p-0">

        <div class="row mb-3 d-flex justify-content-between align-items-center">
            <div class="col-auto">
                <h3>All Plans</h3>
            </div>
            <div class="col-auto">
                <a href="javascript:;" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPlan">
                    Add Plan
                </a>
            </div>
        </div>

        @include('components.admin.error-message')

        <div class="row gy-4">
            @foreach($plans as $plan)
                <div class="col-xl-4 col-md-6">
                    <div class="card">
                        <div class="card-body">

                            <div class="d-flex justify-content-between mb-2">
                                <span class="badge bg-primary fs-6">{{ $plan->name }}</span>
                                <h4 class="text-primary">${{ number_format($plan->price,2) }}</h4>
                            </div>

                            <ul class="ps-3 mb-3">
                                <li>Type: {{ $plan->type }}</li>
                                <li>ROI: {{ $plan->roi }}%</li>
                            </ul>

                            <div class="d-grid gap-2">
                                <button class="btn btn-primary"
                                    data-bs-toggle="modal"
                                    data-bs-target="#editPlan{{ $plan->id }}">
                                    Edit
                                </button>

                                <a href="{{ secure_url('admin/plans/delete/'.$plan->id) }}"
                                   class="btn btn-danger"
                                   onclick="return confirm('Delete {{ $plan->name }}?')">
                                    Delete
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Edit Plan Modal -->
                <div class="modal fade" id="editPlan{{ $plan->id }}" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <form method="POST" action="{{ route('admin.plan.edit') }}" class="modal-content">
                            @csrf
                            <input type="hidden" name="gixd" value="{{ $plan->id }}">

                            <div class="modal-header">
                                <h5 class="modal-title">Edit Plan</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <div class="modal-body row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Name</label>
                                    <input type="text" name="name" class="form-control" value="{{ $plan->name }}">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Price</label>
                                    <input type="number" step="0.01" name="price" class="form-control" value="{{ $plan->price }}">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Type</label>
                                    <select name="type" class="form-select">
                                        <option {{ $plan->type == 'Main' ? 'selected' : '' }}>Main</option>
                                        <option {{ $plan->type == 'Promo' ? 'selected' : '' }}>Promo</option>
                                        <option {{ $plan->type == 'Signal' ? 'selected' : '' }}>Signal</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">ROI (%)</label>
                                    <input type="number" step="0.01" name="roi" class="form-control" value="{{ $plan->roi }}">
                                </div>

                         

                                <div class="col-12">
                                    <label class="form-label">Features (comma separated)</label>
                                    <textarea name="features" class="form-control" rows="4">
@foreach(($plan->features ?? []) as $feature)
{{ $feature }}
@endforeach
</textarea>

                                </div>
                            </div>

                            <div class="modal-footer">
                                <button class="btn btn-primary">Save</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</main>

<!-- Add Plan Modal -->
<div class="modal fade" id="addPlan" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form method="POST" action="{{ route('admin.plan.add') }}" class="modal-content">
            @csrf

            <div class="modal-header">
                <h5 class="modal-title">Add Plan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body row g-3">
                <div class="col-md-6">
                    <label class="form-label">Name</label>
                    <input type="text" name="name" class="form-control">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Price</label>
                    <input type="number" step="0.01" name="price" class="form-control">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Type</label>
                    <select name="type" class="form-select">
                        <option>Main</option>
                        <option>Promo</option>
                        <option>Signal</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label">ROI (%)</label>
                    <input type="number" step="0.01" name="roi" class="form-control">
                </div>

            
                <div class="col-12">
                    <label class="form-label">Features (comma separated)</label>
                    <textarea name="features" class="form-control"></textarea>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary">Create</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection