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

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

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


@section('content')
<div class="row">
    <div class="input-field col s2">
        <a href="{{ route('admin.replacement-tools.index') }}" class="btn waves-effect waves-light left 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 Report Details</b></h6>
    </div>
</div>
    <div class="card">
        <div class="card-content">
            <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 m4">
                    <div class="display-flex media">
                        @if ($replacementTool->customer->image)
                            <a href="#" class="avatar custom-avatar">
                                <img src="{{ url($replacementTool->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">{{  $replacementTool->customer->name ?? '-'  }}</span>
                            </h6>
                            <span>Customer ID:</span>
                            <span class="users-view-id">{{ $replacementTool->customer->id }}</span>
                        </div>
                    </div>
                </div>
                <div class="col m3">
                    <p>Report ID: {{ $replacementTool->id }}</p>
                </div>

                <div class="col m5">
                    <div>
                        <p>Phone Number : <a href="tel:{{ $replacementTool->customer->phone_number }}">{{ $replacementTool->customer->phone_number ?? $replacementTool->customer->phone_number }}</a> </p>
                    </div>
                </div>
            </div>

            <div class="row mt-3 mb-3">
                <div class="col s3">
                    <b>Merchant Information</b>
                </div>
                <div class="col s9">
                    <hr>
                </div>
            </div>


            <div class="row">
                <div class="col m4">
                    <div class="display-flex media">
                        @if ($replacementTool->merchant->images[0])
                            <a href="#" class="avatar custom-avatar">
                                <img src="{{ url($replacementTool->merchant->images[0]->full_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">{{ $replacementTool->merchant->name ?? '-'  }}</span>
                            </h6>
                            <span>Merchant ID:</span>
                            <span class="users-view-id">{{ $replacementTool->merchant->id }}</span>
                        </div>
                    </div>
                </div>
                <div class="col m5">
                    <div>
                        <p>Phone Number : <a href="tel:{{ $replacementTool->merchant->phone_number }}">{{ $replacementTool->merchant->phone_number ?? $replacementTool->merchant->phone_number }}</a> </p>
                    </div>
                </div>
            </div>

            <div class="row mt-2">
                <div class="col s4">
                    <b>Replace Details ({{ $replacementTool->created_time }})</b>
                </div>
                <div class="col s8">
                    <hr>
                </div>
            </div>
            <div class="row col s12 mt-3 mb-4">
                <table class="striped">
                     <tbody>
                         <tr>
                             <th width="50%">Battery Type: <span class="pl-2">{{ $replacementTool->product->category->name ?? '-'}}</span></th>
                             <td colspan="">Model : <a class="pl-2" href="{{ route('admin.products.show',$replacementTool->product->id) }}">{{ $replacementTool->product && $replacementTool->product->model ? $replacementTool->product->model : '-' }} <i class="material-icons">remove_red_eye</i></a></td>
                         </tr>
                         <tr>
                             <th>Issue : <span class="pl-2">{{ $replacementTool->issue->issue ?? '-' }}</span></th>
                             <td>Status  :   <span class="chip {{ $status }} lighten-4"><span class="{{ $status }}-text">{{ $replacementTool->status }}</span></span> </td>
                         </tr>
                         <tr>
                             <th width="15%">Description:</th>
                             <td> {{$replacementTool->description ?? '-'}}</td>
                         </tr>
                         <tr>
                             <th>Is Battery Replace : <span class="pl-2">{{ $replacementTool->is_battery_changed == 1 ? 'Yes' : 'No' }}</span></th>
                         </tr>
                         <tr>
                            <th>Is Battery Exchange : <span class="pl-2">{{ $replacementTool->is_battery_accepted == true ? 'Yes' : 'No' }}</span></th>
                        </tr>
                    </tbody>
                  </table>
            </div>

            {{-- <div class="row s12 mt-3 service-info-row1">
                <div class="col s6">
                    <td>Battery Type: {{ $replacementTool->product->category->name ?? '-'}}</td>
                </div>
                <div class="col s6">
						<td colspan="">Model : <a class="pl-2" href="{{ route('admin.products.show',$replacementTool->product->id) }}">{{ $replacementTool->product && $replacementTool->product->model ? $replacementTool->product->model : '-' }}  <i class="material-icons">remove_red_eye</i></a></td>
                    <td colspan="">Model : @if ($replacementTool->product)<a href="{{ route('admin.products.show', $replacementTool->product->id) }}">{{ $replacementTool->product->model ?? '-'}} <i class="material-icons">remove_red_eye</i></a>@endif</td>
                </div>
            </div>

            <div class="row s12  service-info-row2" >
                <div class="col s6">
                    <td colspan="2">Issue : {{ $replacementTool->issue->issue ?? '-' }}</td>
                </div>
                <div class="col s3">
                    <td colspan="">Status  :  <span class="chip {{ $status }} lighten-4"><span class="{{ $status }}-text">{{ $replacementTool->status }}</span></span> </td>
                </div>
            </div>

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

            <div class="row s12  service-info-row2">
                <div class="col s6">
                    <td>Is Battery Replace : {{ $replacementTool->is_battery_changed == 1 ? 'Yes' : 'No' }}</td>
                </div>
            </div> --}}

    		<div class="row pt-4 mb-3">
                <div class="col s2">
                    <b>Before Images</b>
                </div>
                <div class="col s10">
                    <hr>
                </div>
            </div>

            <div class="row">
                <div class="masonry-gallery-wrapper">
                    <div class="popup-gallery">
                      <div class="gallery-sizer"></div>
                      <div class="row">
                          @forelse ($replacementTool->beforeImages as $image)
                            <div class="col s12 m6 l4 xl2">
                                <div>
                                <a href="{{ $image->image }}" title="">
                                    <img src="{{ $image->image }}" class="responsive-img mb-10" alt="">
                                </a>
                                </div>
                            </div>
                          @empty
                          <div class="row">
                              <div class="col s12 pl-5">
                                    <h6>No Before Images</h6>
                              </div>
                          </div>
                          @endforelse
                      </div>
                    </div>
                </div>
            </div>

            <div class="row mb-3 mt-4">
                <div class="col s2">
                    <b>After Images</b>
                </div>
                <div class="col s10">
                    <hr>
                </div>
            </div>

            <div class="row">
                <div class="masonry-gallery-wrapper">
                    <div class="popup-gallery">
                      <div class="gallery-sizer"></div>
                      <div class="row">
                          @forelse ($replacementTool->afterImages as $image)
                            <div class="col s12 m6 l4 xl2">
                                <div>
                                <a href="{{ $image->image }}" title="">
                                    <img src="{{ $image->image }}" class="responsive-img mb-10" alt="">
                                </a>
                                </div>
                            </div>
                          @empty
                          <div class="row">
                              <div class="col s12 pl-5">
                                    <h6>No after Images</h6>
                              </div>
                          </div>
                          @endforelse
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row right">
        @if ($replacementTool->status == 'pending')
        <div class="row mb-2">
            <div class="col s6">
                <form action="{{ route('admin.replacement.status', $replacementTool->id) }}" method="post">
                    @csrf
                    @method('PUT')
                    <input type="hidden" value="pass" class="green btn" name="status">
                    <button type="submit" class="green btn">အတည်ပြုပြီး</button>
                    {{-- <input type="submit" value="အတည်မပြုရသေး" class="btn" name="status"> --}}
                </form>
            </div>
            <div class="col s6">
                <form action="{{ route('admin.replacement.status', $replacementTool->id) }}" method="post">
                    @csrf
                    @method('PUT')
                    {{-- <input type="submit" value="အတည်ပြုပြီး" class="green btn" name="status"> --}}
                    <button type="submit" class="btn">အတည်မပြုရသေး</button>
                    <input type="hidden" value="reject" class="btn" name="status">
                </form>
            </div>
        </div>
    @endif
    </div>
{{-- <div class="row pb-3 col 12">
    <a class="waves-effect waves-light btn red" href="{{route('admin.replacement-tools.index')}}">Back to list</a>
</div>     --}}

@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();
    });
</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/advance-ui-carousel.js')}}"></script>
@endsection