@extends('layouts/contentNavbarLayout')

@section('title', 'Subscription Create')

@section('content')
<h4 class="py-3 mb-4"><span class="text-muted fw-light">Home /</span> Subscription Create</h4>
<!-- Basic Layout & Basic with Icons -->
<div class="row">
  <!-- Basic Layout -->
  <div class="col-xxl">
    <div class="card mb-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap mt-2 mb-1">
        <h5 class="m-0 me-2"></h5>
        <div class="mx-3">
          <a class="fw-medium btn btn-warning" href="/subscriptions">
            Back </a>
        </div>
      </div>

        <form id="progress-form" class="p-4 progress-form" action="/subscription" lang="en" novalidate>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Plan Details</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <label for="plan_name" class="form-label">Plan Name</label>
                    <input type="text" class="form-control" id="plan_name" placeholder="Plan name">
                  </div>

                  <div class="col-sm-6">
                    <label for="plan_id" class="form-label">Plan ID</label>
                    <input type="text" class="form-control" id="plan_id" placeholder="Plan Id">
                  </div>

                  <div class="col-sm-12">
                    <label for="plan_description" class="form-label">Description</label>
                    <textarea class="form-control" id="plan_description"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Pricing Information</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-12">
                    <label for="regular_price" class="form-label">Regular Price</label>
                    <input type="number" class="form-control" id="regular_price" placeholder="99.99" step=".01">
                  </div>

                  <div class="col-sm-6">
                    <label for="discount_price" class="form-label">Discounted Price</label>
                    <input type="number" class="form-control" id="discount_price" placeholder="10.99" step=".01">
                  </div>

                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Duration and Renewal</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <label for="defaultFormControlInput" class="form-label">Duration</label>
                    <select id="largeSelect" class="form-select form-select-lg">
                      <option>Select duration</option>
                      <option value="month">Monthly</option>
                      {{-- <option value="quarter">Quarterly </option> --}}
                      <option value="year">Annually</option>
                    </select>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-check form-switch mb-2">
                      <label class="form-check-label" for="auto_renew">Auto-Renewal Option</label>
                      <input class="form-check-input" type="checkbox" id="auto_renew" checked="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Plan Features</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <label for="defaultFormControlInput" class="form-label">Features Included</label>
                    <textarea class="form-control" id="features"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Availability</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <label class="col-sm-s2 form-label" for="street">Communities</label>
                    <select id="largeSelect" class="form-select form-select-lg">
                      <option>Select communities</option>
                      <option value="com1">Com1</option>
                      <option value="com2">Com2 </option>
                      <option value="com3">Com3</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="d-flex justify-center sm:justify-end mt-4 sm:mt-5 float-end">
            <a class="fw-medium btn btn-warning" style="margin-right: 10px" href="#">
              Clear </a>

            <a href="/subscriptions" class="btn btn-primary">
              Submit
            </a>
          </div>

        </form>
    </div>
  </div>
</div>
@endsection