@extends('admin.layout')
@section('title','Team')
@section('page-title','Team Members')

@section('content')
<div style="display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start;">

    <!-- Members list -->
    <div>
        @forelse($members as $m)
        <div class="card" style="margin-bottom:14px;">
            <div class="card-body">
                <form method="POST" action="{{ route('admin.team.update', $m) }}" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div style="display:flex;gap:16px;align-items:start;">
                        <div style="flex-shrink:0;text-align:center;">
                            @if($m->photo)
                            <img src="{{ asset('uploads/team/'.$m->photo) }}" style="width:72px;height:72px;border-radius:12px;object-fit:cover;">
                            @else
                            <div style="width:72px;height:72px;border-radius:12px;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:white;">{{ substr($m->name,0,1) }}</div>
                            @endif
                            <input type="file" name="photo" accept="image/*" style="font-size:9px;width:72px;margin-top:6px;">
                        </div>
                        <div style="flex:1;">
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;">
                                <input type="text" name="name" value="{{ $m->name }}" placeholder="Name" style="padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:14px;font-weight:700;">
                                <input type="text" name="designation" value="{{ $m->designation }}" placeholder="Designation" style="padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:13px;">
                            </div>
                            <div style="margin-bottom:8px;">
                                <input type="text" name="qualification" value="{{ $m->qualification }}" placeholder="Qualification (e.g. JLPT N1 Certified)" style="width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;">
                            </div>
                            <textarea name="bio" rows="2" placeholder="Short bio..." style="width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;resize:vertical;margin-bottom:8px;">{{ $m->bio }}</textarea>
                            <div style="display:flex;gap:8px;align-items:center;">
                                <div style="display:flex;align-items:center;gap:6px;font-size:12px;">
                                    <span style="color:#64748b;">Order:</span>
                                    <input type="number" name="sort_order" value="{{ $m->sort_order }}" style="width:60px;padding:5px 8px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;">
                                </div>
                                <label style="display:flex;align-items:center;gap:5px;font-size:12px;margin-left:8px;">
                                    <input type="checkbox" name="is_active" value="1" {{ $m->is_active?'checked':'' }}> Active
                                </label>
                                <div style="margin-left:auto;display:flex;gap:6px;">
                                    <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-save"></i> Save</button>
                                    <form method="POST" action="{{ route('admin.team.destroy', $m) }}" onsubmit="return confirm('Remove team member?')" style="margin:0;">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm" style="background:#fef2f2;color:#dc2626;border:none;"><i class="fas fa-trash"></i></button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        @empty
        <div class="card" style="padding:60px;text-align:center;color:#94a3b8;">
            <i class="fas fa-users" style="font-size:48px;opacity:0.3;display:block;margin-bottom:16px;"></i>
            No team members yet.
        </div>
        @endforelse
    </div>

    <!-- Add form -->
    <div class="card">
        <div class="card-header"><h3><i class="fas fa-user-plus" style="color:var(--red);margin-right:8px;"></i>Add Team Member</h3></div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.team.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Full Name *</label>
                    <input type="text" name="name" required placeholder="Mr. Pintu Bainsla" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Designation *</label>
                    <input type="text" name="designation" required placeholder="Founder & Director" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Qualification</label>
                    <input type="text" name="qualification" placeholder="JLPT N1, B.A. Japanese Language" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Short Bio</label>
                    <textarea name="bio" rows="3" placeholder="Experience and background..." style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;resize:vertical;"></textarea>
                </div>
                <div class="form-group" style="margin-bottom:16px;">
                    <label>Photo</label>
                    <input type="file" name="photo" accept="image/*" style="font-size:13px;">
                    <div style="font-size:11px;color:#94a3b8;margin-top:4px;">Square photo recommended (e.g. 400×400px)</div>
                </div>
                <button type="submit" class="btn btn-primary" style="width:100%;"><i class="fas fa-plus"></i> Add Member</button>
            </form>
        </div>
    </div>
</div>
@endsection