@extends('layouts.app')
@section('title', __('clinicSite::lang.media'))

@section('content')
<section class="content-header">
    <h1><i class="fas fa-images"></i> {{ __('clinicSite::lang.media') }}
        <small>Upload images, then copy a URL into any section</small></h1>
</section>

<section class="content">
    @include('clinicSite::admin._flash')
    <div class="row">
        <div class="col-md-12">
            @component('components.widget', ['class' => 'box-primary'])
                <form method="POST" action="{{ route('cs.media.upload') }}" enctype="multipart/form-data" style="margin-bottom:18px;">@csrf
                    <div class="form-inline">
                        <input type="file" name="files[]" accept="image/*" multiple required>
                        <button class="btn btn-primary"><i class="fa fa-upload"></i> Upload</button>
                    </div>
                </form>

                <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;">
                    @forelse($media as $m)
                        <div style="border:1px solid #e5e9f0;border-radius:9px;overflow:hidden;background:#fff;">
                            <div style="height:120px;background:#f4f6fa;display:grid;place-items:center;overflow:hidden;">
                                <img src="{{ $m->url() }}" style="max-width:100%;max-height:120px;">
                            </div>
                            <div style="padding:8px;">
                                <input type="text" class="form-control input-sm" readonly value="{{ $m->url() }}" onclick="this.select();document.execCommand('copy');" title="Click to copy" style="font-size:11px;">
                                <form method="POST" action="{{ route('cs.media.destroy', $m->id) }}" onsubmit="return confirm('Delete this image?')" style="margin-top:6px;">@csrf @method('DELETE')
                                    <button class="btn btn-xs btn-danger btn-block"><i class="fa fa-trash"></i> Delete</button></form>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted">No images uploaded yet.</p>
                    @endforelse
                </div>
                <div style="margin-top:14px;">{{ $media->links() }}</div>
            @endcomponent
        </div>
    </div>
</section>
@endsection
