@extends('layouts.admin-layout')
@section('title', 'Community Page CMS')

@section('content')
<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Community Page CMS</h1>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <form action="{{ route('admin.community_cms.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">Banner Settings</h3>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="banner_image">Banner Image <small class="text-muted">(Recommended: 1920x500)</small></label>
                                    <div class="custom-file mb-2">
                                        <input type="file" name="banner_image" class="custom-file-input" id="banner_image">
                                        <label class="custom-file-label" for="banner_image">Choose file</label>
                                    </div>
                                    
                                    @if($content->hasMedia('banner_image'))
                                        <div class="mt-2">
                                            <p>Current Banner:</p>
                                            <img src="{{ $content->getFirstMediaUrl('banner_image') }}" 
                                                 alt="Current Banner" 
                                                 class="img-thumbnail" 
                                                 style="max-height: 200px;">
                                        </div>
                                    @else
                                        <img src="{{ asset('front/images/community-banner.webp') }}" 
                                             alt="Default Banner" 
                                             class="img-thumbnail" 
                                             style="max-height: 200px; opacity: 0.6;">
                                        <p class="text-muted small">Default Image showing</p>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="banner_title">Banner Title</label>
                                    <input type="text" 
                                           name="banner_title" 
                                           id="banner_title" 
                                           class="form-control" 
                                           value="{{ old('banner_title', $content->banner_title ?? 'Community') }}" 
                                           placeholder="Enter Page Title">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 mb-4">
                        <div class="card card-info card-outline">
                            <div class="card-body text-muted">
                                <i class="fas fa-info-circle mr-2"></i> 
                                <strong>Note:</strong> Is page ka baaki content (Subhead, Heading, Button) aapke 
                                <a href="{{ route('admin.home.edit') }}#tab-community" class="font-weight-bold">Home Page CMS</a> 
                                ke <strong>Community Section</strong> se link hai. Wahan change karne se yahan bhi update ho jayega.
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary px-4">
                                    <i class="fas fa-save mr-1"></i> Update Community Page
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>
@endsection

@push('script')
<script>
    $('.custom-file-input').on('change', function() {
        let fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').addClass("selected").html(fileName);
    });
</script>
@endpush