@extends('adminlte::page')

@section('title', '消耗品新規登録')

@section('content_header')
<h5><label class="title-underbar">消耗品新規登録</label></h5>
@stop

@section('content')
<x-admin.success-flush-message />
<x-admin.error-flush-message />
<x-admin.validation-message />
<div class="row">
    <div class="col-md-12">
        <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
            <div class="card-body">
                <form method="POST" action="{{ route('productpromotion.admin.consumables.store') }}" class="form-group mt-3" enctype='multipart/form-data' onsubmit="$(this).find('button[type=submit]').prop('disabled', true);">
                    @csrf
                    <div class="form-group row">
                        <label for="internal_name" class="col-sm-2 col-form-label medium-heading">消耗品カテゴリー</label>
                        <div class="col-sm-4">
                            <select name="consumable_category_id" class="form-control main-text">
                                <option value="">選択してください</option>
                                @foreach ($consumable_categories as $consumable_category)
                                    @if (old('consumable_category_id') && old('consumable_category_id') === (string) $consumable_category->id)
                                        <option value="{{ $consumable_category->id }}" selected>{{ $consumable_category->name }}</option>
                                    @else
                                        <option value="{{ $consumable_category->id }}">{{ $consumable_category->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="external_name" class="col-sm-2 col-form-label medium-heading">消耗品名</label>
                        <div class="col-sm-4">
                            <input type="text" name="external_name" id="sfa_consumable_name" class="form-control main-text" placeholder="消耗品名を入力してください" value="{{ old('external_name') }}">
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6">
                            <button onclick="openSelection('{{ route('admin.WindowSelect.index', ['table' => 'SfaConsumable']) }}')" class="btn btn-block btn-outline-primary rounded-pill w-50">SFAから取り込み</button>
                            <input type="hidden" name="sfa_product_id" id="sfa_consumable_id" value="{{ old('sfa_product_id') }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="external_name_en" class="col-sm-2 col-form-label medium-heading">消耗品名(英語)</label>
                        <div class="col-sm-4">
                            <input type="text" name="external_name_en" class="form-control main-text" placeholder="消耗品名(英語)を入力してください" value="{{ old('external_name_en') }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="internal_name" class="col-sm-2 col-form-label medium-heading">社内向け消耗品名</label>
                        <div class="col-sm-4">
                            <input type="text" name="internal_name" class="form-control main-text" placeholder="社内向け消耗品名を入力してください" value="{{ old('internal_name') }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="sales_name" class="col-sm-2 col-form-label medium-heading">販売名</label>
                        <div class="col-sm-4">
                            <input type="text" name="sales_name" class="form-control main-text" placeholder="販売名を入力してください" value="{{ old('sales_name') }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="sales_name_en" class="col-sm-2 col-form-label medium-heading">販売名(英語)</label>
                        <div class="col-sm-4">
                            <input type="text" name="sales_name_en" class="form-control main-text" placeholder="販売名(英語)を入力してください" value="{{ old('sales_name_en') }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="replacement_interval_month" class="col-sm-2 col-form-label medium-heading">交換間隔(月)</label>
                        <div class="col-sm-4">
                            <input type="number" name="replacement_interval_month" class="form-control main-text" placeholder="交換間隔(月)を入力してください" id="replacement_interval_month" value="{{ old('replacement_interval_month') }}" min=1 max=36>
                        </div>
                    </div>

                    <!--ファイルアップロード -->
                    <div class="form-group row">
                        <label for="image_file_id" class="col-sm-2 col-form-label medium-heading">消耗品イメージ</label>
                        <div class="col-sm-4">
                            <input type="file" name="image_file_id" class="custom-file-input main-text" id="inputFile">
                            <label class="custom-file-label main-text" for="inputFile" data-browse="参照">ファイルを選択(ここにドロップすることもできます)</label>
                            <sup>消耗品イメージは.jpg形式のファイルを指定して下さい。</sup>
                        </div>
                    </div>
                    <div class="btn-wrap-mgt">
                        <a href="{{ route('productpromotion.admin.equipments.index') }}" class="btn btn-secondary btn-lg rounded-pill">キャンセル</a>
                        <button type="submit" class="btn button-go btn-lg rounded-pill">登録する</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
    $('.custom-file-input').on('change',function(){
        $(this).next('.custom-file-label').html($(this)[0].files[0].name);
    });
    function openSelection(url) {
        event.preventDefault();
        window.open(url, "selectChild", "width=500,height=800");
    }
</script>
@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop