@extends('layout')

@section('page_title', 'Settings')

@section('content')
  <div class="header-actions">
    <h2>Company Settings</h2>
    <div class="spacer"></div>
  </div>

  @if(session('success'))
    <div class="card" style="border-left: 4px solid var(--success);">
      <div><strong>Success:</strong> {{ session('success') }}</div>
    </div>
  @endif

  <div class="grid">
    <form class="card" method="post" action="{{ route('settings.update') }}" enctype="multipart/form-data" style="grid-column: span 8;">
      @csrf
      @method('PUT')
      <div class="card-header">
        <h3>Branding</h3>
      </div>

      <div class="grid">
        <div>
          <label for="company_name">Company Name</label>
          <input type="text" id="company_name" name="company_name" value="{{ old('company_name', optional($setting)->company_name) }}" placeholder="e.g., InstalmentPro">
          @error('company_name')
            <div style="color: var(--danger); font-size: 0.875rem;">{{ $message }}</div>
          @enderror
        </div>

        <div>
          <label for="currency">Currency</label>
          <input type="text" id="currency" name="currency" value="{{ old('currency', optional($setting)->currency) }}" placeholder="e.g., $ or PKR">
          @error('currency')
            <div style="color: var(--danger); font-size: 0.875rem;">{{ $message }}</div>
          @enderror
        </div>

        <div class="col-span-full">
          <label for="logo">Company Logo</label>
          <input type="file" id="logo" name="logo" accept="image/*">
          @error('logo')
            <div style="color: var(--danger); font-size: 0.875rem;">{{ $message }}</div>
          @enderror

          @php($logo = optional($setting)->logo_path)
          @if($logo)
            <div style="margin-top: 12px;">
              <div class="text-muted small">Current Logo</div>
              <img src="{{ asset('storage/' . $logo) }}" alt="Company Logo" style="max-height: 80px; max-width: 200px; object-fit: contain; border:1px solid var(--border); padding:6px; border-radius:6px;" />
            </div>
          @endif
        </div>
      </div>

      <div style="margin-top: 16px; display:flex; gap: 8px;">
        <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
          Save Settings
        </button>
      </div>
    </form>

    <div class="card" style="grid-column: span 4;">
      <div class="card-header">
        <h3>Preview</h3>
      </div>
      <div style="display:flex; align-items:center; gap:12px;">
        @if(optional($setting)->logo_path)
          <img src="{{ asset('storage/' . $setting->logo_path) }}" alt="Logo" style="max-height: 48px; max-width: 140px; object-fit: contain;" />
        @else
          <div style="padding: 8px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted);">No logo uploaded</div>
        @endif
        <div style="font-weight:700;">{{ optional($setting)->company_name ?? 'InstalmentPro' }}</div>
      </div>
      <div class="text-muted small" style="margin-top:8px;">Currency: {{ optional($setting)->currency ?? '$' }}</div>
    </div>
  </div>
@endsection