@extends("cms.layouts.app", ['page_id' => 'shippers_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' => $shipper->status == \App\Shipper::Active ? __('cms.form.inactivate') : __('cms.form.activate') , 'object' => $shipper->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()
            }
        })
  })
</script>
@endpush

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

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

                {{ Form::open(['method'  => 'POST', 'route' => [$form_route, $shipper], 'class' => 'form-inactivate-item', 'data-name' => $shipper->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') . ' ' . $shipper->updated_by_user->name }}
                    </h4>
                    <small class="text-dark-grey">{{ $shipper->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') . ' ' . $shipper->created_by_user->name }}
                    </h4>
                    <small class="text-dark-grey">{{ $shipper->created_at }}</small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection