@extends('admin_dashboard')
@section('admin')

<style>
    .create-header {
        background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
        border-radius: 12px;
        padding: 20px 24px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4px 15px rgba(15,118,110,0.25);
    }
    .create-header h4 { color:#fff; margin:0; font-size:1.2rem; font-weight:600; }
    .create-header h4 i { margin-right:8px; opacity:0.85; }

    .btn-back {
        background: #fff;
        color: #0f766e;
        border: none;
        border-radius: 8px;
        padding: 8px 18px;
        font-weight: 600;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .btn-back:hover { background:#f0fdfa; color:#0d9488; transform:translateY(-1px); }

    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .card-body { padding: 28px; }

    .form-label {
        font-size: 0.8rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 5px;
    }
    .form-control, .form-select {
        border: 1.5px solid #e2e8f0;
        border-radius: 8px;
        font-size: 0.92rem;
        padding: 9px 12px;
        color: #1e293b;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-control:focus, .form-select:focus {
        border-color: #0d9488;
        box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
        outline: none;
    }

    .leader-preview {
        display: none;
        align-items: center;
        gap: 10px;
        background: #f0fdfa;
        border: 1.5px solid #99f6e4;
        border-radius: 8px;
        padding: 10px 14px;
        margin-top: 8px;
    }
    .leader-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 700;
        flex-shrink: 0;
    }
    .leader-preview-name  { font-weight: 600; color: #0f766e; font-size: 0.92rem; }
    .leader-preview-label { font-size: 0.75rem; color: #64748b; }

    .btn-save {
        background: linear-gradient(135deg, #0f766e, #0d9488);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 10px 28px;
        font-weight: 600;
        font-size: 0.92rem;
        transition: opacity 0.2s, transform 0.15s;
    }
    .btn-save:hover { opacity:0.9; transform:translateY(-1px); color:#fff; }

    .btn-cancel {
        background: #f1f5f9;
        color: #475569;
        border: none;
        border-radius: 8px;
        padding: 10px 22px;
        font-weight: 600;
        font-size: 0.92rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background 0.2s;
    }
    .btn-cancel:hover { background:#e2e8f0; color:#334155; }
</style>

<div class="content">
    <div class="container-fluid">

        {{-- Header --}}
        <div class="create-header">
            <h4><i class="fa fa-plus-circle"></i> Add New Group</h4>
            <a href="{{ route('all.groups') }}" class="btn-back">
                <i class="fa fa-arrow-left"></i> All Groups
            </a>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">

                        @if($errors->any())
                        <div class="alert alert-danger rounded-3 border-0 mb-4">
                            <ul class="mb-0 ps-3">
                                @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif

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

                            {{-- Group Name --}}
                            <div class="mb-4">
                                <label class="form-label">Group Name</label>
                                <input type="text" name="group_name" class="form-control"
                                    value="{{ old('group_name') }}" required
                                    placeholder="e.g. Boro Gram Group">
                            </div>

                            {{-- Group Leader --}}
                            <div class="mb-4">
                                <label class="form-label">Group Leader</label>
                                <select name="staff_id" id="staff_id" class="form-select">
                                    <option value="">— No Leader Assigned —</option>
                                    @foreach($employees as $emp)
                                        <option value="{{ $emp->id }}" {{ old('staff_id') == $emp->id ? 'selected' : '' }}>
                                            {{ $emp->name }}
                                        </option>
                                    @endforeach
                                </select>

                                {{-- Live preview --}}
                                <div id="leader-preview" class="leader-preview">
                                    <div class="leader-avatar" id="leader-initial"></div>
                                    <div>
                                        <div class="leader-preview-label">Selected Leader</div>
                                        <div class="leader-preview-name" id="leader-preview-name"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex gap-3 mt-2">
                                <button type="submit" class="btn-save">
                                    <i class="fa fa-save me-2"></i>Save Group
                                </button>
                                <a href="{{ route('all.groups') }}" class="btn-cancel">
                                    <i class="fa fa-times"></i> Cancel
                                </a>
                            </div>
                        </form>

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

    </div>
</div>

<script>
    const staffSelect = document.getElementById('staff_id');
    const preview     = document.getElementById('leader-preview');
    const previewName = document.getElementById('leader-preview-name');
    const previewInit = document.getElementById('leader-initial');

    staffSelect.addEventListener('change', function () {
        const selected = this.options[this.selectedIndex];
        if (this.value) {
            previewName.textContent = selected.text;
            previewInit.textContent = selected.text.trim().charAt(0).toUpperCase();
            preview.style.display   = 'flex';
        } else {
            preview.style.display   = 'none';
        }
    });
</script>

@endsection