@extends('layouts.admin')

@section('content')
<style type="text/css">
    .hidden { display: none; }
</style>
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4>Add Plan</h4>
                </div>
            </div>
        </div>
        <!-- /add -->
        <div class="card">
            <div class="card-body add-product pb-0">
                <div class="accordion-card-one accordion" id="accordionExample">
                    <div class="accordion-item">
                        <div class="accordion-header" id="headingOne">
                            <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne">
                                <div class="addproduct-icon">
                                    <h5><i data-feather="info" class="add-info"></i><span>Plan Information</span></h5>
                                    
                                    <a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
                                </div>
                            </div>
                        </div>
                        @include('layouts.errors')
                        <form action="{{ route('plans.store') }}" method="post">
                        @csrf
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div class="row">
                                    <div class="col-lg-6 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Plan Name</label>
                                            <input type="text" class="form-control" placeholder="Enter plan name" name="name" id="name" value="{{ old('name') }}" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Plan Type </label>
                                            <div class="plain-type-checkboxes" style="display: flex; gap: 1rem;">
                                                <!-- <div class="form-check form-check-inline">
                                                    <input type="radio" id="plainTypeMonthly" name="type" value="monthly" class="form-check-input" style="width: 1rem; height: 1rem; margin-top: 0.3rem;" checked>
                                                    <label for="plainTypeMonthly" class="form-check-label">Monthly</label>
                                                </div> -->
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" id="plainTypeYearly" name="type" value="yearly" class="form-check-input" style="width: 1rem; height: 1rem; margin-top: 0.3rem;" checked>
                                                    <label for="plainTypeYearly" class="form-check-label">Yearly</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Price</label>
                                            <input type="number" step="0.01" class="form-control" placeholder="Enter price" name="price" id="price" value="{{ old('price') }}">
                                        </div>
                                    </div> 
                                    <div class="col-lg-6">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Plan for </label>
                                            <div>
                                                <select name="plan_for" id="plan_for" class="form-control" required>
                                                    <option value="client">Client</option>
                                                    <option value="accountant">Tax Professionals</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 hidden" id="NoOfClients">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">No of Clients</label>
                                            <input type="number" class="form-control" placeholder="Enter no of clients" name="no_of_clients" id="no_of_clients" value="{{ old('no_of_clients') }}">
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-sm-6 col-12" id="connection">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Connect with Tax Professionals </label>
                                            <div class="plain-type-checkboxes" style="display: flex; gap: 1rem;">
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" id="connectNo" name="connect" value="no" class="form-check-input" style="width: 1rem; height: 1rem; margin-top: 0.3rem;">
                                                    <label for="connectNo" class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" id="connectYes" name="connect" value="yes" class="form-check-input" style="width: 1rem; height: 1rem; margin-top: 0.3rem;" checked>
                                                    <label for="connectYes" class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Details</label>
                                            <textarea class="form-control" rows="3" placeholder="Enter details" name="details" id="details" required>{{ old('details') }}</textarea required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" id="include">
                                    <div class="col-lg-6">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Include</label>
                                            <div>
                                                <div style="display: flex; align-items: center;">
                                                    <input type="checkbox" id="includeOption1" name="include[]" style="width: 1rem; height: 1rem;" value="Text Documentation">
                                                    <label for="includeOption1" style="margin-left: 0.5rem;">Text Documentation</label>
                                                </div>
                                                <div style="display: flex; align-items: center;">
                                                    <input type="checkbox" id="includeOption2" name="include[]" style="width: 1rem; height: 1rem;" value="Rental Income Management">
                                                    <label for="includeOption2" style="margin-left: 0.5rem;">Rental Income Management</label>
                                                </div>
                                                <div style="display: flex; align-items: center;">
                                                    <input type="checkbox" id="includeOption3" name="include[]" style="width: 1rem; height: 1rem;" value="Quebec Reporting GST/PST">
                                                    <label for="includeOption3" style="margin-left: 0.5rem;">Quebec Reporting GST/PST</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="btn-addproduct mb-4">
                                            <a href="{{ route('plans.index') }}" class="btn btn-cancel me-2">Cancel</a>
                                            <button type="submit" class="btn btn-submit ">Save Plan</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection