@extends('layouts.admin')

@section('css')

<style>
   

.notification-via {
    text-align: center;
    border: 2px solid #cdcdcd;
    padding: 12px 0px;
    border-radius: 5px;
    background: #efefef;
    cursor: pointer;
    transition: all 0.3s;
}
 .notification-via.active {
    border-color: #4634ff;
    position: relative;
}
</style>

@endsection
@section('content')

            <main class="content">
				<div class="container-fluid p-0">

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

					</div>
				
@include('components.admin.error-message')

<div class="row">
    <div class="col-xl-12">
      
          <div class="row gy-4">
    <!-- User Sidebar -->
    @if(!empty($plans))
    @foreach($plans as $plan)
    <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
        <!-- User Card -->
    
        <!-- /User Card -->
        <!-- Plan Card -->
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <span class="badge bg-label-primary text-dark" style="font-size:1.3rem">{{$plan->name}}</span>
                    <div class="d-flex justify-content-center">
                        <sup class="h5 pricing-currency mt-3 mt-sm-4 mb-0 me-1 text-primary">$</sup>
                        <h4 class="display-8 fw-normal mb-0 text-primary">{{$plan->price}}</h4>
                     
                    </div>
                </div>
                <ul class="ps-3 g-2 mb-3">
                    <li>Price: {{number_format($plan->price,2,'.',',')}}</li>
                    <li class="mb-2">Duration: {{$plan->duration_days}} {{$plan->intervals}}</li>
               
                    
                </ul>
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <h6 class="mb-0">Status</h6>
                    <h6 class="mb-0">{{$plan->status == 1 ? 'active': 'inactive'}}</h6>
                </div>
               
                <div class="d-grid w-100 mt-3 pt-2 justify-space-between">
                    
                    <a href="javascript:;" class="btn btn-primary me-3" data-bs-target="#editPlanModal_{{$plan->id}}" data-bs-toggle="modal">Edit</a>
                    <br/>
               
                    <a href="javascript:;" class="btn btn-primary delete_plan" data-id="{{$plan->id}}" data-name="{{$plan->name}}"  >Delete</a>
                </div>
            </div>
        </div>
        <!-- /Plan Card -->
    </div>
<div class="modal fade" id="editPlanModal_{{$plan->id}}" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-simple modal-edit-user">
        <div class="modal-content p-3 p-md-5">
            <div class="modal-body">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="text-center mb-4">
                    <h3>Edit Plan Information</h3>
                   
                </div>
                <form id="editUserForm" class="row g-3" action="{{ route('admin.plan.edit') }}" method="post">
    @csrf

    <div class="col-12">
        <label class="form-label" for="planName">Name</label>
        <input type="text" id="planName" name="name" class="form-control" value="{{ $plan->name }}" />
    </div>

    <div class="col-12">
        <label class="form-label" for="minPrice">Price</label>
        <input type="number" id="minPrice" name="price" class="form-control" value="{{ $plan->price }}" />
    </div>

    <div class="col-12">
        <label class="form-label" for="durationDays">Duration</label>
        <input type="text" id="durationDays" name="duration" class="form-control" value="{{ $plan->duration_days }}" />
    </div>

    <div class="col-12">
        <label class="form-label" for="intervalSelect">Interval</label>
        <select id="intervalSelect" name="interv" class="form-select">
            @foreach (['hourly', 'daily', 'weekly', 'bi-weekly', 'monthly', 'yearly'] as $interval)
                <option value="{{ $interval }}" {{ $plan->intervals === $interval ? 'selected' : '' }}>
                    {{ ucfirst($interval) }}
                </option>
            @endforeach
        </select>
    </div>



    <div class="col-12">
        <label class="form-label" for="planFeature">Features</label>
        <textarea id="planFeature" name="feature" class="form-control">{{ $plan->features ? implode("\n", $plan->features) : '' }}</textarea>
    </div>

    <div class="col-12">
        <label class="form-label" for="selectStatus">Status</label>
        <select id="selectStatus" name="stats" class="form-control">
            <option value="1" {{ $plan->status == '1' ? 'selected' : '' }}>Yes</option>
            <option value="0" {{ $plan->status == '0' ? 'selected' : '' }}>No</option>
        </select>
    </div>

    <input type="hidden" name="gixd" value="{{ $plan->id }}" />

    <div class="col-12 text-center mt-4">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
    </div>
</form>

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



    @endforeach
    @endif
    <!--/ User Sidebar -->

    <!-- User Content -->
   
    <!--/ User Content -->
</div>

<div class="modal fade" id="addPlan" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-simple modal-edit-user">
        <div class="modal-content p-3 p-md-5">
            <div class="modal-body">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="text-center mb-4">
                    <h3>Add Plan</h3>
                  
                </div>
                <form id="" class="row g-3 " action="{{ route('admin.plan.add') }}" method="post">
                    @csrf
                    <div class="col-12 fv-plugins-icon-container">
                        <label class="form-label" for="modalEditUserFirstName">Name</label>
                        <input type="text" id="modalEditUserFirstName" name="name" class="form-control" placeholder=""  />
                        <div class="fv-plugins-message-container invalid-feedback"></div>
                    </div>
                  
                    <div class="col-12 col-md-12">
                        <label class="form-label" for="modalEditUserEmail">Min Price</label>
                        <input type="text" id="modalEditUserEmail" name="price" class="form-control"  />
                    </div>
                    <div class="col-12 col-md-12">
                        <label class="form-label" for="modalEditUserEmail">Duration</label>
                        <input type="number" min="1" id="modalEditUserEmail" name="duration" class="form-control"  />
                    </div>
                    
                    <div class="col-12 col-md-12">
                        <label class="form-label" for="modalEditUserEmail">Feature</label>
                        <textarea name="feature" class="form-control"></textarea>
                    </div>
                   
                 
                    <div class="col-12 col-md-12">
                        <label class="form-label" for="modalEditUserEmail">Interval</label>
                         <select id="modalEditUserStatus" name="interv" class="form-select" aria-label="Default select example">
                           
                            <option selected="hourly">Hourly</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="bi-weekly">Bi-weekly</option>
                            <option value="monthly" selected>Monthly</option>
                            <option value="yearly">Yearly</option>
                        </select>
                    </div>
                 
                    
                    <div class="col-12 text-center mt-4">
                        <button type="submit" class="btn btn-primary ">Submit</button>
                        <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
                    </div>
                    <div></div>
                    <input type="hidden" />
                </form>
            </div>
        </div>
    </div>
</div>
    
    </div>
</div>

				</div>
			</main>


@endsection

@section('script')
<script>
    $(function(){
        
        $('.delete_plan').on('click' , function(){
        var dataid = $(this).attr('data-id'); 
        var dataname = $(this).attr('data-name'); 
       

        if (confirm(`are you sure want to delete ${dataname}?`)) {

            window.location.href = "{{secure_url('admin/plans/delete')}}/"+dataid;
            

        }
        })
        
       
    })
</script>
@endsection