@extends('layouts.app')

@section('content')

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

    {{-- HEADER --}}

    <div class="page-header">

        <div>

            <h3>
                <i class="bi bi-building-add me-2"></i>
                Tambah Laboratorium
            </h3>

            <p>
                Tambahkan data laboratorium baru ke dalam sistem.
            </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-pencil-square me-2"></i>

                Form 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.store') }}"
                method="POST"
                enctype="multipart/form-data">

                @csrf


                <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') }}"
                            placeholder="Contoh: Laboratorium Komputer"
                            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') }}"
                            placeholder="Contoh: Gedung Fakultas Saintek"
                            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') }}"
                            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="Masukkan deskripsi laboratorium...">{{ old('deskripsi') }}</textarea>

                        @error('deskripsi')

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

                        @enderror

                    </div>


                    {{-- FOTO --}}

                    <div class="col-12">

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

                            Foto Laboratorium

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

                            Format JPG, JPEG, atau PNG.
                            Maksimal 2 MB.

                        </div>

                        @error('foto')

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

                        @enderror


                        {{-- PREVIEW FOTO --}}

                        <div
                            id="photoPreviewContainer"
                            class="photo-preview-container d-none">

                            <p class="preview-title">

                                Preview Foto

                            </p>

                            <img
                                id="photoPreview"
                                src=""
                                alt="Preview Foto"
                                class="photo-preview"
                            >

                        </div>

                    </div>


                </div>


                {{-- BUTTON --}}

                <div class="form-actions">

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

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

                        Simpan 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-create-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: #0d6efd;

    color: white;

    padding: 15px 20px;

}


.form-card .card-body {

    padding: 25px;

}


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

.form-label {

    font-weight: 600;

    font-size: 13px;

    margin-bottom: 7px;

}


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

.form-control {

    min-height: 42px;

    font-size: 13px;

}


textarea.form-control {

    min-height: 120px;

    resize: vertical;

}


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

.photo-preview-container {

    margin-top: 15px;

    padding: 15px;

    border: 1px dashed #ced4da;

    border-radius: 10px;

    background: #f8f9fa;

}


.preview-title {

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 10px;

}


.photo-preview {

    display: block;

    width: 100%;

    max-width: 300px;

    max-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: 120px;

}


/* =====================================================
   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-label {

        font-size: 12px;

    }


    .form-control {

        min-height: 44px;

        font-size: 13px;

    }


    textarea.form-control {

        min-height: 110px;

    }


    .form-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .form-actions .btn {

        width: 100%;

        min-width: 0;

    }


    .photo-preview {

        max-width: 100%;

        max-height: 200px;

    }

}


/* =====================================================
   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;

    }

}

</style>



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

<script>

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

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

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

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


    if (!fotoInput) {
        return;
    }


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

        const file = this.files[0];


        if (!file) {

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

            preview.src = '';

            return;

        }


        /*
         * Cek ukuran file.
         */

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

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

            this.value = '';

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

            preview.src = '';

            return;

        }


        /*
         * Cek format file.
         */

        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;

        }


        /*
         * Tampilkan preview.
         */

        const reader =
            new FileReader();


        reader.onload = function (event) {

            preview.src =
                event.target.result;

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

        };


        reader.readAsDataURL(file);

    });

});

</script>

@endsection