@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 action="{{ route('admin.partners.store') }}" method="POST" 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> Banner Image ( JPG / PNG ) </label>
                    <input type="file" name="image" 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>



                <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