@extends('layouts.userdashboard')
@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <div class="container-fluid">

        <div class="row">
            <div class="col-xl-12 col-lg-12">
                @if (session()->has('message'))
                    <div class="alert alert-success">
                        {{ session()->get('message') }}
                        <span aria-hidden="true">&times;</span>
                    </div>
                @endif
                <div class="card card-1">
                    <div class="card-header bg-white">
                        <div class="media flex-sm-row flex-column-reverse justify-content-between ">

                            <div class="col my-auto">

                                <h4 class="mb-0">Thanks for your Order,<span
                                        class="change-color">{{ $user->name }}</span> !</h4>
                            </div>
                            <div>
                                <a href="{{ url('user/viewPDF/' . $order->id) }}"><i class="fas fa-download"></i>View
                                    Invoice</a>
                            </div>

                        </div>
                    </div>
                    <div class="card-body">
                        @if(strtolower($order->payment_type) != 'online' || $order->is_paid)
                        <div class="row justify-content-between mb-3">
                            <div class="col-auto">
                                <h6 class="color-1 mb-0 change-color">Receipt</h6>
                            </div>
                            @if (!empty($offer))
                                <div class="col-auto "><small>Receipt Voucher : {{ $offer->name }}</small></div>
                            @endif
                            @if ($order->is_paid && $order->order_status == 3)
                                <div style="float: right; display: contents;">
                                    <a href="#" data-toggle="modal"
                                       data-target="#exampleModalLong"><small>Return Request</small></a>
                                </div>
                            @endif
                            @if ($order->canCancelled())
                                <div style="float: right; display: contents;">
                                    <a href="#" class="btn-link" data-toggle="modal"
                                       data-target="#exampleModalLongcancel"><small>Cancel Order</small></a>
                                </div>
                            @else
                                @if ($order->order_status == 0 || $order->order_status == 1 || $order->order_status == 2)
                                    <div style="float: right; display: contents;">
                                        {{-- <p>{{  $order->cancelStatus() }}</p> --}}
                                        <a href="#" class="btn-link" style="text-decoration: none; color:black;">Your
                                            Order was <br><small
                                                style=" color: red; font-size: 18px; letter-spacing: 0.05em; font-weight: 800; ">{{  $order->cancelStatus() }}</small></a>
                                    </div>
                                @endif
                            @endif
                        </div>
                        @endif
                        <div class="row">
                            <div class="col">
                                <div class="card card-2">
                                    <div class="card-body">
                                        @if (!empty($orderitems))
                                            @foreach ($orderitems as $item)
                                                <div class="media mt-2">
                                                    <div class="sq align-self-center "
                                                         style="background-color:#dee2e6;">
                                                        <img class="img-fluid my-auto align-self-center mr-2 mr-md-4 pl-0 p-0 m-0"
                                                            src="{{ asset('storage/' . $item->item->image) }}" width="50"
                                                            height="80" /></div>
                                                    <div class="media-body my-auto text-right">

                                                        <div class="row my-auto flex-column flex-md-row">
                                                            <div class="col my-auto">
                                                                <h6 class="mb-0">{{ $item->name }}</h6>
                                                            </div>
                                                            {{-- <div class="col-auto my-auto"> <small>Golden Blue </small></div> --}}
                                                            {{-- @if (!empty($item->size)) <div class="col my-auto"> <small>Size : {{ $item->size }}</small></div> @endif
                                                            @if (!empty($item->color)) <div class="col my-auto"> <small>Color : {{ $item->color }}</small></div> @endif --}}
                                                            <div class="col my-auto"><small>Qty
                                                                    : {{ $item->qty }}</small></div>
                                                            <div class="col my-auto">
                                                                <h6 class="mb-0"> Total
                                                                    Rs. {{ $item->price * $item->qty }}</h6>
                                                                <h6 class="mb-0">Rs. {{ $item->price }}</h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                        <hr class="my-3 ">
                                        <div class="row">
                                            <div class="col-md-3 mb-3"><small> Track Order <span><i
                                                            class=" ml-2 fa fa-refresh"
                                                            aria-hidden="true"></i></span></small></div>
                                            <div class="col mt-auto">
                                                <div class="progress my-auto">
                                                    @if ($order->order_status == 0)
                                                        <div class="progress-bar progress-bar rounded" style="width: 0%"
                                                            role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                                            aria-valuemax="100"></div>
                                                    @elseif($order->order_status == 1)
                                                        <div class="progress-bar progress-bar rounded" style="width: 10%"
                                                            role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                                            aria-valuemax="100"></div>
                                                    @elseif($order->order_status == 2)
                                                        <div class="progress-bar progress-ba   r rounded" style="width: 50%"
                                                            role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                                            aria-valuemax="100"></div>
                                                    @elseif($order->order_status == 3)
                                                        <div class="progress-bar progress-bar rounded" style="width: 100%"
                                                            role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                                            aria-valuemax="100"></div>
                                                    @endif
                                                </div>
                                                <div class="media row justify-content-between ">
                                                    <div class="col-auto text-right"><span> <small
                                                                class="text-right mr-sm-2">Confirmed</small> <i
                                                                class="fa fa-circle active"></i> </span></div>
                                                    <div class="col-auto"><span> <small class="text-right mr-sm-2">Out for
                                                                delivery</small><i class="fa fa-circle active"></i></span>
                                                    </div>
                                                    <div class="col-auto flex-col-auto"><small
                                                            class="text-right mr-sm-2">Delivered</small><span> <i
                                                                class="fa fa-circle"></i></span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col">
                                <div class="row justify-content-between">
                                    {{-- <div class="col-auto">
                                        <p class="mb-1 text-dark"><b>Order Details</b></p>
                                    </div> --}}
                                    <div class="flex-sm-col text-right col">
                                        <p class="mb-1"><b>Total</b></p>
                                    </div>
                                    <div class="flex-sm-col col-auto">
                                        <p class="mb-1">Rs. {{ $order->amount }}</p>
                                    </div>
                                </div>
                                @if (!empty($offer))
                                    <div class="row justify-content-between">
                                        <div class="flex-sm-col text-right col">
                                            <p class="mb-1"><b>Discount</b></p>
                                        </div>
                                        <div class="flex-sm-col col-auto">
                                            <p class="mb-1">
                                                Rs. {{ $order->amount - $order->shipping_price - $total }}</p>
                                        </div>
                                    </div>
                                @endif
                                {{-- <div class="row justify-content-between">
                                    <div class="flex-sm-col text-right col">
                                        <p class="mb-1"><b>GST 18%</b></p>
                                    </div>
                                    <div class="flex-sm-col col-auto">
                                        <p class="mb-1">843</p>
                                    </div>
                                </div> --}}
                                <div class="row justify-content-between">
                                    <div class="flex-sm-col text-right col">
                                        <p class="mb-1"><b>Delivery Charges</b></p>
                                    </div>
                                    <div class="flex-sm-col col-auto">
                                        <p class="mb-1">
                                            {{ !empty($order->shipping_price) ? 'Rs.' . $order->shipping_price : 'Free' }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="row invoice ">
                            <div class="col">
                                <p class="mb-1"> Invoice Number : {{ $order->order_no }}</p>
                                <p class="mb-1">Invoice Date : {{date('d-m-Y H:m:s', strtotime($order->created_at))}}</p>
                                <!-- <p class="mb-1">Recepits Voucher:18KU-62IIK</p> -->
                            </div>
                        </div> --}}
                    </div>
                    <div class="card-footer">
                        <div class="jumbotron-fluid">
                            <div class="row justify-content-between ">
                                <div class="col-auto my-auto ">
                                    @if(!$order->is_paid && strtolower($order->payment_type) === 'online')
                                        <a href="{{ route('orders.pay', $order) }}">Pay now</a>
                                    @else
                                        <h3 class="mb-0 font-weight-bold text-dark">TOTAL PAID</h3>
                                    @endif
                                </div>
                                <div class="col-auto my-auto ml-auto">
                                    <h3 class="text-dark">Rs. {{ $order->amount }}</h3>
                                </div>
                            </div>
                            <!-- <div class="row mb-3 mt-3 mt-md-0">
                                    <div class="col-auto border-line"> <small class="text-white">PAN:AA02hDW7E</small></div>
                                    <div class="col-auto border-line"> <small class="text-white">CIN:UMMC20PTC </small></div>
                                    <div class="col-auto "><small class="text-white">GSTN:268FD07EXX </small> </div>
                                </div> -->
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <!-- Content Row -->
    </div>
    <!-- modal form -->
    <!-- Button trigger modal -->
    @if ($order->canCancelled())
        <!-- Modal -->
        <div class="modal fade" id="exampleModalLongcancel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Cancel Order</h5>
                        <button type="button" style="right: 30px;outline: 0;" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        @foreach ($orderitems as $item)
                            @if ($item->request != true)
                                <form action="{{ url('cancel/request/' . $item->id) }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">

                                    <div class="row">
                                        <div class="col-md-2">
                                            <input type="checkbox" id="checked" name="checked[]"
                                                value="{{ $item->id }}">
                                            <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            @foreach ($orderitems as $item)
                                                <form action="{{ url('cancel/request/' . $item->id) }}" method="post"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">

                                                    <div class="row">
                                                        <div class="col-md-2">
                                                            <input type="checkbox" id="checked" name="checked[]"
                                                                value="{{ $item->id }}">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <img class="img-fluid my-auto align-self-center mr-2 mr-md-4 pl-0 p-0 m-0"
                                                                src="{{ asset('storage/' . $item->image) }}" width="80"
                                                                height="80" />
                                                        </div>
                                                        <div class="col-md-4">
                                                            <input type="text" class="form-control"
                                                                value="{{ $item->name }}" readonly>
                                                        </div>

                                                    </div>
                                            @endforeach
                                        </div>

                                        <div class="col-md-12">
                                            <label for="">Why Are You Cancel This ?</label>
                                            <textarea class="form-control" name="comment" placeholder="Comment" id=""
                                                      cols="10" rows="3"></textarea>
                                            <p>100 Character Minimum</p>
                                            <!-- <h6>NOTE: We sre</h6> -->
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger"
                                                    data-dismiss="modal">Close
                                            </button>
                                            <button type="submit" class="btn btn-success">Save changes</button>
                                        </div>
                                    </div>
                                </form>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <!-- end -->
    @endif


    @if ($order->order_status == 3)
        <!-- Modal -->
        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Return Request</h5>
                        <button type="button" style="right: 30px;outline: 0;" class="close"
                            data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        @foreach ($orderitems as $item)
                            @if ($item->request != true)
                                <form action="{{ url('return/request/' . $item->id) }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">

                                    <div class="row">
                                        <div class="col-md-2">
                                            <input type="checkbox" id="checked" name="checked[]"
                                                value="{{ $item->id }}">
                                            <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            @foreach ($orderitems as $item)
                                                <form action="{{ url('return/request/' . $item->id) }}" method="post"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">

                                                    <div class="row">
                                                        <div class="col-md-2">
                                                            <input type="checkbox" id="checked" name="checked[]"
                                                                value="{{ $item->id }}">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <img class="img-fluid my-auto align-self-center mr-2 mr-md-4 pl-0 p-0 m-0"
                                                                src="{{ asset('storage/' . $item->image) }}" width="80"
                                                                height="80" />
                                                        </div>
                                                        <div class="col-md-4">
                                                            <input type="text" class="form-control"
                                                                value="{{ $item->name }}" readonly>
                                                        </div>

                                                    </div>
                                            @endforeach
                                        </div>

                                        <div class="col-md-12">
                                            <label for="">Why Are You Return This ?</label>
                                            <textarea class="form-control" name="comment" placeholder="Comment" id=""
                                                      cols="10" rows="3"></textarea>
                                            <p>100 Character Minimum</p>
                                            <!-- <h6>NOTE: We sre</h6> -->
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger"
                                                    data-dismiss="modal">Close
                                            </button>
                                            <button type="submit" class="btn btn-success">Save changes</button>
                                        </div>
                                    </div>
                                </form>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    <!-- end -->
    @endif


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous">
    </script>
@endsection