@extends('master', ['title' => __('dashboard.edit_banner')])

@section('content')
<div class="container">
    <div class="card">
        <div class="card-header">
            <h4>{{ __('dashboard.edit_banner') }}</h4>
        </div>

        <div class="card-body">
            <form action="{{ route('banners.update', $banner->id) }}"
                  method="POST"
                  enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="mb-2">
                    <label class="form-label">{{ __('dashboard.title') }}</label>
                    <input type="text"
                           name="title"
                           class="form-control"
                           value="{{ old('title', $banner->title) }}">
                </div>

                <div class="mb-2">
                    <label class="form-label">{{ __('dashboard.product') }}</label>
                    <select name="product_id" class="form-select @error('product_id') is-invalid @enderror">
                        <option value="">{{ __('dashboard.select_product') }}</option>
                        @foreach($products as $product)
                            <option value="{{ $product->id }}" {{ old('product_id', $banner->product_id) == $product->id ? 'selected' : '' }}>{{ $product->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-2">
                    <label class="form-label">{{ __('dashboard.image') }}</label>
                    <input type="file"
                           name="images"
                           id="banner-image"
                           class="form-control">

                    <div class="mt-2">
                        @if($banner->image)
                            <img id="image-preview"
                                 src="{{ getPath('banners', $banner->id, $banner->image->path) }}"
                                 style="max-width:200px"
                                 class="rounded">
                        @else
                            <img id="image-preview"
                                 style="max-width:200px; display:none"
                                 class="rounded">
                        @endif
                    </div>

                </div>

                <button class="btn btn-primary">
                    {{ __('dashboard.submit') }}
                </button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="{{ asset('assets/js/banner-preview.js') }}"></script>
@endpush