@extends('layouts.frontend.app')
@section('style')

    <style>
        @media screen and (max-width: 480px){
            .table,th{
                font-size: 10px !important;
            }

        }
    </style>

@endsection
@section('content')
    <div class="page-wrapper">

        @include('layouts.frontend.header')

        <main class="main">
            <div class="page-content d-flex justify-content-center">
                <div class="col-12 col-lg-10">

{{--                    <div class="mb-3 text-right d-flex justify-content-between bg-gray p-4 w-50 w-lg text-nowrap float-right rounded">--}}
{{--                        <div>--}}
{{--                            @if($order->payment_slip!==null)--}}
{{--                                <img src="{{asset('storage/order_payment/'.$order->payment_slip)}}" alt="" width="150px" height="150px" class="mr-2 rounded">--}}
{{--                            @else--}}
{{--                                <p class="font-weight-bold text-primary  mb-0">Cash On Delivery</p>--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                        <div>--}}
{{--                            <p>Date : <span class="text-dark">{{ $order->created_at->format('d M Y') }}</span></p>--}}
{{--                            <p class="mb-0 mt-1 ">Order Status : @if($order->status == '0')--}}
{{--                                    <span class="text-warning font-weight-bold">Pending</span>--}}
{{--                                @elseif($order->status == '1')--}}
{{--                                    <span class="text-primary font-weight-bold">Confirmed</span>--}}
{{--                                @elseif($order->status == '2')--}}
{{--                                    <span class="text-success font-weight-bold">Complete</span>--}}
{{--                                @elseif($order->status == '3')--}}
{{--                                    <span class="text-danger font-weight-bold">Rejected</span>--}}
{{--                                @else--}}
{{--                                    <span class="text-info font-weight-bold">Refund</span>--}}
{{--                                @endif--}}
{{--                            </p>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                <table
                    class="table table-borderless table-nowrap mb-0">
                    <thead class="text-muted ">
                    <tr class="text-md-start">
                        <th scope="col">Product</th>
                        <th class="d-none d-md-table-cell">Photo</th>
                        <th scope="col">Quantity</th>

                        <th>Size</th>
                        <th scope="col">Price</th>
                        <th scope="col" class="d-none d-md-table-cell">Discount Price</th>
                        <th scope="col">Discount</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($orders as $key=>$product)
                        @php $p=\App\Models\Product::pluck('id') @endphp
                        @if($p->contains($product->product_id))
                        <tr class=" text-md-start">
                            <td>{{\App\Models\Product::findOrFail($product->product_id)->name}}</td>
                            <td class="d-none d-md-table-cell ">
                                <img src="{{\App\Models\ProductPhoto::where('product_id',$product->product_id)->first()->name}}" alt="" width="100px" height="80px">
                            </td>
                            <td >
                                {{ $product->quantity }}
                            </td>
                            <td>{{$product->product_size}}</td>
                            <td>{{ number_format( $product->product_price) }}</td>
                            <td class="d-none d-md-table-cell">{{ number_format($product->discount_price)  }}</td>
                            <td>
                                {{ $product->discount_percent}} %
                                <div class="d-lg-none ">
                                    {{ number_format($product->discount_price) }} mmk
                                </div>
                            </td>

                        </tr>
                        @else
                            <tr>
                                <td>-</td>
                                <td>
                                    -
                                </td>
                                <td >
                                    {{ $product->quantity }}
                                </td>
                                <td>{{ $product->product_price}}</td>
                                <td>{{ $product->sub_price }}</td>
                                <td>{{ $product->created_at->format('Y-m-d') }}</td>
                                <td>
                                    @if(\App\Models\Order::find($product->order_id)->status == '0')
                                        <span class="text-warning font-weight-bold">Pending</span>
                                    @elseif(\App\Models\Order::find($product->order_id)->status == '1')
                                        <span class="text-primary font-weight-bold">Confirmed</span>
                                    @elseif(\App\Models\Order::find($product->order_id)->status == '2')
                                        <span class="text-success font-weight-bold">Complete</span>
                                    @elseif(\App\Models\Order::find($product->order_id)->status == '3')
                                        <span class="text-danger font-weight-bold">Rejected</span>
                                    @else
                                        <span class="text-info font-weight-bold">Refund</span>
                                    @endif
                                </td>
                            </tr>
                        @endif
                    @empty
                        <tr >
                            <td colspan="7" class="text-center">
                                <img src="{{ asset('assets/images/nodata.webp') }}" class="d-inline " width="20%" alt="">
                            </td>
                        </tr>
                    @endforelse
                    </tbody><!-- end tbody -->
                    <tfoot class="text-end">
                        <tr class="h6">
                            <td colspan="7" class="text-right">Total : {{  number_format($total) }} MMK</td>
                        </tr>
                        <tr class="h6">
                            <td colspan="7" class="text-right">Delivery Fees : {{ number_format(\App\Models\Township::find($order->township_id)->fees) }} MMK</td>
                        </tr>
                        <tr class="font-weight-bold h6">
                            <td colspan="7" class="text-right">Grand Total : {{ number_format($total+\App\Models\Township::find($order->township_id)->fees) }} MMK</td>
                        </tr>

                    </tfoot>
                </table>

                </div>
            </div>
        </main><!-- End .main -->

        @include('layouts.frontend.footer')
    </div><!-- End .page-wrapper -->
    <button id="scroll-top" title="Back to Top"><i class="icon-arrow-up"></i></button>

    @include('partials.mobile-menu')
    @include('partials.login_modal')
@endsection
@section('script')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).on('change', '.cat', function(){
            let id = $(this).data('id');
            $.ajax({
                type: "post",
                dataType: "json",
                url: '/products-by-category',
                data: {'id': id},
                success: function(data){
                    console.log(data)
                }
            });
        })
        let showItem=(photo)=>{
            document.getElementById('product-zoom').src=photo;
        }

        $('.qty').change(function(){
            $(this).parent().find('.hqty').val($(this).val())
            $(this).parentsUntil('tbody').find('.total-col').text(parseInt(parseInt($(this).parent().find('.hqty').val())*parseInt($(this).parentsUntil('tbody').find('.price-col').text())))
            $.ajax({
                url: "{{ route('change.session') }}",
                data: {'quantity': $(this).parent().find('.hqty').val(), 'id': $(this).parent().find('.hid').val()},
                type: 'get',
                success: function(response){
                    var total=0;
                    console.log(response)
                    $.each(response,function (i,res){
                        total+=res["quantity"]*res["price"]
                    })
                    $('.total').text(total+" MMK")
                }
            });
        })
    </script>
@endsection