@extends('layouts.base')

@section('meta')

@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/daterangepicker.css') }}">
@endsection

@section('content')
    <div class="pt-30 pt-sm-40 pb-10 pb-sm-30">
        <div class="container">
            <div class="row">
                <div class="d-flex align-items-center justify-content-between flex-wrap">
                    <div class="d-flex align-items-center flex-wrap mb-3 mb-sm-0">
                        <div class="me-4 mb-3 mb-sm-0">
                            <h2>{{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.order-no') }}<b>#{{ $order['id'] }}</b></h2>
                            <p>({{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.purchase-order-no') }} {{ $order['uuid'] }})</p>
                        </div>
                        <button type="button" class="btn pl-2 pr-2 font-size14" style="color: {{ $order['status']['color'] }}; border-color: {{ $order['status']['color'] }}; border-radius:15px;">{{ $order['status']['title'] }}</button>
                    </div>
                    <div class="date">
                        <span class="text-muted">{{ \Carbon\Carbon::parse($order['created_at'])->format('M d, Y, H:i:s') }}</span>
                    </div>
                </div>
            </div>
            <div class="row mt-10">
                <div class="table-responsive mt-3">
                    <table class="table table-borderless text-white islem-detay-table">
                        <thead class="badge-secondary text-uppercase">
                        <tr>
                            <th>{{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.products') }} ({{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.products-id') }} : <small>{{ $order->uuid }}</small>)</th>
                            <th>{{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.table.type') }}</th>
                            <th>{{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.table.qty') }}</th>
                            <th>{{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.table.price-unit') }}</th>
                            <th>{{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.table.amount') }}</th>
                            <th>{{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.table.comission-fee') }}</th>
                            <th>{{ \App\Metha\MethaTranslate::translate($translateModel,'g2g.header.table.payable-amount') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{ isset($order->game->title) ? $order->game->title.' >' : null }} {{ $order->platform->title }} (K Coins)</td>
                            <td>
                                <a target="_blank" href="#!"><img src="{{ asset('assets/images/icons/fut-coin32.png') }}" alt="" class="img-fluid"></a>
                            </td>
                            <td>{{ number_format($order['quantity']) }}</td>
                            <td>{{ sprintf('%s %s',$order['unit_price'],$order['currency']['symbol']) }}</td>
                            <td>{{ sprintf('%s %s',$order['total_amount'],$order['currency']['symbol']) }}</td>
                            <td>{{ $order['discount'] }}%</td>
                            <td>----</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row mt-10">
                <div class="d-flex align-items-center justify-content-between flex-wrap">
                    <div class="d-flex mb-3 flex-wrap">
                        <div class="d-flex align-items-center pr-4 mb-3 d-lg-none">
                            <img class="img-avatar" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="...">
                            <div class="ml-3 d-flex flex-column">
                                <h6 class="mb-0">Kullanıcı</h6>
                                <span class="text-muted text-uppercase">Supplier</span>
                                {{--<span class="text-muted font-size14 line-height1"><a href="#!">Chat Now</a></span>--}}
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <img class="img-avatar" src="{{ asset('assets/images/avatar/'.$order->user->profile_photo_path) }}" alt="...">
                            <div class="ml-3">
                                <h6 class="mb-0">{{ $order->user->name }}</h6>
                                <span class="text-muted text-uppercase">Buyer</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 flex-wrap">
                        @if(isset($adminCheck))
                            <a role="button" class="btn btn-primary mr-3 mb-3 mb-sm-0" data-toggle="modal" data-target="#core_order_image"><i class="fas fa-image mr-2 text-white"></i> {{ $translateModel['g2g.header.table.button.upload-view'] }}</a>
                        @endif
                        @if($order->order_type != 'outside-sell')
                            <a href="{{ route('site.account.chat.card',['code' => $order['card_no']]) }}" class="btn btn-warning mr-3 mb-3 mb-sm-0"><i class="fab fa-rocketchat mr-2 green-bold"></i> {{ $translateModel['g2g.header.table.button.chat-now'] }}</a>
                        @endif

                            <a href="{{ route('site.account.invoice',['code' => $order['uuid']]) }}" target="_blank" class="btn btn-success mb-3 mb-sm-0"><i class="fa fa-file-invoice mr-2 green-bold"></i> {{ $translateModel['g2g.header.table.button.invoice'] }}</a>
                    </div>
                </div>
            </div>
            <div class="row mt-0 mt-sm-5">
                <div class="table-responsive">
                    <table class="table text-white">
                        <tbody>
                        @if(isset($order->game->title))
                            <tr>
                                <th style="width:25%;" scope="row">{{ $translateModel['g2g.header.table.list.game'] }}</th>
                                <td style="width:1%;">:</td>
                                <td style="width:74%;">{{ $order->game->title }}</td>
                            </tr>
                        @endif
                        <tr>
                            <th style="width:25%;" scope="row">{{ $translateModel['g2g.header.table.list.trade-mode'] }}</th>
                            <td style="width:1%;">:</td>
                            <td style="width:74%;">{{ isset($orderInfo->detail->method) ? strtoupper($orderInfo->detail->method) : null }}</td>
                        </tr>
                        <tr>
                            <th style="width:25%;" scope="row">{{ $translateModel['g2g.header.table.list.platform'] }}</th>
                            <td style="width:1%;">:</td>
                            <td style="width:74%;">{{ $order->platform->title }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row mt-3 mt-sm-10">
                <div class="col-md-12">
                    <h6>{{ $translateModel['g2g.body.delivery-status'] }} : {{ number_format($deliveryCalc) }} / {{ number_format($order['quantity']) }} {{ $translateModel['g2g.body.delivered'] }}</h6>
                    <div style="height:7px;" class="progress">
                        <div class="progress-bar wow fadeInLeft" data-wow-duration="0.8s" data-wow-delay=".8s" role="progressbar" style="width: {{ $deliveryCalc / $order['quantity'] * 100 }}%; visibility: visible; animation-duration: 0.8s; animation-delay: 0.8s; animation-name: fadeInLeft;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="row mt-7 mt-sm-10">
                @foreach($order['orderParts'] as $item)
                    @if($item['completed'] == 'completed')
                        <div class="d-flex align-items-center justify-content-between mb-5">
                            <div class="d-flex align-items-center">
                                <div class="d-flex align-items-center pr-4 mb-3 d-none d-lg-flex">
                                    <img class="img-avatar" src="{{ asset(sprintf('assets/images/avatar/%s',$item['dealer_id'] != null ? $item['dealer']['profile_photo_path'] : null)) }}" alt="...">
                                    <div class="ml-3 d-flex flex-column">
                                        <h6 class="mb-0">{{ strlen($item['dealer']['username']) >= 1 ? substr($item['dealer']['username'],0,1).'***' : $item['dealer']['username'] }}</h6>
                                        <span class="text-muted text-uppercase">{{ $translateModel['g2g.body.list.supplier'] }}</span>
                                        {{--<span class="text-muted font-size14 line-height1"><a href="{{ route('site.account.orderChat',['code' => $item['order_id'],'user_id' => $item['dealer']['id']]) }}">{{ $translateModel['g2g.body.list.chat-now'] }}</a></span>--}}
                                    </div>
                                </div>
                                @if($order->order_type != 'standart')
                                    <a class="mr-3" target="_blank" href="{{ asset('storage/order/parts/'.json_decode($item['image'],true)[0]) }}"><img class="img-fluid" width="100" style="height: 100px;" src="{{ asset('storage/order/parts/'.json_decode($item['image'],true)[0]) }}" alt="..."></a>
                                @else
                                    {{--<a class="mr-3" target="_blank" href="{{ asset('storage/order/parts/'.json_decode($item['image'],true)[0]) }}"><img class="img-fluid" width="100" style="height: 100px;" src="{{ asset('storage/order/parts/'.json_decode($item['image'],true)[0]) }}" alt="..."></a>--}}
                                @endif
                                <div class="">
                                    <div class="date">
                                        <span class="text-muted">{{ \Carbon\Carbon::parse($item['created_at'])->format('M d, Y h:i:s') }}</span>
                                    </div>
                                    <h6 class="mb-0">{{ $translateModel['g2g.body.list.delivered'] }} <b>{{ number_format($item['happening']) }}</b></h6>
                                    <span class="text-muted">{{ $item['completed'] == 'pending' ? 'Pending devirey confirmation from the buyer.' : 'Completed' }}</span>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end text-center">
                                <!--mobile cancel-->
                                <button type="button" class="btn d-block d-sm-none" data-toggle="modal" data-target="#picture_popup"><i class="fal fa-pen"></i></button>
                                <button type="button" class="btn d-block d-sm-none"><i class="fas fa-times"></i></button>
                                <!--desktop cancel-->
                                <a data-detail='{!! json_encode($item) !!}' href="javascript:void(0)" data-action="editModal" data-toggle="modal" data-target="#picture_popup" class="rbbtn rbblue mr-3 mb-3 mb-lg-0 text-uppercase d-none d-sm-block" data-type="completedModal">{{ $translateModel['g2g.body.list.edit-delivered'] }}</a>
                                <a href="javascript:void(0)" data-toggle="modal" data-order-part-id="{{ $item['id'] }}" data-order-part-happening="{{ number_format($item['happening']) }}" data-target="#areYouSure" class="rbbtn rbred mr-3 mb-3 mb-lg-0 text-uppercase d-none d-sm-block">{{ $translateModel['g2g.body.list.cancel-delivered'] }}</a>
                            </div>
                        </div>
                        <hr>
                    @endif
                @endforeach
            </div>
            <hr>
            <div class="row mt-7 mt-sm-10">
                <div class="section-title text-center mb-12 aos-init aos-animate" data-aos="fade-up">
                    <h2 class="title">Pasife Alınmış Kartlar </h2>
                </div>
                @foreach($order['orderParts'] as $item)
                    @if($item['completed'] == 'passive')
                        <div class="d-flex align-items-center justify-content-between mb-5">
                            <div class="d-flex align-items-center">
                                <div class="d-flex align-items-center pr-4 mb-3 d-none d-lg-flex">
                                    <img class="img-avatar" src="{{ asset(sprintf('assets/images/avatar/%s',$item['dealer_id'] != null ? $item['dealer']['profile_photo_path'] : null)) }}" alt="...">
                                    <div class="ml-3">
                                        <h6 class="mb-0">{{ strlen($item['dealer']['username']) >= 1 ? substr($item['dealer']['username'],0,1).'***' : $item['dealer']['username'] }}</h6>
                                        <span class="text-muted text-uppercase">{{ $translateModel['g2g.body.list.supplier'] }}</span>
                                    </div>
                                </div>
                                @if($order->order_type != 'standart')
                                    <a class="mr-3" target="_blank" href="{{ asset('storage/order/parts/'.json_decode($item['image'],true)[0]) }}"><img class="img-fluid" width="100" style="height: 100px;" src="{{ asset('storage/order/parts/'.json_decode($item['image'],true)[0]) }}" alt="..."></a>
                                @else
                                    {{--<a class="mr-3" target="_blank" href="{{ asset('storage/order/parts/'.json_decode($item['image'],true)[0]) }}"><img class="img-fluid" width="100" style="height: 100px;" src="{{ asset('storage/order/parts/'.json_decode($item['image'],true)[0]) }}" alt="..."></a>--}}
                                @endif
                                <div class="">
                                    <div class="date">
                                        <span class="text-muted">{{ \Carbon\Carbon::parse($item['created_at'])->format('M d, Y h:i:s') }}</span>
                                    </div>
                                    <h6 class="mb-0">{{ $translateModel['g2g.body.list.delivered'] }} <b>{{ number_format($item['happening']) }}</b></h6>
                                    <span class="text-muted">{{ $item['completed'] == 'pending' ? 'Pending devirey confirmation from the buyer.' : 'Completed' }}</span>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end text-center">
                                <!--mobile cancel-->
                                <button type="button" class="btn d-block d-sm-none" data-toggle="modal" data-target="#picture_popup"><i class="fal fa-pen"></i></button>
                                <button type="button" class="btn d-block d-sm-none"><i class="fas fa-times"></i></button>
                                <!--desktop cancel-->
                                <a data-detail='{!! json_encode($item) !!}' href="javascript:void(0)" data-toggle="modal" data-target="#picture_popup" data-order-part-id="{{ $item['id'] }}" data-order-part-happening="{{ number_format($item['happening']) }}" class="rbbtn rbblue mr-3 mb-3 mb-lg-0 text-uppercase d-none d-sm-block" data-type="passiveModal">Editle ve Geri al</a>
                            </div>
                        </div>
                        <hr>
                    @endif
                @endforeach
            </div>
        </div>
    </div>



    <div style="background-color: rgb(0,0,0,0.9);" class="modal fade aktif-siparis-modal pl-0" id="areYouSure" data-backdrop="static">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-body">

                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex align-items-center">
                                <div class="delDanger">
                                    <i class="fal fa-exclamation-triangle"></i>
                                </div>
                                <div class="d-flex flex-column align-self-center">
                                    <h3>{{ $translateModel['g2g.list.cancel.title'] }}</h3>
                                    <p class="text-muted" data-dialog-content>{{ $translateModel['g2g.list.cancel.message'] }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">{{ $translateModel['g2g.list.cancel.button.cancel'] }}</button>
                    <button type="button" class="btn btn-danger removeCard">{{ $translateModel['g2g.list.cancel.button.delete'] }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Müşterinin İlettiği Görsel İçin Popup -->
    <div style="background-color: rgb(0,0,0,0.9);" class="modal fade aktif-siparis-modal pl-0" id="picture_popup" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ $translateModel['g2g.edit.modal.title'] }} <span data-order-modal-code></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    <img data-type="modalOrderPartImage" class="img-fluid mb-3" alt="...">
                    <p class="d-flex align-items-center"><span class="me-2">{{ $translateModel['g2g.edit.modal.label1'] }} </span><input type="text" class="form-control" id="exampleFormControlInput1" data-order-modal-quantity></p>
                    <p class="d-flex align-items-center"><span class="me-2">Oyuncu Ücreti </span><input type="text" class="form-control" id="exampleFormControlInput2" data-order-modal-commission></p>
                    <p class="d-flex align-items-center"><span class="me-2">{{ $translateModel['g2g.edit.modal.label2'] }} </span><input type="text" class="form-control" id="exampleFormControlInput3" data-order-modal-happening></p>
                    <form action="#">
                        <ul class="ul_li_block clearfix d-flex justify-content-between">
                            <li>
                                <div class="checkbox_item">
                                    <input class="form-check-input" type="radio" name="alimTuru" id="hemen_al" value="hemen_al">
                                    <label class="form-check-label" for="hemen_al">
                                        {{ $translateModel['g2g.edit.modal.hemen-al'] }}
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox_item">
                                    <input class="form-check-input" type="radio" name="alimTuru" id="teklif" value="teklif">
                                    <label class="form-check-label" for="teklif">
                                        {{ $translateModel['g2g.edit.modal.teklif'] }}
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-modal-update>{{ $translateModel['g2g.edit.modal.button'] }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Müşterinin İlettiği Görsel İçin Popup -->
    <div style="background-color: rgb(0,0,0,0.9);" class="modal fade aktif-siparis-modal pl-0" id="core_order_image" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Sipariş Görseli</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    @if(isset($order->images))
                        @foreach(json_decode($order->images,true) as $image)
                            <img src="{{ asset('storage/order/standart/'.$image) }}" class="img-fluid mb-3" alt="...">
                        @endforeach
                    @endif
                </div>
                <div class="modal-footer">
                    {{--<button type="button" class="btn btn-primary">{{ $translateModel['g2g.edit.modal.button'] }}</button>--}}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/slick.js') }}"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
@endsection

@section('script')
    <script>
        $(document).ready(function(){
            var alimTuru;
            $('[name="alimTuru"]').on('click', function(){
                alimTuru = $(this).val();
            });

            var editID;
            $('[data-action="editModal"]').on('click', function(){
                var data = $(this).data('detail');
                editID = data.id;
                var orderPartImages = JSON.parse(data.image);
                $('[data-type="modalOrderPartImage"]').attr({
                    src: '/storage/order/parts/' + orderPartImages[0],
                });
            });

            $('[data-type="passiveModal"]').on('click', function(){
                var dataDetail = $(this).data('detail');
                editID = dataDetail.id;
                $('[data-order-modal-code]').text('{{ $order['card_no'] }}');
                $('[data-order-modal-quantity]').val(dataDetail.quantity);
                $('[data-order-modal-happening]').val(dataDetail.happening);

                var orderPartImages = JSON.parse(dataDetail.image);
                $('[data-type="modalOrderPartImage"]').attr({
                    src: '/storage/order/parts/' + orderPartImages[0],
                });
            });

            $('[data-type="completedModal"]').on('click', function(){
                var dataDetail = $(this).data('detail');
                var cardDetail = JSON.parse(dataDetail.detail);

                $.each($('[name="alimTuru"]'), function(index, item){
                    if($(item).attr('id') == cardDetail.alim_turu)
                    {
                        $(item).prop('checked',true);
                    }
                });

                $('[data-order-modal-code]').text('{{ $order['card_no'] }}');
                $('[data-order-modal-quantity]').val(dataDetail.quantity);
                $('[data-order-modal-commission]').val(cardDetail.commission);
                $('[data-order-modal-happening]').val(dataDetail.happening);


                $('[]').attr('checked',true);
            });

            var orderPartID = null;
            $('[data-order-part-happening]').on('click', function(){
                var contentText = $('[data-dialog-content]').text().replace(/%s/,$(this).data('order-part-happening'));
                $('[data-dialog-content]').text(contentText);

                orderPartID = $(this).data('order-part-id');
            });

            $('.removeCard').on('click', function(){
                $.ajax({
                    url: '{{ route('api.v.order.part.cancel') }}',
                    type: 'POST',
                    data: {id:orderPartID},
                    success: function(result)
                    {
                        if(result.code == 200)
                        {
                            window.location.reload();
                        }
                    }
                })
            });

            $('[data-modal-update]').on('click', function(){
                $.ajax({
                    url: '{{ route('api.v.order.part.update') }}',
                    type: 'POST',
                    data: {
                        id:editID,
                        quantity: $('[data-order-modal-quantity]').val(),
                        happening: $('[data-order-modal-happening]').val(),
                        commission: $('[data-order-modal-commission]').val(),
                        alim_turu: alimTuru,
                    },
                    success: function(result)
                    {
                        if(result.code == 200)
                        {
                            //window.location.reload();
                        }
                    }
                })
            });

            $('[data-order-modal-commission]').on('input', function () {
                var teklifMiktar = $('[data-order-modal-quantity]').val();
                var teklifOyuncuUcreti = $(this).val();
                $('[data-order-modal-happening]').val(parseInt(teklifMiktar) - parseInt(teklifOyuncuUcreti));
            });
        });
    </script>
@endsection