@extends('layouts.admin', [
    'title' => 'Tambah Dosen',
    'header' => 'Tambah Dosen'
])

@section('admin_content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xl-10">
            <div class="card form-shell border-0 shadow-sm">
                <div class="card-header bg-white border-0 form-shell__header">
                    <div>
                        <span class="form-shell__eyebrow">Data Dosen</span>
                        <h3 class="mb-1">Tambah Profil Dosen</h3>
                    </div>
                </div>

                <div class="card-body form-shell__body">
                    @if ($errors->any())
                        <div class="alert alert-danger form-shell__alert">
                            <strong>Data belum bisa disimpan.</strong>
                            <div class="small mt-1">Periksa kembali kolom yang masih kosong atau belum valid.</div>
                        </div>
                    @endif

                    <form action="{{ route('admin.dosen.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @include('admin.dosen.form')

                        <div class="form-shell__actions">
                            <a href="{{ route('admin.dosen.index') }}" class="btn btn-light border rounded-pill px-4">Kembali</a>
                            <button type="submit" class="btn btn-primary rounded-pill px-4">Simpan Data</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .form-shell { border-radius: 24px; overflow: hidden; }
    .form-shell__header {
        padding: 2rem 2rem 1rem;
        background:
            radial-gradient(circle at top right, rgba(17, 138, 178, 0.12), transparent 32%),
            linear-gradient(180deg, #fbfcfe 0%, #f4f8fc 100%);
    }
    .form-shell__eyebrow, .profile-form__eyebrow {
        display: inline-block; margin-bottom: .55rem; font-size: .74rem; letter-spacing: .14em;
        text-transform: uppercase; font-weight: 700; color: #118ab2;
    }
    .form-shell__body { padding: 2rem; background: #f7f9fc; }
    .form-shell__alert { border-radius: 16px; border: 0; }
    .profile-form { display: grid; gap: 1.5rem; }
    .profile-form__section {
        background: #fff; border: 1px solid #e7edf5; border-radius: 20px; padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    }
    .profile-form__section-head { margin-bottom: 1.25rem; }
    .profile-form__section-head h4 { margin-bottom: .35rem; font-weight: 700; color: #1f2d3d; }
    .profile-form label { font-weight: 600; color: #22313f; }
    .profile-form .form-control, .profile-form .form-control-file { border-radius: 14px; }
    .profile-form .form-control { min-height: 48px; border: 1px solid #d8e2ee; box-shadow: none; }
    .profile-form .form-control:focus { border-color: #118ab2; box-shadow: 0 0 0 .2rem rgba(17, 138, 178, 0.12); }
    .profile-form__locked-field {
        min-height: 48px;
        padding: .8rem .95rem;
        border: 1px solid #d8e2ee;
        border-radius: 14px;
        background: #f8fbff;
    }
    .profile-form__locked-field.is-invalid {
        border-color: #dc3545;
    }
    .profile-form__locked-value {
        font-weight: 700;
        color: #1f2d3d;
    }
    .profile-form__locked-value span {
        color: #6c7a89;
        font-weight: 600;
    }
    .upload-card {
        height: 100%; padding: 1rem 1.1rem; border: 1px dashed #bfd0e0; border-radius: 18px;
        background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%);
    }
    .upload-card .form-control-file {
        display: block;
        width: 100%;
        padding: .65rem .85rem;
        border: 1px solid #d8e2ee;
        border-radius: 14px;
        background: #fff;
        min-height: 50px;
    }
    .upload-card .form-control-file::-webkit-file-upload-button {
        margin-right: .85rem;
        padding: .48rem .9rem;
        border: 0;
        border-radius: 10px;
        background: #eef4fb;
        color: #118ab2;
        font-weight: 700;
    }
    .upload-card__meta {
        min-height: 28px;
        margin-top: .75rem;
    }
    .upload-card__file-chip {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: .38rem .72rem;
        border-radius: 999px;
        background: #eef4fb;
        color: #0f6f90;
        font-size: .82rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .upload-card__caption { display: block; margin-bottom: .65rem; font-size: .85rem; font-weight: 600; color: #5b6b79; }
    .upload-card__preview img { max-height: 180px; object-fit: cover; }
    .form-shell__actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
    @media (max-width: 767.98px) {
        .form-shell__header, .form-shell__body { padding: 1.25rem; }
        .form-shell__actions { flex-direction: column-reverse; }
        .form-shell__actions .btn { width: 100%; }
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.form-control-file').forEach(function (input) {
            const chip = document.querySelector('[data-file-chip-for="' + input.id + '"]');

            if (!chip) {
                return;
            }

            input.addEventListener('change', function () {
                const fileName = this.files && this.files[0] ? this.files[0].name : '';

                if (!fileName) {
                    chip.textContent = '';
                    chip.classList.add('d-none');
                    return;
                }

                chip.textContent = fileName;
                chip.classList.remove('d-none');
            });
        });
    });
</script>
@endsection