@extends('admin.template')
@push('style')
<link rel="stylesheet" type="text/css" href="/editor/trix.css">
<link rel="stylesheet" href="/assets/extensions/choices.js/public/assets/styles/choices.css">

<link rel="stylesheet" href="/assets/extensions/filepond/filepond.css">
<link rel="stylesheet" href="/assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.css">
<link rel="stylesheet" href="/assets/extensions/toastify-js/src/toastify.css">
<style>
.container .card h4, .container .card label {
    font-weight: normal;
}
trix-toolbar [data-trix-button-group="file-tools"] {
    display: none;
}

/* responsive */
@media (max-width: 560px) {
    .container .card h4 {
        font-size: 12px;
    }
    .container .card label {
        font-size: 10px;
    }
    .container .card input, .container .card select {
        height: 30px;
        font-size: 10px;
    }
    .container .card button {
        font-size: 10px;
    }
    .container .card small {
        font-size: 8px;
    }
    .custom-font-size {
        font-size: 10px;
    }
    trix-editor.trix-size {
        font-size: 10px !important;
    }
    .img-edit {
        height: 100px;
    }
    .btn-delete-img {
        width: 20px; height: 20px;
    }
}

@media (min-width: 561px) and (max-width: 992px) {
    .container .card h4 {
        font-size: 16px;
    }
    .container .card label {
        font-size: 14px;
    }
    .container .card input, .container .card select {
        height: 30px;
        font-size: 14px;
    }
    .container .card button {
        font-size: 14px;
    }
    .container .card small {
        font-size: 12px;
    }
    trix-editor.trix-size {
        font-size: 12px !important;
    }
    .img-edit {
        height: 150px;
    }
    .btn-delete-img {
        width: 30px; height: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .container .card h4 {
        font-size: 18px;
    }
    .container .card label {
        font-size: 15px;
    }
    .container .card input, .container .card select {
        height: 40px;
        font-size: 15px;
    }
    .container .card button {
        font-size: 15px;
    }
    .container .card small {
        font-size: 13px;
    }
    .img-edit {
        height: 200px;
    }
    .btn-delete-img {
        width: 40px; height: 40px;
    }
}

@media (min-width: 1201px) {
    .container .card h4 {
        font-size: 20px;
    }
    .container .card label {
        font-size: 16px;
    }
    .container .card input, .container .card select {
        height: 40px;
    }
    .container .card button {
        font-size: 16px;
    }
    .container .card small {
        font-size: 14px;
    }
    .img-edit {
        height: 200px;
    }
    .btn-delete-img {
        width: 40px; height: 40px;
    }
}

.img-edit {
    width: 100%;
    object-fit: cover;
} 
.delete-image {
    position: absolute;
    bottom: -18px;
}

</style>
@endpush
@section('content')
<section id="input-style">
    <div class="container d-flex align-items-center justify-content-center">
        <div class="row w-100">
            <div class="col-12" >
                <div class="card">
                    <a href="/dokumentasi-admin" style="color: black;"><i class="bi bi-chevron-left ps-3"></i> kembali</a>
                    <div class="card-header">
                        <h4 class="card-title">Edit Dokumentasi</h4>
                    </div>
                    
                    <div class="card-body">
                        <form id="editDokumentasiForm" action="/dokumentasi-admin/{{ $dokumentasi->id }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                
                                {{-- <div class="col-12"> --}}
                                    {{-- <div class="col-12">
                                        <div class="form-group">
                                            <label for="jenis_pohon_id">Jenis Pohon<span class="text-danger">*</span></label>
                                            <select class="choices form-select @error('jenis_pohon_id')
                                            is-invalid
                                            @enderror" name="jenis_pohon_id" id="jenis_pohon_id">
                                                <option value=" "></option>
                                                @foreach ($jenis_pohons as $jenis_pohon)
                                                    <option value="{{ $jenis_pohon->id }}"
                                                        {{ old('jenis_pohon_id', $dokumentasi->jenis_pohon_id) == $jenis_pohon->id ? 'selected' : '' }}>
                                                        {{ $jenis_pohon->nama }}
                                                    </option>
                                                @endforeach
                                            <select>
                                            @error('jenis_pohon_id')
                                                <small class="text-danger ms-3 fst-italic">
                                                    {{ $message }}
                                                </small>
                                            @enderror
                                        </div>
                                    </div> --}}

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="judul">Judul Kegiatan<span class="text-danger">*</span></label>
                                            <input type="text" id="judul" name="judul" class="form-control round @error('judul')
                                            is-invalid
                                            @enderror" value="{{ old('judul', $dokumentasi->judul) }}">
                                            @error('judul')
                                                <small class="text-danger ms-3 fst-italic">
                                                    {{ $message }}
                                                </small>
                                            @enderror
                                        </div>
                                    </div>


                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="deskripsi">Deskripsi Pohon<span class="text-danger">*</span></label>
                                            <input id="deskripsi" type="hidden" name="deskripsi" value="{{ old('deskripsi', $dokumentasi->deskripsi) }}">
                                            <trix-editor class="trix-size" input="deskripsi"></trix-editor>
                                            @error('deskripsi')
                                                <small class="text-danger ms-3 fst-italic">
                                                    {{ $message }}
                                                </small>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="image" class="">Foto<span class="text-danger">*</span></label>
                                            <input type="file" class="multiple-files-filepond" id="image" name="image[]" multiple>
                                            {{-- <input type="file" class="with-validation-filepond" multiple data-max-file-size="2MB" id="image" name="image[]"> --}}
                                            @error('image')
                                                <small class="text-danger pl-3">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                {{-- </div> --}}
                                <div class="text-end">
                                    <button class="btn btn-primary" type="submit">Submit</button>
                                </div>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-md-12 col-lg-6">
                                <div class="card-body">
                                    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                                      <div class="carousel-inner">
                                        @foreach ($dok_images as $key => $dok_image)
                                        <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                            <img src="{{ asset('storage/' . $dok_image->image) }}" class="d-block img-edit" alt="...">
                                            <div class="carousel-caption delete-image">
                                                <form class="deleteImageForm" action="/dokumentasi-admin/delete-img/{{ $dok_image->image }}" method="POST">
                                                    @csrf
                                                    <button type="submit" class="mx-auto btn btn-danger rounded-circle btn-delete-img" style="padding: 0;" >
                                                        <i class="the-icon fa-fw select-all fas"></i>
                                                    </button>
                                                </form>
                                            </div>
                                          </div>
                                        @endforeach
                                        
                                      </div>
                                      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Previous</span>
                                      </a>
                                      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Next</span>
                                      </a>
                                    </div>
                                  </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('script')
<script type="text/javascript" src="/editor/trix.umd.min.js"></script>
<script src="/assets/extensions/choices.js/public/assets/scripts/choices.js"></script>
<script src="/assets/static/js/pages/form-element-select.js"></script>

<script src="/assets/extensions/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js"></script>
<script src="/assets/extensions/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-filter/filepond-plugin-image-filter.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js"></script>
<script src="/assets/extensions/filepond/filepond.js"></script>
<script src="/assets/extensions/toastify-js/src/toastify.js"></script>
<script src="/assets/static/js/pages/filepond.js?v=1"></script>
<script>
// function previewImage() {
//     const image = document.querySelector('#image');
//     const imgPreview = document.querySelector('.img-preview');

//     imgPreview.style.display = 'block';

//     const oFReader = new FileReader();
//     oFReader.readAsDataURL(image.files[0]);

//     oFReader.onload = function(oFREvent) {
//         imgPreview.src = oFREvent.target.result;
//     }
// }

$(document).ready(function() {
  // Ketika input berubah
  $('#image').change(function() {
    // Hapus atribut src dari elemen gambar
    $('.img-preview').removeAttr('src');
  });
});
</script>
<script>

// function btn_delete_img(button) {
//         // Traverse up the DOM to find the parent form element
//         var form = button.closest('form');
        
//         if (form) {
//             form.submit();
//         } else {
//             console.error('Form element not found.');
//         }
//     }
//     function btn_edit_dokumentasi() {
//         document.getElementById('editDokumentasiForm').submit();
//     }
</script>
@endpush
@endsection