@extends('layouts.dashboard')
@section('content')

<h4 class="">
    <span class="text-muted fw-light">Pemantauan / </span> Detail
</h4>

<div class="row">
    <!-- User Sidebar -->
    <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0" x-data="{ openPenarikan: false, openEdit: false }" >

    <!-- User Card -->
    @livewire('inventaris.detail.detail-card', ['id'=> $item->id])
    @role(['Admin'])
    @livewire('inventaris.detail.info-iot', ['item' => $item])
    @endrole
</div>
    <!--/ User Sidebar -->
    <!-- User Content -->
    <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
        <div class="card mb-3 p-3">
            <form action="{{ route('pemantauan.detail', ['id' => $item->id]) }}" method="get">
                <div class="row">
                    <div class="col-4">
                        <label for="startDate">Awal</label>
                        <input type="date" class="form-control" value="{{ $start }}" name="start" id="startDate">
                    </div>
                    <div class="col-4">
                        <label for="endDate">Akhir</label>
                        <input type="date" class="form-control" value="{{ $end }}" name="end" id="endDate">
                    </div>
                    <div class="col-4">
                        <button class="btn btn-sm btn-primary" style="margin-top: 1.6rem" type="submit">Cari</button>
                    </div>
                </div>
            </form>
        </div>
         @livewire('inventaris.detail.grafik-iot', ['pemantauan' => $pemantauan, 'start'=> $start, 'end' => $end])

 
    </div>
    <!--/ User Content -->
</div>

 


@endsection
@push('AddCSS')
<!-- Vendors CSS -->
<style>
    <style>
/* Styling untuk daftar tab */
.nav-tabs {
    display: flex;
    justify-content: start;
    border-bottom: 2px solid #ddd;
    margin-bottom: 1rem;
}

/* Styling untuk elemen <li> */
.nav-tabs .nav-item {
    margin-right: 0.5rem;
}

/* Styling tombol */
.nav-tabs .nav-link {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: #f8f9fa;
    color: #333;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

/* Styling untuk tombol aktif */
.nav-tabs .nav-link.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* Hover effect */
.nav-tabs .nav-link:hover {
    background-color: #e9ecef;
    color: #007bff;
    border-color: #007bff;
    cursor: pointer;
}
</style>

</style>
@livewireStyles
@endpush
@push('AddJS')
@livewireScripts
@stack('livewireJS')
<!-- Vendors JS -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Page JS -->
{{-- <script src="{{asset('assets')}}/js/charts-chartjs.js"></script> --}}

@endpush