@extends('admin.layouts.app')
@section('title','About Us CMS')
@section('heading','About Us CMS')
@section('subheading','Manage team members')
@section('content')

<style>
    .input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        outline: none;
        transition: all 0.2s;
    }
    
    .input:focus {
        border-color: #000;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    }
    
    .input::placeholder {
        color: #9ca3af;
    }
    
    .file-input-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%;
    }
    
    .file-input-wrapper input[type=file] {
        position: absolute;
        left: -9999px;
    }
    
    .file-input-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        background-color: white;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .file-input-label:hover {
        border-color: #9ca3af;
        background-color: #f9fafb;
    }
    
    .file-input-label.has-file {
        border-color: #000;
        background-color: #f9fafb;
    }
</style>

<div class="">
    @if(session('success'))
        <div class="mb-6 p-4 rounded-lg bg-green-50 border border-green-200 text-green-700 flex items-center">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200 text-red-700">
            <p class="font-semibold mb-2">Please fix the following errors:</p>
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- ADD MEMBER FORM --}}
    <div class="p-8 rounded-xl shadow-sm border border-gray-200 mb-8">
        <h2 class="text-xl font-semibold mb-6 text-gray-800">Add Team Member</h2>
        
        <form action="{{ route('admin.pages.aboutus.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Name --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Name <span class="text-red-500">*</span>
                    </label>
                    <input 
                        type="text" 
                        name="name" 
                        value="{{ old('name') }}"
                        placeholder="John Doe" 
                        class="input @error('name') border-red-500 @enderror"
                        required
                    >
                    @error('name')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Role --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Role <span class="text-red-500">*</span>
                    </label>
                    <input 
                        type="text" 
                        name="role" 
                        value="{{ old('role') }}"
                        placeholder="Senior Developer" 
                        class="input @error('role') border-red-500 @enderror"
                        required
                    >
                    @error('role')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Phone --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Phone
                    </label>
                    <input 
                        type="text" 
                        name="phone" 
                        value="{{ old('phone') }}"
                        placeholder="+1 (555) 123-4567" 
                        class="input @error('phone') border-red-500 @enderror"
                    >
                    @error('phone')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Location --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Location
                    </label>
                    <input 
                        type="text" 
                        name="location" 
                        value="{{ old('location') }}"
                        placeholder="New York, USA" 
                        class="input @error('location') border-red-500 @enderror"
                    >
                    @error('location')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Experience --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Experience
                    </label>
                    <input 
                        type="text" 
                        name="experience" 
                        value="{{ old('experience') }}"
                        placeholder="5+ years" 
                        class="input @error('experience') border-red-500 @enderror"
                    >
                    @error('experience')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Achievements --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Achievements
                    </label>
                    <input 
                        type="text" 
                        name="achievements" 
                        value="{{ old('achievements') }}"
                        placeholder="Award Winner 2024" 
                        class="input @error('achievements') border-red-500 @enderror"
                    >
                    @error('achievements')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- LinkedIn URL --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        LinkedIn URL
                    </label>
                    <input 
                        type="url" 
                        name="linkedin" 
                        value="{{ old('linkedin') }}"
                        placeholder="https://linkedin.com/in/username" 
                        class="input @error('linkedin') border-red-500 @enderror"
                    >
                    @error('linkedin')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Twitter URL --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Twitter URL
                    </label>
                    <input 
                        type="url" 
                        name="twitter" 
                        value="{{ old('twitter') }}"
                        placeholder="https://twitter.com/username" 
                        class="input @error('twitter') border-red-500 @enderror"
                    >
                    @error('twitter')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- GitHub URL --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        GitHub URL
                    </label>
                    <input 
                        type="url" 
                        name="github" 
                        value="{{ old('github') }}"
                        placeholder="https://github.com/username" 
                        class="input @error('github') border-red-500 @enderror"
                    >
                    @error('github')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Profile Image --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Profile Image
                    </label>
                    <div class="file-input-wrapper">
                        <input 
                            type="file" 
                            name="image" 
                            id="imageInput" 
                            accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
                        >
                        <label for="imageInput" class="file-input-label" id="fileLabel">
                            <span class="text-gray-500" id="fileName">Choose Image</span>
                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </label>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">PNG, JPG, GIF up to 10MB</p>
                    @error('image')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Description --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Description
                    </label>
                    <textarea 
                        name="description" 
                        rows="4"
                        placeholder="Brief description about the team member..." 
                        class="input @error('description') border-red-500 @enderror"
                    >{{ old('description') }}</textarea>
                    @error('description')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-6 flex justify-end bg-green-500">
                <button 
                    type="submit" 
                    class="text-sm text-black p-5 border rounded-lg hover:bg-gray-800 transition duration-200 font-medium shadow-sm"
                >
                    Add Team Member
                </button>
            </div>
        </form>
    </div>

    {{-- TEAM MEMBERS LIST --}}
    <div class="mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Team Members</h2>
    </div>

    @if($members->isEmpty())
        <div class="bg-white border-2 border-dashed border-gray-300 rounded-xl p-12 text-center">
            <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            <p class="text-gray-500 text-lg">No team members added yet</p>
            <p class="text-gray-400 text-sm mt-2">Add your first team member using the form above</p>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($members as $member)
            <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm hover:shadow-md transition duration-200">
                {{-- Profile Image --}}
                <div class="h-48 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg flex items-center justify-center overflow-hidden mb-4">
                    @if($member->image)
                        <img src="{{ asset($member->image) }}" alt="{{ $member->name }}" class="object-cover w-full h-full">
                    @else
                        <svg class="w-20 h-20 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
                        </svg>
                    @endif
                </div>

                {{-- Member Info --}}
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-900 text-lg">{{ $member->name }}</h3>
                    <p class="text-sm text-gray-600 mt-1">{{ $member->role }}</p>
                    @if($member->location)
                        <p class="text-xs text-gray-500 mt-1 flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                            </svg>
                            {{ $member->location }}
                        </p>
                    @endif
                    @if($member->experience)
                        <p class="text-xs text-gray-500 mt-1">
                            <span class="font-medium">Experience:</span> {{ $member->experience }}
                        </p>
                    @endif
                </div>

                {{-- Social Links --}}
                @if($member->linkedin || $member->twitter || $member->github)
                    <div class="flex gap-2 mb-4 pb-4 border-b border-gray-200">
                        @if($member->linkedin)
                            <a href="{{ $member->linkedin }}" target="_blank" class="text-gray-400 hover:text-blue-600 transition">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                                </svg>
                            </a>
                        @endif
                        @if($member->twitter)
                            <a href="{{ $member->twitter }}" target="_blank" class="text-gray-400 hover:text-blue-400 transition">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
                                </svg>
                            </a>
                        @endif
                        @if($member->github)
                            <a href="{{ $member->github }}" target="_blank" class="text-gray-400 hover:text-gray-900 transition">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                                </svg>
                            </a>
                        @endif
                    </div>
                @endif

                {{-- Actions --}}
                <div class="flex gap-3">
                    <a 
                        href="{{ route('admin.pages.aboutus.edit', $member->id) }}" 
                        class="flex-1 text-center bg-blue-50 text-blue-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-100 transition"
                    >
                        Edit
                    </a>
                    <form 
                        method="POST" 
                        action="{{ route('admin.pages.aboutus.destroy', $member->id) }}" 
                        onsubmit="return confirm('Are you sure you want to delete this team member?')"
                        class="flex-1"
                    >
                        @csrf
                        @method('DELETE')
                        <button 
                            type="submit" 
                            class="w-full bg-red-50 text-red-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-red-100 transition"
                        >
                            Delete
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('imageInput');
    const fileLabel = document.getElementById('fileLabel');
    const fileName = document.getElementById('fileName');
    
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            if (e.target.files && e.target.files.length > 0) {
                const file = e.target.files[0];
                fileName.textContent = file.name;
                fileName.classList.remove('text-gray-500');
                fileName.classList.add('text-gray-900', 'font-medium');
                fileLabel.classList.add('has-file');
            } else {
                fileName.textContent = 'Choose Image';
                fileName.classList.remove('text-gray-900', 'font-medium');
                fileName.classList.add('text-gray-500');
                fileLabel.classList.remove('has-file');
            }
        });
    }
});
</script>

@endsection