@extends('adminlte::page')

@section('title', 'Tambah Personil | Smart Cendekia')

{{-- Aktifkan Plugin File Input Custom --}}
@section('plugins.BsCustomFileInput', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif; font-size: 1.5rem;">
                Tambah Personil Tim
            </h1>
            <p class="text-muted small mb-0">Tambahkan guru, pimpinan, atau staff baru ke dalam direktori website.</p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.website.teams.index') }}">Tim</a></li>
            <li class="breadcrumb-item active">Tambah</li>
        </ol>
    </div>
@stop

@section('content')
<div class="container-fluid pb-4">
    
    {{-- Alert Error Validation --}}
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert" style="border-radius: 10px;">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-circle mr-2 text-lg"></i>
                <span class="font-weight-bold">Gagal Menyimpan!</span>
            </div>
            <ul class="mb-0 mt-1 pl-4 text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <form action="{{ route('admin.website.teams.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div class="row">
            {{-- KOLOM KIRI: DATA UTAMA --}}
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white py-3 border-bottom-0" style="border-radius: 15px 15px 0 0;">
                        <h3 class="card-title font-weight-bold text-purple">
                            <i class="fas fa-id-card mr-2"></i> Biodata Personil
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        
                        {{-- Nama Lengkap --}}
                        <div class="form-group">
                            <label class="font-weight-bold text-muted text-xs text-uppercase">Nama Lengkap <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control form-control-lg border-0 bg-light shadow-sm" 
                                   placeholder="Contoh: Budi Santoso, S.Pd." value="{{ old('name') }}" required style="border-radius: 10px;">
                            <small class="text-muted ml-1">Tulis nama lengkap beserta gelar akademik.</small>
                        </div>

                        <div class="row mt-3">
                            {{-- Jabatan --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold text-muted text-xs text-uppercase">Jabatan <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-light border-0"><i class="fas fa-briefcase text-muted"></i></span>
                                        </div>
                                        <input type="text" name="position" class="form-control bg-light border-0 shadow-sm" 
                                               placeholder="Contoh: Guru Matematika" value="{{ old('position') }}" required style="border-radius: 0 10px 10px 0;">
                                    </div>
                                </div>
                            </div>
                            
                            {{-- Kategori --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold text-muted text-xs text-uppercase">Kategori <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-light border-0"><i class="fas fa-layer-group text-muted"></i></span>
                                        </div>
                                        <select name="category" class="form-control bg-light border-0 shadow-sm" required style="border-radius: 0 10px 10px 0;">
                                            <option value="" disabled selected>-- Pilih Kategori --</option>
                                            <option value="Guru" {{ old('category') == 'Guru' ? 'selected' : '' }}>Guru Pengajar</option>
                                            <option value="Pimpinan" {{ old('category') == 'Pimpinan' ? 'selected' : '' }}>Pimpinan / Struktural</option>
                                            <option value="Staff" {{ old('category') == 'Staff' ? 'selected' : '' }}>Staff / Tata Usaha</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Upload Foto --}}
                        <div class="form-group mt-3">
                            <label class="font-weight-bold text-muted text-xs text-uppercase">Foto Profil</label>
                            
                            <div class="d-flex align-items-center">
                                <div class="mr-3">
                                    <div class="bg-light rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 80px; height: 80px; border: 3px solid #fff;">
                                        <img id="previewImg" src="https://via.placeholder.com/150?text=Foto" class="rounded-circle w-100 h-100" style="object-fit: cover;">
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="photo" name="photo" accept="image/*">
                                        <label class="custom-file-label border-0 shadow-sm" for="photo" style="border-radius: 10px;">Pilih Foto...</label>
                                    </div>
                                    <small class="text-muted d-block mt-1">Format: JPG, PNG. Ukuran Maks: 2MB. Disarankan rasio kotak (1:1).</small>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- KOLOM KANAN: SOSMED & URUTAN --}}
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                    <div class="card-header bg-white py-3 border-bottom-0" style="border-radius: 15px 15px 0 0;">
                        <h3 class="card-title font-weight-bold text-dark">
                            <i class="fas fa-share-alt mr-2 text-muted"></i> Sosial Media & Urutan
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        
                        {{-- Facebook --}}
                        <div class="form-group">
                            <label class="font-weight-bold text-muted text-xs text-uppercase">Facebook</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-white border-0 text-primary"><i class="fab fa-facebook-square fa-lg"></i></span>
                                </div>
                                <input type="url" name="fb_link" class="form-control bg-light border-0 shadow-sm" 
                                       placeholder="https://facebook.com/username" value="{{ old('fb_link') }}" style="border-radius: 10px;">
                            </div>
                        </div>

                        {{-- Instagram --}}
                        <div class="form-group mt-3">
                            <label class="font-weight-bold text-muted text-xs text-uppercase">Instagram</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-white border-0 text-danger"><i class="fab fa-instagram fa-lg"></i></span>
                                </div>
                                <input type="url" name="ig_link" class="form-control bg-light border-0 shadow-sm" 
                                       placeholder="https://instagram.com/username" value="{{ old('ig_link') }}" style="border-radius: 10px;">
                            </div>
                        </div>

                        <hr class="my-4 border-light">

                        {{-- Urutan --}}
                        <div class="form-group">
                            <label class="font-weight-bold text-muted text-xs text-uppercase">Urutan Tampil</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light border-0"><i class="fas fa-sort-numeric-down text-muted"></i></span>
                                </div>
                                <input type="number" name="urutan" class="form-control bg-light border-0 shadow-sm" 
                                       value="{{ old('urutan', 0) }}" style="border-radius: 0 10px 10px 0;">
                            </div>
                            <small class="text-muted mt-1 d-block">Angka kecil tampil di awal (0, 1, 2...).</small>
                        </div>

                    </div>
                    
                    {{-- TOMBOL AKSI --}}
                    <div class="card-footer bg-white border-top-0 pb-4" style="border-radius: 0 0 15px 15px;">
                        <button type="submit" class="btn btn-purple btn-block font-weight-bold shadow-sm rounded-pill py-2 mb-2">
                            <i class="fas fa-save mr-2"></i> Simpan Data
                        </button>
                        <a href="{{ route('admin.website.teams.index') }}" class="btn btn-light btn-block font-weight-bold text-muted shadow-sm rounded-pill py-2 border">
                            <i class="fas fa-arrow-left mr-2"></i> Batal
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@stop

@push('css')
<style>
    /* Tema Ungu Apex Modern */
    .text-purple { color: #6f42c1 !important; }
    .btn-purple { 
        background-color: #6f42c1; 
        color: white; 
        border: none;
        transition: all 0.3s;
    }
    .btn-purple:hover { 
        background-color: #5a32a3; 
        color: white; 
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    }

    /* Custom Input */
    .form-control:focus { box-shadow: none; border-color: #6f42c1; }
    .custom-file-label::after { content: "Browse"; background-color: #f8f9fa; color: #5e6278; }
</style>
@endpush

@push('js')
<script>
    $(document).ready(function () {
        // Init bsCustomFileInput
        bsCustomFileInput.init();

        // Image Preview Logic
        $('#photo').change(function(){
            let reader = new FileReader();
            reader.onload = (e) => { 
                $('#previewImg').attr('src', e.target.result); 
            }
            if(this.files[0]){
                reader.readAsDataURL(this.files[0]);
            }
        });
    });
</script>
@endpush