@extends('layouts.adminapp')
@section('content')
    {{-- Salary Package --}}
    <x-app-flash />
    <x-members-modal>
    </x-members-modal>
    <style>
        .switch {
          position: relative;
          display: inline-block;
          width: 60px;
          height: 34px;
        }
    
        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }
    
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc;
          -webkit-transition: .4s;
          transition: .4s;
        }
    
        .slider:before {
          position: absolute;
          content: "";
          height: 26px;
          width: 26px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          -webkit-transition: .4s;
          transition: .4s;
        }
    
        input:checked + .slider {
          background-color: #2196F3;
        }
    
        input:focus + .slider {
          box-shadow: 0 0 1px #2196F3;
        }
    
        input:checked + .slider:before {
          -webkit-transform: translateX(26px);
          -ms-transform: translateX(26px);
          transform: translateX(26px);
        }
    
        /* Rounded sliders */
        .slider.round {
          border-radius: 34px;
        }
    
        .slider.round:before {
          border-radius: 50%;
        }
    </style>
    <div class=" mb-4">
        <div class="d-flex  justify-content-start p-2" style="width:50%;float:left;">
            <h5 class="m-0 ">{{$Kuri->title}}</h5>
        </div>
        <div class="d-flex  justify-content-end p-2">
            <a class="btn btn-primary btn-icon-split btn-sm" href="{{ route('Kuri.show',$Kuri->id) }}">
                <span class="icon text-white-50">
                    <i class="fas fa-arrow-left"></i>
                </span>
                <span class="text">{{ __('lng.Back') }}</span>
            </a>
        </div>
    </div>
    <form method="POST" action="{{route('KuriMembers.store')}}" enctype='multipart/form-data'>
       @csrf
       <input type="hidden" value="{{$Kuri->id}}" id="ClassID" name="class_id">
       <div class="card shadow mb-3">
           
           <div class="card-header">        
               <div class="d-flex align-items-center">
                   <div class="p-1  flex-fill bd-highlight">
                      <h4>{{__('lng.AddMember')}}</h4>
                   </div>
                   <div>
                       <h5> {{__('lng.Guest')}}</h5>
                       <label class="switch">
                           <input type="checkbox" onclick="guest()" id="guestCheck">
                           <span class="slider round"></span>
                         </label>
                   </div>
               </div>  
           </div>
           <div class="card-body">
               <div class="row">

                <input name='kuri_id' id="kuri_id" type='hidden' value='{{$Kuri->id}}'>
                
                {{-- <=================== Start MEMBER DIV==========================> --}}
                <div class="col-sm-6 form-group" id="MemberDiv">
                    <label for="txtTitle">{{__('lng.Member')}}</label>
                    <div class="input-group mb-3">
                        <input type="hidden" name="member_id" id="MemberID">
                        <input type="text" name="member_name" id="txtMember" class="form-control" placeholder="Select Member" disabled="" aria-label="Select Member" aria-describedby="basic-addon2" value="">
                          <div class="input-group-append">
                              <button class="btn btn-dark" type="button" onclick="ChooseMemeber()">Choose</button>
                          </div>
                    </div>
                </div>
                {{-- <=================== End MEMBER DIV==========================> --}}


                   <div class="col-sm-6 form-group">
                        <label for="register_no">{{__('lng.RegisterNo')}}</label>
                        <input type="text" class="form-control @error('register_no') is-invalid @enderror" name="register_no" id="register_no" required/>
                        @error('register_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    

                        {{-- <=================== Start Guest DIV==========================> --}}
                        <div class="col-sm-6 form-group" id="GuestName" style="display: none">
                            <label for="txtTitle">{{__('lng.Name')}}</label>
                            <div class="input-group mb-3">
                                <input type="text" name="name" id="txtMember" class="form-control"  >
                            </div>
                        </div>
                        <div class="col-sm-6 form-group" id="GuestPhone" style="display: none">
                            <label for="txtTitle">{{__('lng.Phone')}}</label>
                            <div class="input-group mb-3">
                                <input type="text" name="phone" id="txtMember" class="form-control"  >
                            </div>
                        </div>
                        <div class="col-sm-6 form-group" id="GuestAddress" style="display: none">
                            <label for="txtTitle">{{__('lng.Address')}}</label>
                            <div class="input-group mb-3">
                                <input type="text" name="address" id="txtMember" class="form-control"  >
                            </div>
                        </div>

                            <input name='is_gust' id="isguest" type='hidden' value='0'>
                        {{-- <=================== End Guest DIV==========================> --}}

                    <div class="col-sm-6 form-group">
                        <label for="Part">{{__('lng.Part')}} </label>
                        <select class="form-control" id="Part" name="part" onchange="ChangePart(this.value);">
                            @foreach (App\Extra\General\PublicConstants::PARTS as $value => $Sign)
                                <option value="{{ $value }}">{{ $Sign }}</option>
                            @endforeach
                         </select>
                    </div>
                   <div class="col-sm-6 form-group">
                       <label for="ChitAmount">{{__('lng.Amount')}}</label>
                       <input type="number" value="@amount($Kuri->amount)" class="form-control @error('amount') is-invalid @enderror" name="amount" id="ChitAmount" required readonly/>
                       @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                   </div>
               </div>
           </div>
           <div class="card-footer">
               <div class="d-flex  justify-content-end p-2">
                   <button type="reset" class="btn btn-secondary btn-icon-split mr-2 btn-sm" name="btnSave">
                       <span class="icon text-white-50">
                           <i class="fas fa-trash"></i>
                       </span>
                       <span class="text">{{__('lng.Clear')}}</span>
                   </button>
                   <button type="submit" class="btn btn-success btn-icon-split btn-sm">
                       <span class="icon text-white-50">
                           <i class="fas fa-check"></i>
                       </span>
                       <span class="text">{{__('lng.Save')}}</span>
                   </button>
               </div>
           </div>
       </div>
   </form>


   
   <!-- DataTales Example -->
   <div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
       <h6 class="m-0 font-weight-bold text-primary"> {{ __('lng.KuriMembers') }}</h6>
       {{-- <div class="input-group w-25 input-search">
          <input type="month" id="SelectMonth" class="form-control bg-light  small" placeholder="{{ __('lng.SearchFor') }}"
             aria-label="Search" aria-describedby="basic-addon2">
          <div class="input-group-append">
             <button class="btn btn-primary" type="button" onclick="Search()">
                <i class="fas fa-search fa-sm"></i>
             </button>
          </div>
       </div> --}}
    </div>
    <div class="card-body">
       <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
             <thead>
                <tr>
                   <th>{{ __('lng.SiNo') }}</th>
                   <th>{{ __('lng.RegisterNo') }}</th>
                   <th>{{ __('lng.Name') }}</th>
                   <th>{{ __('lng.Phone') }}</th>
                   <th>{{ __('lng.Amount') }}</th>
                   <th class="text-center" colspan="2">{{ __('lng.Action') }}</th>
                </tr>
             </thead>
             <tbody id="result-tbl">
                @php $si=0; @endphp
                @foreach ($KuriMembers as $KuriMember)
                   <tr>
                      @php $month =  date("F-Y",strtotime($KuriMember->month));@endphp
                      <td>{{ ++$si }}</td>
                      <td>{{ $KuriMember->register_no }}</td>
                      <td>{{ $KuriMember->Member->name ?? $KuriMember->name }}</td>
                      <td>{{ $KuriMember->Member->contact ?? $KuriMember->phone }}</td>
                      <td>@currency($KuriMember->amount )</td>
                      <td class="text-center">
                          <a href="{{route('KuriEditMember',$KuriMember->id)}}" class="btn btn-primary btn-circle btn-sm" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{__('lng.Edit')}}">
                              <i class="fas fa-pen"></i>
                          </a>
                      </td>
                      <td class="text-center">
                            <form method="POST" action="{{ route('KuriMembers.destroy', $KuriMember->id) }}"
                               Id="form-delete-{{ $KuriMember->id }}">
                               @csrf
                               @method('delete')
                               <a class="btn btn-danger btn-circle btn-sm mr-3" onclick="
                                     event.preventDefault();
                                     if(confirm('Are you sure delete this'))
                                     {
                                         document.getElementById('form-delete-{{ $KuriMember->id }}').submit();
                                     }" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Delete">
                                  <i class="fas fa-trash"></i>
                               </a>
                            </form>
                         </div>
                      </td>
                   </tr>
                @endforeach
             </tbody>
          </table>
          <p class="mb-0">{{ $KuriMembers->count() }} {{ __('lng.Items') }}</p>
       </div>
    </div>
    <div class="card-footer">
       {{ $KuriMembers->links() }}
    </div>
   
<script>



    function guest() {
        var remember = document.getElementById("guestCheck");
        if (remember.checked) {
             document.getElementById("MemberDiv").style.display="none";
             document.getElementById("GuestName").style.display="block";
             document.getElementById("GuestAddress").style.display="block";
             document.getElementById("GuestPhone").style.display="block";
             document.getElementById("isguest").value=1;
             document.getElementById("MemberID").value=null;
        } else {
             document.getElementById("MemberDiv").style.display="block";
             document.getElementById("GuestName").style.display="none";
             document.getElementById("GuestAddress").style.display="none";
             document.getElementById("GuestPhone").style.display="none";
             document.getElementById("isguest").value=0;
        }
        }

    var ChitAmount=document.getElementById("ChitAmount").value;
    function ChangePart(Value) {
            var CalculateAmount=Value*ChitAmount;
             document.getElementById("ChitAmount").value=CalculateAmount;
        }

</script>
@endsection