@extends('layouts.master')
 @section('header')
       <h5 class="m-b-10">tanaman</h5>
                                        <p class="m-b-0">Welcome to the tanaman</p>
 @endsection

 @section('breadcrumb')
       <li class="breadcrumb-item"><a href="{{ route('tanaman.index') }}">tanaman</a>
                                        </li>
                                        
 @endsection
 @section('content')

                    <!-- Page-header end -->
                    <div class="pcoded-inner-content">
                        <div class="main-body">
                            <div class="page-wrapper">
                                <div class="page-body">
                              
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h5>Data tanaman</h5>
                                                    <br>

                                                        <a href="{{ route('tanaman.printSemuaQr') }}" class="btn btn-success btn-sm float-left text-white" target="_blank"><i class="fa fa-print fa-lg"></i> Cetak Semua QR</a>
                                                        
                                                        <a onclick="addForm('{{ route('tanaman.store') }}')" class="btn btn-primary btn-sm float-left ml-4 text-white"><i class="fa fa-plus fa-lg"></i> Tambah tanaman</a>
                                                        <button id="btn-print-selected"
                                                        class="btn btn-warning btn-sm float-left ml-4 text-white">
                                                        <i class="fa fa-qrcode"></i>
                                                        Print QR Terpilih
                                                    </button>

                                                    <a href="{{ route('export.buku') }}" class="btn btn-danger btn-sm float-right text-white" target="_blank"><i class="fa fa-file-pdf-o fa-lg"></i> Cetak Buku Tanaman</a>
                                                        
                                                </div>
                                                <div class="card-body">
                                                    <div class="table-responsive">
                                                        <table class="table table-striped table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th> <i class="fa fa-checkbox fa-xs"></i></th>
                                                                    <th>No</th>
                                                                    <th>Aksi</th>
                                                                    <th>Gambar </th>
                                                                    <th>Nama lokal</th>
                                                                    <th>Nama latin</th>
                                                                    <th>Kategori </th>
                                                                    <th>Deskripsi </th>
                                                                    <th>Khasiat </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                               
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('admin.tanaman.form')
                    <form id="form-print-selected"
      action="{{ route('tanaman.printSelectedQr') }}"
      method="POST"
      target="_blank">

    @csrf

    <input type="hidden"
           name="ids"
           id="selected_ids">

</form>
@endsection

@push('scripts')
    
<script>
    let table;

    $(function () {
        table = $('.table').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            autoWidth: false,
            ajax: {
                url: '{{ route('tanaman.data') }}',
                    },
            columns: [
                {data: 'checkbox', searchable: false, sortable: false},
                {data: 'DT_RowIndex', searchable: false, sortable: false},
                {data: 'aksi', searchable: false, sortable: false},
                {data: 'gambar'},
                {data: 'nama_lokal'},
                {data: 'nama_latin'},
                {data: 'kategori'},
                {data: 'deskripsi'},
                {data: 'khasiat'},
            ]
        });
        });

     function addForm(url) {
        $('#modal-form').modal('show');
        $('#modal-form .modal-title').text('Tambah tanaman');

        $('#modal-form form')[0].reset();
        $('#modal-form form').attr('action', url);
        $('#modal-form [name=_method]').val('post');
    }

  
    function editForm(url) {
        $('#modal-form').modal('show');
        $('#modal-form .modal-title').text('Edit tanaman');

        $('#modal-form form')[0].reset();
        $('#modal-form form').attr('action', url);
        $('#modal-form [name=_method]').val('put');
        $('#modal-form [name=nama_lokal]').focus();

        $.get(url)
            .done((response) => {
                $('#modal-form [name=nama_lokal]').val(response.nama_lokal);
                $('#modal-form [name=nama_latin]').val(response.nama_latin);
                $('#modal-form [name=kategori_id]').val(response.kategori_id).attr('selected', 'selected').trigger('change');
                $('#modal-form [name=deskripsi]').val(response.deskripsi);
                $('#modal-form [name=khasiat]').val(response.khasiat);
                $('#modal-form [name=gambar]').val(response.gambar);
            })
            .fail((errors) => {
                alert('Tidak dapat menampilkan data');
                return;
            });
    }

    function deleteData(url) {
        if (confirm('Yakin ingin menghapus data terpilih?')) {
            $.post(url, {
                    '_token': $('[name=csrf-token]').attr('content'),
                    '_method': 'delete'
                })
                .done((response) => {
                    table.ajax.reload();
                })
                .fail((errors) => {
                    alert('Tidak dapat menghapus data');
                    return;
                });
        }
    }

    $(document).ready(function() {
        // Ketika pengguna memilih file gambar
        $('#modal-form #input-gambar').change(function(e) {
            var reader = new FileReader();
            
            // Saat file selesai dibaca
            reader.onload = function(e) {
                // Tampilkan gambar pada tag img
                $('#modal-form #preview-gambar').attr('src', e.target.result);
                $('#modal-form #preview-gambar').show(); // Memunculkan gambar yang sebelumnya disembunyikan
            }
            
            // Membaca file sebagai URL data
            if (this.files[0]) {
                reader.readAsDataURL(this.files[0]);
            }
        });
    });
    $('#btn-print-selected').on('click', function(){

    let ids = [];

    $('.tanaman-checkbox:checked').each(function(){
        ids.push($(this).val());
    });

    if(ids.length === 0){
        alert('Pilih minimal satu tanaman');
        return;
    }

    $('#selected_ids').val(ids.join(','));

    $('#form-print-selected').submit();

});
</script>
@endpush