@extends('layouts.front-end.app')
@section('title', 'Order Details')

@section('content')
    <div class="container">
        <div class="cs_height_45 cs_height_lg_45"></div>
        <ol class="breadcrumb cs_fs_18 mb-0">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item active">Order Details</li>
        </ol>
        <div class="cs_height_30 cs_height_lg_30"></div>
    </div>
    <div class="container">
        <div class="cs_account_wrap">
            @include('web-views.partials._profile-aside')
            <div class="cs_account_content">
                <div class="cs_account_card cs_radius_10">
                    <div class="cs_account_card_head cs_type_1">
                        <h3 class="cs_fs_18 mb-0">Order ID: #{{ $order->id }}</h3>
                        @if ($order['order_status'] == 'failed' || $order->order_status == 'canceled')
                            <span class="btn btn-sm btn-danger text-white">
                                {{ $order['order_status'] }}
                            </span>
                        @elseif(
                            $order['order_status'] == 'confirmed' ||
                                $order['order_status'] == 'processing' ||
                                $order['order_status'] == 'delivered')
                            <span class="btn btn-sm btn-success text-white">
                                {{ $order['order_status'] }}
                            </span>
                        @else
                            <span class="btn btn-sm btn-info text-white">
                                {{ $order['order_status'] }}
                            </span>
                        @endif
                    </div>
                    <div class="cs_plr_25">
                        <ul class="cs_card_price_list cs_mp_0">
                            <li class="cs_card_price_list_seperator_head cs_primary_color">
                                <span class="cs_medium">Items</span>
                                <span class="cs_medium">Price</span>
                            </li>
                            @foreach ($order->orderDetails as $data)
                            <li>
                                <span class="cs_light">{{$data->product->name}}</span>
                                <span class="cs_light">{{\App\CPU\Helpers::currency_converter($data->price)}} x {{$data->qty}}</span>
                            </li>
                            @endforeach
                            @php( $summary =\App\CPU\OrderManager::order_summary($order))
                            <li class="cs_card_price_list_seperator_up">
                                <span class="cs_light">Subtotal</span>
                                <span class="cs_semibold cs_primary_color cs_semibold">{{\App\CPU\Helpers::currency_converter($summary['subtotal'])}}</span>
                            </li>
                            <li>
                                <span class="cs_light">Total Discount</span>
                                <span class="cs_semibold cs_primary_color cs_semibold">-{{\App\CPU\Helpers::currency_converter($summary['total_discount_on_product'])}}</span>
                            </li>
                            <li>
                                <span class="cs_light">Shipping Fee</span>
                                <span class="cs_semibold cs_primary_color cs_semibold">{{\App\CPU\Helpers::currency_converter($summary['total_shipping_cost'])}}</span>
                            </li>
                            <li class="cs_total_price">
                                <span class="cs_medium cs_fs_24 cs_primary_color">Total</span>
                                <span class="cs_medium cs_fs_24 cs_primary_color">{{\App\CPU\Helpers::currency_converter($order->order_amount)}}</span>
                            </li>
                        </ul>
                        <div class="cs_delivery_address">
                            <div>
                                <b>Delivery Address:</b>
                                Name: {{$order->shipping->contact_person_name}} <br>
                                Number: +88{{$order->shipping->phone}} <br>
                                Address: {{$order->shipping->address}}
                            </div>
                            <div class="text-end">
                                <b>Paid by</b>
                                @if ($order->payment_method == 'cash_on_delivery')
                                Cash on Delivery
                                @elseif ($order->payment_method =='online_payment')
                                Online Payment
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('script')
    <script>
        $(document).ready(function() {

            $('#track_order').on('click', function() {
                let order_id, phone_number;
                order_id = {{ $order->id }}
                phone_number = {{ $order->customer_phone }}
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('track-order.result') }}",
                    method: 'POST',
                    data: {
                        order_id: order_id,
                        phone_number: phone_number,
                    },
                    success: function() {
                        var url = "{{ route('track-order.result-view') }}" + '?order_id=' +
                            '{{ $order->id }}' +
                            '&phone_number=' + '{{ $order->customer_phone }}';
                        window.location.href = url;
                    }
                });
            })
        })
    </script>

    <script src="{{ asset('assets/front-end/js/spartan-multi-image-picker.js') }}"></script>
    <script type="text/javascript">
        $(function() {
            $("#coba").spartanMultiImagePicker({
                fieldName: 'fileUpload[]',
                maxCount: 5,
                rowHeight: '150px',
                groupClassName: 'col-md-4',
                maxFileSize: '',
                placeholderImage: {
                    image: '{{ asset('assets/front-end/img/image-place-holder.png') }}',
                    width: '100%'
                },
                dropFileLabel: "Drop Here",
                onAddRow: function(index, file) {

                },
                onRenderedPreview: function(index) {

                },
                onRemoveRow: function(index) {

                },
                onExtensionErr: function(index, file) {
                    toastr.error('Please only input png or jpg type file', {
                        CloseButton: true,
                        ProgressBar: true
                    });
                },
                onSizeErr: function(index, file) {
                    toastr.error('File size too big', {
                        CloseButton: true,
                        ProgressBar: true
                    });
                }
            });
        });
    </script>
@endpush