@extends('layouts.app')

@section('content')

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

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

    <div class="page-header">

        <div>

            <h3>
                <i class="bi bi-tags me-2"></i>
                Tambah Kategori
            </h3>

            <p>
                Tambahkan kategori baru untuk aset laboratorium.
            </p>

        </div>

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

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

            Kembali

        </a>

    </div>


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

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

        <div class="card-header bg-primary text-white">

            <h5 class="mb-0">

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

                Form Tambah Kategori

            </h5>

        </div>


        <div class="card-body">


            {{-- =================================================
                 VALIDATION ERROR
            ================================================== --}}

            @if ($errors->any())

                <div class="alert alert-danger">

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

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

                        Terdapat kesalahan pada data:

                    </div>

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

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

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

                        @endforeach

                    </ul>

                </div>

            @endif


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

            <form
                action="{{ route('kategori.store') }}"
                method="POST">

                @csrf


                {{-- NAMA KATEGORI --}}

                <div class="mb-4">

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

                        Nama Kategori

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

                    </label>

                    <input
                        type="text"
                        id="nama_kategori"
                        name="nama_kategori"
                        class="form-control @error('nama_kategori') is-invalid @enderror"
                        value="{{ old('nama_kategori') }}"
                        placeholder="Contoh: Komputer"
                        autocomplete="off"
                        required>

                    @error('nama_kategori')

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

                    @enderror

                </div>


                {{-- KODE KATEGORI --}}

                <div class="mb-4">

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

                        Kode Kategori

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

                    </label>

                    <input
                        type="text"
                        id="kode_kategori"
                        name="kode_kategori"
                        class="form-control @error('kode_kategori') is-invalid @enderror"
                        value="{{ old('kode_kategori') }}"
                        placeholder="Contoh: KAT-001"
                        autocomplete="off"
                        required>

                    <div class="form-text">

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

                        Gunakan kode yang unik untuk setiap kategori.

                    </div>

                    @error('kode_kategori')

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

                    @enderror

                </div>


                {{-- KETERANGAN --}}

                <div class="mb-4">

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

                        Keterangan

                    </label>

                    <textarea
                        id="keterangan"
                        name="keterangan"
                        class="form-control @error('keterangan') is-invalid @enderror"
                        rows="5"
                        placeholder="Masukkan keterangan kategori jika diperlukan...">{{ old('keterangan') }}</textarea>

                    @error('keterangan')

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

                    @enderror

                </div>


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

                <div class="form-actions">

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

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

                        Simpan

                    </button>


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

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

                        Batal

                    </a>

                </div>

            </form>

        </div>

    </div>

</div>


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

<style>

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

.kategori-form-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;

}


.page-header .btn {

    white-space: nowrap;

}


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

.form-card {

    width: 100%;

    max-width: 850px;

    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;

}


/* =====================================================
   FORM
===================================================== */

.form-label {

    font-size: 14px;

    font-weight: 600;

    color: #343a40;

}


.form-control {

    min-height: 45px;

    font-size: 14px;

}


textarea.form-control {

    min-height: 120px;

    resize: vertical;

}


.form-control:focus {

    box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);

}


/* =====================================================
   FORM TEXT
===================================================== */

.form-text {

    margin-top: 6px;

    font-size: 12px;

    color: #6c757d;

}


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

.form-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    padding-top: 5px;

}


.form-actions .btn {

    min-width: 100px;

}


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

        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;

    }

}


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

@media (max-width: 575.98px) {

    .page-header h3 {

        font-size: 18px;

    }


    .form-card .card-body {

        padding: 15px 12px;

    }


    .form-card .card-header h5 {

        font-size: 14px;

    }


    .form-control {

        font-size: 12px;

    }


    .form-text {

        font-size: 11px;

    }

}

</style>

@endsection