@extends('layouts.app')

@section('content')

<div class="histori-page">

    {{-- =====================================================
         HEADER
    ====================================================== --}}

    <div class="histori-header">

        <div>

            <h3 class="mb-1">

                <i class="bi bi-clock-history me-2"></i>

                Riwayat Perubahan Kondisi Aset

            </h3>

            <p class="text-muted mb-0">

                Riwayat perubahan kondisi aset laboratorium.

            </p>

        </div>

    </div>


    {{-- =====================================================
         CARD HISTORI
    ====================================================== --}}

    <div class="card histori-card shadow-sm border-0">

        <div class="card-body p-0">

            {{-- =================================================
                 TABLE RESPONSIVE
            ================================================== --}}

            <div class="table-responsive">

                <table class="table table-bordered table-hover align-middle mb-0">

                    <thead class="table-dark">

                        <tr>

                            <th class="text-center no-column">
                                No
                            </th>

                            <th>
                                Tanggal
                            </th>

                            <th>
                                Kode Aset
                            </th>

                            <th>
                                Nama Aset
                            </th>

                            <th>
                                Kondisi Lama
                            </th>

                            <th>
                                Kondisi Baru
                            </th>

                            <th>
                                Keterangan
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                    @forelse($histori as $item)

                        <tr>

                            {{-- NO --}}

                            <td class="text-center">

                                {{ $loop->iteration }}

                            </td>


                            {{-- TANGGAL --}}

                            <td>

                                <div class="history-date">

                                    <i class="bi bi-calendar3 me-1"></i>

                                    {{ $item->created_at->format('d-m-Y') }}

                                    <small>

                                        {{ $item->created_at->format('H:i') }}

                                    </small>

                                </div>

                            </td>


                            {{-- KODE ASET --}}

                            <td>

                                <span class="asset-code">

                                    {{ $item->aset->kode_aset ?? '-' }}

                                </span>

                            </td>


                            {{-- NAMA ASET --}}

                            <td>

                                <strong>

                                    {{ $item->aset->nama_aset ?? '-' }}

                                </strong>

                            </td>


                            {{-- KONDISI LAMA --}}

                            <td>

                                @if($item->kondisi_lama == 'Baik')

                                    <span class="badge bg-success">
                                        Baik
                                    </span>

                                @elseif($item->kondisi_lama == 'Rusak Ringan')

                                    <span class="badge bg-warning text-dark">
                                        Rusak Ringan
                                    </span>

                                @elseif($item->kondisi_lama == 'Rusak Berat')

                                    <span class="badge bg-danger">
                                        Rusak Berat
                                    </span>

                                @else

                                    <span class="badge bg-secondary">
                                        {{ $item->kondisi_lama ?? '-' }}
                                    </span>

                                @endif

                            </td>


                            {{-- KONDISI BARU --}}

                            <td>

                                @if($item->kondisi_baru == 'Baik')

                                    <span class="badge bg-success">
                                        Baik
                                    </span>

                                @elseif($item->kondisi_baru == 'Rusak Ringan')

                                    <span class="badge bg-warning text-dark">
                                        Rusak Ringan
                                    </span>

                                @elseif($item->kondisi_baru == 'Rusak Berat')

                                    <span class="badge bg-danger">
                                        Rusak Berat
                                    </span>

                                @else

                                    <span class="badge bg-secondary">
                                        {{ $item->kondisi_baru ?? '-' }}
                                    </span>

                                @endif

                            </td>


                            {{-- KETERANGAN --}}

                            <td>

                                <span class="history-description">

                                    {{ $item->keterangan ?? '-' }}

                                </span>

                            </td>

                        </tr>


                    @empty

                        <tr>

                            <td
                                colspan="7"
                                class="text-center py-5">

                                <div class="empty-history">

                                    <i class="bi bi-clock-history"></i>

                                    <h5 class="mt-3">
                                        Belum Ada Riwayat
                                    </h5>

                                    <p class="text-muted mb-0">

                                        Belum ada perubahan kondisi aset
                                        yang tercatat.

                                    </p>

                                </div>

                            </td>

                        </tr>

                    @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


{{-- =====================================================
     CSS RESPONSIVE HISTORI
====================================================== --}}

@push('styles')

<style>

/* =====================================================
   PAGE
====================================================== */

.histori-page {

    width: 100%;

}


/* =====================================================
   HEADER
====================================================== */

.histori-header {

    margin-bottom: 20px;

}

.histori-header h3 {

    font-weight: 600;

}

.histori-header p {

    font-size: 14px;

}


/* =====================================================
   CARD
====================================================== */

.histori-card {

    width: 100%;

    border-radius: 12px;

    overflow: hidden;

}


/* =====================================================
   TABLE
====================================================== */

.histori-card .table {

    min-width: 900px;

    margin-bottom: 0;

}

.histori-card th {

    white-space: nowrap;

    padding: 13px 12px;

}

.histori-card td {

    padding: 12px;

}


/* =====================================================
   NO
====================================================== */

.no-column {

    width: 60px;

}


/* =====================================================
   TANGGAL
====================================================== */

.history-date {

    white-space: nowrap;

}

.history-date small {

    display: block;

    color: #6c757d;

    margin-top: 2px;

}


/* =====================================================
   KODE ASET
====================================================== */

.asset-code {

    font-family: monospace;

    font-weight: 600;

    white-space: nowrap;

}


/* =====================================================
   KETERANGAN
====================================================== */

.history-description {

    display: block;

    min-width: 150px;

    max-width: 300px;

    white-space: normal;

    word-break: break-word;

}


/* =====================================================
   EMPTY STATE
====================================================== */

.empty-history {

    padding: 20px;

}

.empty-history i {

    font-size: 45px;

    color: #adb5bd;

}

.empty-history h5 {

    font-weight: 600;

}


/* =====================================================
   TABLET
====================================================== */

@media (max-width: 767.98px) {

    .histori-header h3 {

        font-size: 21px;

    }

    .histori-header p {

        font-size: 13px;

    }

    .histori-card th {

        font-size: 13px;

    }

    .histori-card td {

        font-size: 13px;

    }

}


/* =====================================================
   HP
====================================================== */

@media (max-width: 575.98px) {

    .histori-header {

        margin-bottom: 15px;

    }

    .histori-header h3 {

        font-size: 19px;

    }

    .histori-header p {

        font-size: 12px;

    }


    /*
       Tabel tetap memiliki ukuran minimum,
       tetapi hanya tabel yang melakukan
       scroll horizontal.
    */

    .histori-card .table {

        min-width: 850px;

    }


    .histori-card th {

        padding: 10px;

        font-size: 12px;

    }


    .histori-card td {

        padding: 10px;

        font-size: 12px;

    }


    .history-description {

        max-width: 220px;

    }

}


/* =====================================================
   HP SANGAT KECIL
====================================================== */

@media (max-width: 400px) {

    .histori-header h3 {

        font-size: 18px;

    }

    .histori-card .table {

        min-width: 800px;

    }

}

</style>

@endpush

@endsection