@extends('admin.layouts.app')
@section('title', 'Request View')
@section('content')
<div class="row application-details-block">
    <div class="col-xs-12">
        <div class="application-details-sec">
            <div class="ttl-panel">
                <h3>Request View</h3>
                <div class="d-flex flex-row-reverse">
                    <a href="{{ route('admin.orders') }}" class="btn btn-primary ml-2" >Back </a>
                    @if($order->order_status_id != \App\Models\OrderStatus::completed()->id && $order->order_status_id != \App\Models\OrderStatus::cancelled()->id)
                        <button type="button" class="btn btn-warning" id="changeStatusButton">Change Status </button>
                    @endif
                </div>
            </div>
            <div class="order_view_details">
                @if($order->getMedia($image_enum)->count() > 0)
                <div class="img_group_block">
                    <div class="img_block_big">
                        <div class="img_block">
                            @if($order->getMedia($image_enum)->count() > 0)
                                <img src="{{ $order->getFirstMediaUrl($image_enum) }}"/>
                            @endif
                        </div>
                    </div>
                    @if($order->getMedia($image_enum)->count() > 1)
                    @php
                        $totalImages = $order->getMedia($image_enum)->count();
                        $otherImageCount = $totalImages - 5;
                    @endphp
                    <div class="img_block_small">
                        @foreach($order->getMedia($image_enum) as $image_key => $image)
                            @if($image_key > 0)
                                <div class="img_block">
                                    @if($image_key <= 4)
                                        <img src="{{ $image->getUrl() }}" alt="Image">
                                        @if($image_key == 4)
                                            <div class="overlay_block">
                                                <p>+{{ $otherImageCount }}</p>
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            @endif
                        @endforeach
                    </div>
                    @endif
                </div>
                @endif
                <div class="view_title_block">
                    <h3>{{ $order->orderCarDetails ? $order->orderCarDetails->model: ''  }}</h3>
                    <div class="badge">
                        {{ $order->orderStatus ? ucWords($order->orderStatus->name): '' }}
                        @if($order->order_status_id == \App\Models\OrderStatus::schedule()->id)
                            ({{ $order->scheduled_date ? date('d-m-Y',strtotime($order->scheduled_date)): '' }})
                        @endif
                    </div>
                </div>
                <div class="view_decp_block">
                    <p>{{ $order->orderCarDetails ? $order->orderCarDetails->additional_details: ''  }}</p>
                </div>
                <div class="view_info_block">
                    <div class="view_info_block_title">
                        <h4>Customer Information</h4>
                    </div>
                    <div class="view_info_block_details">
                        <ul>
                            <li>
                                <h6>Customer Name</h6>
                                <p>{{ $order->orderCustomer ? $order->orderCustomer->name: '' }}</p>
                            </li>
                            <li>
                                <h6>Customer Phone</h6>
                                <p>{{ $order->orderCustomer ? $order->orderCustomer->phone: '' }}</p>
                            </li>
                            <li>
                                <h6>Customer Address</h6>
                                <p>{{ $order->orderCustomer ? $order->orderCustomer->address: '' }}</p>
                            </li>
                            <li>
                                <h6>Customer City</h6>
                                <p>{{ $order->orderCustomer ? $order->orderCustomer->city: '' }}</p>
                            </li>
                            <li>
                                <h6>Customer State</h6>
                                <p>{{ $order->orderCustomer ? $order->orderCustomer->state: '' }}</p>
                            </li>
                            <li>
                                <h6>Customer Pincode</h6>
                                <p>{{ $order->orderCustomer ? $order->orderCustomer->pincode: '' }}</p>
                            </li>
                            <li>
                                <h6>Customer Location</h6>
                                <p>{{ $order->orderCustomer ? $order->orderCustomer->location: '' }}</p>
                            </li>
                            <li>
                                <h6>Added By</h6>
                                <p>{{ $order->user ? $order->user->name: '' }}</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="view_info_block">
                    <div class="view_info_block_title">
                        <h4>Car Details</h4>
                    </div>
                    <div class="view_info_block_details">
                        <ul>
                            <li>
                                <h6>Make</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->make? $order->orderCarDetails->make->name: '' : '' }}</p>
                            </li>
                            <li>
                                <h6>Model</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->model: ''  }}</p>
                            </li>
                            <li>
                                <h6>Year</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->year: ''  }}</p>
                            </li>
                            <li>
                                <h6>VIN</h6>
                                <p>#{{ $order->orderCarDetails ? $order->orderCarDetails->vin: ''  }}</p>
                            </li>
                            <li>
                                <h6>Car Condition</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->carVoluntary? $order->orderCarDetails->carVoluntary->name: '' : ''}}</p>
                            </li>
                            <li>
                                <h6>Color</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->color: ''  }}</p>
                            </li>
                            <li>
                                <h6>Odometer Reading</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->odometer_reading: ''  }}</p>
                            </li>
                            <li>
                                <h6>Is Money Owned on vehicle ?</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->car_money_owned?$order->orderCarDetails->car_money_owned->name: '': ''  }}</p>
                            </li>
                            <li>
                                <h6>Title Status</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->title_status_details ? $order->orderCarDetails->title_status_details->name: '': ''  }}</p>
                            </li>
                            <li>
                                <h6>Is there a key to vehicle</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->is_there_a_key : ''  }}</p>
                            </li>
                            <li>
                                <h6>Choise</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->choice_detail? $order->orderCarDetails->choice_detail->name: '': ''  }}</</p>
                            </li>
                            <li>
                                <h6>Who do we see at a dealership for key?</h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->dealership: ''  }}</p>
                            </li>
                            <li>
                                <h6>Special Instructions </h6>
                                <p>{{ $order->orderCarDetails ? $order->orderCarDetails->special_instructions: ''  }}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="changeStatusModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Change Status</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row form-group">
            <div class="col-md-6">
                <select class="form-control" id="updateStatus">
                    @if($order->order_status_id)
                        <option value="{{ $order->order_status_id }}">{{ $order->orderStatus ? ucWords($order->orderStatus->name) : ''}}</option>
                    @else
                        <option value="">Select status</option>
                    @endif
                    @foreach ($statuses as $status)
                        @if($status->order > $order->order_status_id)
                            <option value="{{ $status->id }}">{{ ucWords($status->name) }}</option>
                        @endif
                        @if($status->order == 0)
                            <option value="{{ $status->id }}">{{ ucWords($status->name) }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div class="col-md-6" style="display:none" id="scheduled_date_div">
                <input type="date" name="scheduled_date" id="scheduled_date" class="form-control">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="saveChanges" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
</div>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#changeStatusButton').on('click',function() {
            $('#changeStatusModal').modal('show')
        })
        $('#updateStatus').on('change', function() {
            var status = $(this).val();
            if(status == {{ \App\Models\OrderStatus::schedule()->id }}){
                $('#scheduled_date_div').show();
            }else{
                $('#scheduled_date_div').hide();
            }
            
        })

        $('#saveChanges').on('click', function() {
            var status = $('#updateStatus').val();
            var scheduled_date = $('#scheduled_date').val();
            if(confirm('Are you sure want to update status?')){
                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.orders.status.update') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        status: status,
                        id: "{{ $order->id }}",
                        scheduled_date: scheduled_date
                    },
                    success: function(data) {
                        toastr.success('Status updated successfully');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                        
                    }
                });
            }
        })
    })
</script>
@endsection