{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Customer Detail')

@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
@endsection

@section('content')
<div class="row">
    <div class="input-field col s12">
        <a href="{{ route('admin.customer.index') }}" class="btn waves-effect waves-light left"><i class="material-icons left">arrow_back</i>Back</a>
    </div>
</div>

<div class="card-panel">
    <div class="row">
        <div class="col s12">
            <div class="display-flex align-items-center">
                <a href="#" class="avatar custom-avatar">
                    @if ($customer->image)
                    <img src="{{url($customer->image ?? '')}}" alt="users view avatar" class="z-depth-4 circle" height="64" width="64">
                    @else
                    <img src="{{ asset('images/profile.png') }}" alt="users view avatar" class="z-depth-4 circle" height="64" width="64">
                    @endif
                </a>
                <div class="media-body">
                    <h6 class="media-heading">
                        <span class="users-view-name">{{$customer->name}}</span>
                    </h6>
                    <span>ID:</span>
                    <span class="users-view-id">{{$customer->id}}</span>
                </div>

                <input type="hidden" value="{{ $customer->id }}" name="customer_id" id="customerID">
                <div style="margin:0 auto"></div>
                <div class="switch active-toggle-switch" style="align-self: initial!important;margin:0 auto">
                    <label>
                        Inactive
                        <input type="checkbox" name="customerCheckBox" id="customerCheckBox" @if($customer->is_active == true) checked @endif>
                        <span class="lever"></span>
                        Active
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-content">
        <span class="card-title">Customer Addresses</span>
        <table id="users-list-datatable" class="table striped">
            <thead>
                <tr>
                    <th></th>
                    <th>City</th>
                    <th>Township</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($customer->address as $key=>$address)
                <tr>
                    <td>
                        <i class="material-icons">{{ $address->is_primary_address ? 'home' : 'place' }}</i>
                    </td>
                    <td>{{$address->city->name ?? '-'}}</td>
                    <td>{{$address->township->name ?? '-'}} </td>
                    <td>{{$address->address ?? '-'}}</td>
                </tr>
                @empty

                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- confirm status --}}
<div id="modal1" class="modal" style="width: 35%!important;">
    <div class="modal-content">
       @if ($active_orders->count() > 0 && !$service_requests->count() > 0)
         <p>ယခု Customer တွင် Active Order များရှိနေသဖြင့် Inactive လုပ်ရန်သေချာပါသလား?</p>
       @elseif($active_orders->count() > 0 && $service_requests->count() > 0)
         <p>ယခု Customer တွင် Active Order နှင့် Service Request များရှိနေသဖြင့် Inactive လုပ်ရန်သေချာပါသလား?</p>
       @elseif(!$active_orders->count() > 0 && $service_requests->count() > 0)
         <p>ယခု Customer တွင် Service Request များရှိနေသဖြင့် Inactive လုပ်ရန်သေချာပါသလား?</p>
       @endif
    </div>
    <div class="modal-footer pr-6">
       <div class="right">
          <div class="display-flex align-items-center">
              <input type="hidden" id="isConfirm" value="0">
              <a id="close" class="modal-close white black-text" style="position: absolute;top:3%;right:1%;">
                <i class="material-icons">clear</i>
              </a>
              <input type="button" id="confirmStatus" class="btn btn-small red darken-1 border-radius-button" style="padding:0 1.5em" value="Confirm">
           </div>
       </div>
    </div>
  </div>

<div class="row">
    <div class="col s12">
        <ul class="custom-tabs tabs-fixed-width">
            <li class="custom-tab col s4">
                <a class="{{ $type == 'active-order' ? 'active' : '' }}" href="{{ route('admin.customer.show.tab', [$customer->id, 'active-order']) }}">Active Orders</a>
            </li>
            <li class="custom-tab col s4">
                <a class="{{ $type == 'order-history' ? 'active' : '' }}" href="{{ route('admin.customer.show.tab', [$customer->id, 'order-history']) }}">Order History</a>
            </li>
            <li class="custom-tab col s4">
                <a class="{{ $type == 'service-request' ? 'active' : '' }}" href="{{ route('admin.customer.show.tab', [$customer->id, 'service-request']) }}">Service Requests</a>
            </li>
        </ul>
    </div>

    @if ($active_orders->count() > 0 || $service_requests->count() > 0)
        <input type="hidden" id="isShowConfirm" value="1">
    @else
        <input type="hidden" id="isShowConfirm" value="0">
    @endif

    @if ($type == 'active-order')
    <div id="active-order" class="col s12">
        <section class="users-list-wrapper section">
            <div class="users-list-table">
                <div class="card">
                    <h4 class="header ml-2 mb-0">Active Orders</h4>
                    <div class="card-content">
                        <!-- datatable start -->
                        <div class="responsive-table">
                            <div class="center">
                                {{ $active_orders->appends(['type' => 'active-order'])->fragment('active-order')->links() }}
                            </div>
                            <table id="users-list-datatable" class="table table-responsive striped">
                                <thead class="grey lighten-2">
                                    <tr>
                                        <th>#</th>
                                        <th>Customer Name</th>
                                        <th>City</th>
                                        <th>Township</th>
                                        <th>Address</th>
                                        <th>Total Price</th>
                                        <th>Payment Method</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($active_orders as $key => $active_order)
                                    <tr>
                                        <td>{{$key + $active_orders->firstItem()}}</td>
                                        <td>{{$active_order->user->name ?? null}}</td>
                                        <td>{{$active_order->address->city->name ?? null}}</td>
                                        <td>{{$active_order->address->township->name ?? null}}</td>
                                        <td>{{$active_order->address->address}}</td>
                                        <td>{{$active_order->total_price}}</td>
                                        <td>{{$active_order->payment_method}}</td>
                                        <td>
                                            <span class="chip
															{{
																$active_order->status == 'pending' ?
																	'orange' : (
																		$active_order->status == 'delivering' ?
																			'purple' : (
																				$active_order->status == 'delivered' ?
																					'blue': 'green'
																			)
																	)
															}}
														lighten-4">
                                                <span class="{{
																$active_order->status == 'pending' ?
																	'orange-text' : (
																		$active_order->status == 'delivering' ?
																			'purple-text' : (
																				$active_order->status == 'delivered' ?
																					'blue-text': 'green-text'
																			)
																	)
															}}">{{ $active_order->status }}</span>
                                            </span>
                                        </td>
                                        <td>
                                            <i class="material-icons left mt-2">
                                                <a class="blue lighten-4 border-radius-button" href="{{ route('admin.orders.show', $active_order->id) }}" style="padding: 6px 10px;">remove_red_eye</a>
                                            </i>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="9">No Order Found!</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <div class="center">
                                {{ $active_orders->appends(['type' => 'active-order'])->fragment('active-order')->links() }}
                            </div>
                        </div>
                        <!-- datatable ends -->
                    </div>
                </div>
            </div>
        </section>
    </div>

    @elseif ($type == 'order-history')
    <div id="order-history" class="col s12">
        <section class="users-list-wrapper section">
            <div class="users-list-table">
                <div class="card">
                    <h4 class="header ml-2 mb-0">Orders History</h4>
                    <div class="card-content">
                        <!-- datatable start -->
                        <div class="responsive-table">
                            <div class="center">
                                {{ $orders->appends(['type' => 'order-history'])->fragment('order-history')->links() }}
                            </div>
                            <table id="users-list-datatable" class="table table-responsive striped">
                                <thead class="grey lighten-2">
                                    <tr>
                                        <th>#</th>
                                        <th>Customer Name</th>
                                        <th>City</th>
                                        <th>Township</th>
                                        <th>Address</th>
                                        <th>Total Price</th>
                                        <th>Payment Method</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($orders as $key => $order)
                                    <tr>
                                        <td>{{$key + $orders->firstItem()}}</td>
                                        <td>{{$order->user->name ?? null}}</td>
                                        <td>{{$order->address->city->name ?? null}}</td>
                                        <td>{{$order->address->township->name ?? null}}</td>
                                        <td>{{$order->address->address}}</td>
                                        <td>{{$order->total_price}}</td>
                                        <td>{{$order->payment_method}}</td>
                                        <td>
                                            <span class="chip
															{{
																$order->status == 'pending' ?
																	'orange' : (
																		$order->status == 'delivering' ?
																			'purple' : (
																				$order->status == 'delivered' ?
																					'blue': 'green'
																			)
																	)
															}}
														lighten-4">
                                                <span class="{{
																$order->status == 'pending' ?
																	'orange-text' : (
																		$order->status == 'delivering' ?
																			'purple-text' : (
																				$order->status == 'delivered' ?
																					'blue-text': 'green-text'
																			)
																	)
															}}">{{ $order->status }}</span>
                                            </span>
                                        </td>
                                        <td>
                                            <i class="material-icons left mt-2">
                                                <a class="blue lighten-4 border-radius-button" href="{{ route('admin.orders.show', $order->id) }}" style="padding: 6px 10px;">remove_red_eye</a>
                                            </i>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="9">No Order Found!</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <div class="center">
                                {{ $orders->appends(['type' => 'order-history'])->fragment('order-history')->links() }}
                            </div>
                        </div>
                        <!-- datatable ends -->
                    </div>
                </div>
            </div>
        </section>
    </div>

    @else
    <div id="service-request" class="col s12">
        <section class="users-list-wrapper section">
            <div class="users-list-table">
                <div class="card">
                    <h4 class="header ml-2 mb-0">Service Requests</h4>
                    <div class="card-content">
                        <div class="center">
                            {{ $service_requests->fragment('service-request')->links() }}
                        </div>
                        <!-- datatable start -->
                        <div class="responsive-table">
                            <table id="users-list-datatable" class="table striped">
                                <thead class="grey lighten-2">
                                    <tr>
                                        <th></th>
                                        <th>Request ID</th>
                                        <th>Battery Type</th>
                                        <th>Model</th>
                                        <th>ASC Name</th>
                                        <th>status</th>
                                        <th>Detail</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($service_requests as $key => $service_request)
                                    <tr>
                                        <td></td>
                                        <td>{{$key + $service_requests->firstItem()}}</td>
                                        <td>{{$service_request->category->name ?? '-'}}</td>
                                        <td>{{$service_request->product->model ?? '-'}} </td>
                                        <td>{{$service_request->merchant->name ?? '-'}}</td>
                                        <td>
                                            <span class="chip
													{{
														$service_request->status == 'pending' ?
															'orange' : (
																$service_request->status == 'fail' || $service_request->status == 'customer-cancel' ?
																	'red' : (
																		$service_request->status == 'confirmed' ?
																			'purple' : (
																				$service_request->status == 'switched-ASC-by-toyo' ?
																				'pink': (
																					$service_request->status == 'served-by-ASC' ?
																						'blue': 'green'
																					)
																			)
																	)
															)
													}}
												lighten-4">
                                                <span class="{{
														$service_request->status == 'pending' ?
															'orange-text' : (
																$service_request->status == 'fail' || $service_request->status == 'customer-cancel' ?
																	'red-text' : (
																		$service_request->status == 'confirmed' ?
																			'purple-text' : (
																				$service_request->status == 'switched-ASC-by-toyo' ?
																				'pink-text': (
																					$service_request->status == 'served-by-ASC' ?
																						'blue-text': 'green-text'
																					)
																			)
																	)
															)
													}}">{{ $service_request->status }}</span>
                                            </span>
                                            {{-- <span class="badge {{
														$service_request->status == 'pending' ?
															'orange' : (
																$service_request->status == 'fail' || $service_request->status == 'customer-cancel' ?
																'red' : (
																	$service_request->status == 'confirmed' ?
																	'purple' : (
																		$service_request->status == 'switched-ASC-by-toyo' ?
																		'pink': (
																			$service_request->status == 'served-by-ASC' ?
																			'green' : 'blue'
																		)
																	)
																)
															)
													}} badge-custom">{{ $service_request->status }}</span> --}}
                                        </td>
                                        <td><a href="{{ route('admin.service-requests.show', $service_request->id) }}"><i class="material-icons">remove_red_eye</i></a></td>
                                    </tr>

                                    @empty
                                    <tr>
                                        <td colspan="7">
                                            <h5>No Service Request!</h5>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <div class="center">
                                {{ $service_requests->fragment('service-request')->links() }}
                            </div>
                        </div>
                        <!-- datatable ends -->
                    </div>
                </div>
            </div>
        </section>
    </div>
    @endif

    <div class="row col s12 mb-2">
        <div class="input-field">
            <a href="{{ route('admin.customer.index') }}" class="btn waves-effect waves-light left"><i class="material-icons left">arrow_back</i>Back</a>
        </div>
    </div>
</div>

@endsection
{{-- page script --}}
@section('page-script')
<script>
    $(document).ready(function() {
        $('.modal').modal();
        $('#customerCheckBox').change(function() {
            let is_confirm = $('#isShowConfirm').val();
            let checkVal = $('#customerCheckBox').prop('checked')
            let customerId = $('#customerID').val()
            var confirm = $('#isConfirm').val();
            if(is_confirm == 1 && checkVal== false)
            {
                $('#modal1').modal('open');
                $(document).on('click','#confirmStatus',function(){
                    confirm = 1;
                    if(confirm ==1)
                    {
                        $.ajax({
                            url: `/api/customer_check/${customerId}`,
                            type: 'PUT',
                            data: {
                                checkVal: checkVal
                            },
                            success: function(result) {
                                $('.modal').modal('close');
                            },
                            error: function(request, msg, error) {
                                $('.modal').modal('close');
                                console.log(msg, error);
                            }
                        });
                    }
                });
            }
            else if(checkVal==1)
            {
                let checkVal = $('#customerCheckBox').prop('checked')
                let customerId = $('#customerID').val()
                $.ajax({
                    url: `/api/customer_check/${customerId}`,
                    type: 'PUT',
                    data: {
                        checkVal: checkVal
                    },
                    success: function(result) {
                        //
                    },
                    error: function(request, msg, error) {
                        console.log(msg, error)
                    }
                });
            }
            else if(is_confirm == 0 && checkVal == 0)
            {
                $.ajax({
                        url: `/api/customer_check/${customerId}`,
                        type: 'PUT',
                        data: {
                            checkVal: checkVal
                        },
                        success: function(result) {
                        },
                        error: function(request, msg, error) {
                            console.log(msg, error);
                        }
                    });
            }

            $('.modal-close').click(()=>{
                if(checkVal == 0)
                {
                    $('#customerCheckBox').prop('checked',true);
                }
            });
        });
    });
</script>
@stop