@extends('crudbooster::admin_template')
@section('content')

<style>
    .od-details-container{
        padding: 0px;
    }

    .od-details-container > .box{
        box-shadow: none;
        margin-bottom: 15px;
    }

    .od-details-content-wrapper{
        padding: 0px 15px;
        margin: 15px 0px;
    }

    .od-details-content-wrapper.panel-group .panel+.panel {
        margin-top: 15px;
    }

    .od-details-items-wrapper {
        display: flex;
        justify-content: start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 20px;
        padding: 15px;
    }

    .od-details-items-wrapper .od-details-item {
        min-width: calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        border-radius: 5px;
        padding: 4px 15px;
    }

    .section-heading>.box-title{
        font-size: 16px;
    }

    .od-details-item h5,
    .section-heading>.box-title{
        font-weight: 700;
    }

    .od-details-item h5 span{
        font-weight: 500;
    }

    .od-details-item.demo-order {
        background-color: #f39c12;
        color: #fff;
    }
</style>

<div class='panel panel-default'>
    <div class='panel-body od-details-container'>
        <div class="box box-warring">
            <div class="box-header with-border">
                <h3 class="box-title">Order Details</h3>
            </div>

            <div class="od-details-content-wrapper panel-group">
                <div class="panel panel-default">
                    <div class="section-heading box-header panel-heading">
                        <h3 class="box-title">Order Details</h3>
                    </div>
                    <div class="od-details-items-wrapper basic-details">
                        <div class="od-details-item">
                            <h5>User Name: <span>{{$order->user->first_name}} {{$order->user->last_name}}</span></h5>
                        </div>
                        <div class="od-details-item">
                            @php
                                $all_products = $order->products->pluck('product_name')->toArray();
                                $all_products_full_string = implode(", " , $all_products);
                            @endphp

                            <h5>Products: 
                                <span>
                                    {{$all_products_full_string}}
                                </span>
                            </h5>
                        </div>
                        <div class="od-details-item">
                            <h5>Order Key: <span>{{$order->order_key}}</span></h5>
                        </div>
                        <div class="od-details-item">
                            <h5>Order Note: <span>{{$order->order_note}}</span></h5>
                        </div>
                        <div class="od-details-item">
                            <h5>Access Limit: <span>{{$order->accesslimit}}</span></h5>
                        </div>
                        <div class="od-details-item">
                            <h5>Start Date: <span>{{$order->start_date}}</span></h5>
                        </div>
                        <div class="od-details-item">
                            <h5>End Date: <span>{{$order->end_date}}</span></h5>
                        </div>
                        <div class="od-details-item">
                            <h5>Order Status: <span>{{$order->order_status == 1 ? 'Activate' : 'Deactivate'}}</span></h5>
                        </div>
                        <div class="od-details-item">
                            <h5>Order From:
                                <span>
                                    <i class="fa {{$order->api_order_id == 1 ? 'fa-wordpress' : 'fa-home fa-6'}}" aria-hidden='true'></i>
                                </span>
                            </h5>
                        </div>
                        @if ($order->demo_status == 1)
                            <div class="od-details-item demo-order">
                                <h5>Demo Status: 
                                    <span>Demo Order</span>
                                </h5>
                            </div>
                        @endif

                        @if ($order->demo_student == 1)
                            <div class="od-details-item">
                                <h5>Demo Student: <span>Demo User</span></h5>
                            </div>
                        @endif
                        
                        <div class="od-details-item">
                            <h5>Order Created At: <span>{{$order->created_at->format('Y-m-d')}}</span></h5>
                        </div>

                        @if ($order->api_order_id > 0)
                            <div class="od-details-item">
                                <h5>Order Sync: 
                                    <span class="sync-btn-container">
                                        <button class="btn btn-sm btn-warning order-sync-btn" data-api="{{$order->api_order_id}}" title="Sync Order"><i class="fa fa-sm fa-refresh text-success" style="margin-right: 5px;">&NonBreakingSpace;</i>SYNC</button>
                                    </span>
                                </h5>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@push('bottom')
<script>
    const apiOrderId = $(".order-sync-btn").attr('data-api');

     // order sync
     $('.order-sync-btn').on('click',function(event){
            event.preventDefault();
            swal({
                title:'Are you sure want sync ?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: 'rgb(56, 174, 86)',
                confirmButtonText: 'Yes!',
                cancelButtonText:'No',
                closeOnConfirm: false },
                function(){
                    let url = '';
                    $('.order-sync-btn').find('i').addClass('fa-spin');
                    $('[value="Submit"]').addClass('hide')
                    swal.close();
                    let apiid = $('.order-sync-btn').data('api');
                    $.ajax({
                        type:"post",
                        url:'{{ CRUDBooster::mainpath("sync") }}',
                        data:{id:apiid},
                        success:function(msg){
                        $('[value="Submit"]').removeClass('hide')
                            if(msg.success){
                                swal({
                                    title:'Success!',
                                    text: "Sync Successfully Done",
                                    type: 'success',
                                    timer: 3000
                                })
                                window.location.reload();
                            }else{
                                swal({
                                    title:'Warning!',
                                    text: "Something Wrong",
                                    type: 'warning',
                                    timer: 3000
                                })
                            }
                        },
                        error:function(msg){
                            console.log(msg);
                        }
                    })

                })
            });
</script>

<script>
    $(document).ready(function(){
        // day
        const select_day = $("#date-select-day");

        for (let i = 1; i <= 31; i++) {
            let day = String(i).padStart(2, '0');
            $('<option>').val(i).text(day).appendTo(select_day);
        }

        //month
        const select_month = $("#date-select-month");
        // let options = ["January","February","March","April","May","June", "July","August","September","October","November","December"];
        let options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        
        options.forEach(option => {
            let month = String(option).padStart(2, '0');
            let singleOption = `<option value="${option}">${month}</option>`;
            $(select_month).append(singleOption);
        });


        // year
        const select_year = $("#date-select-year");
        let year = new Date().getFullYear();

        let newYear = year;

        while (newYear >= 1950) {
            $('<option>').val(newYear).text(newYear).appendTo(select_year);
            newYear = newYear - 1;
        }

        $("#date-select-day, #date-select-month, #date-select-year").focus(function(){
            $(this).children(".select_option").attr("disabled", true);
        });
    });
</script>
@endpush
@endsection