@extends('layouts.app')

@section('content')

    <div class="d-flex justify-content-between align-items-center mb-20 content-heading">
        <h2 class="h4 font-w300 mb-0">عرض الطلب: #{{ $purchase->id }}</h2>
    </div>

    @if($purchase->status == 'paid')

        <div class="col-xs-12">
            <div class="alert alert-info" role="alert">يرجى الإنتظار جاري معالجة الطلب، الوقت المتوقع هو <span id="delivery_time">80</span> ثانية/ثوان</div>
        </div>

    @endif


    <div class="block">

        {!! Form::model($purchase) !!}
            <div class="block-content">
            
                <div class="row">
                
                    <div class="col-sm-6">

                        <div class="form-group">
                            {!! Form::label('id', 'رقم الطلب') !!}
                            {!! Form::text('id', null, ['class' => 'form-control', 'disabled' => true]) !!}
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="form-group">
                            {!! Form::label('current_status', 'حالة الطلب') !!}
                            {!! Form::text('current_status', strip_tags($purchase->readable_status), ['class' => 'form-control', 'disabled' => true]) !!}
                        </div>
                    </div>

                    <div class="col-sm-6">

                        <div class="form-group">
                            {!! Form::label('category', 'التصنيف') !!}
                            {!! Form::text('category', $purchase->category->title, ['class' => 'form-control', 'disabled' => true]) !!}
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="form-group">
                            {!! Form::label('product', 'المنتج') !!}
                            {!! Form::text('product', $purchase->product->title, ['class' => 'form-control', 'disabled' => true]) !!}
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="form-group">
                            {!! Form::label('price', 'سعر الشراء') !!}
                            {!! Form::text('price', $purchase->price . ' ' . setting('store_currency'), ['class' => 'form-control', 'disabled' => true]) !!}
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="form-group">
                            {!! Form::label('date', 'تاريخ الشراء') !!}
                            {!! Form::text('date', $purchase->created_at->format('Y-m-d'), ['class' => 'form-control', 'disabled' => true]) !!}
                        </div>

                    </div>

                    @if(
                        optional($purchase)->status === 'delivered' && 
                        $purchase->product->product_type !== 'ipastore' && 
                        optional($purchase->stock)->status == 'used'
                    )
                        <div class="col-sm-12">

                            <div class="form-group">
                                {!! Form::label('content', 'المحتوى') !!}
                                {!! Form::textarea('content', $purchase->stock->code, ['class' => 'form-control']) !!}
                            </div>

                        </div>
                    @endif

                </div>

            </div>
        {!! Form::close() !!}

    </div>


    @if($purchase->product->product_type == 'ipastore' && auth()->user()->store_app !== null)

        <div class="modal fade" id="modal-store-app" tabindex="-1" role="dialog" aria-labelledby="modal-store-app" aria-hidden="false">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-popout" role="document">
                <div class="modal-content rounded">
                    <div class="block block-rounded block-transparent mb-0 bg-pattern" style="background-image: url('{{ url('assets/media/various/bg-pattern-inverse.png') }}');">
                        <div class="block-header justify-content-end">
                            <div class="block-options">
                                <a class="font-w600 text-danger" href="#" data-dismiss="modal" aria-label="Close">اخفاء</a>
                            </div>
                        </div>
                        <div class="block-content block-content-full">
                            <div class="js-slider slick-dotted-inner" data-dots="true" data-arrows="false" data-infinite="false">
                                <div class="pb-50">
                                    <div class="row justify-content-center text-center">
                                        <div class="col-md-10 col-lg-8">
                                            <i class="si si-fire fa-4x text-primary"></i>
                                            <h3 class="font-size-h2 font-w300 mt-20">متجر التطبيقات الخاص بك جاهز!</h3>
                                            <p class="text-muted">
                                                لقد تم تفعيل الاشتراك الخاص بك في متجر التطبيقات بنجاح!
                                            </p>
                                            <a class="btn btn-sm btn-hero btn-noborder btn-primary mb-10 mx-5 text-white" href="itms-services://?action=download-manifest&url={{ auth()->user()->store_app }}">
                                                <i class="fa fa-cloud-download ml-5"></i> تثبيت المتجر
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    @endif

    @if(
        optional($purchase)->status === 'delivered' && 
        $purchase->product->product_type !== 'ipastore' && 
        optional($purchase->stock)->status == 'used'
    )
        <div class="modal fade" id="modal-purchase-content" tabindex="-1" role="dialog" aria-labelledby="modal-purchase-content" aria-hidden="false">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-popout" role="document">
                <div class="modal-content rounded">
                    <div class="block block-rounded block-transparent mb-0 bg-pattern" style="background-image: url('{{ url('assets/media/various/bg-pattern-inverse.png') }}');">
                        <div class="block-header justify-content-end">
                            <div class="block-options">
                                <a class="font-w600 text-danger" href="#" data-dismiss="modal" aria-label="Close">اخفاء</a>
                            </div>
                        </div>
                        <div class="block-content block-content-full">
                            <div class="js-slider slick-dotted-inner" data-dots="true" data-arrows="false" data-infinite="false">
                                <div class="pb-50">
                                    <div class="row justify-content-center text-center">
                                        <div class="col-md-10 col-lg-8">
                                            <i class="si si-fire fa-4x text-primary"></i>
                                            <h3 class="font-size-h2 font-w300 mt-20">تم الانتهاء من معالجة الطلب!</h3>
                                            <p class="text-muted">
                                                المحتوى الخاص بالطلب:
                                            </p>
                                            <p>
                                                {!! Form::textarea('content', $purchase->stock->code, ['class' => 'form-control', 'rows' => 2]) !!}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection


@section('scripts')

    <script>
        $(document).ready(function(){
            
            @if(optional($purchase)->status == 'paid')

                var counter = 80;

                setInterval(function() {

                    counter--;

                    if (counter >= 0) {
                        span = document.getElementById('delivery_time');
                        span.innerHTML = counter;
                    }

                    if (counter === 0) {
                        location.reload();
                        clearInterval(counter);
                    }

                }, 1000);

            @endif
            

            @if($purchase->product->product_type == 'ipastore' && auth()->user()->store_app !== null)
                $('#modal-store-app').modal('show');
            @endif

            @if(optional($purchase)->status === 'delivered' && $purchase->product->product_type !== 'ipastore' && optional($purchase->stock)->status == 'used')
                $('#modal-purchase-content').modal('show');
            @endif
            
        });
    </script>

@endsection