@extends('layout.default')

@section('content')
<div class="card card-custom">
	<form action="{{url('brand/update', $detail['brand_id'])}}" id="new-brand-form" method="post" enctype="multipart/form-data">
		@csrf
		<div class="card-body">
			@include('layout.notifications')
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Brand Logo <span class="text-danger">*</span><br>
                            <span class="text-danger" aria-required="true"> (500*500)</span>
                </label>
                <div class="col-5">
                    <div style="margin-bottom: 2%;margin-top: 2%">
                        @if(!empty($detail['brand_logo']))
                            <img src="{{$detail['brand_logo']}}" style="width: 80px;height: 80px">
                        @endif
                    </div>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="brand_logo" id="customFile" accept="image/*">
                        <label class="custom-file-label selected" id="lableFile" for="customFile"></label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Brand Code <span class="text-danger">*</span></label>
                <div class="col-5">
                    <input class="form-control" type="text" name="brand_code" maxlength="10" value="{{$detail['brand_code']}}" required placeholder="Enter code here"/>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Brand Name <span class="text-danger">*</span></label>
                <div class="col-5">
                    <input class="form-control" type="text" name="brand_name" value="{{$detail['brand_name']}}" required placeholder="Enter name here"/>
                </div>
            </div>
		</div>
		<div class="card-footer">
			<div class="row">
				<div class="col-2">
				</div>
				<div class="col-10">
					<button type="submit" id="btn-submit" class="btn btn-success mr-2">Submit</button>
					<a href="{{url('brand')}}"class="btn btn-secondary">Cancel</a>
				</div>
			</div>
		</div>
	</form>
</div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Javascript to enable link to tab
            $("#customFile").change(function(e) {
                var _URL = window.URL || window.webkitURL;
                var image, file;

                if ((file = this.files[0])) {
                    image = new Image();

                    image.onload = function() {
                        if (this.width != 500 || this.height != 500) {
                            Swal.fire(
                                "Woops!",
                                'Please check dimension of your photo <br> 500 x 500' ,
                                "error"
                            )
                            $("#customFile").val("");
                            $('#lableFile').empty();
                        }
                    };
                    image.src = _URL.createObjectURL(file);
                }
            });
        });
    </script>
@endsection