@extends("backend.layouts.app")

@section("title")
    {{ __($module_action) }} {{ __($module_title) }}
@endsection

@section("breadcrumbs")
    <x-backend.breadcrumbs>
        <x-backend.breadcrumb-item route='{{-- route("backend.$module_name.index") --}}' icon="{{ $module_icon }}">
            {{ __($module_title) }}
        </x-backend.breadcrumb-item>

        <x-backend.breadcrumb-item type="active">{{ __($module_action) }}</x-backend.breadcrumb-item>
    </x-backend.breadcrumbs>
@endsection

@section("content")
    <x-backend.layouts.create>
        <x-backend.section-header>
            <i class="{{ $module_icon }}"></i>
            {{ __($module_title) }}
            <small class="text-muted">{{ __($module_action) }}</small>

            <x-slot name="toolbar">
                <x-backend.buttons.return-back :small="true" />
            </x-slot>
        </x-backend.section-header>

        <div class="row mt-4">
            <!-- Subscription Type -->
            <div class="row mb-3">
                <div class="col-sm-6">
                    <label for="subscriptionType" class="form-label">Subscription Type</label>
                    <input class="form-control" type="text" id="subscription_type" name="subscription_type" required>
                </div>
                <!-- Subscription Date -->
                <div class="col-sm-6">
                    <label for="subscriptionDate" class="form-label">Subscription Date</label>
                    <input class="form-control" type="date" id="subscriptionDate" name="subscriptionDate" required>
                </div>
            </div>

            <!-- Company Name -->
            <div class="row mb-3">
                <div class="col-sm-6">
                    <label for="companyName" class="form-label">Company Name</label>
                    <input class="form-control" type="text" id="companyName" name="companyName" required placeholder="Enter the company name">
                </div>
                <!-- Plan Type -->
                <div class="col-sm-6">
                    <label for="planType" class="form-label">Plan Type</label>
                    <select class="form-control" id="planType" name="planType" required>
                        <option value="" disabled selected>Select Plan Type</option>
                        <option value="monthly">Monthly</option>
                        <option value="yearly">Yearly</option>
                    </select>
                </div>
            </div>

            <!-- Subscription Status -->
            <div class="row mb-3">
                <div class="col-sm-6">
                    <label for="subscriptionType" class="form-label">Price</label>
                    <input class="form-control" type="text" id="price" name="price" required>
                </div>
                <div class="col-sm-6">
                    <label for="subscriptionStatus" class="form-label">Subscription Status</label>
                    <select class="form-control" id="subscriptionStatus" name="subscriptionStatus" required>
                        <option value="" disabled selected>Select Subscription Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="cancelled">Cancelled</option>
                    </select>
                </div>
            </div>

            <!-- Add Another Subscription Button -->
            <div class="row mb-3">
                
                <div class="col-sm-6">
                    <button type="button" class="btn btn-warning btn-lg" id="addSubscriptionButton">
                        <i class="fas fa-plus-circle"></i> Add Subscription
                    </button>
                </div>
            </div>
        </div>
    </x-backend.layouts.create>
@endsection