@extends('layouts.admin.app')

@section('content')
<link  href="{{url('css/jquery.dataTables.min.css')}}" rel="stylesheet">
  <div class="center-container">
        <div class="admin-box full-width">
            <div class="container">
            @if(session('flash_success'))
                <div class="alert alert-success" role="alert">
                  <button type="button" class="close" data-dismiss="alert">×</button>
                    {{ session('flash_success') }}
                </div>
            @endif
                <div class="admin-title">
                    <h2>{{$data['firstname'].' '.$data['lastname']}}</h2>
                    <div class="title-name-logo">
                        VADSØ KOMMUNE <img src="{{asset('images/vads-logo.png')}}">
                    </div>  
                </div>
               <div class="user-detail-main mt-3 full-width">
                    <div class="user-detail-top box-shadow full-width">
                        <div class=" user-detail-top-info">
                            <h2>{{$data['firstname'].' '.$data['lastname']}}</h2>
                            <p>
                                <b>F. {{date('d.m.Y',strtotime($data['birthdate']))}}</b> 
                                {{$data['address']}}
                            </p>
                        </div>
                        <div class="user-detail-top-info">
                            <label for="">{{trans('child_detail.attached_parent')}}</label>
                            <h3>{{$data['parent']['firstname'].' '.$data['parent']['lastname']}}</h3>
                            <span><b>{{trans('child_detail.phone_no')}}</b> : {{$data['phone']}}</span>
                        </div>

                        <div class="user-balance-info">
                            <div class="user-balance-top">
                                <span>{{trans('child_detail.balance')}}</span>
                                <b>Kr. <span><b id="subsidy_amount_text">{{$helper->price($data['subsidy_amount'])}}</b></span></b>
                            </div>
                            <div id="subsidy_div">
                            	<a href="#" class="primary-btn full-width sub-btn" id="edit_subsidy"><img src="{{asset('images/edit-icon-white.svg')}}">{{trans('child_detail.edit_activity_provider')}}</a>
                            	<div id="subsidy_edit" style="display: none;">
                            		<form id="subsidy_form">
	                            		<div class="lagre-section full-width form-group">
			                                <input type="input" name="subsidy" id="subsidy" value="{{$data['subsidy_amount']}}" class="form-control">
			                                <label for=""><button type="button" id="update_subsidy">{{trans('child_detail.save')}}</button></label>
			                            </div>
                            		</form>
                            	</div>
                            </div>
                        </div>
                    </div>
                    <div class="user-detail-center full-width">
                        <div class="row">
                            <div class="col-md-4">
                                <h2>{{trans('child_detail.activity')}}</h2>
                                <div class="activity-detail-box box-shadow full-width">
                                    <div class="activity-detail-title">{{trans('child_detail.activity_nd_provider')}}</div>
                                   {{--  <ul class="activity-detail-info">
                                        <li>
                                            <div class="activity-detail-info-img">
                                                <img src="images/logo-n.svg">
                                            </div>
                                            <div class="activity-detail-info-text">
                                                <b>Gutter 14 år – Høst 2021</b>
                                                <span>Innebandy</span>
                                            </div>
                                        </li>
                                    </ul> --}}
                                    <div class="table-responsive box-shadow">
	                                    <table id="child_activity_table" class="activity-detail-info table data-table action-col tableDesign ">
	                                        <thead>
	                                            <tr>
	                                                <th>id</th>
	                                                <th>{{trans('child_detail.activity')}}</th>
	                                                <th>{{trans('child_detail.payment')}}</th>
	                                            </tr>
	                                        </thead>
	                                        <tbody></tbody>
	                                    </table>
	                                </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <h2>{{trans('child_detail.transactionlist')}}</h2>
                                <div class="table-responsive box-shadow">
                                    <table id="child_transaction_table" class="table data-table action-col tableDesign ">
                                        <thead >
                                            <tr>
                                                <th>id</th>
                                                <th>{{trans('child_detail.activity')}}</th>
                                                <th>{{trans('child_detail.payment')}}</th>
                                                <th>{{trans('child_detail.date')}}</th>
                                                <th>{{trans('child_detail.amount')}}</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        
@endsection
@section('script')
<script src="{{ url('js/datatables.min.js')}}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
    var url = "{{url('admin/child-detail-activities/'.$data['id'])}}";
    var child_activity_table = '';
    initializeDatatable(url);

    var url1 = "{{url('admin/child-detail-transactions/'.$data['id'])}}";
    var child_tra_table = '';
    initializeDatatableTra(url1);

    var validator = $('#subsidy_form').validate({
        rules: {
            "subsidy": {
                required: true
            }
        },
        messages: {
            "subsidy":{
                required: 'Please enter subsidy amount' 
            }
        },
    });

    $("#edit_subsidy").on('click',function(){
    	$(this).hide();
    	$("#subsidy_edit").show();
    	
    });

    $("#update_subsidy").on('click',function(){
    	if($("#subsidy_form").valid()) {
    		// alert();
    		var token    = $("input[name=_token]");
            $.ajax({
                type: "post",
                url: "{{route('update_subsidy')}}",
                data: {
                	id:"{{$data['id']}}",
                	amount:$("#subsidy").val(),
                	_token:token.val()
                },
                cache: false,
                success: function (data)
                {
                    $("#subsidy_edit").hide();
    				$("#edit_subsidy").show();
    				$("#subsidy_amount_text").html(data);
                },
            });
            return false;
        }
    });
});

function initializeDatatable(URL) {
   child_activity_table = $('#child_activity_table').DataTable({
        language: { search: '', searchPlaceholder: "Søk",emptyTable: "Ingen data tilgjengelig i tabellen",zeroRecords: "Fant ingen samsvarende poster",
            "processing":"<p class='dt-loading'>Laster inn..</p>"},    
        processing: true,
        serverSide: true,
        searching: false,
        ajax: URL,
        type: "GET",
        "columnDefs": [
            {"orderable": false, "targets": 1},
            {"searchable": false, "targets": 1},
        ],
        columns: [
            {data: 'id', name: 'id', 'visible': false},
            {data: 'logo', name: 'logo'},
            {data: 'detail', name: 'detail'}
        ],
        "drawCallback": function() {
			$(this.api().table().header()).hide();
		},
    });
}

function initializeDatatableTra(URL) {
   child_tra_table = $('#child_transaction_table').DataTable({
        language: { search: '', searchPlaceholder: "Søk",emptyTable: "Ingen data tilgjengelig i tabellen",zeroRecords: "Fant ingen samsvarende poster",
            "processing":"<p class='dt-loading'>Laster inn..</p>"},
        processing: true,
        serverSide: true,
        searching: false,
        ajax: URL,
        type: "GET",
        "columnDefs": [
            {"orderable": false, "targets": 1},
            {"searchable": false, "targets": 1},
        ],
        columns: [
            {data: 'id', name: 'id', 'visible': false},
            {data: 'activity', name: 'activity'},
            {data: 'account_no', name: 'account_no'},
            {data: 'date', name: 'date'},
            {data: 'amount', name: 'amount'}
        ],
        "drawCallback": function() {
			// $(this.api().table().header()).hide();
		},
    });
}
</script>
@endsection