@extends('layouts.app')

@section('title', 'Create Brand')
@section('breadcrumb', 'Manage Brand')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        Create Brand
    </a>

@endsection
@section('brand', 'kt-menu__item--open kt-menu__item--here')
@section('create-brand', 'kt-menu__item--active')
@section('content')
<div class="kt-portlet">
    <div class="kt-portlet__body">
        @include('layouts.notification')
        <div class="col-md-5">
            <form action="{{route('brand.store')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label>Name Brand <span style="color:red;">*</span> :</label>
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-medal"></i></span></div>
                        <input type="text" id="name" name="name" class="form-control m-input" placeholder="E.g: Janji Jiwa" data-col-index="0">
                    </div>
                </div>
                <div class="form-group">
                    <label>Brand Logo <span style="color:red;">*</span> :</label> <br/>
                    <img id="blah" src="#" alt="your image" style="height:150px" />
                    <div class="input-group">
                        <input type="file" id="imgInp" name="logo" class="form-control m-input" placeholder="E.g: Janji Jiwa" data-col-index="0">
                    </div>
                </div>
                <div class="form-group">
                    <label>Owner Brand <span style="color:red;">*</span> :</label>
                    <div class="input-group">
                        <select name="owner" id="owner" class="form-control">
                            <option value="">-- Select Owner --</option>
                            @foreach ($owner as $item => $value)
                                <option value="{{$value['id']}}">{{$value['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label>Brand Slug <span style="color:red;">*</span> :</label>
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-earth-globe"></i></span></div>
                        <input type="text" id="slug" name="slug" class="form-control m-input" placeholder="E.g: JJ, JT" data-col-index="0">
                    </div>
                </div>



                <div class="form-group">
                    <label>Moka Pos :</label> <br/>
                    <div class="input-group">
                        <select name="id_moka[]" id="id_moka" class="form-control" multiple="multiple">
                            @foreach ($moka as $item)
                                <option value="{{$item['id']}}">{{$item['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label>Accurate :</label>
                    <div class="input-group">
                        <select name="id_accurate" class="form-control accurate" style="width:100%!important;">
                            <option value="">-- Accurate --</option>
                            @foreach ($accurate as $value)
                                <option value="{{$value['id']}}">{{$value['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group pull-right">
                    <button type="reset" class="btn btn-secondary">Reset</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    <div class="kt-separator kt-separator--dashed"></div>
    </div>
</div>
@endsection

@section('custom-script')
    <script>
        $(document).ready(function(){
            $('#id_moka').select2({
                placeholder: " Eg: Janji Jiwa Dummy"
            });
        })
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#blah').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#imgInp").change(function() {
            readURL(this);
        });
    </script>
@endsection