@extends('layout') 
@section("main")
    <div class="row">
        <div class="col-lg-12">
            <a href="{{route('sertifikat.index')}}" class="btn btn-warning mb-3">Kembali</a>
            <div class="bg-white p-3">
                <h4>{{$sertifikat->nama_sertifikat}} </h4> 
                Nomor Sertifikat: {{$sertifikat->nomor_sertifikat}}
                <hr>
                <div class="row">
                    <div class="col-sm-12">
                        @if(Session::has('message'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{Session::get('message')}}
                                <button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif 
                        <table class="table">
                            <tr>
                                <td width=139>Jumlah Halaman</td>
                                <td>
                                    <form action="{{route('sertifikat.update',$sertifikat->id)}}" method="POST">
                                        <div class="d-flex">
                                            <input type="text" class="form-control" name="jumlah_halaman" value="{{$sertifikat->jumlah_halaman}}" required>
                                            @csrf @method('PUT')
                                            <button type="submit" name="sbupdate" value="jml_halaman" class="btn btn-sm btn-primary">Simpan</button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                        </table>
                    </div>
                    @include('sertifikat.show.content') 
                    <div class="col-sm-12">
                        Lihat sebagai: 
                        <select class="form-select mb-2" id="selectUser">
                            <option value="{{Auth::user()->id}}">{{Auth::user()->fullname}}</option>
                            @foreach ($peserta as $item)
                                <option value="{{$item->id}}">{{$item->nama_peserta}}</option>
                            @endforeach
                        </select>
                        <a href="{{$linkpreview.Auth::user()->id}}" target="_blank" id="aLink" class="btn btn-sm btn-primary"><i class="fas fa-eye"></i> Lihat Sertifikat</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Modal -->
<div class="modal modal-lg" id="contentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Konten</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{route('sertifikat.store')}}" method="POST">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="">ID Sertifikat</label>
                            <input type="text" class="form-control mb-3" style="background: #f0f0f0" name="idsertifikat" value="{{$sertifikat->id}}" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="">Halaman</label>
                            <input type="number" class="form-control mb-3" id="inputPage" name="page">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="">Tipe/Jenis Konten</label>
                        <select name="tipe_config" class="form-select" required>
                            <option value="" disabled>- Tentukan Tipe/Jenis Konten -</option>
                            <option value="text">Teks</option>
                            <option value="image">Gambar</option>
                            <option value="bg">Background</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="">Nama Konten</label>
                        <input type="text" name="nama_config" class="form-control" required>
                        *nama konten otomatis yang dapat digunakan:
                        <ul>
                            <li>nomor_sertifikat : Nomor Sertifikat</li>
                            <li>nama_peserta : Nama Peserta</li>
                            <li>kepesertaan_peserta : Kepesertaan Peserta</li>
                        </ul>
                    </div>
                    <div class="mb-3">
                        <label for="">Isi Konten</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="posX" placeholder="Posisi X">
                            <input type="text" class="form-control" name="posY" placeholder="Posisi Y">
                        </div>
                        <input type="text" class="form-control" name="Content" placeholder="Isi Teks">
                        <div class="input-group">
                            <select name="Font" id="" class="form-select">
                                <option value="" disabled>- Jenis Font</option>
                                <option value="Arial" selected>Arial</option>
                                <option value="Courier">Courier</option>
                                <option value="Symbol">Symbol</option>
                                <option value="Times">Times</option>
                            </select>
                            <select name="Style" id="" class="form-select">
                                <option value="" disabled>- Style Font</option>
                                <option value="" selected>Regular</option>
                                <option value="b">Bold</option>
                                <option value="i">Italic</option>
                                <option value="u">Underline</option>
                                <option value="bi">Bold Italic</option>
                                <option value="bu">Bold Underline</option>
                                <option value="iu">Italic Underline</option>
                                <option value="biu">Bold Italic Underline</option>
                            </select>
                            <input type="number" class="form-control" name="FontSize" value="12" placeholder="Font Size">
                            <select name="Font" id="" class="form-select">
                                <option value="" disabled>- Text Align</option>
                                <option value="L" selected>Left</option>
                                <option value="C">Center</option>
                                <option value="R">Right</option>
                                <option value="J">Justify</option>
                            </select>
                            <select name="Style" id="" class="form-select">
                                <option value="" disabled>- Vertical Align</option>
                                <option value="T" selected>Top</option>
                                <option value="M">Middle</option>
                                <option value="B">Bottom</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    @csrf 
                    <button type="submit" name="sbvalue" value="addcontent" class="btn btn-primary">Tambah Konten</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
$("#selectUser").on("change",function(){
    $("a#aLink").attr("href","{{$linkpreview}}"+$("#selectUser").find(":selected").val()+"/view");
});
function updateInputPage(page){
    $("input#inputPage").val(page);
}
</script>
@include('sertifikat.js') 
@endsection