@extends('layouts.app')

@section('title','Unit')

@section('content')

<style>
    .card-modern {
        border: none;
        border-radius: 18px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
    }

    .table-modern th {
        background: #f8fafc;
        border: none;
    }

    .table-modern td {
        vertical-align: middle;
        border-color: #f1f5f9;
    }

    .stock-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
    }

    .stock-safe {
        background: #dcfce7;
        color: #166534;
    }

    .stock-low {
        background: #fee2e2;
        color: #991b1b;
    }

    .action-btn {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .search-box {
        border-radius: 14px;
        padding: 12px;
        border: 1px solid #e5e7eb;
    }

    .empty-state {
        text-align: center;
        padding: 50px 20px;
        color: #6b7280;
    }
</style>

<div class="card card-modern p-4">

    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">

        <div>
            <h4 class="mb-1">📦 Data Unit</h4>
            <small class="text-muted">
                Kelola semua Unit Kathles
            </small>
        </div>

        <a href="/units/create" class="btn btn-primary rounded-4">
            <i class="bi bi-plus-lg"></i>
            Tambah Unit
        </a>

    </div>

    <!-- SEARCH -->
    <div class="mb-4">
        <input type="text"
            id="search"
            class="form-control search-box"
            placeholder="Cari Unit...">
    </div>

    <!-- TABLE -->
    <div class="table-responsive">

        <table class="table table-modern align-middle">

            <thead>
                <tr>
                    <th width="60">#</th>
                    <th>Unit</th>
                    <th>Simbol</th>
                    <th width="140">Aksi</th>
                </tr>
            </thead>

            <tbody id="unitTable">

                @forelse($units as $p)

                <tr class="unit-row">

                    <td>
                        {{ $loop->iteration }}
                    </td>

                    <td>
                        <div class="fw-semibold">
                            {{ $p->name }}
                        </div>
                    </td>

                    <td>
                        {{ $p->symbol ?? '-' }}
                    </td>
                    
                    <td>

                        <div class="d-flex gap-2">

                            <!-- EDIT -->
                            <a href="/units/{{ $p->id }}/edit"
                                class="btn btn-warning action-btn">

                                <i class="bi bi-pencil"></i>

                            </a>

                            <!-- DELETE -->
                            <form action="/units/{{ $p->id }}"
                                method="POST"
                                onsubmit="return confirm('Hapus Unit ini?')">

                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                    class="btn btn-danger action-btn">

                                    <i class="bi bi-trash"></i>

                                </button>

                            </form>

                        </div>

                    </td>

                </tr>

                @empty

                <tr>
                    <td colspan="6">

                        <div class="empty-state">

                            <div style="font-size:50px;">
                                📦
                            </div>

                            <h5>Belum ada Unit</h5>

                            <p>
                                Tambahkan Unit pertama Anda
                            </p>

                        </div>

                    </td>
                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

<script>
    document.getElementById('search')
        .addEventListener('keyup', function() {

            let value = this.value.toLowerCase();

            document.querySelectorAll('.unit-row')
                .forEach(row => {

                    row.style.display =
                        row.innerText.toLowerCase().includes(value) ?
                        '' :
                        'none';

                });

        });
</script>

@endsection