@extends('adminlte::page')
@section('css')
<style>
    .modal-info input {
        width: 100%;
        border: none
    }

    .modal-info input::before {
        content: ":" !important;
    }
</style>
@stop
@section('content')
<?php Fun::lang() ?>
<div class="title-add">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
            <li><a href="#">Manage Client</a></li>
        </ul>
    </div>
</div>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-add">
                    <div class="pull-left">
                        <h3>Client</h3>
                    </div>
                </div>
                @can('Client-Create')
                <div class="pull-right">
                    <a class="button_sm button_primary" href="{{route('clients.create')}}"><span class="fa fa-plus"></span> Create New</a>
                </div>
                @endcan
            </div>
        </div>
    </div>
    <div class="box-body table-responsive">
        <table id="datatable_report_booking" class="table table-striped table-bordered table-hover nowrap">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Profile</th>
                    <th>Full Name</th>
                    <th>Name In Latin</th>
                    <th>Gender</th>
                    <th>DOB</th>
                    <th>Phone</th>
                    <th>Address</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<div class="modal fade bs-modal-lg" id="viewModal" tabindex="-2" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3 class="modal-title" ​ style="color:black">{{ __('administrator.info_detail') }}</h3>
            </div>
            <br />
            <div class="row modal-info col-sm-12">
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">Profile</label>
                    <div class="col-sm-8"><img src="" alt="Loading" id="profile" style="width: 120px;min-height:50px"></div>
                </div>

                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.firstname') }}</label>
                    <div class="col-sm-8"><input type="text" id="first_name" readonly></div>
                </div>

                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.lastname') }}</label>
                    <div class="col-sm-8"><input type="text" id="last_name" readonly></div>
                </div>

                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.name_in_latin') }}</label>
                    <div class="col-sm-8"><input type="text" id="nick_name" readonly></div>
                </div>

                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.gender') }}</label>
                    <div class="col-sm-8"><input type="text" id="gender" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.dob') }}</label>
                    <div class="col-sm-8"><input type="text" id="dob" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.national') }}</label>
                    <div class="col-sm-8"><input type="text" id="nation" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.phone1') }}</label>
                    <div class="col-sm-8"><input type="text" id="phone1" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.phone2') }}</label>
                    <div class="col-sm-8"><input type="text" id="phone2" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.job') }}</label>
                    <div class="col-sm-8"><input type="text" id="job" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.workplace') }}</label>
                    <div class="col-sm-8"><input type="text" id="work_place" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.card_id') }}</label>
                    <div class="col-sm-8"><input type="text" id="card_id" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.date_card') }}</label>
                    <div class="col-sm-8"><input type="text" id="date_card" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.card_valid') }}</label>
                    <div class="col-sm-8"><input type="text" id="card_valid" readonly></div>
                </div>
                <div class="col-sm-12">
                    <label for="" class="col-sm-4">{{ __('administrator.address') }}</label>
                    <div class="col-sm-8"><input type="text" id="address" readonly></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-danger"><i class="fa fa-close"></i> {{ __('administrator.close') }}
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '.btn-view', function() {
            var id = $(this).data('id');
            var route = "{{route('clients.show',':id')}}";
            route = route.replace(':id', id);
            $('#main-spinner').show();
            $.ajax({
                url: route,
                type: 'GET',
                data: {
                    _token: "{{csrf_token()}}",
                },
                success: function(response) {
                    $('#main-spinner').hide();
                    var data = response['data'];
                    var image = data.client_img;
                    var profile = "{{asset('assets/images/resize')}}" + '/' + image;
                    if(!image || image.length<5){
                        profile = "{{asset('assets/images/default.png')}}";
                    }
                    var dob = data.client_dob;
                    if(dob){
                        dob = dob.split('-');
                        dob = dob[2]+'-'+dob[1]+'-'+dob[0];
                    }
                    $('#profile').attr('src', profile);
                    $('#first_name').val(data.client_firstname);
                    $('#last_name').val(data.client_lastname);
                    $('#nick_name').val(data.client_nickname);
                    $('#gender').val(data.client_gender);
                    $('#dob').val(dob);
                    $('#nation').val(data.client_national);
                    $('#phone1').val(data.client_phone1);
                    $('#phone2').val(data.client_phone2);
                    $('#job').val(data.client_job);
                    $('#work_place').val(data.client_workplace);
                    $('#card_id').val(data.client_cardid);
                    $('#date_card').val(data.client_datecard!=null?data.client_datecard.split("-")[2]+"-"+data.client_datecard.split("-")[1]+"-"+data.client_datecard.split("-")[0]:"");
                    $('#card_valid').val(data.client_cardvalid!=null?data.client_cardvalid.split("-")[2]+"-"+data.client_cardvalid.split("-")[1]+"-"+data.client_cardvalid.split("-")[0]:"");
                    $('#address').val(data.address);
                    $('#viewModal').modal('show');
                }
            });
        });
        $('#main-spinner').show();
        $('#datatable_report_booking').DataTable({
            ordering: false,
            serverSide: true,
            ajax: "{{ route('datatable.get_report_client') }}",
            columns: [

                {
                    data: 'DT_RowIndex'
                },
                {
                    "data": "image",
                    "render": function(data, type, row) {
                        return '<center><img class="img-circle" src="' + data + '" border="0" width="40" class="img-rounded" /></center>';
                    }
                },
                {
                    data: "client_fullname"
                },
                {
                    data: "client_nickname"
                },
                {
                    data: "client_gender"
                },
                {
                    data: "client_dob"
                },
                {
                    data: "client_phone1"
                },
                {
                    data: "address"
                },
                {
                    data: "action"
                },

            ],
            "initComplete": function(settings, json) {
                $('#main-spinner').hide();
            }

        });

        $.fn.dataTable.ext.errMode = 'throw';
    });
</script>

@endsection