@extends('crudbooster::admin_template')
@section('content')
<style>
    .pd-details-container{
        padding: 0px;
    }

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

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

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

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

    .pd-details-items-wrapper .pd-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;
    }

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

    .pd-details-item h5 span{
        font-weight: 500;
    }
</style>



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

            <div class="pd-details-content-wrapper panel-group">
                <div class="panel panel-default">
                    <div class="section-heading box-header panel-heading">
                        <h3 class="box-title">Product Basic Details</h3>
                    </div>
                    <div class="pd-details-items-wrapper basic-details">
                        <div class="pd-details-item">
                            <h5>Product Name: <span>{{$product->product_name}}</span></h5>
                        </div>
                        <div class="pd-details-item">
                            <h5>Allow User: <span>{{$product->allow_user}}</span></h5>
                        </div>
                        <div class="pd-details-item">
                            <h5>Selected View: {!! $product->productSetting->element_active == 1 ? '<span class="text-success text-bold">Active</span>' : '<span class="text-warning text-bold">Inactive</span>'!!}</h5>
                        </div>
                        <div class="pd-details-item">
                            <h5>Show Dashboard Element: <span>{{$product->productpackages[0]->view_name}}</span></h5>
                        </div>
                        <div class="pd-details-item">
                            <h5>Menus Head:
                                <span>{{(($product->module_check == 1) ? 'Modules Check' : (($product->subject == 1) ? 'Subject Check' : (($product->concept == 1) ? 'Concept Check' : 'System Check')))}}</span>
                            </h5>
                        </div>
                        <div class="pd-details-item">
                            <h5>Product Type: <span>{{$product->type == 1 ? 'Combo' : 'Membership'}}</span></h5>
                        </div>
                        <div class="pd-details-item">
                            <h5>Special Product: <span>{{$product->sp_status == 1 ? 'Special Product' : 'Normal Product'}}</span></h5>
                        </div>
                    </div>
                </div>
                
                <div class="panel panel-default">
                    <div class="section-heading box-header panel-heading">
                        <h3 class="box-title">Color</h3>
                    </div>
                    <div class="pd-details-items-wrapper color-details">
                        <div class="pd-details-item text-danger">
                            <h5>Red Min Value: <span>{{$product->productSetting->red_min ?? 0}}</span></h5>
                            <h5>Red Max Value: <span>{{$product->productSetting->red_max ?? 0}}</span></h5>
                        </div>
                        <div class="pd-details-item text-warning">
                            <h5>Orange Min Value: <span>{{$product->productSetting->orange_min ?? 0}}</span></h5>
                            <h5>Orange Max Value: <span>{{$product->productSetting->orange_max ?? 0}}</span></h5>
                        </div>
                        <div class="pd-details-item text-success">
                            <h5>Green Min Value: <span>{{$product->productSetting->green_min ?? 0}}</span></h5>
                            <h5>Green Max Value: <span>{{$product->productSetting->green_max ?? 0}}</span></h5>
                        </div>
                        <div class="pd-details-item">
                            <h5>Custom Min Value: <span>{{$product->productSetting->custom_min ?? 0}}</span></h5>
                            <h5>Custom Max Value: <span>{{$product->productSetting->custom_max ?? 0}}</span></h5>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="section-heading box-header panel-heading">
                        <h3 class="box-title">Price/Time:</h3>
                    </div>
                    <div class="pd-details-items-wrapper price-details">
                        <div class="pd-details-item">
                            <h5>Min Value: <span>{{$product->productSetting->min_price ?? 0}}</span></h5>
                        </div>
                        <div class="pd-details-item">
                            <h5>Max Value: <span>{{$product->productSetting->max_price ?? 0}}</span></h5>
                        </div>
                    </div>
                </div>
                @if(!$product->type)
                <div class="panel panel-default">
                    <div class="section-heading box-header panel-heading">
                        <h3 class="box-title">Submenu Lists(You can sort):</h3>
                    </div>
                    <div class="pd-details-items-wrapper _submenus">
                        <ul class="list-group submenu-sort">
                            @forelse ($product->_submenus->sortBy('sortingNo') as $key => $item)
                                <li class="list-group-item" @if($item->id == request()->subid) checked @endif data-id="{{ $item->id }}">{{ ($item->id) .' - '.$item->menu_name }}</li>
                            @empty
                                <li class="list-group-item text-warning">No Submenus found!!</li>
                            @endforelse
                        </ul>
                        
                    </div>
                </div>
                @else
                    <div class="panel panel-default">
                        <div class="section-heading box-header panel-heading">
                            <h3 class="box-title">Combo Products (You can sort):</h3>
                        </div>
                        <div class="pd-details-items-wrapper _combo_products">
                            <ul class="list-group combo-product-sort" data-proid="{{ $product->id }}">
                                @forelse ($product->ComboProducts as $key => $product)
                                    <li class="list-group-item"  data-id="{{ $product->id }}">{{ ($product->id) .' - '.$product->product_name }}</li>
                                @empty
                                    <li class="list-group-item text-warning">No Combo Product found!!</li>
                                @endforelse
                            </ul>
                            
                        </div>
                    </div>
                @endif
                
            </div>
        </div>
    </div>
</div>

@endsection
@push("bottom")
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>

        $('.submenu-sort').sortable({
            stop: function(event, ui) {
                var data = [];
                $(this).find('li').each(function(index, item) {
                    data.push($(item).attr('data-id'))
                })
                $.ajax({
                    data: {
                        subids : data
                    },
                    type: 'POST',
                    url: "{{ CRUDBooster::mainpath('submenusort') }}",
                    dataType:"json",
                    success:function(res){
                        if (res.success) {
                            swal('Success!','Successfully Change sorting No',"success")
                        }else swal('oops','Something went wrong,try again',"warning")
                    }
                });
            }
        });

        $('.combo-product-sort').sortable({
            stop: function(event, ui) {
                var data = [];
                $(this).find('li').each(function(index, item) {
                    data.push($(item).attr('data-id'))
                })
                $.ajax({
                    data: {
                        proid: $(this).data('proid'),comIds : data
                    },
                    type: 'POST',
                    url: "{{ CRUDBooster::mainpath('combo-product-sort') }}",
                    dataType:"json",
                    success:function(res){
                        if (res.success) {
                            swal('Success!','Successfully Change sorting No',"success")
                        }else swal('oops','Something went wrong,try again',"warning")
                    }
                });
            }
        });
    </script>
@endpush