@php
  $banner = $banner ?? null;
  $formAction = $formAction ?? '#';
  $submitLabel = $submitLabel ?? 'Save Banner';
  $heroTitle = $heroTitle ?? 'Banner Builder';
  $heroDescription = $heroDescription ?? 'Create and manage promotional banners for the portal.';
  $currentImageUrl = $banner->image_url ?? asset('public/frontend/images/logo.png');
  $bannerNameValue = old('pagename', $banner->bannrename ?? '');
  $photoIdValue = old('photoid', $banner->bannerimg ?? '');
  $summaryCards = $banner
      ? [
          'Banner ID' => '#'.$banner->id,
          'Title' => $bannerNameValue ?: '-',
          'Image Status' => $photoIdValue !== '' ? 'Attached' : 'Not Attached',
      ]
      : [
          'Mode' => 'New Banner',
          'Image' => 'Upload Supported',
          'Placement' => 'Homepage Ready',
      ];
@endphp

<div class="portal-page-shell">
  <div class="portal-hero-card">
    <div class="portal-hero-main">
      <div class="portal-hero-copy">
        <h5>{{ $heroTitle }}</h5>
        <p>{{ $heroDescription }}</p>
        <div class="portal-chip-list">
          <span class="portal-chip">Homepage Banner</span>
          <span class="portal-chip">Quick Upload</span>
          <span class="portal-chip">Title Managed</span>
        </div>
        <div class="portal-hero-actions">
          <a href="{{ route('admin.bannermanagement') }}" class="btn btn-outline-primary btn-sm">Back to Banners</a>
        </div>
      </div>
    </div>
  </div>

  <div class="portal-summary-grid">
    @foreach($summaryCards as $label => $value)
      <div class="portal-summary-card">
        <span>{{ $label }}</span>
        <strong>{{ $value }}</strong>
      </div>
    @endforeach
  </div>

  <form action="{{ $formAction }}" method="post" class="portal-form-shell">
    @csrf
    @if($banner)
      <input type="hidden" name="editid" value="{{ $banner->id }}">
    @endif

    <div class="portal-form-section">
      <h6>Banner Basics</h6>
      <p>Set the banner title and upload the image that should appear on the portal.</p>
      <div class="portal-form-grid">
        <div class="form-group portal-form-group portal-form-group-full">
          <label for="pagename">Banner Title</label>
          <input type="text" class="form-control" id="pagename" name="pagename" value="{{ $bannerNameValue }}" maxlength="200" placeholder="Banner title" required>
        </div>
      </div>
    </div>

    <div class="portal-form-section">
      <h6>Banner Image</h6>
      <p>Upload a banner image or keep the existing one if it is already correct.</p>
      <div class="portal-upload-shell">
        <label>Banner Image</label>
        <div class="portal-upload-preview" id="targetLayer">
          <img src="{{ $currentImageUrl }}" alt="{{ $bannerNameValue ?: 'Banner image preview' }}">
          @if($photoIdValue !== '')
            <input type="hidden" name="photoid" value="{{ $photoIdValue }}">
          @endif
        </div>
        <div class="loading" style="display:none; text-align:center;">
          <img src="{{ asset('public/admin/loadspinner.gif') }}" style="width:80px;" alt="Loading..">
        </div>
        <div class="portal-link-row">
          <a id="newuploadphoto" href="#" class="btn btn-primary btn-sm">Upload Image</a>
          <span class="portal-inline-note">Recommended to keep one clean, readable banner image.</span>
        </div>
      </div>
    </div>

    <div class="portal-form-actions">
      <p class="portal-security-note">Banner title is validated before save, and the latest uploaded image stays attached to this banner.</p>
      <button type="submit" class="btn btn-primary">{{ $submitLabel }}</button>
    </div>
  </form>
</div>
