@extends('layouts.admin') {{-- Use your admin layout --}}

@section('page-title', isset($hero) ? 'Edit About-Hero-Section' : 'Add Hero Section')

@section('content')
<div class="container py-4">
    <h2>{{ isset($hero) ? 'Edit Hero Section' : 'Add Hero Section' }}</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <form 
        action="{{ isset($hero) ? route('hero.update', $hero->id) : route('hero.store') }}" 
        method="POST" 
        enctype="multipart/form-data"
    >
        @csrf
        @if(isset($hero))
            @method('PUT') {{-- Update is POST in your controller --}}
        @endif

        <div class="mb-3">
            <label for="heading" class="form-label">Heading</label>
            <input type="text" class="form-control" name="heading" id="heading" 
                   value="{{ $hero->heading ?? '' }}">
        </div>

        <div class="mb-3">
            <label for="title" class="form-label">Title</label>
            <input type="text" class="form-control" name="title" id="title" 
                   value="{{ $hero->title ?? '' }}">
        </div>

        <div class="mb-3">
            <label for="banner_img" class="form-label">Banner Image</label>
            <input type="file" class="form-control" name="banner_img" id="banner_img">
            @if(isset($hero) && $hero->banner_img)
                <img src="{{ asset($hero->banner_img) }}" alt="Banner" width="200" class="mt-2">
            @endif
        </div>

        <div class="mb-3">
            <label for="icon" class="form-label">Icon Image</label>
            <input type="file" class="form-control" name="icon" id="icon">
            @if(isset($hero) && $hero->icon)
                <img src="{{ asset($hero->icon) }}" alt="Icon" width="100" class="mt-2">
            @endif
        </div>

        <button type="submit" class="main-butn">
            {{ isset($hero) ? 'Update' : 'Add Hero Section' }}
        </button>
        <a href="{{ route('about.index') }}" class="main-butn">Back</a>
    </form>
</div>
@endsection