@extends('layouts.admin.app')
@section('content')
{{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> --}}
<div class="container-fluid py-4">
	<div class="row">
        <div class="col-12">
			<div class="card my-4">
				<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
					<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
						<h6 class="text-white text-capitalize ps-3">Users Voucher Detail <span style="float:right !important;margin-right: 30px;">Total : {{ count($data02) }}</span></h6>
					</div>
				</div>
                <br>
                @if(Session::has('success'))
                    <div class="alert alert-success text-white mx-3">
                        {{ Session::get('success2') }}
                    </div>
                @endif
                @if(Session::has('error'))
                    <div class="alert alert-danger text-white mx-3">
                        {{ Session::get('error2') }}
                    </div>
                @endif
				<div class="card-body px-0 pb-2">
					<div class="table-responsive p-4">
						<table class="table align-items-center mb-0" id="data_table">
							<thead>
								<tr>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Date</th>
									<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Remark</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Name</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Amount</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Action</th>
								</tr>
							</thead>
							<tbody>
                                @foreach($data02 as $order)
								<tr>
                                    <td class="align-middle text-center text-sm">{{ date('d M Y',strtotime($order->created_at)) }}</td>
                                    <td class="align-middle text-center text-sm" style="max-width: 500px;">
                                        <div class="px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <span class="mb-0 text-sm c-name message-quote">{{Str::limit($order->remark,50, $end='...')}}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="align-middle text-center text-sm">{{ ($order->course_id=='Other')?'Other':$order->name }}</td>
                                    <td class="align-middle text-center text-sm">{{ $order->amount }}</td>
                                    <td class="align-middle text-center text-sm">
                                        <a href="#" class="btn btn-primary open-detail" data-amt="{{ $order->amount }}" data-cid="{{ $order->course_id }}" data-remark="{{ $order->remark }}" data-id="{{ $order->id }}">
                                             <i class="material-icons">edit</i>
                                        </a>
                                    </td>
								</tr>
                                @endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12">
			<div class="card my-4">
				<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
					<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
						<h6 class="text-white text-capitalize ps-3">Users Order Detail <span style="float:right !important;margin-right: 30px;">Total : {{ count($data01) }}</span></h6>
					</div>
				</div>
                <br>
                @if(Session::has('success'))
                    <div class="alert alert-success text-white mx-3">
                        {{ Session::get('success') }}
                    </div>
                @endif
                @if(Session::has('error'))
                    <div class="alert alert-danger text-white mx-3">
                        {{ Session::get('error') }}
                    </div>
                @endif
				<div class="card-body px-0 pb-2">
                    {{-- <form action="{{route('admin.users-management.index')}}" id="filterForm" method="get">
                        @csrf
                        <div class="row">
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline" style="margin: 12px;">
                                    <label class="" style="padding:8px 12px;margin: unset;"> From date </label>
                                    <input type="date" style="padding:unset;width: 50%;" class="form-control" name="fromdate" id="fromdate" value="@if(request()->fromdate){{date('Y/m/d',strtotime(request()->fromdate))}}@endif">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline" style="margin: 12px;">
                                    <label class="" style="padding:8px 12px;margin: unset;"> To date </label>
                                    <input type="date" style="padding:unset;width: 50%;" class="form-control " name="todate" id="todate" value="@if(request()->todate){{date('d/m/Y',strtotime(request()->todate))}}@endif">
                                    </div>
                                </div>
                                    <div class="col-md-4">
                                        <div class="input-group input-group-outline" style="margin: 12px;">
                                            <button class="btn btn-primary" type="submit" style="margin-right:15px">
                                                        <i class="material-icons"></i>Search
                                            </button>

                                            <a class="btn btn-success" href="{{route('admin.users-query.index')}}">
                                                        <i class="material-icons"></i>Reset
                                            </a>
                                        </div>
                                    </div>
                        </div>
                    </form> --}}
					<div class="table-responsive p-4">
						<table class="table align-items-center mb-0" id="data_table02">
							<thead>
								<tr>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Date</th>
									<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Remark</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Name</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Amount</th>
								</tr>
							</thead>
							<tbody>
                                @foreach($data01 as $order)
								<tr>
                                    <td class="align-middle text-center text-sm">{{ date('d M Y',strtotime($order->created_at)) }}</td>
									<td class="align-middle text-center text-sm"></td>
                                    <td class="align-middle text-center text-sm">{{ $order->name }}</td>
                                    <td class="align-middle text-center text-sm">{{ $order->course_amount }}</td>
								</tr>
                                @endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

    @include('layouts.admin.footer')
</div>

<div class="modal" id="detail-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <!-- Modal content-->
        <form id="UpdateDetail">
            @csrf
            <input type="hidden" name="id" id="id-field">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><span class="mdl_title"></span> User</h4>
                    <button type="button" class="btn close" data-bs-dismiss="modal">&times;</button>
                </div>
                
                <div class="modal-body">
                        <div class="form-group mb-4">
                            <!-- <label for="name">Name</label> -->
                            <select class="form-control" id="course-field" name="course">
                                @foreach ($courseData as $item)
                                    <option value="Other">Other</option>
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                            <p style="margin-bottom: 2px;" class="text-danger error-container" id="error-course"></p>
                        </div>
                        <div class="form-group mb-4">
                            <!-- <label for="mobile">Mobile</label> -->
                            <textarea rows="8" class="form-control" id="remark-field" name="remark"></textarea>
                        </div>
                        <div class="form-group mb-4">
                            <!-- <label for="name">Name</label> -->
                            <input type="text" class="form-control" id="amount-field" name="amount" placeholder="Amount" autofocus>
                            <p style="margin-bottom: 2px;" class="text-danger error-container" id="error-amount"></p>
                        </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary voucherSave">Update</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                    <br><span class="text-danger w-100 text-center e-lable field-error" ></span>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // $('.select2').select2();
    $(document).ready(function() {
        $('#data_table02').DataTable();
    });

    $(document).on('click','.open-detail', function(){
        $('#remark-field').text($(this).data('remark'));
        $('#amount-field').val($(this).data('amt'));
        $('#course-field').val($(this).data('cid'));
        $('#id-field').val($(this).data('id'));
        $('#detail-modal').modal('show');
    });

    $(document).on('click','.voucherSave', function(){
        $('.error-container').html('');
        var formData = new FormData($("#UpdateDetail")[0]);
        var id = $('#id-field').val();

        if($(this).text()=='Update')
        {
            var url = "{{ route('admin.users-management.update',':id') }}";
            url = url.replace(':id', id);
            formData.append("_method", 'PUT');
        }
        else{
            var url = "{{ route('admin.users-management.store') }}";
        }

        $.ajax({
            url: url,
            type: "POST",
            data : formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                $('.e-lable').html('');
                layon();
            },
            success: function(data){
                // alert(data);
                if(data.success==false)
                {
                    $.each( data.message, function( key, value ) {
                        $('#error-'+key).html(value);
                    });
                }
                else{
                    $('#catModal').modal('hide');
                    toastr.success(data.message, '', {timeOut: 5000})
                    location.reload();
                }

                // FetchData();
                layoff();
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                layoff();
            }
        });
    });
    
</script>
@endsection