@extends('backend.layout.master')
@include('backend.kinder-garden.css')
@section('content')
    <style type="text/css">
    .dropdown-menu.subscription_details {
        width: 50%;
        right: 0;
        font-size: 17px;
        color: #ffffff;
        background: #7A43D4 ;
    }
    .subscription_details.show{
        position: absolute;
    will-change: transform;
    top: 0px;
    left: 0px;
    transform: translate3d(518px, 199px, 0px);
    }
  </style>
    
    <!--Start Hero-->
      <section class="hero-section business-startup">
              <div class="container">
                <div class="row">
                  <div class="col-md-9">
                    <div class="heading mb-3"><h2>Childcares</h2></div>
                  </div>
                  <div class="col-md-3">
                    
                    <a href="{{route('kinder-garden.add')}}">
                      <button type="button" class="btn btn-primary round mr-1 mb-2 add-childcare">
                        <i class="fas fa-plus-circle"></i> Add New Childcare
                      </button>
                    </a>

                    <!-- <a href="{{route('kids.archive-index')}}">
                        <button type="button" class="btn btn-light-primary round mr-1  mb-2">
                            <i class="fas fa-archive"></i> Archive
                        </button>
                    </a> -->

                  </div>
                </div>
                
                <div class="row">
                  <div class="col-md-12">
                    <div class="card shadow-0 border card_border_radius_admin">
                      <div class="card-body">
                        <div class="table-responsive admin-index">

                          @if(session()->has('success'))
                                <div class="alert alert-success hide-alert">
                                    {{ session()->get('success') }}
                                </div>
                            @endif

                          <table class="table zero-configuration" id="list_kinder_garden">
                          <!-- <table class="table"  id="kinder_garden_table"> -->
                              <thead>
                                  <tr>
                                      <th style="display: none">#</th>
                                      <th data-orderable="false">Name</th>
                                      <th data-orderable="false">Email</th>
                                      <th data-orderable="false">Phone</th>
                                      <th data-orderable="false">Subscription Status</th>
                                      <th data-orderable="false">Date</th>
                                      <th data-orderable="false">Action</th>
                                      
                                  </tr>
                              </thead>
                              <tbody>

                                @foreach($kgs as $kg)
                                        <tr class="edit-search-content All">
                                            <td style="display: none">{{$kg->id}}</td>
                                            <td>{{$kg->name}}</td>
                                            <td>{{$kg->email}}</td>
                                            <td>{{$kg->phone}}</td>
                                            <td>@if($kg->is_subscription_active)
                                                    <!-- <label class="switch">
                                                        <div class="badge badge-pill badge-success mr-1 mb-1">Active</div>
                                                    </label> -->
                                                    <div class="switch">
                                                      <input class="switch_inp" id="{{$kg['id']}}" data-id="{{$kg['id']}}" data-status="{{$kg->is_subscription_active == 1 ? 0 : 1}}"  type="checkbox" checked>
                                                      <label>
                                                        <span class="fontawesome-ok"></span>
                                                        <span class="fontawesome-remove"></span>
                                                        <div></div>
                                                      </label>
                                                    </div>

                                                    <button class="badge badge-pill btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-eye"></i></button>

                                                    <div class="dropdown-menu subscription_details p-2 bg-color1 " x-placement="bottom-start" >

                                                        <div class="row">
                                                            <div class="col-md-6"><strong>Start Date: </strong></div>
                                                            <div class="col-md-6">{{date("m/d/Y",strtotime($kg->subscription_start))}}</div>

                                                            <div class="col-md-6"><strong>End Date: </strong></div>
                                                            <div class="col-md-6">{{date("m/d/Y",strtotime($kg->subscription_expiry))}}</div>

                                                            <div class="col-md-6"><strong>Last Payment on: </strong></div>
                                                            <div class="col-md-6">@if(isset($kg['payments']))
                                                                    {{date("m/d/Y h:i A",strtotime($kg['payments']->created_at))}}
                                                                @endif</div>

                                                            <div class="col-md-6"><strong>Amount Paid: </strong></div>
                                                            <div class="col-md-6">@if(isset($kg['payments']))
                                                                    ${{$kg['payments']->amount}}
                                                                @endif</div>
                                                          
                                                        </div>

                                                    </div>

                                                @else
                                                <div class="switch">
                                                  <input class="switch_inp" id="{{$kg['id']}}" data-id="{{$kg['id']}}" data-status="{{$kg->is_subscription_active == 1 ? 0 : 1}}" type="checkbox">
                                                  <label>
                                                    <span class="fontawesome-ok"></span>
                                                    <span class="fontawesome-remove"></span>
                                                    <div></div>
                                                  </label>
                                                </div>
                                                    <!-- <label class="switch"> -->
                                                        <!-- <input type="checkbox" checked="false" disabled><span class="switch-state bg-danger"></span>  -->
                                                        <!-- <div class="badge badge-pill badge-danger mr-1 mb-1">Inactive</div>
                                                    </label> -->
                                                @endif
                                            </td>

                                            <td>{{ date('d M Y',strtotime($kg->created_at)) }}</td>
                                            <!-- <td class="">@if($kg->is_subscription_active)
                                                    <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Subscription Details</button>


                                                    <div class="dropdown-menu subscription_details p-2 bg-color1 " x-placement="bottom-start" >

                                                        <div class="row">
                                                            <div class="col-md-6"><strong>Start Date: </strong></div>
                                                            <div class="col-md-6">{{date("m/d/Y",strtotime($kg->subscription_start))}}</div>

                                                            <div class="col-md-6"><strong>End Date: </strong></div>
                                                            <div class="col-md-6">{{date("m/d/Y",strtotime($kg->subscription_expiry))}}</div>

                                                            <div class="col-md-6"><strong>Last Payment on: </strong></div>
                                                            <div class="col-md-6">@if(isset($kg['payments']))
                                                                    {{date("m/d/Y h:i A",strtotime($kg['payments']->created_at))}}
                                                                @endif</div>

                                                            <div class="col-md-6"><strong>Amount Paid: </strong></div>
                                                            <div class="col-md-6">@if(isset($kg['payments']))
                                                                    ${{$kg['payments']->amount}}
                                                                @endif</div>
                                                          
                                                        </div>

                                                    </div>
                                                @endif

                                            </td> -->

                                            <!-- <td style="min-width:200px;"><div class="row actions">
                                                    <div class="col-5" style="padding:0px 5px !important;"><a href="{{route('kinder-garden.edit',$kg['id'])}}"><button class="btn btn-success round btn-sm btn-pill only_icon_admin"><i class="fa fa-pen"></i> Edit</button></a></div>
                                                    <div class="col-7" style="padding:0px 5px !important;"><button class="btn btn-danger round btn-sm btn-pill only_icon_admin ask_delete" data-id="{{$kg['id']}}"><i class="fa fa-trash"></i> Delete</button></div>
                                                </div>
                                            </td> -->

                                            <td>
                                              
                                              <a class="btn btn-success round btn-sm btn-pill only_icon_admin" href="{{route('kinder-garden.edit',$kg['id'])}}"><i class="fa fa-edit"></i> </a>
                                              
                                              <a class="btn btn-danger ask_delete round btn-sm btn-pill only_icon_admin" href="javascript:void(0)"  data-id="{{$kg['id']}}"><i class="fa fa-trash"></i> </a>
                                            </td>

                                        </tr>
                                    @endforeach

                                  
                              </tbody>  
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
      </section>
      <!--End Hero-->



@endsection
@include('backend.kinder-garden.js')