@extends('layouts.app')
@section('js')
    {{-- <script src="{{ asset('js/images.js') }}"></script> --}}
@endsection
@section('content')
    <div class='row'>
        <div class='col-8 mb-5'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Images descriptions') }}
            </h2>
        </div>

    </div>
    @foreach( $images as $image )
        <div class='image-box'>
            <form action='images/savedescription' method='post'>
            <div class='row mt-3'>
                <div class='col-4 center-container'>
                    <img class='image_preview' src="data:image/jpeg;base64,{{$image['b64']}}">
                </div>
                <div class='col-8'>
                    <table width='100%'>
                        <tr>
                            <td>File name: <b>{{ $image['file_name'] }} </b> </td>
                        </tr>
                        <tr>
                            <td>
                                @csrf
                                <textarea class='form-control' rows='12' name='image_description'>{{ $image['img'] != null ? $image['img']['image_description'] : '' }} </textarea>
                                <input type='hidden' name='file_name' value='{{$image['file_name']}}'/>
                            </td>
                        </tr>
                        <tr>
                            <td class='mp-1'>
                                <input style='width: 100%; height: 50px;' class="btn btn-primary mt-3" type="submit" value="Save"></button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            </form>
        </div>
    @endforeach
@endsection