@extends('admin.layout.main_v')
@section('customers_active_class')
    @include('admin.layout.active_class')
@stop
@section('users_active_class')
    @include('admin.layout.active_class')
@stop
@section('style')
    @if(App::getLocale() == 'ar')
        <link href="{{asset('assets/assets_1/datatables/datatables.bundle.rtl.css')}}" rel="stylesheet" type="text/css" />
    @else
        <!--begin::Page Vendors Styles(used by this page) -->
        <link href="{{asset('assets/assets_1/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
        <!--end::Page Vendors Styles -->
    @endif
@stop
@section('js')
    <!--begin::Page Vendors(used by this page) -->
    <script src="{{asset('assets/assets_1/js/demo1/pages/crud/datatables/basic/basic.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/assets_1/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
    <!--end::Page Vendors -->

    <script>
        var data_table_address_url = '{!!route('admin.address.data')!!}';
		var add_edit_url = '{!!route('admin.address.add_edit')!!}';
        var Table = $('#address_table');

        var data_table_bookings_url = '{!!route('admin.bookings.list')!!}';
		var Booking_Table = $('#booking_table');

		var Modal = $('#add_edit');
        $(document).ready(function() {
            Table.DataTable({
                processing: true,
                serverSide: true,
                bLengthChange:false,
                searching:false,
                "pageLength": 50,
                sDom: 'lrtip',
                "order": [[ 0, "desc" ]],
                @include('admin.shared.pagination')
                ajax:{
                    "url":  data_table_address_url,
                    "type": 'GET',
                    "data": function(d) {
                        d.i_user_id = '{{$data['i_user_id']}}'
                    }
                },
                columns: [
                    {className: 'text-center', data: 'pk_i_id', name: 'pk_i_id', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_title', name: 's_title', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_city', name: 's_city', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_block_number', name: 's_block_number', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_street_number', name: 's_street_number', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_building_number', name: 's_building_number', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_phone_number', name: 's_phone_number', orderable: true, searchable: true},
                    {className: 'text-center', data: 'actions', name: 'actions', orderable: true, searchable: true},
                ]
            });

			Booking_Table.DataTable({
				processing: true,
				serverSide: true,
				bLengthChange:false,
				searching:false,
				"pageLength": 50,
				sDom: 'lrtip',
				"order": [[ 0, "desc" ]],
				@include('admin.shared.pagination')
				ajax:{
					"url":  data_table_bookings_url,
					"type": 'GET',
					"data": function(d) {
						d.i_user_id = '{{$data['i_user_id']}}'
					}
				},
				columns: [
					{className: 'text-center', data: 'pk_i_id', name: 'pk_i_id', orderable: true, searchable: true},
					{className: 'text-center', data: 's_vendor_name', name: 's_vendor_name', orderable: true, searchable: true},
					{className: 'text-center', data: 's_booking_type', name: 's_booking_type', orderable: true, searchable: true},
					{className: 'text-center', data: 'd_paid_amount', name: 'd_paid_amount', orderable: true, searchable: true},
					{className: 'text-center', data: 'd_pending_amount', name: 'd_pending_amount', orderable: true, searchable: true},
					{className: 'text-center', data: 's_status', name: 's_status', orderable: true, searchable: true},
					{className: 'text-center', data: 'actions', name: 'actions', orderable: true, searchable: true},
				]
			});

			$('#app_delete_modal .ok').click(function (e) {
				e.preventDefault();
				var data = $('#app_delete_form').serializeArray();
				var urlDelete = data[2].value;
				$.ajax({
					url : urlDelete,
					data : data,
					type: "POST",
					beforeSend(){
						block_modal('app_delete_modal','{{trans('general.text_please_wait')}} ...');
					},
					success:function(data) {
						if(data.success){
							$('#app_delete_modal').modal('hide');
							Table.DataTable().ajax.reload();
							showAlertMessage('success','{{$data['name']}} / ', data.message);
						}
						else
							showAlertMessage('danger', '{{$data['name']}} / ' ,  data.message, 1000);
						un_block_modal('app_delete_modal');
					},
					error:function(data){},
					statusCode: {500: function(data){}}
				});
			});
        });

        function showModal(id, modal_id, url, token, validate) {
            $.ajax({
                url: url,
                data: {'pk_i_id': id, '_token': token},
                type: "POST",
                beforeSend() {
                    block_page('Please Wait...');
                },
                success: function (data) {
                    if (data.success) {
                        $('#' + modal_id).html(data.page).modal('show', {backdrop: 'static', keyboard: false});
                        if (typeof validateForm === "function") {
                            validateForm();
                        }
                    } else {
                        showAlertMessage('alert-danger', 'Fatal error !', 'An unknown error occured !');
                    }
                    un_block_page();
                },
                error: function (data) {
                    un_block_page();
                    console.log(data);
                },
                statusCode: {
                    500: function (data) {
                        un_block_page();
                        console.log(data);
                    }
                }
            });
        }

		function validateForm(){
			// alert('ok');
			$("#add_edit_form").validate({
				// ignore: [],
				rules: {
					's_title': {
						required: true,
					},
					's_block_number': {
						required: true,
					},
					's_street_number': {
						required: true,
					},
					's_building_number': {
						required: true,
					},
					's_floor_number': {
						required: true,
					},
					's_phone_number': {
						required: true,
					},
				},
				messages: {
					s_name: {
						required: "هذا الحقل مطلوب",
					}
				},
			});

			$('.add_edit').click(function(e){
				e.preventDefault();
				postData();
			});
			$('.city_select').select2({
				placeholder: "Select City",
				minimumInputLength: 0,
			});
		}
		function postData(){
			if (!$("#add_edit_form").valid())
				return false;
			let data = new FormData($('#add_edit_form').get(0));
			$.ajax({
				url : add_edit_url,
				data : data,
				type: "POST",
				processData: false,
				contentType: false,
				beforeSend(){
					block_modal('add_edit','{{trans('general.text_please_wait')}} ...');
				},
				success:function(data) {
					if(data.success){
						Modal.modal('hide');
						Table.DataTable().ajax.reload();
						showAlertMessage('success','{{$data['name']}} / ', data.message);
					}
					un_block_modal('add_edit');
				},
				error:function(data) {
					console.log(data);
					un_block_modal('add_edit');
				} ,
				statusCode: {
					500: function(data) {
						console.log(data);
						un_block_modal('add_edit');
					},
					422: function(data) {
						if(data.responseJSON.status.errors) {
							const error_messages = Object.values(data.responseJSON.status.errors);
							var message_to_show = '<ul style="padding-left:20px">';
							for (const error_message of error_messages) {
								message_to_show += '<li>'+error_message+'</li>';
							}
							message_to_show += '</ul>';
							showAlertMessage('danger', '{{$data['name']}}/ ', message_to_show, 10000);
						}
						un_block_modal('add_edit');
					}
				}
			});
		}
    </script>
@stop
{{--@include('admin.pages.units-management.sidebar')--}}
@section('content')
    <div class="row">
        <div class="col-xl-3 col-lg-4">
            <div class="kt-portlet kt-portlet--full-height  ">
                <div class="kt-portlet__body">
                    <div class="kt-card-profile">
                        <div class="kt-card-profile__pic">
                            <div class="kt-card-profile__pic-wrapper">
                                @if(isset($user->s_avatar) && is_file(public_path('upload/users/'.$user->s_avatar)))
                                    <img style="width: 100px;height: 100px" src="{{url('upload/users/'.$user->s_avatar)}}" alt="User Image" />
                                @else
                                    <img style="width: 100px;height: 100px" src="{{asset('assets/assets/media/logos/IMG-9936.png')}}" alt="Default Image" />
                                @endif
                            </div>
                        </div>
                        <div class="kt-card-profile__details">
                            <span class="kt-card-profile__name">{{$user->s_name}}</span>
                            <a href="" class="kt-card-profile__email kt-link">{{$user->s_mobile_number}}</a>
                        </div>
                        <br>
                        <br>
                    </div>
                    <div class="kt-portlet__body-separator"></div>
                    <div class="kt-widget1 kt-widget1--paddingless">
                        <div class="kt-widget1__item">
                            <div class="row m-row--no-padding align-items-center">
                                <div class="col">
                                    <h6><span class="kt-font-success">Name: </span></h6>
                                </div>
                                <div>
                                    <h6>@isset($user){{$user->s_full_name}}@endisset</h6>
                                </div>
                            </div>
                        </div>
                        <div class="kt-widget1__item">
                            <div class="row kt-row--no-padding align-items-center">
                                <div class="col">
                                    <h6><span class="kt-font-success">Mobile Number: </span></h6>
                                </div>
                                <div>
                                    <h6>@isset($user){{$user->s_mobile_number}}@endisset</h6>
                                </div>
                            </div>
                        </div>
                        <div class="kt-widget1__item">
                            <div class="row kt-row--no-padding align-items-center">
                                <div class="col">
                                    <h6><span class="kt-font-success">E-Mail: </span></h6>
                                </div>
                                <div>
                                    <h6>@isset($user){{$user->s_email}}@endisset</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-lg-8">
            <div class="kt-portlet kt-portlet--tabs">
                <div class="kt-portlet__head">

                    <div class="kt-portlet__head-toolbar">
                        <ul class="nav nav-tabs nav-tabs-bold nav-tabs-line nav-tabs-line-right nav-tabs-line-brand" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#m_user_profile_tab_0" role="tab">
                                    <i class="flaticon-share m--hide"></i>
                                    Address
                                </a>
                            </li>

							<li class="nav-item">
								<a class="nav-link" data-toggle="tab" href="#m_user_profile_tab_1" role="tab">
									<i class="flaticon-share m--hide"></i>
									Bookings
								</a>
							</li>

                        </ul>
                    </div>
                </div>

                <div class="kt-portlet__body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="m_user_profile_tab_0">
                            <div class="kt-portlet__body">
                                @include('admin.address.table', ['profile' => true])
                            </div>
                        </div>

						<div class="tab-pane" id="m_user_profile_tab_1">
							<div class="kt-portlet__body">
								@include('admin.bookings.table', ['user_profile' => true])
							</div>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" data-width="400" id="status_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
@stop