@extends('admin.layout')
@section('title', 'Edit About')
@section('page-title', 'Edit About Section')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-6">
        <form action="{{ route('admin.about.update', $about) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Title *</label>
                    <input type="text" name="title" value="{{ old('title', $about->title) }}" required class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Company Story *</label>
                    <textarea name="story" rows="4" required class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 resize-none">{{ old('story', $about->story) }}</textarea>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Mission *</label>
                        <textarea name="mission" rows="3" required class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 resize-none">{{ old('mission', $about->mission) }}</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Vision *</label>
                        <textarea name="vision" rows="3" required class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500 resize-none">{{ old('vision', $about->vision) }}</textarea>
                    </div>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Years Exp.</label>
                        <input type="number" name="years_experience" value="{{ old('years_experience', $about->years_experience) }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Projects</label>
                        <input type="number" name="projects_completed" value="{{ old('projects_completed', $about->projects_completed) }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Clients</label>
                        <input type="number" name="clients_served" value="{{ old('clients_served', $about->clients_served) }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Team Size</label>
                        <input type="number" name="team_members" value="{{ old('team_members', $about->team_members) }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Image</label>
                    @if($about->image)
                        <img src="{{ Storage::url($about->image) }}" class="w-32 h-24 object-cover rounded-lg border border-gray-700 mb-3">
                    @endif
                    <input type="file" name="image" accept="image/*" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm file:mr-4 file:py-1 file:px-3 file:rounded-lg file:border-0 file:bg-indigo-600 file:text-white file:text-xs file:font-semibold">
                </div>
            </div>
            @include('admin.partials.form-actions', ['submitText' => 'Update About', 'cancelRoute' => route('admin.about.index')])
        </form>
    </div>
</div>
@endsection