@extends('layouts.app')

@section('title', 'Stok Larutan - Hidroponik')
@section('page-title', 'Stok Larutan')

@section('content')

{{-- Alert --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show rounded-3 border mb-4" role="alert">
    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show rounded-3 border mb-4" role="alert">
    <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Header --}}
<div class="section-label" style="margin-bottom:0;flex:1;">
    <i class="bi bi-droplet-half" style="color:var(--primary)"></i> Stok Larutan
</div>

<div class="d-flex justify-content-end mb-4">
    <button class="btn-primary-clean" data-bs-toggle="modal" data-bs-target="#modalTambah">
        <i class="bi bi-plus-circle me-1"></i> Tambah Larutan
    </button>
</div>

{{-- Kartu Stok --}}
<div class="row g-3 mb-4">
    @forelse($stok as $s)
    @php
        $persen = min(100, ($s->jumlah_stok / 10) * 100);

        // Tentukan warna berdasarkan persentase stok
        if ($persen > 50) {
            $warna = '#10b981'; // hijau - aman
            $warnaBg = '#ecfdf5';
        } elseif ($persen > 20) {
            $warna = '#f59e0b'; // kuning - waspada
            $warnaBg = '#fffbeb';
        } else {
            $warna = '#ef4444'; // merah - kritis
            $warnaBg = '#fff5f5';
        }
    @endphp
    <div class="col-md-4">
        <div class="card-clean p-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <div class="fw-bold" style="color:{{ $warna }}; letter-spacing:1px; font-size:13px; text-transform:uppercase;">
                        {{ strtoupper($s->nama_larutan) }}
                    </div>
                    <div class="small mt-1" style="color:#718096;">{{ $s->keterangan }}</div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-sm" style="background:#f8fafc;border:1px solid var(--border-color);color:var(--primary);border-radius:8px;" data-bs-toggle="dropdown">
                        <i class="bi bi-three-dots-vertical"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow-sm" style="border:1px solid var(--border-color);border-radius:8px;">
                        <li>
                            <a class="dropdown-item" href="#"
                               style="color:var(--primary); font-size:13px;"
                               data-bs-toggle="modal"
                               data-bs-target="#modalUpdate"
                               data-id="{{ $s->id_stok }}"
                               data-nama="{{ $s->nama_larutan }}">
                                <i class="bi bi-arrow-left-right me-2"></i>Update Stok
                            </a>
                        </li>
                        <li>
                            <form action="{{ route('stok-larutan.destroy', $s->id_stok) }}" method="POST"
                                  onsubmit="return confirm('Hapus stok ini?')">
                                @csrf
                                @method('DELETE')
                                <button class="dropdown-item" style="color:#ef4444; font-size:13px;">
                                    <i class="bi bi-trash me-2"></i>Hapus
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="fw-bold mb-2" style="font-family:'Poppins',sans-serif; font-size:2rem; color:{{ $warna }};">
                {{ $s->jumlah_stok }}
                <span style="font-size:0.9rem; color:#a0aec0; font-weight:500;">{{ $s->satuan }}</span>
            </div>

            <div class="progress mb-2 rounded-3" style="height:6px; background:#e2e8f0;">
                <div class="progress-bar rounded-3" style="width:{{ $persen }}%; background:{{ $warna }};"></div>
            </div>

            <div class="small mt-2" style="color:#a0aec0;">
                <i class="bi bi-clock me-1" style="color:var(--primary)"></i>Update: {{ $s->update_at }}
            </div>
        </div>
    </div>
    @empty
    <div class="col-12">
        <div class="card-clean p-5 text-center" style="color:#a0aec0;">
            <i class="bi bi-inbox fs-3 mb-2 d-block"></i>Belum Ada Data Stok
        </div>
    </div>
    @endforelse
</div>

{{-- Log Stok --}}
<div class="section-label">
    <i class="bi bi-clock-history" style="color:var(--primary)"></i> Riwayat Perubahan Stok
</div>

<div class="card-clean mb-4">
    <div class="card-header">
        <i class="bi bi-list-ul me-2"></i>Log Stok Masuk / Keluar
    </div>
    <div class="table-responsive">
        <table class="table table-clean mb-0">
            <thead>
                <tr>
                    <th>Larutan</th>
                    <th>Jenis</th>
                    <th>Jumlah</th>
                    <th>Keterangan</th>
                    <th>Waktu</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($log as $l)
                <tr>
                    <td style="font-weight:600; color:var(--primary);">
{{ strtoupper($l->stok->nama_larutan ?? '-') }}
                    </td>
                    <td>
                        @if($l->jenis === 'masuk')
                            <span class="badge-normal">
                                <i class="bi bi-arrow-down-circle me-1"></i>Masuk
                            </span>
                        @else
                            <span class="badge-bahayalebih">
                                <i class="bi bi-arrow-up-circle me-1"></i>Keluar
                            </span>
                        @endif
                    </td>
                    <td style="font-weight:700; color:#2d3748;">
    {{ $l->jumlah }} {{ $l->stok->satuan ?? '' }}
</td>
                    <td style="color:#718096; font-size:13px;">{{ $l->keterangan ?? '-' }}</td>

                    <td style="color:#a0aec0; font-size:12px;">
    <i class="bi bi-clock me-1"></i>{{ $l->create_at }}
</td>
<td>
    <button class="btn btn-sm me-1"
        style="background:#f0f9ff;border:1px solid #bae6fd;color:#0284c7;border-radius:8px;font-size:12px;"
        data-bs-toggle="modal"
        data-bs-target="#modalEditLog"
        data-id="{{ $l->id_log }}"
        data-idstok="{{ $l->id_stok }}"
        data-jenis="{{ $l->jenis }}"
        data-jumlah="{{ $l->jumlah }}"
        data-ket="{{ $l->keterangan }}">
        <i class="bi bi-pencil me-1"></i>Edit
    </button>
    <form action="{{ route('log-stok.destroy', $l->id_log) }}" method="POST" style="display:inline">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-sm"
            style="background:#fff5f5;border:1px solid #fecaca;color:#ef4444;border-radius:8px;font-size:12px;">
            <i class="bi bi-trash me-1"></i>Hapus
        </button>
    </form>
</td>

                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-5" style="color:#a0aec0;">
                        <i class="bi bi-clock-history fs-3 d-block mb-2"></i>
                        <span style="font-size:13px;">Belum ada riwayat perubahan stok</span>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>


{{-- Modal Tambah --}}
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Tambah Larutan Baru</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('stok-larutan.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Larutan</label>
                        <input type="text" name="nama_larutan" class="form-control" required>
                    </div>
                    <div class="row g-2">
                        <div class="col-7">
                            <label class="form-label">Jumlah Stok Awal</label>
                            <input type="number" name="jumlah_stok" step="0.1" min="0" class="form-control" required>
                        </div>
                        <div class="col-5">
                            <label class="form-label">Satuan</label>
                            <select name="satuan" class="form-select" required>
                                <option value="liter">Liter</option>
                                <option value="ml">ml</option>
                                <option value="gram">Gram</option>
                                <option value="kg">Kg</option>
                            </select>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" style="border:1px solid var(--border-color); color:var(--text-muted); border-radius:8px; padding:8px 16px; font-size:13px;" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn-primary-clean">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>


{{-- Modal Update Stok --}}
<div class="modal fade" id="modalUpdate" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">
                    Update Stok — <span id="namaLarutan"></span>
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formUpdate" action="{{ route('stok-larutan.update-stok', ['id' => '0']) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Jenis</label>
                        <div class="d-flex gap-4">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="jenis" value="masuk" id="masuk" checked>
                                <label class="form-check-label fw-bold" for="masuk" style="color:#10b981;">
                                    <i class="bi bi-arrow-down-circle me-1"></i>Masuk
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="jenis" value="keluar" id="keluar">
                                <label class="form-check-label fw-bold" for="keluar" style="color:#ef4444;">
                                    <i class="bi bi-arrow-up-circle me-1"></i>Keluar
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Jumlah</label>
                        <input type="number" name="jumlah" step="0.1" min="0.1" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" style="border:1px solid var(--border-color); color:var(--text-muted); border-radius:8px; padding:8px 16px; font-size:13px;" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn-primary-clean">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>



<div class="modal fade" id="modalEditLog" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Edit Log Stok</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formEditLog" method="POST" action="/log-stok/0">
    @csrf
    @method('PUT')
    <input type="hidden" id="editLogId" name="_log_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Larutan</label>
                        <select name="id_stok" id="editIdStok" class="form-select" required>
                            @foreach($stok as $s)
                            <option value="{{ $s->id_stok }}">{{ $s->nama_larutan }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Jenis</label>
                        <div class="d-flex gap-4">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="jenis" value="masuk" id="editMasuk">
                                <label class="form-check-label fw-bold" for="editMasuk" style="color:#10b981;">
                                    <i class="bi bi-arrow-down-circle me-1"></i>Masuk
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="jenis" value="keluar" id="editKeluar">
                                <label class="form-check-label fw-bold" for="editKeluar" style="color:#ef4444;">
                                    <i class="bi bi-arrow-up-circle me-1"></i>Keluar
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Jumlah</label>
                        <input type="number" name="jumlah" id="editJumlah" step="0.1" min="0.1" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" id="editKet" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" style="border:1px solid var(--border-color);color:var(--text-muted);border-radius:8px;padding:8px 16px;font-size:13px;" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn-primary-clean">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>


@endsection
@section('scripts')
<script>
    const modalUpdate = document.getElementById('modalUpdate');
    modalUpdate.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        const id = btn.getAttribute('data-id');
        const nama = btn.getAttribute('data-nama');
        document.getElementById('namaLarutan').textContent = nama.toUpperCase();
        document.getElementById('formUpdate').action = `/stok-larutan/${id}/update-stok`;
    });

    const modalEditLog = document.getElementById('modalEditLog');
    modalEditLog.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        document.getElementById('editIdStok').value = btn.getAttribute('data-idstok');
        document.getElementById('editJumlah').value = btn.getAttribute('data-jumlah');
        document.getElementById('editKet').value = btn.getAttribute('data-ket');
        const jenis = btn.getAttribute('data-jenis');
        document.getElementById(jenis === 'masuk' ? 'editMasuk' : 'editKeluar').checked = true;
       const logId = btn.getAttribute('data-id');
document.getElementById('formEditLog').action = '/log-stok/' + logId;
    });
</script>
@endsection