@extends('admin.layouts.contentLayoutMaster')

@section('title','商品資料')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/keen/image-input.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/forms/spinner/jquery.bootstrap-touchspin.css') }}">
@endsection

@section('page-styles')

@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-10 col-12">
            <form class="form form-horizontal" action="{{ Route('admin.product.store') }}" method="POST" enctype="multipart/form-data" id="main_form">
                @csrf
                <input type="hidden" id="specificationables_json" name="specificationables_json">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <ul class="nav nav-tabs justify-content-center" role="tablist">
                                <li class="nav-item">
                                    <a aria-controls="general" aria-selected="true" class="nav-link active" data-toggle="tab" href="#general_tab" id="general-tab" role="tab">
                                        <i class="bx bx-barcode align-middle"></i> 
                                        <span class="align-middle">基本</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a aria-controls="material" aria-selected="true" class="nav-link " data-toggle="tab" href="#material_tab" id="material-tab" role="tab">
                                        <i class="bx bx-folder align-middle"></i> 
                                        <span class="align-middle">規格組合</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div aria-labelledby="general-tab" class="tab-pane active" id="general_tab" role="tabpanel">
                                    @include('admin.product.create_tab.general')
                                </div>
                                <div aria-labelledby="material-tab" class="tab-pane " id="material_tab" role="tabpanel">
                                    @include('admin.product.create_tab.material')
                                </div>

                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row offset-md-4 col-md-6 form-group">
                                @if ($errors->has('specificationables_json')) 
                                    @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('specificationables_json') ]) 
                                @endif
                            </div>

                            <div class="row justify-content-center">
                                <button class="btn btn-primary mr-1 mb-1" type="submit">送出</button> 
                                <button class="btn btn-primary mr-1 mb-1 store-and-keep" type="button" title="儲存後停留在此頁">僅儲存</button> 
                                <button class="btn btn-light glow mr-1 mb-1" type="reset" data-force="1">Reset</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')
<script src="{{ asset('vendors/js/keen/util.js') }}"></script>
<script src="{{ asset('vendors/js/keen/image-input.js') }}"></script>
<script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('vendors/js/forms/spinner/jquery.bootstrap-touchspin.js') }}"></script>
<script>
    const dataMaterialCategories = {!! $material_categories !!};
    const ajaxParam = {
        getFirmsByFirmCategory : '{{ route("ajax.firm_category.get.firms") }}',
        getProductCategoriesByFirm : '{{ route("ajax.firm.get.product_categories") }}',
        initCombinationTable : '{{ Route("ajax.admin.product.get.combination_table") }}',
        getMaterialsByMaterialCategory : '{{ Route("ajax.material_category.get.materials") }}',
        getMaterialSpecificationsByMaterial : '{{ Route("ajax.material.get.material_specifications") }}',
    }
</script>
@endsection

@section('page-scripts')
<script src="{{ mix('assets/js/admin/product/form.js') }}"></script>
@endsection