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

{{-- page title --}}
@section('title','Service Request View')

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

@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')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/file-upload/image-uploader.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/dropify/css/dropify.min.css')}}">
@endsection

@section('content')
<!-- merchants show start -->
<div class="section users-view">
	<div class="row">
		<div class="input-field col s2">
			<a href="{{ route('admin.service-requests.index') }}" class="btn waves-effect waves-light red pl-6"><i class="material-icons left">arrow_back</i>Back</a>
		</div>
		<div class="input-field col s9">
			<h6 class="leftspacing"><b>Service Request Details</b></h6>
		</div>
	</div>
    @if(session()->has('message'))
    <div class="card-alert card green lighten-5">
        <div class="card-content green-text">
          <p> SUCCESS : {{ session()->get('message') }}.</p>
        </div>
        <button type="button" class="close green-text" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
    @endif
	<!-- merchant view media object start -->
	<div class="card-panel">
		<div class="row mb-3">
			<div class="col s3">
				<b>Customer Information</b>
			</div>
			<div class="col s9">
				<hr>
			</div>
		</div>

		<div class="row">
			<div class="col m5">
				<div class="display-flex media">
                    @if ($serviceRequest->customer->image)
                        <a href="#" class="avatar custom-avatar">
                            <img src="{{ url($serviceRequest->customer->image ?? '') }}" alt="users view avatar" class="z-depth-4 circle"height="64" width="64">
                        </a>
                    @else
                        <a href="#" class="avatar custom-avatar">
                            <img src="{{ asset('images/profile.png') }}" alt="users view avatar" class="z-depth-4 circle"height="64" width="64">
                        </a>

                    @endif
					<div class="media-body">
						<h6 class="">
							<span class="users-view-name">{{ $serviceRequest->customer->name }}</span>
						</h6>
						<span>Customer ID:</span>
						<span class="users-view-id">{{ $serviceRequest->customer->id }}</span>
					</div>
				</div>
			</div>
			<div class="col m3">
				<p>Service Request ID: {{ $serviceRequest->id }}</p>
			</div>

			<div class="col m4">
				<div>
					<p>Phone Number : <a href="tel:{{ $serviceRequest->customer->phone_number }}">{{ $serviceRequest->customer->phone_number ?? $serviceRequest->customer->phone_number }}</a> </p>
				</div>
			</div>
		</div>
		<div class="row mt-3 mb-3">
			<div class="col s5">
				<b>Service Information ({{ $serviceRequest->created_time }})</b>
			</div>
			<div class="col s7">
				<hr>
			</div>
		</div>

		{{-- <div class="row s12 mt-3 service-info-row1">
			<div class="col s6">
				<td colspan="2">Authorize Service Center: <a href="{{ route('admin.merchants.show',$serviceRequest->merchant->id) }}">{{ $serviceRequest->merchant->name ?? $serviceRequest->merchant->name }}<i class="material-icons">remove_red_eye</i></a></td>
			</div>
			<div class="col s6">
				<td colspan="">Battery Type: {{ $serviceRequest->category && $serviceRequest->category->name ? $serviceRequest->category->name : '-' }}</td>
			</div>
		</div>
		<div class="row s12  service-info-row2" >
			<div class="col s6">
				<td colspan="2">Issue : {{ $serviceRequest->issue && $serviceRequest->issue->issue ? $serviceRequest->issue->issue : '-' }}</td>
			</div>
			<div class="col s6">
				<td colspan="">Model : <a href="{{ route('admin.products.show',$serviceRequest->product->id) }}">{{ $serviceRequest->product && $serviceRequest->product->model ? $serviceRequest->product->model : '-' }}  <i class="material-icons">remove_red_eye</i></a></td>
			</div>
		</div>

		<div class="row s12  service-info-row1">
			<div class="col s6">
				<td colspan="">Usage Area : {{ $serviceRequest->usage && $serviceRequest->usage->name ? $serviceRequest->usage->name : '-' }}</td>
			</div>
			<div class="col s3">
				<td colspan="">Status  :  <span class="badge {{ $status }} badge-custom">{{ $serviceRequest->status }}</span> </td>
			</div>
		</div>

		<div class="row s12  service-info-row2">
			<div class="col s2">
				<td>Description</td>
			</div>
			<div class="col s10">
				<td colspan="2"> {{ $serviceRequest->description ?? '-' }}</td>
			</div>
		</div> --}}


		<div class="row col s12">
			<table class="striped">
				 <tbody>
					 <tr>
						 <th class="width50">Authorize Service Center: <a class="pl-2" href="{{ route('admin.merchant.show.tab', [$serviceRequest->merchant->id, 'merchant-order']) }}">{{ $serviceRequest->merchant->name ?? $serviceRequest->merchant->name }} <i class="material-icons">remove_red_eye</i></a></th>
						 <td>Battery Type: <span class="pl-2">{{ $serviceRequest->category && $serviceRequest->category->name ? $serviceRequest->category->name : '-' }}</span></td>
					 </tr>
					 <tr>
						 <th>Issue : <span class="pl-2">{{ $serviceRequest->issue && $serviceRequest->issue->issue ? $serviceRequest->issue->issue : '-' }}</span></th>
						 <td colspan="">Model : <a class="pl-2" href="{{ route('admin.products.show',$serviceRequest->product->id) }}">{{ $serviceRequest->product && $serviceRequest->product->model ? $serviceRequest->product->model : '-' }}  <i class="material-icons">remove_red_eye</i></a></td>
					 </tr>
					 <tr>
						 <th>Usage Area : <span class="pl-2">{{ $serviceRequest->usage && $serviceRequest->usage->name ? $serviceRequest->usage->name : '-' }}</span></th>
						 <td>Status  :  <span class="chip {{ $status }} lighten-4 ml-2"><span class="{{ $status }}-text">{{ $serviceRequest->status }}</span></span> </td>
					 </tr>
					 <tr>
						 <th class="width25">Description:</th>
						 <td > {{ $serviceRequest->description }}</td>
					 </tr>
				</tbody>
			  </table>
		</div>


		<div class="row mb-3">
			<div class="col m2">
				<b>Addresses</b>
			</div>
			<div class="col m10">
				<hr>
			</div>
		</div>
		<div class="row">
			<div class="col s6">
				<h6>Customer Address</h6>
				<div>
					@if ($serviceRequest->full_address_of_customer)
						<iframe width="100%" height="170" frameborder="0" src="{{ $serviceRequest->full_address_of_customer }}"></iframe>
					@else
					 -
					@endif
				</div>
				<div>
					<p>{{ $serviceRequest->customer->CustomerAddress->address ?? '-' }}</p>
				</div>
			</div>
			<div class="col s6">
				<h6>Merchant Address</h6>
				<div>
					@if ($serviceRequest->full_address_of_merchant)
						<iframe width="100%" height="170" frameborder="0" src="{{ $serviceRequest->full_address_of_merchant }}"></iframe>
					@else
						-
					@endif
				</div>
				<div>
					<p>{{ $serviceRequest->merchant->address->address }}</p>
				</div>
			</div>
		</div>

		<div class="row mb-3">
			<div class="col s3">
				<b>Service Request Images</b>
			</div>
			<div class="col s9">
				<hr>
			</div>
		</div>
		<div class="row">
			<div class="masonry-gallery-wrapper">
				<div class="popup-gallery">
				  <div class="gallery-sizer"></div>
				  <div class="row">
					@foreach ($serviceRequest->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>

    <div class="card padding-4">
        <div class="row">
            <div>
                <i class="material-icons left">notifications_active</i>
            </div>
            <div>
                <h6>Send Notification</h6>
            </div>
        </div>
        <div class="row">
            <form method="POST" action="{{ route('admin.service-request-notification') }}">
              <div class="row">
                <div class="input-field col s12">
                    <input type="hidden" name="customer_id" value="{{ $serviceRequest->customer->id }}">
                    <input type="hidden" name="service_request_id" value="{{ $serviceRequest->id }}">
                    <textarea id="textarea2" class="materialize-textarea" name="notification"></textarea>
                  <label for="textarea2">Notification</label>
                </div>
              </div>
              <div class="row right mb-2">
                  <button type="submit" class="btn">Send</button>
              </div>
            </form>
        </div>
    </div>

	<!-- noti view card details start -->
	<!-- noti view card details ends -->
	<!-- merchants show ends -->

	<div id="modal-approve" class="modal">
		<form id="accept-form" action="{{ route('admin.service-requests.update', $serviceRequest->id) }}" method="post">
			@csrf
			@method('PUT')
			<div class="modal-content">
				<h5>Please Choose Battery Type and Model</h5>
				<div class="row">
					<div class="input-field col s12">
						<select name="category_id" id="category_id" class="error validate" >
							<option value="">Choose Category</option>
							@foreach ($categories as $category)
								<option value="{{ $category->id }}"
									@if ($serviceRequest->product_type_id && $serviceRequest->product_type_id == $category->id)
										selected
									@endif
								>{{ $category->name }}</option>
							@endforeach
						</select>
					</div>
				</div>

				<div class="row">
					<div class="input-field col s12">
						<div >
							<label >Choose Product</label>
							<select name="product_id" id="product_id"  class="browser-default validate" >
								@foreach ($products as $product)
									<option value="{{ $product->id }}"
										@if ($serviceRequest->product_id && $serviceRequest->product_id == $product->id)
											selected
										@endif
									>{{ $product->model }}</option>
								@endforeach
							</select>
						</div>
					</div>
				</div>
				<input type="hidden" name="service_id" value="{{ $serviceRequest->id }}" />
				<input type="hidden" name="customer_id" value="{{ $serviceRequest->customer->id }}" />
				<input type="hidden" name="description" value="You can go this merchant!" />
				<input type="hidden" name="merchant_id" value="{{ $serviceRequest->merchant->id }}">
				<div class="row input-field">
					<button class="btn waves-effect waves-light left">Approve</button>
				</div>
			</div>
		</form>
    </div>
    {{-- {{ dd($merchants) }} --}}
	<!-- form for change status of service request -->
	<div id="modal1" class="modal">
		<form action="{{ route('admin.service-requests.update', $serviceRequest->id) }}" method="POST">
			@csrf
			@method('PUT')
			<div class="modal-content">
				<h5>Pleace Choose Battery Type and Model</h5>
				<div class="row">
					<div class="input-field col s12">
						<select name="category_id" id="category_id_switch" class="error validate" >
							<option value="">Choose Category</option>
							@foreach ($categories as $category)
								<option value="{{ $category->id }}"
									@if ($serviceRequest->product_type_id && $serviceRequest->product_type_id == $category->id)
										selected
									@endif
								>{{ $category->name }}</option>
							@endforeach
						</select>
					</div>
				</div>

				<div class="row">
					<div class="input-field col s12">
						<div>
							<label for="product_id">Choose Product</label>
							<select name="product_id" id="product_id_switch" class="browser-default validate" >
								@foreach ($products as $product)
									<option value="{{ $product->id }}"
										@if ($serviceRequest->product_id && $serviceRequest->product_id == $product->id)
											selected
										@endif
									>{{ $product->model }}</option>
								@endforeach
							</select>
						</div>
					</div>
				</div>
				<div class="row" id="changeMerchant">
					<div class="col s12">
						<label for="merchant">Merchant</label>
						<select class="error validate" id="merchant" name="merchant_id" required>
                            <option value="" disabled selected>Choose your merchant</option>
                            @if (filled($merchants))
                                @foreach ($merchants as $merchant)
                                    <option value="{{ $merchant->id }}"
                                >{{ $merchant->name }}</option>
                                @endforeach
                            @endif
						</select>
					</div>
				</div>
				<div class="row">
					<div class="col s12">
						{{-- <label for="merchant">Description</label> --}}
						<input type="hidden" name="service_id" value="{{ $serviceRequest->id }}">
						<input type="hidden" name="customer_id" value="{{ $serviceRequest->customer->id }}">
						{{-- <textarea class="validate materialize-textarea"  id="description" name="description" required></textarea> --}}
						{{-- <small class="errorTxt1">
							@if ($errors->has('description'))
							<div id="description-error" class="error">{{ $errors->first('description') }}</div>
							@endif
						</small> --}}
					</div>
					<div class="col s12">
						<button type="submit" class="waves-effect waves-light btn modal-trigger noti-button">Submit</button>
					</div>
				</div>
			</div>
		</form>
	</div>
    <!-- end form for change status of service request -->
    <div class="row col s12">
        @if ($serviceRequest->status == 'pending')
            <div class="row right mb-2">
                <a type="button" class="green waves-effect waves-light btn modal-trigger noti-button accept-merchant" href="#modal-approve">Accept</a>
                <a type="button" class="waves-effect waves-light btn modal-trigger noti-button change-merchant" href="#modal1">Switch Merchant</a>
            </div>
        @endif
    </div>
	@endsection

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

		{{-- page script --}}
		@section('page-script')
		<script src="{{asset('js/scripts/media-gallery-page.js')}}"></script>
        <script src="{{asset('js/scripts/page-users.js')}}"></script>
        <script src="{{asset('js/scripts/ui-alerts.js')}}"></script>

		<script>
			$(document).ready(function(){

				$('.carousel').carousel();
				// $('#changeMerchant').css("display", "none");
				$('.change-merchant').on('click', function() {
					$('.modal').modal();
				});

				$('.accept-merchant').on('click', function() {
					$('#modal-approve').modal();
				});

				$('#switchMerchant').on('change', function() {
					$('#changeMerchant').toggle();
				});

				$('#category_id').on('change', function() {
					var categoryId = $(this).val();
					if(categoryId){
						$.ajax({
							type:"GET",
							url:"{{route('admin.product.lists')}}?category_id="+categoryId,
							success:function(res){
								if(res){
									$("#product_id").empty();
									$("#product_id").append('<option disabled selected>Select Product</option>');
									$.each(res,function(key,value){
										console.log(value);
										$("#product_id").append('<option value="'+ key +'">'+ value +'</option>');
									});

								}else{
									// $("#township").empty();
								}
							}
						});
					}
				});

				$('#category_id_switch').on('change', function() {
					var categoryId = $(this).val();
					if(categoryId){
						$.ajax({
							type:"GET",
							url:"{{route('admin.product.lists')}}?category_id="+categoryId,
							success:function(res){
								if(res){
									$("#product_id_switch").empty();
									$("#product_id_switch").append('<option disabled selected>Select Product</option>');
									$.each(res,function(key,value){
										console.log(value);
										$("#product_id_switch").append('<option value="'+ key +'">'+ value +'</option>');
									});

								}else{
									// $("#township").empty();
								}
							}
						});
					}
				});
			});
		</script>
		<script src="{{asset('js/scripts/page-users.js')}}"></script>
		<script src="{{asset('js/scripts/advance-ui-carousel.js')}}"></script>
		<script src="{{asset('js/scripts/form-select2.js')}}"></script>
		<script src="{{asset('js/scripts/form-validation.js')}}"></script>
		@endsection