@extends("layouts.default")

@section("title", trans("lang.commodity"))

@section("block-header")
    @lang('lang.commodity_',['name'=>__('lang.detail')])
    <small>
        <a class="btn btn-primary" href="{{ route('commodity.index') }}">@lang('lang.back')</a>
        @can('edit_commodity')
            <a class="btn btn-primary" href="{{ route('commodity.edit',$data->id) }}">@lang('lang.edit')</a>
        @endcan
    </small>
@stop

@section("breadcrumb")
    @parent
    <li class="breadcrumb-item">
        <a href="{{ route('commodity.index') }}">@lang('lang.commodity_',['name'=>trans('lang.list')])</a>
    </li>
    <li class="breadcrumb-item active">
        @lang('lang.commodity_',['name'=>__('lang.detail')])
    </li>
@stop

@section("content")
    <!-- Basic Table -->
    <div class="row clearfix">
        <div class="col-md-12 col-sm-12">
            @includeWhen(Session::has("success"),"inc.alert")
            <div class="card">
                <div class="card-body">
                    <section class="d-flex flex-column">
                        <h2>{{ @$data->property->name }}</h2>
                        <p class="mt-1">
                            <small class="text-muted">
                                @lang('lang.unit')
                                <label
                                        class="badge badge-success">{{ @$data->property->unit }}</label>
                            </small>
                        </p>
                        <div class="row">
                            <div class="col-6">
                                <img class="img-fluid" src="{{ Helpers::setImageSrc(@$data->property->feature_image) }}" alt="">
                            </div>
                        </div>
                        <article class="mt-3">
                            <h4>@lang('lang.stage')</h4>
                            <ul class="timeline ml-3">
                                @php($index = 1)
                                <li class="timeline-inverted">
                                    <div class="timeline-badge warning">
                                        <i class="glyphicon glyphicon-credit-card">{{$index++}}</i>
                                    </div>
                                    <div class="timeline-panel">
                                        <div class="timeline-heading">
                                            <h4 class="timeline-title">@lang('lang.start_date')</h4>
                                            <p>
                                                @lang("lang.type"):
                                                <small class="text-muted">{{ config('global.commodity_stages_type.3') }}</small>
                                                @lang("lang.key"):
                                                <small class="text-lowercase">{start_date}</small>
                                            </p>
                                            <p>
                                                @lang("lang.type"):
                                                <small class="text-muted">{{ config('global.commodity_stages_type.2') }}</small>
                                                @lang("lang.key"):
                                                <small class="text-lowercase">{qty}</small>
                                            </p>
                                        </div>
                                        <div class="timeline-body">
                                            <p class="text-capitalize">
                                                @lang('lang.date')
                                                : {{ Helpers::dateTimeFormat(@$data->property->start_date) }}
                                            </p>
                                            <p>
                                                @lang('lang.qty'): {{ @$data->property->qty }}
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                @if (!is_null(@$data->property->stages))
                                    @foreach($data->property->stages as $key => $stage)
                                        <li class="timeline-inverted">
                                            <div class="timeline-badge warning">
                                                <i class="glyphicon glyphicon-credit-card">{{$index++}}</i>
                                            </div>
                                            <div class="timeline-panel">
                                                <div class="timeline-heading">
                                                    <h4 class="timeline-title">{{ $stage->name }}</h4>
                                                    <p>
                                                        @lang("lang.type"):
                                                        <small class="text-muted">{{ config('global.commodity_stages_type')[$stage->type] }}</small>
                                                        @lang("lang.key"):
                                                        <small class="text-lowercase">{{ "{".$key."}" }}</small>
                                                    </p>
                                                </div>
                                                <div class="timeline-body">
                                                    <p class="text-lowercase">
                                                        @lang('lang.formula') = {{ @$stage->formula }}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </article>
                    </section>
                </div>
            </div>
        </div>
    </div>
@stop