@extends("cms.layouts.app", ['page_id' => 'couriers_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' => $couriers->status == \App\Shipper::Active ? __('cms.form.inactivate') : __('cms.form.activate') , 'object' => $couriers->name]) }}'`;
            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();
        });

        window.initFormSubmit({
            selector: '.card-editable form',
            onSubmit: function ({ form }) {
                location.reload()
            }
        })


        $("<label class='label'>[When monthly sales exceed KRW 1 million excluding shipping fee, Seller Service Fee will be 50,0000 WON]</label>").insertAfter(".service-fee-label > div > label");

        
  })
</script>
@endpush

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

@section("content")
<div class="row">
    <div class="col-md-8">
        @php
            $form_route = route('cms.couriers.update', $couriers->id);
            $form_type = 'edit';
        @endphp
        <x-courier.form :form_type="$form_type" :form_route="$form_route" :couriers="$couriers">
        </x-courier.form>
    </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 = $couriers->status == \App\Shipper::Active;
                    $form_route = ($isActive)? 'cms.couriers.inactivate' : 'cms.couriers.activate';
                @endphp

                {{ Form::open(['method'  => 'POST', 'route' => [$form_route, $couriers], 'class' => 'form-inactivate-item', 'data-name' => $couriers->name]) }}
                {{ 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" data-toggle="button" aria-pressed="{{ $isActive? 'true': 'false' }}" autocomplete="off"><div class="handle"></div></button>
                </div>
            </div>

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

            <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') . ' ' . $couriers->created_by_user->name}}
                    </h4>
                    <small class="text-dark-grey">{{ $couriers->created_at }}</small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection