@extends('user/template')

@push('style')
<style>
body {
    background-color: #D9D9D9;
}
</style>
<link rel="stylesheet" href="/assets/css/master-data/pohon/pilih_pohon.css">
<link rel="stylesheet" href="/assets/css/dashboard/footer.css">
@endpush

@section('content')

<section class="section-1 vertical-menu">
    <div class="card mx-auto">
        <img src="{{ asset('storage/' . $pohon->image) }}" class="card-img-top" alt="Gambar Pohon">
        <a href="/pilih-profil-pohon" class="tombol-kembali">
            <i class="bi bi-chevron-left"></i>
        </a>
        <div class="card-body">
            <small class="top-text">{{ $pohon->status }}</small>
            <p class="center-text">{{ $pohon->nama }}</p>
            <div class="deskripsi-text">{!! $pohon->deskripsi !!}</div>
            <a href="" class="btn marg btn-success btn-sm btn-barcode" id="dtl_barcode"
                data-bs-toggle="modal" data-bs-target="#barcode-pohon"
                data-nameee           ="{{ $pohon->nama }}"
                data-barcode          ="{{ $pohon->kode_pohon }}"
                >
                <i class="the-icon fa-fw select-all fas"></i> Scan Me
            </a>
        </div>
        <div class="card-button">
            <form id="like-form" action="/like-pohon" method="POST">
                @csrf
                <input type="hidden" name="like" value="{{ $like }}">
                <input type="hidden" name="jenis_pohon_id" value="{{ $pohon->id }}">
                <button class="btn" name="button" id="button" type="button" onclick="likeForm()">
                    @if ($like != null)
                    <i class="fas fa-heart icon text-danger"></i>
                    @else
                    <i class="fa bi-heart icon"></i>
                    @endif
                </button>
            </form>
        </div>
    </div>
</section>

<div class="modal fade detail" id="barcode-pohon" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-xl-down modal-md">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="judul-modal" id="barcode-title"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="visible-print d-flex justify-content-center align-items-center h-100" id="barcode-modal">
                
            </div>
        </div>
        <div class="modal-footer">
            <form action="/generate-qr-code/print" method="POST">
            @csrf
            <input type="hidden" id="input_nama" name="input_nama" value="" readonly>
            <input type="hidden" id="input_barcode" name="input_barcode" value="" readonly>
            <button type="submit" class="btn btn-warning">Print</button>
            </form>
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
        </div>
      </div>
    </div>
  </div>

@push('footer')
<footer class="bg-white text-white">
    <div class="container">
        <div class="row">
            <div class="col-4 text-center">
                <a href="/dashboard-user">
                    <i class="icon bi bi-house"></i>
                    <p>Home</p>
                </a>   
            </div>
            <div class="col-4 text-center">
                <div class="footer-circle-content">
                    <a href="/scan">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                            <rect width="1" height="7" rx="0.5" fill="white"/>
                            <rect x="7" width="1" height="7" rx="0.5" transform="rotate(90 7 0)" fill="white"/>
                            <rect x="36" width="1" height="7" rx="0.5" transform="rotate(90 36 0)" fill="white"/>
                            <rect x="36" y="7" width="1" height="7" rx="0.5" transform="rotate(-180 36 7)" fill="white"/>
                            <rect x="36" y="36" width="1" height="7" rx="0.5" transform="rotate(-180 36 36)" fill="white"/>
                            <rect x="29" y="36" width="1" height="7" rx="0.5" transform="rotate(-90 29 36)" fill="white"/>
                            <rect y="36" width="1" height="7" rx="0.5" transform="rotate(-90 0 36)" fill="white"/>
                            <rect y="29" width="1" height="7" rx="0.5" fill="white"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-4 text-center">
                <a href="/pilih-profil-pohon">
                    <i class="icon bi bi-tree"></i> 
                    <p>Profil Pohon</p>
                </a>
            </div>
        </div>
    </div>
</footer>
@endpush

@push('script')
<script>
    // function redirectBack() {
    //     window.history.back();
    // }
</script>

<script>
    $(document).ready(function() {
      $(document).on('click', '#dtl_barcode', function() {
        var barcode = $(this).data('barcode');
        var nameee = $(this).data('nameee');
        var titleBarc = "Barcode Pohon " + nameee;
        
        $.ajax({
          type: 'GET',
          url: '/generate-qr-code', 
          data: { barcode: barcode, titleBarcode: nameee },
          success: function(qrCodeHtml) {
            // console.log(qrCodeHtml)
            $('#barcode-modal').html(qrCodeHtml);
            $('#input_nama').val(nameee);
            $('#input_barcode').val(barcode);
            $('#barcode-title').text(titleBarc);
          },
          error: function() {
            alert('Gagal mengambil kode QR.');
          }
        });
      });
    });
</script>

<script>

    function likeForm() {
        const form = document.querySelector('form#like-form'); 

        fetch(form.action, {
            method: 'POST',
            body: new FormData(form),
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}', 
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.errors) {
                Swal.fire({
                    icon: 'error',
                    title: 'error!',
                    text: "Something went wrong!",
                    timer: 3000, // Waktu dalam milidetik (3 detik dalam contoh ini)
                    timerProgressBar: true, // Menampilkan progress bar waktu
                    showConfirmButton: true // Menyembunyikan tombol OK
                }).then((result) => {
                    // Setelah tampilan pesan ditutup, arahkan pengguna ke halaman lain
                    window.location = "/pilih-pohon/{{ $pohon->nama }}";
                });
            } else {
                Swal.fire({
                    icon: 'success',
                    title: 'Succes!',
                    text: data.message,
                    timer: 3000, // Waktu dalam milidetik (3 detik dalam contoh ini)
                    timerProgressBar: true, // Menampilkan progress bar waktu
                    showConfirmButton: true // Menyembunyikan tombol OK
                }).then((result) => {
                    // Setelah tampilan pesan ditutup, arahkan pengguna ke halaman lain
                    window.location = "/pilih-pohon/{{ $pohon->nama }}";
                });
            }
        })
        .catch(error => {
            console.error('Terjadi kesalahan:', error);
        });
    }
    
    </script>

@endpush

@endsection