@extends('admin.layouts.app')
@section('title', __('admins') )

@section('content')

@if ($errors->any())
    <div class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-31 text-theme-6"> <i data-feather="alert-octagon" class="w-6 h-6 mr-2"></i>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="grid grid-cols-12 gap-6 mt-5">
    <div class="intro-y col-span-12 box p-5 ">
        <form action="/panel/banner/{{ $banners->id }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <strong> {{ __("Created.") }} </strong>
                {{ $banners->created_at }}
            </div>

            <div class="mb-3">
                <label> Titre</label>
                <input type="text" name="title" value="{{ $banners->title }}" class="input w-full border mt-2" >
            </div>

            <div class="mb-3">
                <label> short description </label>
                <input type="text" name="subtitle" value="{{ $banners->subtitle }}" class="input w-full border mt-2" >
            </div>

            <div class="mb-3">
                <label> URL  </label>
                <input type="text" name="link" value="{{ $banners->link }}" class="input w-full border mt-2" >
            </div>
            <div class="mb-3">
                <label> Label  </label>
                <input type="text" name="name" value="{{ $banners->name }}" class="input w-full border mt-2" >
            </div>
            

            <div class="mb-3">
                
                    <img src="{{ asset('/storage/app/public/banners/' . $banners->photo) }}" alt="..." class="box mb-3" id="logo" style="max-height: 100px" />
                <label> Banner Image ( JPG / PNG ) </label>
                <input type="file" name="photo" id="inputLogo" class="input w-full border mt-2" accept="image/*">
            </div>

            <div class="mb-3">
                <label> Status </label>
                <input type="checkbox" id="status" name="status" checked>
            </div>
           
            <button type="submit" class="button bg-theme-1 text-white mt-5"> {{ __('Save') }} </button>
        </form>
    </div>
</div>









@endsection

@section('javascript')
    <script>
    $(function() {
        function showImage(fileInput, imgID) {
            if (fileInput.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $(imgID).attr('src', e.target.result);
                    $(imgID).attr('alt', fileInput.files[0].name);
                }
                reader.readAsDataURL(fileInput.files[0]);
            }
        }
        $('#profile-image-btn').on('click', function() {
            $('#profile-image-input').click();
        });
        $('#profile-image-input').on('change', function() {
            showImage(this, '#profile-imgsrc');

            var img = document.getElementById('profile-imgsrc');
            img.style.display = 'block';

        });
    })
    </script>


@endsection