@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Edit Car Brand</h5>
                <form class="form-horizontal" action="{{ route('update-car-brand' , $car_brand->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Car Brand name</label>
                                <input type="text" placeholder="Car Brand name"  value="{{$car_brand->name}}" name="name" id="name" class="form-control @error('name') is-invalid @enderror" />
                                @error('name')
                                <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Car Brand code</label>
                                <input type="text" placeholder="Car Brand code" value="{{$car_brand->code}}" name="code" id="code" class="form-control @error('code') is-invalid @enderror" />
                                @error('code')
                                <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Car Brand logo</label>
                                <div class="image-upload">
                                    @if($car_brand->logo)
                                        <label for="logo">
                                            <img id="output" src="{{$car_brand->logo}}" width="80px" height="80px"/>
                                        </label>
                                    @else
                                        <label for="logo">
                                            <img id="output" src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png" width="80px" height="80px"/>
                                        </label>
                                    @endif
                                    <input type="file" name="logo" id="logo" onchange="loadFile(event)" style="display: none;"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="col-lg-12 text-right">
                                    <button type="submit" class="btn btn-info">Save Car Brand</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

<script type="text/javascript">
    function loadFile(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
    }
</script>