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

{{-- page title --}}
@section('title','Merchant Detail')
{{-- vendors styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/flag-icon/css/flag-icon.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/magnific-popup/magnific-popup.css')}}">
@endsection

{{-- page style --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
<style>
    #confirmStatusModal{
        width: 35%!important;
    }
</style>
@endsection

@section('content')
<!-- merchants show start -->
<div class="row">
    <div class="input-field col m4">
        <a href="{{ route('admin.merchants.index') }}" class="btn waves-effect waves-light left"><i class="material-icons left">arrow_back</i>Back</a>
    </div>
    <div class="col-md-8">
        @if (Session::has('success'))
        <div class="alert alert-info pt-2 green-text">{{ Session::get('success') }}</div>
        @endif
        @if (Session::has('error'))
        <div class="alert alert-info pt-2 red-text">{{ Session::get('error') }}</div>
        @endif
    </div>
</div>
{{-- @if($error)
<p style="color: red">{{ $error }}</p>
@endif --}}

<div class="section users-view">
    <!-- merchant view media object start -->
    <div class="card-panel">
        <div class="row ml-0 mr-0">
            <div class="col m4 display-flex align-items-center">
                <a href="#" class="avatar custom-avatar">
                    <img src="{{ url($merchant->images[0]->full_image ?? '') }}" alt="users view avatar" class="z-depth-4 circle" height="64" width="64">
                </a>

                <div class="media-body">
                    <h6 class="media-heading">
                        <span class="users-view-name">{{ $merchant->name }}</span>
                    </h6>
                    <span>ID:</span>
                    <span class="users-view-id">{{ $merchant->id }}</span>
                </div>
            </div>
            <div class="col m5 display-flex align-items-center">
                <a class="waves-effect waves-light btn red modal-trigger mr-3 pl-3 pr-3" href="#reset">Reset Password</a>
                <a class="waves-effect waves-light btn red modal-trigger ml-3 pl-3 pr-3" href="#addNewPhone">Add New Phone</a>
            </div>
            <div class="col m3">
                <input type="hidden" value="{{ $merchant->id }}" name="merchant_id" id="merchantID">
                <div class="switch active-toggle-switch">
                    <label>
                        Inactive
                        <input type="checkbox" name="merchantCheckBox" id="merchantCheckBox" @if($merchant->is_active == true) checked @endif>
                        <span class="lever"></span>
                        Active
                    </label>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Structure -->
    <div id="reset" class="modal">
        <div class="modal-content">
            <div id="register-page" class="row">
                <div class="col s12  border-radius-6 bg-opacity-8">
                    <form action="{{ route('admin.merchants.update', $merchant->id) }}" method="POST" class="login-form">
                        @csrf
                        @method('put')
                        <div class="row margin">
                            <div class="input-field col s12">
                                <i class="material-icons prefix pt-2">lock_outline</i>
                                <input id="password" name="password" type="password" required>
                                <label for="password">Password</label>
                            </div>
                        </div>
                        <div class="row margin">
                            <div class="input-field col s12">
                                <i class="material-icons prefix pt-2">lock_outline</i>
                                <input id="password_again" name="password_again" type="password" required>
                                <label for="password_again">Confirm Password</label>
                            </div>
                            <span id="message" class="pl-3"></span>
                        </div>
                        <div class="row">
                            <div class="col s2"></div>
                            <div class="input-field col s8 text-center">
                                <button id="submit" type="submit" class="submit btn waves-effect waves-light border-round gradient-45deg-purple-deep-orange col s12">Reset Password</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

    <!-- Add New Modal -->
    <!-- Modal Structure -->
    <div id="addNewPhone" class="modal">
        <div class="modal-content">
            <div id="register-page" class="row">
                <div class="col s12  border-radius-6 bg-opacity-8">
                    <form action="{{ route('admin.merchants.store_phone_number', $merchant->id) }}" method="POST" class="login-form" id="store-phone-number">
                        @csrf
                        <div class="row margin">
                            <div class="input-field col s12">
                                <i class="material-icons prefix pt-2">local_phone</i>
                                <input id="add_phone_number" name="phone_number" type="text" require>
                                <label for="phone_number">Phone Number</label>
                                <br>
                                <div class="alert alert-info pt-2 red-text" id="need-phone-number" hidden>Need Phone Number</div>
                            </div>
                            <span id="message" class="pl-3"></span>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col s2"></div>
                        <div class="input-field col s8 text-center">
                            <button id="savePhoneNumber" class="submit btn waves-effect waves-light border-round gradient-45deg-purple-deep-orange col s12">Save Phone Number</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- merchant view media object ends -->
    <div class="card-panel">
        <div class="card-content">
            <h6 class="mb-2 mt-2"><i class="material-icons">error_outline</i> Merchant Owner Info</h6>
        </div>
        <div class="row">
            <div class="col s12 m4">
                <div class="display-flex media">
                    <a href="#" class="avatar custom-avatar">
                        @if ($merchant->owner && $merchant->owner->image)
                        <img src="{{ url($merchant->owner->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">{{ $merchant->owner->name ?? '-' }}</span>
                        </h6>
                        <span>phone:</span>
                        <span class="users-view-id">{{ $merchant->owner->phone_number }}</span>
                    </div>
                </div>
            </div>
            <div class="col m4">
                <p><b>Email :</b> {{ $merchant->owner->email ?? '-'}}</p>
            </div>
            <div class="col m4">
                <address>{{ $merchant->owner->address ?? '-' }}</address>
            </div>
        </div>
    </div>
    <!-- merchant view card details start -->
    <div class="card">
        <div class="card-content">
            <h6 class="mb-2 mt-2"><i class="material-icons">error_outline</i> Merchant Info</h6>
            <table class="striped">
                <tbody>
                    <tr>
                        <th width="25%">Display Merchant ID :</th>
                        <td>{{ $merchant->display_merchant_id ?? '-'}}</td>
                    </tr>
                    <tr>
                        <th width="25%">Merchant Class ID :</th>
                        <td>{{ $merchant->merchant_class_id ?? '-'}}</td>
                    </tr>
                    <tr>
                        <th width="25%">Grade:</th>
                        <td>{{ $merchant->grade }}</td>
                    </tr>
                    <tr>
                        <th>Limited Credit:</th>
                        <td>{{ $merchant->limited_credit  ?? '-'}}</td>
                    </tr>
                    <tr>
                        <th>Latitude:</th>
                        <td>{{ $merchant->address->latitude ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Longitude:</th>
                        <td>{{ $merchant->address->longitude ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>City:</th>
                        <td>{{ $merchant->address->city->name ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Township:</th>
                        <td>{{ $merchant->address->township->name ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Phone Number:</th>
                        <td>{{ $merchant->phone_number }} @if($merchant->merchantPhoneNumbers->count() > 0), {{$merchant->merchant_phone_number}} @endif</td>
                    </tr>
                    <tr>
                        <th>Address:</th>
                        <td>{{ $merchant->address->address ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>Working Time</th>
                        <td>
                            @forelse ($merchant_working_times as $merchant_working_time)
                            {{ $merchant_working_time->opening_time }} -
                            {{ $merchant_working_time->closing_time }} -
                            {{ $merchant_working_time->day }} <br>
                            @empty
                            -
                            @endforelse
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- merchant view card details ends -->

</div>

<section class="users-list-wrapper section">
    <div class="row">
        <div class="col s12">
            <ul class="custom-tabs tabs-fixed-width">
                <li class="custom-tab col s6">
                    <a class="{{ $type == 'merchant-order' ? 'active' : '' }}" href="{{ route('admin.merchant.show.tab', [$merchant->id, 'merchant-order']) }}">Order History</a>
                </li>
                <li class="custom-tab col s6">
                    <a class="{{ $type == 'service-report' ? 'active' : '' }}" href="{{ route('admin.merchant.show.tab', [$merchant->id, 'service-report']) }}">Service Reports</a>
                </li>
            </ul>
        </div>
        @if ($type == 'merchant-order')
        <div id="merchant-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">Merchant Orders History</h4>
                        <div class="card-content">
                            <!-- datatable start -->
                            <div class="responsive-table">
                                <div class="center">
                                    {{ $orders->appends(['type' => 'merchant-order'])->fragment('merchant-order')->links() }}
                                </div>
                                <table id="users-list-datatable" class="table table-responsive striped">
                                    <thead class="grey lighten-2">
                                        <tr>
                                            <th>#</th>
                                            <th>Merchant Name</th>
                                            <th>City</th>
                                            <th>Township</th>
                                            <th>Total Price</th>
                                            <th>Payment Method</th>
                                            <th>Created</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->total_price}}</td>
                                            <td>{{$order->payment_method}}</td>
                                            <td>{{ $order->created_time }}</td>
                                            <td>
                                                <span class="chip {{
                                                            $order->status == 'pending' ?
                                                                'orange' : (
                                                                    $order->status == 'reject' ?
                                                                        'red' : (
                                                                            $order->status == 'delivering' ?
                                                                                'purple' : (
                                                                                    $order->status == 'delivered' ?
                                                                                        'blue': 'green'
                                                                                )
                                                                        )
                                                                )
                                                            }}
                                                        lighten-4">
                                                    <span class="{{
                                                                $order->status == 'pending' ?
                                                                    'orange-text' : (
                                                                        $order->status == 'reject' ?
                                                                            'red-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-report" 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 Reports</h4>
                        <div class="card-content">
                            <div class="center">
                                {{ $merchant_service_reports->fragment('service-report')->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>Customer Name</th>
                                            <th>Battery Type</th>
                                            <th>Model</th>
                                            <th>status</th>
                                            <th>Is Walk In</th>
                                            <th>Created</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($merchant_service_reports as $key => $service_report)
                                        <tr>
                                            <td>{{$key + $merchant_service_reports->firstItem()}}</td>
                                            <td>{{$service_report->customer->name ?? '-'}}</td>
                                            <td>{{$service_report->product->category->name ?? '-'}}</td>
                                            <td>{{$service_report->product->model ?? '-'}} </td>
                                            <td>
                                                <span class="chip
                                                        {{
                                                            $service_report->status == 'pending' ?
                                                                'orange' : (
                                                                    $service_report->status == 'reject' ?
                                                                    'red' : 'green'
                                                                )

                                                        }}
                                                    lighten-4">
                                                    <span class="{{
                                                            $service_report->status == 'pending' ?
                                                                'orange-text' : (
                                                                    $service_report->status == 'reject' ?
                                                                    'red-text' : 'green-text'
                                                                )
                                                            }}">{{ $service_report->status }}</span>
                                                </span>
                                                {{-- <span class="badge {{
                                                            $service_report->status == 'pending' ?
                                                                'orange' : (
                                                                    $service_report->status == 'fail' || $service_report->status == 'customer-cancel' ?
                                                                    'red' : (
                                                                        $service_report->status == 'confirmed' ?
                                                                        'purple' : (
                                                                            $service_report->status == 'switched-ASC-by-toyo' ?
                                                                            'pink': (
                                                                                $service_report->status == 'served-by-ASC' ?
                                                                                'green' : 'blue'
                                                                            )
                                                                        )
                                                                    )
                                                                )
                                                        }} badge-custom">{{ $service_report->status }}</span> --}}
                                            </td>
                                            <td>{{ $service_report->service->is_walk_in == 1 ? 'Yes' : 'No'}}</td>
                                            <td>{{ $service_report->created_time }}</td>
                                            <td>
                                                <div class="right">
                                                    <i class="material-icons left pt-4">
                                                        <a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.replacement-tools.show', $service_report->id) }}" style="padding: 6px 10px;">remove_red_eye</a>
                                                    </i>
                                                </div>
                                            </td>
                                        </tr>

                                        @empty
                                        <tr>
                                            <td colspan="7">
                                                <h5>No Service Report!</h5>
                                            </td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                                <div class="center">
                                    {{ $merchant_service_reports->fragment('service-report')->links() }}
                                </div>
                            </div>
                            <!-- datatable ends -->
                        </div>
                    </div>
                </div>
            </section>
        </div>
        @endif
    </div>
    <div class="row col s12 red lighten-5 pt-1">
        <div class="masonry-gallery-wrapper">
            <div class="popup-gallery">
                <div class="gallery-sizer"></div>
                <div class="row">
                    @foreach ($merchant->images as $image)
                    <div class="col s12 m6 l4 xl2">
                        <div>
                            <a href="{{ $image->thumbnail_image }}" title="">
                                <img src="{{ $image->thumbnail_image }}" class="responsive-img mb-10" alt="">
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

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

</section>
@if ($orders->count() > 0 || $merchant_service_reports->count() > 0)
<input type="hidden" id="isShowConfirm" value="1">
@else
<input type="hidden" id="isShowConfirm" value="0">
@endif

{{-- confirm status  --}}
<div id="confirmStatusModal" class="modal" style="width: 35%!important">
    <div class="modal-content">
       @if ($orders->count() > 0 && !$merchant_service_reports->count() > 0)
         <p>ယခု Merchant တွင် Order များရှိနေသဖြင့် Inactive လုပ်ရန်သေချာပါသလား?</p>
       @elseif($orders->count() > 0 && $merchant_service_reports->count() > 0)
         <p>ယခု Merchant တွင် Order နှင့် Service Report များရှိနေသဖြင့် Inactive လုပ်ရန်သေချာပါသလား?</p>
       @elseif(!$orders->count() > 0 && $merchant_service_reports->count() > 0)
         <p>ယခု Merchant တွင် Service Report များရှိနေသဖြင့် 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 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>
<!-- merchants show ends -->
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
<script src="{{asset('vendors/magnific-popup/jquery.magnific-popup.min.js')}}"></script>
<script src="{{asset('vendors/imagesloaded.pkgd.min.js')}}"></script>
@endsection


{{-- page script --}}
@section('page-script')
<script>
    $(document).ready(function() {
        $('.carousel').carousel();
        $('.modal').modal();
        $('#merchantCheckBox').change(function() {
            let is_confirm = $('#isShowConfirm').val();
            let checkVal = $('#merchantCheckBox').prop('checked')
            let merchantId = $('#merchantID').val()
            var confirm = $('#isConfirm').val();
            if(is_confirm == 1 && checkVal== false)
            {
                $('#confirmStatusModal').modal('open');
                $(document).on('click','#confirmStatus',function(){
                    confirm = 1;
                    if(confirm ==1)
                    {
                        $.ajax({
                            url: `/api/merchant_check/${merchantId}`,
                            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)
            {
                $.ajax({
                    url: `/api/merchant_check/${merchantId}`,
                    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/merchant_check/${merchantId}`,
                    type: 'PUT',
                    data: {
                        checkVal: checkVal
                    },
                    success: function(result) {
                        //
                    },
                    error: function(request, msg, error) {
                        console.log(msg, error)
                    }
                });
            }

            $('.modal-close').click(()=>{
                if(checkVal == 0)
                {
                    $('#merchantCheckBox').prop('checked',true);
                }
            });
        });
    });

    $('#password_again').on('keyup', function() {
        if ($('#password').val() == $('#password_again').val()) {
            $('#message').html('Password Match').css('color', 'green');
            $('.submit').removeAttr('disabled');
        } else {
            $('#message').html('Password Not Match').css('color', 'red');
            $('.submit').attr('disabled', true);
        }
    });
    $('#savePhoneNumber').click(function() {
        let val = $('#add_phone_number').val()
        if (!val) {
            $('#need-phone-number').css('display', 'block')
        } else {
            $('#store-phone-number').submit();
        }
    })
</script>
<script src="{{asset('js/scripts/media-gallery-page.js')}}"></script>
<script src="{{asset('js/scripts/advance-ui-modals.js')}}"></script>
<script src="{{asset('js/scripts/page-users.js')}}"></script>
<script src="{{asset('js/scripts/advance-ui-carousel.js')}}"></script>
@endsection