@extends('layouts.master')

@section('title')
    Data Sertifikat
@endsection

@section('content')
    <div class="nk-block-head">
        <div class="nk-block-head-content">
            <div class="nk-block-between-md g-4">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">
                        Data Sertifikat
                    </h3>
                    <div class="nk-block-des">
                        <p>Kamu mempunyai akses untuk mengelola data sertifikat</p>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- .nk-block-head -->
    <div class="nk-block">
        <div class="card card-bordered">
            <div class="card-inner card-inner-lg">
                <div class="nk-block">
                    <div class="container px-6 mx-auto grid">
                        <form action="{{ route('pages.dataAspaki.certificate.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <div class="form-control-wrap">
                                        @if (isset($model->value) && $model->value)
                                            <div class="mb-3 d-flex flex-row-reverse">
                                                <a class="btn btn-success"
                                                    href="{{ route('services.registration.certificate', ['slug' => 'preview']) }}"
                                                    target="_blank">
                                                    Preview</a>
                                            </div>
                                            <img id="output" src="{{ asset('uploads/' . $model->value) }}">
                                        @else
                                            <img id="output" src="{{ env('URL_IMG') . '/1200x850.png?text=Max 2mb' }}">
                                        @endif
                                        <input type="file" name="image" class="form-control form-control-outlined mt-2"
                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                            onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])">
                                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">
                                            Format PNG, or JPG, Rekomendasi Dimensi Gambar 1200x850 dan maksimal 2mb</p>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end mt-3">
                                <button type="submit" class="btn btn-primary">
                                    <em class="icon ni ni-save"></em> Simpan</button>
                            </div>
                        </form>
                    </div>
                </div><!-- .nk-block -->
            </div><!-- .card-inner -->
        </div><!-- .card -->
    </div><!-- .nk-block -->
@endsection