@extends('layouts.adminapp')

@section('content')
    {{-- Member Registeration --}}
    <x-app-flash />
    <div class=" mb-4">
        <div class="d-flex  justify-content-start p-2" style="width:50%;float:left;">
            <h5 class="m-0 ">{{ $TokenDistribution->title }}</h5>
        </div>
        <div class="d-flex  justify-content-end p-2">
            <a class="btn btn-primary btn-icon-split btn-sm" 
            href="{{route('TokenDistribution.index')}}">
                <span class="icon text-white-50">
                    <i class="fas fa-arrow-left"></i>
                </span>
                <span class="text">{{ __('lng.Back') }}</span>
            </a>
        </div>
    </div>
    {{-- <h1 class="h3 mb-2 text-gray-800">__('lng.TokenDistributionMembers'){{ $TokenDistribution->title }}</h1> --}}

    <!-- 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.TokenDistributionMembers') }}</h6>
            {{-- <div class="input-group w-25 input-search">
                <input type="text" oninput="Search(this.value)" class="form-control bg-light  small"
                    placeholder="{{ __('lng.SearchName') }}" aria-label="Search" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button">
                        <i class="fas fa-search fa-sm"></i>
                    </button>
                </div>
            </div>  --}}

            <div>
                <a href="{{route('TokenPayment',$TokenDistribution->id)}}"  class="btn btn-success btn-icon-split btn-sm">
                    <span class="icon text-white-50">
                        <i class="fas fa-money-bill-wave-alt"></i>
                    </span>
                    <span class="text">{{ __('lng.TokenPayment') }}</span>
                </a>
    
                <button type="button" class="btn btn-primary btn-icon-split btn-sm" data-toggle="modal" data-target="#modalAddMember">
                    <span class="icon text-white-50">
                        <i class="fas fa-plus"></i>
                    </span>
                    <span class="text">{{ __('lng.AddMember') }}</span>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive" id="result-tbl">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>{{ __('lng.SiNo') }}</th>
                            <th>{{ __('lng.Name') }}</th>
                            <th>{{ __('lng.House') }}</th>
                            <th>{{ __('lng.Contact') }}</th>
                            <th >{{ __('lng.Barcode') }}</th>
                            <th>{{ __('lng.Amount')}}</th>
                            <th>{{ __('lng.Payed') }}</th>
                            <th>{{ __('lng.Status') }}</th>
                            <th class="text-center" colspan="2">{{ __('lng.Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $si=0; @endphp
                        @foreach ($Details as $Detail)
                            <tr>
                                <td>{{ ++$si }}</td>
                                {{-- <td class="text-center">
                                    <img width="50px" src="{{PBFunc::ImageLink(PBCon::STORAGE_LOCATION_IMAGE_Member,$Detail->Member->photo)}}" />
                                    
                                </td> --}}
                                <td>{{ $Detail->Member->name }}</td>
                                <td>{{ $Detail->Member->house->name }}</td>
                                <td>{{ $Detail->Member->contact }}</td>
                                <td class="text-center">
                                    <img width="70%" src="https://barcodeapi.org/api/codabar/{{$Detail->token}}" />
                                    
                                </td>
                                <td>@amount($Detail->amount)</td>
                                <td>
                                    <ul class="list-group">
                                        @if($Detail->status)
                                            <li class="list-group-item p-2 m-0">
                                                <div class="d-flex justify-content-between">
                                                    <div>@amount($Detail->amount)</div>
                                                    <div>
                                                        
                                                        <div class="d-flex flex-row align-items-center">
                                                        <button class="btn btn-sm btn-circle btn-outline-primary ml-2" onclick="PaymentEditFill('{{$Detail}}')"><i class="fas fa-pen"></i></button>
                                                       
                                                        <button class="btn btn-sm btn-circle btn-outline-danger ml-2" data-bs-toggle="tooltip" data-bs-placement="bottom" onclick="
                                                        event.preventDefault();
                                                        if(confirm('Are you sure delete this'))
                                                        {
                                                            document.getElementById('form-delete-{{ $Detail->id }}').submit();
                                                        }"><i class="fas fa-trash"></i>
                                                        </button>
                                                        </div>
                                                         <form method="POST" action="{{ route('TokenDistributionDetails.PaymentDelete', $Detail->id) }}"
                                                            Id="form-delete-{{ $Detail->id }}">
                                                            @csrf
                                                            @method('delete')                                                            
                                                        </form>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <small class="font-weight-bold">{{$Detail->vouchernumber}}</small>
                                                    <small>{{date('d-m-Y',strtotime($Detail->date))}}</small>
                                                </div>
                                            </li>
                                        @endif
                                    </ul>
                                </td>  
                                <td>
                                    @if($Detail->status)
                                     
                                    <div class="d-flex flex-row align-items-center">   
                                        <i class="fas fa-check text-success mr-2"></i> {{__('lng.Completed')}}
                                    </div>
                                    @else
                                    <div class="d-flex flex-row align-items-center">
                                        <i class="fas fa-times text-danger mr-2"></i> {{__('lng.Pending')}}
                                    </div>
                                    @endif

                                </td>                       
                                <td class="text-center">
                                    <form method="POST" action="{{ route('TokenDistributionDetails.destroy', $Detail->id) }}"
                                        Id="form-delete-{{ $Detail->id }}">
                                        @csrf
                                        @method('delete')
                                        <button class="btn btn-danger btn-circle btn-sm "
                                            onclick="
                                        event.preventDefault();
                                        if(confirm('Are you sure delete this'))
                                        {
                                            document.getElementById('form-delete-{{ $Detail->id }}').submit();
                                        }"
                                            data-bs-toggle="tooltip" data-bs-placement="bottom"
                                            title="{{ __('lng.Delete') }}"
                                            @if ($Detail->status) 
                                            disabled
                                            @endif  
                                            >
                                            <i class="fas fa-trash"></i>
                                    </button>
                                    </form>
                                </td>   
                                <td class="text-center">
                                    @if (!$Detail->status) 
                                    <button onclick="PaymentAddNew({{$Detail->id}},{{$Detail->amount}});"
                                        class="btn btn-success btn-circle btn-sm" data-bs-toggle="tooltip"
                                        data-bs-placement="bottom" title="{{ __('lng.Payment') }}">
                                        <i class="fas fa-money-bill-wave-alt"></i>
                                    </button>
                                    @endif  
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                {{-- <p class="mb-0">{{$TokenDistributions->count()}} {{__('lng.Items')}}</p> --}}
            </div>
        </div>
        <div class="card-footer table-responsive" id="card-footer">
            {{-- {{$TokenDistributions->links()}} --}}
        </div>
    </div>

    {{-- Add member modal --}}
    <div class="modal fade" id="modalAddMember" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">{{ __('lng.AddMember') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-3 col-md-6 form-group">
                            <label for="cmbMemberType">{{ __('lng.MemberType') }}</label>
                            <select name="cmbMemberType" id="cmbMemberType" class="form-control" onchange="Search();">
                                <option value="Author">Author</option>
                            </select>
                        </div>
                        <div class="col-sm-3 col-md-6 form-group">
                            <label for="txtSearchMember">{{ __('lng.Member') }}</label>
                            <input type="text" name="txtSearchMember" id="txtSearchMember" class="form-control"
                                placeholder="{{ __('lng.Name') }}/{{ __('lng.Contact') }}" oninput="Search();">
                        </div>
                        <div class="col-sm-3 col-md-6 ">
                            <label for="selectMigration">{{ __('lng.IsEmigrant') }}</label>
                            <select name="selectMigration" id="selectMigration" class="form-control" onchange="Search();">
                                <option value="0">{{ __('lng.All') }}</option>
                                @foreach (App\Extra\General\PublicConstants::MIGRATION_STATUS as $STATUS)
                                    <option value="{{ $STATUS }}">{{ $STATUS }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-3 col-md-6 form-group">
                            <label for="selectGender">{{ __('lng.Gender') }}</label>
                            <select name="selectGender" id="selectGender" class="form-control" onchange="Search();">
                                @foreach (\App\Extra\General\PublicConstants::GENDERS as $GENDER)
                                    <option value="{{ $GENDER }}">{{ $GENDER }}</option>
                                @endforeach
                                <option value="0">{{ __('lng.All') }}</option>
                            </select>
                        </div>
                        <div class="col-sm col-md-12 col-lg-6 form-group">
                            <label for="txtSearchMember">{{ __('lng.AgeFromTo') }}</label>
                            <div class="row">
                                <div class="col-sm-6 col-md">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"
                                                id="inputGroup-sizing-sm">{{ __('lng.From') }}</span>
                                        </div>
                                        <input type="number" name="numAgeMin" id="numAgeMin" value="0"
                                            class="form-control" oninput="Search();" />
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"
                                                id="inputGroup-sizing-sm">{{ __('lng.To') }}</span>
                                        </div>
                                        <input type="number" name="numAgeMax" id="numAgeMax" value="0"
                                            class="form-control" oninput="Search();" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form action="{{ route('TokenDistributionDetails.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="TokenDistributionID" value="{{$TokenDistribution->id}}">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{ __('lng.Photo') }}</th>
                                                <th>{{ __('lng.Name') }}</th>
                                                <th>{{ __('lng.House') }}</th>
                                                <th>{{ __('lng.Contact') }}</th>
                                                <th><input type="checkbox" id="chkSelectAll" onclick="SelectAllCheckBoxes(this)">
                                                    <label for="chkSelectAll">{{ __('lng.SelectAll') }}</label>
                                                </th>
                                                <th>{{ __('lng.Amount') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="selectMember"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <button  type="submit"class="btn btn-primary">{{ __('lng.AddToTokenDistribution') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>        
    </div>

    {{-- payment modal --}}
    <div class="modal fade" id="modalPayment" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form action="{{route('TokenDistributionDetails.store')}}" method="POST" id="frmPayment">
            @csrf
            <div id="divForMethod"></div>
            <input type="hidden" name="token_distribution_details_id" id="hdnTokenDistributionDetailsID"/>
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ __('lng.Payment') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12 col-sm col-md form-group">
                                <label for="dtDate">{{__('lng.Date')}}</label>
                                <input type="date" id="dtDate" name="date" class="form-control"/>
                            </div>
                            <div class="col-lg-12 col-sm col-md form-group">
                                <label for="cbHead">{{__('lng.Head')}}</label>
                                <select class="form-control" id="cbHead" name="head" >
                                    @php
                                        echo App\Http\Controllers\DonationController::DonationHeadListForCombo(0);
                                    @endphp
                                </select>
                            </div>
                            <div class="col-lg-12 col-sm col-md form-group">
                                <label for="numAmount">{{__('lng.Amount')}}</label>
                                <input type="number" id="numAmount" name="amount" class="form-control" readonly/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('lng.Close') }}</button>
                        <button type="submit" class="btn btn-success">{{ __('lng.Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    
    <script>
        Search();
        function Search() {
            var TokenDistributionID = '{{$TokenDistribution->id}}';
            $.ajax({
                url: '{{ route('SearchMemberForTokenDistribution') }}',
                method: "get",
                data: {
                    _token: '{{ csrf_token() }}',
                    Value: document.getElementById('txtSearchMember').value,
                    Type: document.getElementById('cmbMemberType').value,
                    isEmigrant: document.getElementById('selectMigration').value,
                    Gender: document.getElementById('selectGender').value,
                    AgeFrom: document.getElementById('numAgeMin').value,
                    AgeTo: document.getElementById('numAgeMax').value,
                    TokenDistributionID: TokenDistributionID
                },
                success: function(response) {
                    document.getElementById('selectMember').innerHTML = response;
                }
            });
        }

        function AddItem(CheckBox) {
            var TextBoxID = CheckBox.getAttribute("data-textboxid");
            TextBox = document.getElementById(TextBoxID);
            if (CheckBox.checked) {
                TextBox.classList.remove('invisible');
                TextBox.value = '@amount($TokenDistribution->amount)';
            } else {
                TextBox.classList.add('invisible');
                TextBox.value = '0';
            }
        }

        function SelectAllCheckBoxes(CheckAll) {
            chkMEmbers = document.getElementsByClassName("MemberClass");
            for (var i = 0; i < chkMEmbers.length; i++) {
                chkMEmbers[i].checked = CheckAll.checked;
                AddItem(chkMEmbers[i]);
            }
        }
        function EditFill(td)
        {
            if(td.childElementCount==0)
            {
                var Amount=td.innerHTML;
                var TokenDistributionDetailsID = td.getAttribute("data-TokenDistributionDetailsID");

                var divInputGroup=document.createElement("div");
                divInputGroup.classList.add("input-group");

                var txtAmount=document.createElement("input");   
                txtAmount.classList.add("form-control");
                txtAmount.setAttribute("type","number");
                txtAmount.value=Amount;
                txtAmount.setAttribute("id","txtAmount"+TokenDistributionDetailsID);
                td.innerHTML="";
                txtAmount.focus();
                divInputGroup.appendChild(txtAmount);

                var btnUpdate=document.createElement("button");  
                btnUpdate.setAttribute("type","button"); 
                btnUpdate.classList.add("btn","btn-primary");
                btnUpdate.innerHTML='<i class="fas fa-check"></i>';
                btnUpdate.setAttribute('onclick','Update(this,'+TokenDistributionDetailsID+','+"'txtAmount"+TokenDistributionDetailsID+"');");
                
                var divAppend=document.createElement("div");
                divAppend.classList.add("input-group-append");
                divAppend.appendChild(btnUpdate);

                divInputGroup.appendChild(divAppend);
                td.appendChild(divInputGroup);
            }
        }
        function Update(btnUpdate,TokenDistributionDetailsID,txtAmountID)
        {
            var Amount=document.getElementById(txtAmountID).value;
            $.ajax({
                type: 'POST',
                url: '{{url('/TokenDistributionDetails')}}/'+TokenDistributionDetailsID,
                data:{
                    _method:'PATCH',
                    _token:'{{csrf_token()}}',
                    Amount:Amount
                },
                success: function(response) {
                    var td=btnUpdate.parentNode.parentNode.parentNode;
                    td.innerHTML=response;
                }
            });
        }

        function PaymentClear()
        {

        }

        function PaymentAddNew(DetailsID,Amount)
        {
            document.getElementById('divForMethod').innerHTML="";
            document.getElementById('frmPayment').reset();
            document.getElementById('frmPayment').action="{{route('TokenDistributionDetails.Payment')}}";
            document.getElementById('numAmount').value=Amount;
            document.getElementById('hdnTokenDistributionDetailsID').value=DetailsID;
            document.getElementById('dtDate').value='{{date('Y-m-d')}}';
            $('#modalPayment').modal('show');
        }

        function PaymentEditFill(PaymentString)
        {     
            var Payment = JSON.parse(PaymentString);
            document.getElementById('divForMethod').innerHTML='<input type="hidden" name="_method" value="PATCH"/>';
            document.getElementById('frmPayment').action="{{url('TokenDistributionPaymentUpdate/')}}/"+Payment.id;
            document.getElementById('numAmount').value=Payment.amount;
            var date1=new Date(Payment.date.substring(0, 10)).toISOString("UTC").substring(0, 10);
            document.getElementById('dtDate').value=date1;
            document.getElementById('cbHead').value=Payment.head;
            $('#modalPayment').modal('show');
        }
    </script>
@endsection