@extends("cms.layouts.app", ['page_id' => 'products_show'])

@push("js")
<script type="text/javascript">
  $(function () {
        $('.form-inactivate-item').on('submit', function(e) {
            var name = $(this).data('name');

            var msg = `'{{ __('cms.form.activate_message', ['action' => $product->status == \App\Issuer::Active ? __('cms.form.inactivate') : __('cms.form.activate') , 'object' => $product->name_en]) }}'`;
            if(!confirm(msg)){
                e.preventDefault();
                $('.btn-item-toggle').attr('aria-pressed', function(_, attr){ return !attr});
                $('.btn-item-toggle').toggleClass('active');
            }
        });
        $('.btn-item-toggle').on('click', function(e) {
            $('.form-inactivate-item').submit();
        });

        $('.stock_toggle').on('click',function(e){
            let on = 0;
            $('.stock_toggle').each(function(i,obj){
               if($(this).next().val() =='ON'){
                   on++;
               }
            });

            if(on>0 && !$(this).hasClass('active')){
                e.preventDefault();
                alert('One product can only have one on status stock');
            }else{
                if($(this).hasClass('active')){
                  $(this).toggleClass('active',false);
                  $(this).next().val('OFF');
                }else{
                  $(this).toggleClass('active');
                  $(this).next().val('ON');
                }
            }

        })
        window.initFormSubmit({
            selector: '.card-editable form',
            onSubmit: function ({ form }) {
                location.reload()
            }
        })
  })
</script>
@endpush

@section("title")
<div class="d-flex align-items-center">
    <span class="mr-4">{{ $product->name_en }}</span>
    <span class="badge badge-pill badge-status-{{ $product->status }}">{{ $product->status_name }}</span>
</div>
@endsection

@section("content")
<div class="row">
    <div class="col-md-8">
        @php
            $form_route = route('cms.products.update', $product->id);
            $form_type = 'edit';
        @endphp
        <x-stock.form :form_type="$form_type" :form_route="$form_route" :product="$product">
        </x-stock.form>

        <div class="mb-5 card last-modified">
            <div class="card-body">
                <small class="text-dark-grey">{{ __('cms.created_by') }}</small>
                <h4 class="font-weight-normal my-2">
                    {{ __('cms.by') . ' ' . $product->created_by_user->name}}
                </h4>
                <small class="text-dark-grey">{{ $product->created_at }}</small>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card-columns card-columns-2 card-columns-md-1">

            <div class="mb-5 card status">
                @php
                    $isActive = $product->status == \App\Product::Active;
                    $form_route = ($isActive)? 'cms.products.inactivate' : 'cms.products.activate';
                @endphp

                {{ Form::open(['method'  => 'POST', 'route' => [$form_route, $product], 'class' => 'form-inactivate-item', 'data-name' => $product->name_en]) }}
                {{ Form::close() }}

                <div class="card-body">
                    <small class="text-dark-grey">{{ __('cms.status') }}</small>
                    <br>
                    <button type="button" class="btn btn-sm btn-toggle btn-item-toggle {{ $isActive? 'active': '' }} mx-0 mt-2" aria-pressed="{{ $isActive? 'true': 'false' }}" autocomplete="off"><div class="handle"></div></button>
                </div>
            </div>

            <x-card.editable class="mb-5 stock-info " form_id="form_stock_info" form_route="{{ route('cms.stock.update', ['id' => $stock->id]) }}">
                <x-slot name="header">
                    <div class="card-header">
                        <h5 class="card-title">Available Stock</h5>
                    </div>
                </x-slot>

                <x-product.fields-stock-info :stock="$stock">

                </x-product.fields-stock-info>
            </x-card.editable>

            <div class="mb-5 card stock-count-last-modified">
                <div class="card-body">
                    <small class="text-dark-grey">Stock Count {{ __('cms.last_updated') }}</small>
                    <h4 class="font-weight-normal my-2">
                        {{ __('cms.by') . ' ' . $stock->updated_by_user->name }}
                    </h4>
                    <small class="text-dark-grey">{{ $stock->updated_at }}</small>
                </div>
            </div>

            <div class="mb-5 card last-modified">
                <div class="card-body">
                    <small class="text-dark-grey">Product {{ __('cms.last_updated') }}</small>
                    <h4 class="font-weight-normal my-2">
                        {{ __('cms.by') . ' ' . $product->updated_by_user->name }}
                    </h4>
                    <small class="text-dark-grey">{{ $product->updated_at }}</small>
                </div>
            </div>


        </div>
    </div>
</div>

@endsection