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

@section('content')


<div class="grid grid-cols-12 gap-6 mt-5">
    <div class="intro-y col-span-12 box p-5 ">
        <form method="POST" action="{{ url('panel/banner') }}" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label> Titre </label>
                <input type="text" name="title" value="{{ old('title') }}" class="input w-full border mt-2" >
            </div>

            <div class="mb-3">
                <label> short description </label>
                <input type="text" name="subtitle" value="{{ old('subtitle') }}" class="input w-full border mt-2" >
            </div>
            {{-- <div class="mb-3">
                <label> Background Color </label>
                <input type="text" name="color" value="{{ old('color') }}" class="input w-full border mt-2" >
            </div> --}}


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


            <div class="mb-3">
                <label> Photo ( <b>JPG/WEBP </b> ) </label>
    
                        <input type="file" name="photo" class="input w-full border mt-2" id="profile-image-input" accept="image/*">
                        <img src="" id="profile-imgsrc"
                                class="img-responsive" style="margin-top: 12px;height:200px; border: 1px dashed #ccc">
            </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