@extends('layouts.app')

@section('content')

<div class="laboratorium-edit-page">

    {{-- HEADER --}}

    <div class="page-header">

        <div>

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

            <p>
                Perbarui informasi laboratorium yang dipilih.
            </p>

        </div>

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

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

            Kembali

        </a>

    </div>


    {{-- FORM CARD --}}

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

        <div class="card-header">

            <h5 class="mb-0">

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

                Form Edit Laboratorium

            </h5>

        </div>


        <div class="card-body">

            {{-- ERROR VALIDASI --}}

            @if ($errors->any())

                <div class="alert alert-danger">

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

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

                        Terdapat kesalahan pada input:

                    </div>

                    <ul class="mb-0">

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

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

                        @endforeach

                    </ul>

                </div>

            @endif


            {{-- FORM --}}

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

                @csrf

                @method('PUT')


                <div class="row g-3">


                    {{-- NAMA LABORATORIUM --}}

                    <div class="col-12">

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

                            Nama Laboratorium

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

                        </label>

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

                        @error('nama_lab')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>


                    {{-- LOKASI --}}

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

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

                            Lokasi

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

                        </label>

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

                        @error('lokasi')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>


                    {{-- KEPALA LABORATORIUM --}}

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

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

                            Kepala Laboratorium

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

                        </label>

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

                        @error('kepala_lab')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>


                    {{-- DESKRIPSI --}}

                    <div class="col-12">

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

                            Deskripsi

                        </label>

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

                        @error('deskripsi')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>


                    {{-- FOTO LABORATORIUM --}}

                    <div class="col-12">

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

                            Foto Laboratorium

                        </label>


                        {{-- FOTO LAMA --}}

                        @if($laboratorium->foto)

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

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

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

                                    Foto Saat Ini

                                </div>


                                <img
                                    src="{{ asset('storage/' . $laboratorium->foto) }}"
                                    alt="{{ $laboratorium->nama_lab }}"
                                    class="current-photo"
                                >

                            </div>

                        @else

                            <div class="no-photo">

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

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

                            </div>

                        @endif


                        {{-- UPLOAD FOTO BARU --}}

                        <div class="mt-3">

                            <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>

                                Pilih foto baru jika ingin mengganti foto lama.
                                Format JPG, JPEG, atau PNG. Maksimal 2 MB.

                            </div>

                            @error('foto')

                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>


                        {{-- PREVIEW FOTO BARU --}}

                        <div
                            id="newPhotoPreviewContainer"
                            class="new-photo-preview d-none">

                            <div class="preview-title">

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

                                Preview Foto Baru

                            </div>

                            <img
                                id="newPhotoPreview"
                                src=""
                                alt="Preview Foto Baru"
                                class="new-photo-image"
                            >

                        </div>

                    </div>


                </div>


                {{-- ACTION BUTTON --}}

                <div class="form-actions">

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

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

                        Update Laboratorium

                    </button>


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

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

                        Batal

                    </a>

                </div>


            </form>

        </div>

    </div>

</div>


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

<style>

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

.laboratorium-edit-page {

    width: 100%;

    max-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;

}


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

.form-card {

    width: 100%;

    border-radius: 12px;

    overflow: hidden;

}


.form-card .card-header {

    background: #ffc107;

    color: #212529;

    padding: 15px 20px;

}


.form-card .card-body {

    padding: 25px;

}


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

.form-label {

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 7px;

}


/* =====================================================
   INPUT
===================================================== */

.form-control {

    min-height: 42px;

    font-size: 13px;

}


textarea.form-control {

    min-height: 120px;

    resize: vertical;

}


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

.current-photo-container {

    display: inline-flex;

    flex-direction: column;

    gap: 10px;

    padding: 12px;

    background: #f8f9fa;

    border: 1px solid #e9ecef;

    border-radius: 10px;

}


.current-photo-title {

    font-size: 13px;

    font-weight: 600;

    color: #495057;

}


.current-photo {

    display: block;

    width: 250px;

    height: 180px;

    object-fit: cover;

    border-radius: 8px;

}


/* =====================================================
   TIDAK ADA FOTO
===================================================== */

.no-photo {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px;

    border: 1px dashed #ced4da;

    border-radius: 8px;

    background: #f8f9fa;

    color: #6c757d;

    font-size: 13px;

}


.no-photo i {

    font-size: 22px;

}


/* =====================================================
   PREVIEW FOTO BARU
===================================================== */

.new-photo-preview {

    margin-top: 15px;

    padding: 15px;

    border: 1px dashed #ffc107;

    border-radius: 10px;

    background: #fffdf5;

}


.preview-title {

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 10px;

}


.new-photo-image {

    display: block;

    width: 300px;

    max-width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: 8px;

}


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

.form-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #e9ecef;

}


.form-actions .btn {

    min-width: 140px;

}


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

@media (max-width: 991.98px) {

    .page-header h3 {

        font-size: 21px;

    }


    .form-card .card-body {

        padding: 20px;

    }

}


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

@media (max-width: 767.98px) {

    .page-header {

        align-items: flex-start;

        flex-direction: column;

        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: 15px;

    }


    .form-control {

        min-height: 44px;

        font-size: 13px;

    }


    textarea.form-control {

        min-height: 110px;

    }


    .current-photo-container {

        width: 100%;

    }


    .current-photo {

        width: 100%;

        height: 190px;

    }


    .form-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .form-actions .btn {

        width: 100%;

        min-width: 0;

    }


    .new-photo-image {

        width: 100%;

        height: 190px;

    }

}


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

@media (max-width: 575.98px) {

    .page-header h3 {

        font-size: 18px;

    }


    .form-card .card-body {

        padding: 12px;

    }


    .form-card .card-header h5 {

        font-size: 15px;

    }


    .current-photo {

        height: 170px;

    }


    .new-photo-image {

        height: 170px;

    }

}

</style>


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

<script>

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

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

    const previewContainer =
        document.getElementById('newPhotoPreviewContainer');

    const preview =
        document.getElementById('newPhotoPreview');


    if (!fotoInput) {
        return;
    }


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

        const file = this.files[0];


        if (!file) {

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

            preview.src = '';

            return;

        }


        /* CEK UKURAN */

        if (file.size > 2 * 1024 * 1024) {

            alert('Ukuran foto maksimal 2 MB.');

            this.value = '';

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

            preview.src = '';

            return;

        }


        /* CEK FORMAT */

        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'image/jpg'
        ];


        if (!allowedTypes.includes(file.type)) {

            alert('Format foto harus JPG, JPEG, atau PNG.');

            this.value = '';

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

            preview.src = '';

            return;

        }


        /* PREVIEW */

        const reader =
            new FileReader();


        reader.onload = function (event) {

            preview.src =
                event.target.result;

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

        };


        reader.readAsDataURL(file);

    });

});

</script>

@endsection