@extends('layouts.admin_main')

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Hero Section</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active">Hero Section</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="card card-primary">
                    @if(session('status'))
                        <div class="alert alert-success alert-dismissible fade show text-center" role="alert">
                            {{ session('status') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    <div class="card-header">
                        <h3 class="card-title">Hero Section</h3>
                    </div>
                    <form action="{{ route('hero-section.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            <div class="form-group col-8">
                                <label for="heading">Heading</label>
                                <input type="text" name="heading" class="form-control" value="{{ $hero->heading ?? '' }}">
                            </div>

                            <div class="form-group col-8">
                                <label for="subheading">Subheading</label>
                                <input type="text" name="subheading" class="form-control" value="{{ $hero->subheading ?? '' }}">
                            </div>

                            <div class="form-group col-8">
                                <label for="button_text">Button Text</label>
                                <input type="text" name="button_text" class="form-control" value="{{ $hero->button_text ?? '' }}">
                            </div>

                            <div class="form-group col-8">
                                <label for="button_url">Button URL</label>
                                <input type="text" name="button_url" class="form-control" value="{{ $hero->button_url ?? '' }}">
                            </div>

                            <div class="form-group col-8">
                                <label for="video_url">Video URL</label>
                                <input type="text" name="video_url" class="form-control" value="{{ $hero->video_url ?? '' }}">
                            </div>

                            <div class="form-group col-2">
                                <label for="button_color">Button Color</label>
                                <input type="color" name="button_color" class="form-control" value="{{ $hero->button_color ?? '#007bff' }}"> <!-- Default color -->
                            </div>

                            <div class="form-group col-2">
                                <label for="font_color">Font Color</label>
                                <input type="color" name="font_color" class="form-control" value="{{ $hero->font_color ?? '#ffffff' }}"> <!-- Default color -->
                            </div>

                            <div class="form-group col-8">
                                <label for="banner_image">Banner Image</label>
                                <input type="file" name="banner_image" class="form-control">
                                <img src="{{ asset('storage/' . $hero->banner_image) ?? '' }}" alt="Banner" width="200" style="margin:10px">
                            </div>

                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>

                </div>
            </div>
        </section>
    </div>
@endsection