{{ Form::open(['route' => 'Admin.Shop.Offers.store', 'id' => 'offer-form', 'autocomplete' => 'off']) }}
<input type="hidden" name="id" value="{{ $offer['id'] ?? false }}">

<div class="row mb-3">
    <div class="col-8">
        <div class="row mb-3">
            <div class="col-12">
                @include('components.form.select', [
                    'name' => 'article_id',
                    'id_name' => 'article_id',
                    'list' => $articles ?? null,
                    'value' => $offer['article_id'] ?? null,
                    'with_empty' => '',
                    'class' => 'select2 select_article',
                    'label' => 'Article',
                    'required' => true,
                ])
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-4">
                @include('components.form.select', [
                    'name' => 'variation_id',
                    'id_name' => 'variation_id',
                    'list' => $variations ?? null,
                    'value' => $offer['variation_id'] ?? null,
                    'with_empty' => '',
                    'class' => 'select2 select_variation',
                    'label' => __('shop.packages.name'),
                    'required' => true,
                ])
            </div>
            <div class="col-4">
                @include('components.form.select', [
                    'name' => 'tariff_id',
                    'id_name' => 'tariff_id',
                    'list' => $tariffs ?? null,
                    'value' => $offer['tariff_id'] ?? null,
                    'with_empty' => '',
                    'class' => 'select2 select_tariffs',
                    'label' => 'Tarif',
                    'required' => true,
                ])
            </div>
            <div class="col-4">
                @include('components.form.input', [
                    'name' => 'weight',
                    'value' => $offer['weight'] ?? null,
                    'label' => 'Poids en g',
                    'required' => true,
                ])
            </div>
        </div>

        @component('components.card', ['title' => 'Disponibilité', 'class' => 'mt-5'])
            <div class="row mb-3 mt-3">
                <div class="col-4">
                    @include('components.form.inputs.money', [
                        'name' => 'stock_current',
                        'value' => $offer['stock_current'] ?? 0,
                        'label' => 'Appro immédiate',
                    ])
                </div>
                <div class="col-4">
                    @include('components.form.inputs.money', [
                        'name' => 'stock_delayed',
                        'value' => $offer['stock_delayed'] ?? 0,
                        'label' => 'Appro sur delai',
                    ])
                </div>
                <div class="col-4">
                    @include('components.form.input', [
                        'name' => 'delay_type',
                        'value' => $offer['delay_type'] ?? null,
                        'label' => 'Délai type',
                    ])
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-6">
                    @include('components.form.toggle', [
                        'name' => 'stock_ondemand',
                        'value' => $offer['stock_ondemand'] ?? 0,
                        'label' => 'Appro sur demande',
                        'size' => 'md',
                    ])
                </div>
                <div class="col-6">
                    @include('components.form.inputs.money', [
                        'name' => 'minimum_ondemand',
                        'value' => $offer['minimum_ondemand'] ?? 0,
                        'label' => 'Minimum de quantité',
                    ])
                </div>
            </div>
        @endcomponent
    </div>
    <div class="col-4">
        @component('components.card', ['title' => 'Previsualisation'])
            <div id="preview-article"></div>
            <div id="preview-variation"></div>
            <div id="preview-tariff"></div>
        @endcomponent
    </div>

</div>

{{ form::close() }}
<x-save />

@include('load.layout.chevron')
@include('load.form.save')
@include('load.form.select2')

@push('js')
    {!! JsValidator::formRequest('App\Http\Requests\Admin\Shop\StoreOfferPost', '#offer-form') !!}

    <script>
        function handleArticle() {
            $('.select_article').change(function() {
                previewArticle($(this).val());
            })
        }

        function previewArticle(id) {
            var url = '{{ route('Admin.Shop.Offers.previewArticle') }}/' + id;
            $('#preview-article').load(url, function() {
                initChevron();
            });
        }

        function handleVariation() {
            $('.select_variation').change(function() {
                previewVariation($(this).val());
            })
        }

        function previewVariation(id) {
            var url = '{{ route('Admin.Shop.Offers.previewVariation') }}/' + id;
            $('#preview-variation').load(url, function() {
                initChevron();
            });
        }

        function handleTariff() {
            $('.select_tariffs').change(function() {
                previewTariff($(this).val());
            })
        }

        function previewTariff(id) {
            var url = '{{ route('Admin.Shop.Offers.previewTariff') }}/' + id;
            $('#preview-tariff').load(url, function() {
                initChevron();
            });
        }

        function initPreview() {
            previewArticle("{{ $offer['article_id'] ?? null }}");
            previewVariation("{{ $offer['variation_id'] ?? null }}");
            previewTariff("{{ $offer['tariff_id'] ?? null }}");
        }

        handleArticle();
        handleVariation();
        handleTariff();
        initChevron();
        initSaveForm('#offer-form');
        initSelect2();
        @if ($offer['id'] ?? false)
            initPreview();
        @endif
    </script>
@endpush
