@extends('layouts.app')

@section('content')

<div class="aset-form-page">

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

    <div class="page-header">

        <div>

            <h3>

                <i class="bi bi-pencil-square me-2"></i>

                Edit Data Aset

            </h3>

            <p>

                Perbarui informasi aset laboratorium.

            </p>

        </div>


        <a
            href="{{ route('aset.index') }}"
            class="btn btn-secondary">

            <i class="bi bi-arrow-left me-1"></i>

            Kembali

        </a>

    </div>


    {{-- =====================================================
         ERROR VALIDASI
    ====================================================== --}}

    @if ($errors->any())

        <div
            class="alert alert-danger alert-dismissible fade show"
            role="alert">

            <div class="fw-bold mb-2">

                <i class="bi bi-exclamation-triangle me-2"></i>

                Data belum dapat diperbarui.

            </div>

            <ul class="mb-0 ps-3">

                @foreach($errors->all() as $error)

                    <li>
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert">
            </button>

        </div>

    @endif


    {{-- =====================================================
         FORM CARD
    ====================================================== --}}

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

        <div class="card-header bg-warning text-dark">

            <h5 class="mb-0">

                <i class="bi bi-pencil-square me-2"></i>

                Form Edit Aset

            </h5>

        </div>


        <div class="card-body">

            <form
                action="{{ route('aset.update', $aset->id) }}"
                method="POST"
                enctype="multipart/form-data">

                @csrf

                @method('PUT')


                {{-- =================================================
                     IDENTITAS ASET
                ================================================== --}}

                <div class="form-section">

                    <div class="section-title">

                        <i class="bi bi-info-circle me-2"></i>

                        Identitas Aset

                    </div>


                    <div class="row g-3">


                        {{-- KODE ASET --}}

                        <div class="col-12 col-md-6">

                            <label
                                for="kode_aset"
                                class="form-label">

                                Kode Aset

                                <span class="text-danger">
                                    *
                                </span>

                            </label>

                            <input
                                type="text"
                                id="kode_aset"
                                name="kode_aset"
                                class="form-control @error('kode_aset') is-invalid @enderror"
                                value="{{ old('kode_aset', $aset->kode_aset) }}"
                                required>

                            @error('kode_aset')

                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>

                            @enderror

                        </div>


                        {{-- NAMA ASET --}}

                        <div class="col-12 col-md-6">

                            <label
                                for="nama_aset"
                                class="form-label">

                                Nama Aset

                                <span class="text-danger">
                                    *
                                </span>

                            </label>

                            <input
                                type="text"
                                id="nama_aset"
                                name="nama_aset"
                                class="form-control @error('nama_aset') is-invalid @enderror"
                                value="{{ old('nama_aset', $aset->nama_aset) }}"
                                required>

                            @error('nama_aset')

                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>

                            @enderror

                        </div>


                        {{-- KATEGORI --}}

                        <div class="col-12 col-md-6">

                            <label
                                for="kategori_id"
                                class="form-label">

                                Kategori

                                <span class="text-danger">
                                    *
                                </span>

                            </label>

                            <select
                                name="kategori_id"
                                id="kategori_id"
                                class="form-select @error('kategori_id') is-invalid @enderror"
                                required>

                                <option value="">
                                    -- Pilih Kategori --
                                </option>

                                @foreach($kategori as $item)

                                    <option
                                        value="{{ $item->id }}"
                                        {{ old('kategori_id', $aset->kategori_id) == $item->id ? 'selected' : '' }}>

                                        {{ $item->nama_kategori }}

                                    </option>

                                @endforeach

                            </select>

                            @error('kategori_id')

                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>

                            @enderror

                        </div>


                        {{-- LABORATORIUM --}}

                        <div class="col-12 col-md-6">

                            <label
                                for="laboratorium_id"
                                class="form-label">

                                Laboratorium

                                <span class="text-danger">
                                    *
                                </span>

                            </label>

                            <select
                                name="laboratorium_id"
                                id="laboratorium_id"
                                class="form-select @error('laboratorium_id') is-invalid @enderror"
                                required>

                                <option value="">
                                    -- Pilih Laboratorium --
                                </option>

                                @foreach($laboratorium as $item)

                                    <option
                                        value="{{ $item->id }}"
                                        {{ old('laboratorium_id', $aset->laboratorium_id) == $item->id ? 'selected' : '' }}>

                                        {{ $item->nama_lab }}

                                    </option>

                                @endforeach

                            </select>

                            @error('laboratorium_id')

                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>

                            @enderror

                        </div>

                    </div>

                </div>


                <hr>


                {{-- =================================================
                     DETAIL ASET
                ================================================== --}}

                <div class="form-section">

                    <div class="section-title">

                        <i class="bi bi-card-text me-2"></i>

                        Detail Aset

                    </div>


                    <div class="row g-3">


                        {{-- MERK --}}

                        <div class="col-12 col-md-6">

                            <label
                                for="merk"
                                class="form-label">

                                Merk

                            </label>

                            <input
                                type="text"
                                id="merk"
                                name="merk"
                                class="form-control @error('merk') is-invalid @enderror"
                                value="{{ old('merk', $aset->merk) }}"
                                placeholder="Contoh: ASUS, Lenovo, HP">

                            @error('merk')

                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>

                            @enderror

                        </div>


                        {{-- TAHUN PEROLEHAN --}}

                        <div class="col-12 col-md-6">

                            <label
                                for="tahun_perolehan"
                                class="form-label">

                                Tahun Perolehan

                                <span class="text-danger">
                                    *
                                </span>

                            </label>

                            <input
                                type="number"
                                id="tahun_perolehan"
                                name="tahun_perolehan"
                                class="form-control @error('tahun_perolehan') is-invalid @enderror"
                                value="{{ old('tahun_perolehan', $aset->tahun_perolehan) }}"
                                min="2000"
                                max="{{ date('Y') }}"
                                required>

                            @error('tahun_perolehan')

                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>

                            @enderror

                        </div>


                        {{-- SPESIFIKASI --}}

                        <div class="col-12">

                            <label
                                for="spesifikasi"
                                class="form-label">

                                Spesifikasi

                            </label>

                            <textarea
                                id="spesifikasi"
                                name="spesifikasi"
                                class="form-control @error('spesifikasi') is-invalid @enderror"
                                rows="5"
                                placeholder="Masukkan spesifikasi aset...">{{ old('spesifikasi', $aset->spesifikasi) }}</textarea>

                            @error('spesifikasi')

                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>

                            @enderror

                        </div>


                        {{-- KONDISI --}}

                        <div class="col-12 col-md-6">

                            <label
                                for="kondisi"
                                class="form-label">

                                Kondisi Aset

                                <span class="text-danger">
                                    *
                                </span>

                            </label>

                            <select
                                name="kondisi"
                                id="kondisi"
                                class="form-select @error('kondisi') is-invalid @enderror"
                                required>

                                <option
                                    value="Baik"
                                    {{ old('kondisi', $aset->kondisi) == 'Baik' ? 'selected' : '' }}>

                                    Baik

                                </option>

                                <option
                                    value="Rusak Ringan"
                                    {{ old('kondisi', $aset->kondisi) == 'Rusak Ringan' ? 'selected' : '' }}>

                                    Rusak Ringan

                                </option>

                                <option
                                    value="Rusak Berat"
                                    {{ old('kondisi', $aset->kondisi) == 'Rusak Berat' ? 'selected' : '' }}>

                                    Rusak Berat

                                </option>

                            </select>

                            @error('kondisi')

                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>

                            @enderror

                        </div>

                    </div>

                </div>


                <hr>


                {{-- =================================================
                     FOTO ASET
                ================================================== --}}

                <div class="form-section">

                    <div class="section-title">

                        <i class="bi bi-image me-2"></i>

                        Foto Aset

                    </div>


                    {{-- FOTO LAMA --}}

                    @if($aset->foto)

                        <div class="current-photo-box">

                            <p class="small fw-semibold mb-2">

                                Foto Saat Ini

                            </p>

                            <img
                                src="{{ asset('foto_aset/'.$aset->foto) }}"
                                class="current-photo"
                                alt="Foto {{ $aset->nama_aset }}">

                        </div>

                    @else

                        <div class="no-current-photo">

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

                            <span>
                                Belum ada foto aset.
                            </span>

                        </div>

                    @endif


                    {{-- FOTO BARU --}}

                    <div class="mt-3">

                        <label
                            for="foto"
                            class="form-label">

                            Ganti Foto

                        </label>

                        <input
                            type="file"
                            id="foto"
                            name="foto"
                            class="form-control @error('foto') is-invalid @enderror"
                            accept="image/jpeg,image/png,image/jpg">

                        <div class="form-text">

                            <i class="bi bi-info-circle me-1"></i>

                            Kosongkan jika tidak ingin mengganti foto.

                        </div>

                        @error('foto')

                            <div class="invalid-feedback">

                                {{ $message }}

                            </div>

                        @enderror

                    </div>


                    {{-- PREVIEW FOTO BARU --}}

                    <div
                        id="preview-container"
                        class="mt-3 d-none">

                        <p class="small fw-semibold mb-2">

                            Preview Foto Baru

                        </p>

                        <img
                            id="preview-image"
                            src=""
                            class="preview-image"
                            alt="Preview foto baru">

                    </div>

                </div>


                {{-- =================================================
                     BUTTON
                ================================================== --}}

                <div class="form-actions">

                    <button
                        type="submit"
                        class="btn btn-success">

                        <i class="bi bi-check-circle me-1"></i>

                        Update Aset

                    </button>


                    <a
                        href="{{ route('aset.index') }}"
                        class="btn btn-secondary">

                        <i class="bi bi-x-circle me-1"></i>

                        Batal

                    </a>

                </div>


            </form>

        </div>

    </div>

</div>


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

<style>

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

.aset-form-page {

    width: 100%;

}


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

.page-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}


.page-header h3 {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}


.page-header p {

    margin: 5px 0 0;

    color: #6c757d;

    font-size: 13px;

}


.page-header .btn {

    white-space: nowrap;

}


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

.form-card {

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

    border-radius: 12px;

    overflow: hidden;

}


.form-card .card-header {

    padding: 15px 20px;

}


.form-card .card-header h5 {

    font-size: 16px;

    font-weight: 600;

}


.form-card .card-body {

    padding: 25px;

}


/* =====================================================
   SECTION
===================================================== */

.form-section {

    padding: 5px 0;

}


.section-title {

    margin-bottom: 18px;

    font-size: 15px;

    font-weight: 700;

    color: #343a40;

}


/* =====================================================
   LABEL
===================================================== */

.form-label {

    margin-bottom: 6px;

    font-size: 13px;

    font-weight: 600;

    color: #343a40;

}


.form-control,
.form-select {

    min-height: 44px;

    font-size: 13px;

}


textarea.form-control {

    min-height: 120px;

    resize: vertical;

}


/* =====================================================
   FOTO
===================================================== */

.current-photo-box {

    padding: 12px;

    background: #f8f9fa;

    border: 1px solid #dee2e6;

    border-radius: 8px;

    width: fit-content;

}


.current-photo {

    width: 180px;

    height: 130px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid #dee2e6;

    display: block;

}


.no-current-photo {

    width: 180px;

    height: 130px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #f8f9fa;

    border: 1px dashed #adb5bd;

    border-radius: 8px;

    color: #6c757d;

}


.no-current-photo i {

    font-size: 30px;

}


.no-current-photo span {

    font-size: 12px;

}


.preview-image {

    width: 180px;

    height: 130px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid #dee2e6;

    display: block;

}


/* =====================================================
   BUTTON
===================================================== */

.form-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    padding-top: 5px;

}


.form-actions .btn {

    min-width: 120px;

}


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

@media (max-width: 991.98px) {

    .page-header h3 {

        font-size: 21px;

    }


    .form-card {

        max-width: 100%;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767.98px) {

    .page-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    .page-header h3 {

        font-size: 20px;

    }


    .page-header p {

        font-size: 12px;

        line-height: 1.5;

    }


    .page-header .btn {

        width: 100%;

    }


    .form-card {

        border-radius: 10px;

    }


    .form-card .card-header {

        padding: 13px 15px;

    }


    .form-card .card-body {

        padding: 18px 15px;

    }


    .form-label {

        font-size: 13px;

    }


    .form-control,
    .form-select {

        min-height: 43px;

        font-size: 13px;

    }


    textarea.form-control {

        min-height: 110px;

    }


    .current-photo-box {

        width: 100%;

    }


    .current-photo,
    .no-current-photo,
    .preview-image {

        width: 150px;

        height: 110px;

    }


    .form-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .form-actions .btn {

        width: 100%;

        min-width: 0;

    }

}


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

@media (max-width: 575.98px) {

    .page-header h3 {

        font-size: 18px;

    }


    .form-card .card-body {

        padding: 15px 12px;

    }


    .form-card .card-header {

        padding: 12px;

    }


    .form-card .card-header h5 {

        font-size: 14px;

    }


    .form-control,
    .form-select {

        font-size: 12px;

    }


    .current-photo,
    .no-current-photo,
    .preview-image {

        width: 130px;

        height: 95px;

    }

}

</style>


{{-- =====================================================
     PREVIEW FOTO
====================================================== --}}

<script>

document.addEventListener('DOMContentLoaded', function () {

    const fotoInput = document.getElementById('foto');

    const previewContainer =
        document.getElementById('preview-container');

    const previewImage =
        document.getElementById('preview-image');


    if (fotoInput) {

        fotoInput.addEventListener('change', function () {

            const file = this.files[0];


            if (!file) {

                previewContainer.classList.add('d-none');

                previewImage.src = '';

                return;

            }


            if (!file.type.startsWith('image/')) {

                previewContainer.classList.add('d-none');

                previewImage.src = '';

                return;

            }


            const reader = new FileReader();


            reader.onload = function (event) {

                previewImage.src =
                    event.target.result;

                previewContainer.classList.remove('d-none');

            };


            reader.readAsDataURL(file);

        });

    }

});

</script>

@endsection