@extends('admin/layouts.master')
@section('title', '建立加值頻道 - 管理員')
@section('body')


<section class="content">
  <div class="row">
    <!-- left column -->
    <div class="col-md-12">
      <!-- general form elements -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <div class="row">
            <div class="col-md-10">
              <h3 class="box-title"> {{ __('adminstaticword.Add') }} {{ __('adminstaticword.Channel') }}</h3>
            </div>
            <div class="col-md-2">
              <div>
                <h4 class="admin-form-text"><a href="{{url('plus_channels')}}" data-toggle="tooltip"
                    data-original-title="Go back" class="btn-floating"><i class="material-icons"><button
                        class="btn btn-xs btn-success abc">
                        << {{ __('adminstaticword.Back') }}</button> </i></a></h4>
              </div>
            </div>
          </div>
        </div>

        <div class="box-body">
          <div class="form-group">
            <form action="{{url('plus_channels/')}}" method="post" enctype="multipart/form-data" >
              {{ csrf_field() }}

              <input type="hidden" class="form-control" name="user_id" id="exampleInputTitle"
                value="{{ Auth::User()->id }}" required>

              <div class="col-md-6 form-group">
                <label for="name">{{ __('adminstaticword.Channel') }}名稱: <sup
                    class="redstar">*</sup></label>
                <input type="title" class="form-control" name="name" id="name"
                  placeholder="{{ __('adminstaticword.Enter') }} {{ __('adminstaticword.Channel') }}名稱" value="{{ (old('name')) }}" maxlength="11"
                  required>
              </div>
              <div class="col-md-6 form-group">
                <label for="parent">上層{{ __('adminstaticword.Channel') }}: <sup class="redstar">*</sup></label>
                  <select name="parent" class="form-control" id="parent">
                    @if ($mainChannel->isEmpty())
                      <option value="0">無任何上層</option>
                    @else
                    <option value="0">無任何上層</option>
                      @foreach ($mainChannel as $item)
                        <option value="{{ $item->id }}" {{ old('parent') == $item->id ? "selected" : "" }}>{{ $item->name }}</option>
                      @endforeach
                    @endif
                  </select>
              </div>
              <div class="col-md-3 price-area" >
                <label for="price">{{ __('adminstaticword.SalePrice') }}: <sup class="redstar">*</sup></label>
                <input type="number" name="price" class="form-control" id="price" value="{{ (old('price')) }}" min="0">
              </div>
              <div class="col-sm-3 product-cate-area">
                <label for="product_cate_id">{{ __('adminstaticword.ProductCate') }}:</label><sup class="redstar">*</sup>
                <select name="product_cate_id" class="form-control" id="product_cate_id" required>
                  <option value="">{{ __('adminstaticword.PleaseSelect') }}</option>
                  @foreach ($productCategory as $item)
                    @if( old( 'product_cate_id') == $item->id )
                    <option value="{{ $item->id }}" selected>{{ $item->cate_name }}</option>
                    @else
                    <option value="{{ $item->id }}">{{ $item->cate_name }}</option>
                    @endif
                  @endforeach
                </select>
              </div>
              <div class="col-sm-3 product-code-area">
                <label for="product_code">{{ __('adminstaticword.ProductCode') }}:</label><sup class="redstar">*</sup>
                <input type="text" id="product_code" class="form-control" name="product_code" value="{{ (old('product_code')) }}" required>
              </div>
              
              <br>
              {{-- <div class="col-md-6 price-Area" >
                <label for="offer_price">{{ __('adminstaticword.SpecialPrice') }}: </label>
                <input type="number" name="offer_price" class="form-control" id="offer_price" value="{{ (old('offer_price')) }}" min="0">
              </div> --}}

              <div class="col-md-12 introduce" >
                <label for="introduce">{{ __('adminstaticword.Channel') }}簡介: </label>
                <br>
                <textarea name="detail" id="introduce" cols="30" rows="5" style="width: 100%; margin-bottom:36px">{{ (old('detail')) }}</textarea>
              </div>
              
              <div class="col-md-6">
                <label>{{ __('adminstaticword.PreviewImage') }}:</label> <sup class="my-redstar redstar" style="display: none">*</sup> - <p class="inline info">size: 250x150</p>
                <input type="file" name="image" id="image" class="inputfile inputfile-1" accept=".jpeg,.png,.jpg,.gif,.svg">
                <label for="image"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                    <path
                      d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
                  </svg> <span>{{ __('adminstaticword.Chooseafile') }}&hellip;</span></label>
              </div>

              <div class="box-footer">
                <button type="submit" class="btn btn-lg col-md-3 btn-primary">{{ __('adminstaticword.Submit')
                  }}</button>
              </div>

            </form>
          </div>
        </div>
        <!-- /.box -->
      </div>
      <!-- /.box -->
    </div>
  </div>
  <!-- /.row -->
</section>

@endsection

@section('script')


{{-- 上層頻道選項下面呈現 --}}
<script>
  const parent = document.querySelector('#parent')
  const priceArea = document.querySelector('.price-area')
  const detail = document.querySelector('.introduce')
  const redstar = document.querySelector('.my-redstar')
  const image = document.querySelector('#image')
  const price = document.querySelector('#price')
  const productCate = document.querySelector('.product-cate-area')
  const productCateSelect = productCate.querySelector('select')
  const productCode = document.querySelector('.product-code-area')
  const productCodeInput = productCode.querySelector('input')

  
  parent.addEventListener('change',  function () {
    if (parent.value != 0) {
      detail.style.display = 'none'
      priceArea.style.display = 'none'
      price.required = false
      image.required = false
      redstar.style.display = 'none'
      productCate.style.display = 'none'
      productCode.style.display = 'none'
      productCateSelect.required = false
      productCodeInput.required = false
    }else{
      priceArea.style.display = 'block'
      price.required = true
      detail.style.display = 'block'
      redstar.style.display = 'none'
      redstar.style.display = 'block'
      image.required = true
      productCate.style.display = 'block'
      productCode.style.display = 'block'
      productCateSelect.required = true
      productCodeInput.required = true
    }
  })


</script>


@endsection