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

@push('styles')
@endpush

@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



@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.update',$partner->id)}}" method="POST" enctype="multipart/form-data" >
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label> Titre </label>
                    <input type="text" name="title" value="{{ $partner->title }}" required class="input w-full border mt-2">
                </div>
                <div class="mb-3">
                    <label> Logo ( JPG ) </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