@extends('user/template')

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


@section('content')

<section class="section-1">
    <form action="">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-12 mb-1">
                    <div class="input-group input-group-sm mb-3">
                        <input type="text" class="form-control" placeholder="Search" name="search" onchange="javascript:this.form.submit();" value="{{ Request('search') }}">
                        <button class="btn btn-light" type="button" id="button-addon2">
                            <i class="fa fa-search"></i>
                        </button>
                      </div>    
                </div>    
            </div> 
        </div>
    </form>
</section>


<section class="content-2">
    <div class="vertical-menu">
        <div class="cards-wrapper">
            <div class="row">
                @foreach ($pohons as $pohon)
                <a href="/pilih-pohon/{{ $pohon->nama }}" class="col-md-12 col-lg-6 card-margin-2">
                    <div class="card">
                        <div class="row g-0">
                            <div class="col-8">
                                <div class="card-header">
                                    Pohon {{ $pohon->status }}
                                </div>
                                <div class="card-body text-success">
                                    <p class="card-title">{{ $pohon->nama }}</p>
                                    <p class="card-text">by {{ $pohon->admin->nama }}</p>
                                </div>
                            </div>
                            <div class="col-4 gradient" >
                                <img src="{{ asset('storage/' . $pohon->image) }}" class="img-fluid rounded-end" alt="Gambar">
                            </div>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>
        </div>
    </div>    
</section>

@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-pohon/{{ $url->nama ?? null}}">
                    <i class="icon bi bi-tree"></i> 
                    <p>Profil Pohon</p>
                </a>
            </div>
        </div>
    </div>
</footer>
@endpush

@endsection