@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

  <div class="container-fluid">
    <div class="page-title">
      <div class="row align-items-center">
        <div class="col-sm-6 ps-0">
          <h3><i class="fas fa-file-invoice mr-2" style="color:#c9a96e"></i>Invoice Settings</h3>
          <p class="text-muted mb-0" style="font-size:13px">Company details, tax configuration, fees and invoice numbering for worldwide use</p>
        </div>
        <div class="col-sm-6 pe-0">
          <ol class="bc">
            <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
            <li class="bc-sep">›</li>
            <li class="bc-active">Invoice Settings</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

  @foreach(['success','error'] as $t)
    @if(session($t))
    <div class="container-fluid mb-2">
      <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show">
        {{ session($t) }}<button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    </div>
    @endif
  @endforeach

  <form method="POST" action="{{ route('admin.invoice-settings.save') }}" enctype="multipart/form-data">
    @csrf
    <div class="container-fluid">
      <div class="row">

        {{-- ── Company Details ── --}}
        <div class="col-lg-6 mb-4">
          <div class="card shadow-sm h-100" style="border-top:3px solid #c9a96e;">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-building mr-2" style="color:#c9a96e;"></i>Company / Seller Details</h6></div>
            <div class="card-body">

              <div class="form-group">
                <label class="inv-label">Company / Business Name *</label>
                <input name="company_name" class="form-control" value="{{ old('company_name', $s->company_name) }}" required>
              </div>

              {{-- ══ Logo Upload — rich design with drag-and-drop + live preview ══ --}}
              <div class="form-group">
                <label class="inv-label">Company Logo</label>

                {{-- Drop Zone --}}
                <div id="logoDropZone"
                     onclick="document.getElementById('logoFileInput').click()"
                     style="position:relative;border:2px dashed #dee2e6;border-radius:14px;
                            min-height:140px;display:flex;align-items:center;justify-content:center;
                            cursor:pointer;background:#f8f9fa;transition:all .2s;overflow:hidden;">

                  {{-- Live / existing preview --}}
                  <img id="logoPreview"
                       src="{{ $s->company_logo ? asset('storage/'.$s->company_logo) : '' }}"
                       alt=""
                       style="max-height:90px;max-width:240px;object-fit:contain;border-radius:6px;
                              display:{{ $s->company_logo ? 'block' : 'none' }};">

                  {{-- Empty-state placeholder --}}
                  <div id="logoPlaceholder"
                       style="display:{{ $s->company_logo ? 'none' : 'flex' }};
                              flex-direction:column;align-items:center;gap:10px;
                              pointer-events:none;padding:10px;">
                    <div style="width:56px;height:56px;border-radius:14px;background:#e9ecef;
                                display:flex;align-items:center;justify-content:center;">
                      <i class="fas fa-cloud-upload-alt" style="font-size:24px;color:#adb5bd;"></i>
                    </div>
                    <div style="text-align:center;">
                      <div style="font-size:13px;font-weight:700;color:#495057;">
                        Click or drag &amp; drop your logo
                      </div>
                      <div style="font-size:11px;color:#adb5bd;margin-top:3px;">
                        PNG · JPG · SVG · WEBP &nbsp;·&nbsp; Max 2 MB
                      </div>
                    </div>
                  </div>

                  {{-- Hover overlay (shows when image is loaded) --}}
                  <div id="logoHoverHint"
                       style="display:none;position:absolute;inset:0;
                              background:rgba(0,0,0,0.42);border-radius:12px;
                              flex-direction:column;align-items:center;justify-content:center;gap:6px;
                              pointer-events:none;">
                    <i class="fas fa-camera" style="font-size:22px;color:#fff;"></i>
                    <span style="font-size:12px;font-weight:700;color:#fff;letter-spacing:.3px;">
                      Change Logo
                    </span>
                  </div>

                  {{-- Remove ✕ button --}}
                  <button type="button" id="logoRemoveBtn"
                          onclick="event.stopPropagation(); window.removeLogo()"
                          title="Remove logo"
                          style="display:{{ $s->company_logo ? 'flex' : 'none' }};
                                 position:absolute;top:9px;right:9px;
                                 width:28px;height:28px;border-radius:50%;border:none;
                                 background:rgba(220,53,69,0.14);color:#dc3545;
                                 align-items:center;justify-content:center;
                                 font-size:13px;cursor:pointer;transition:background .15s;z-index:2;">
                    <i class="fas fa-times"></i>
                  </button>
                </div>

                {{-- Hidden inputs --}}
                <input type="file" id="logoFileInput" name="company_logo_file"
                       accept="image/png,image/jpeg,image/jpg,image/svg+xml,image/webp"
                       style="display:none;">
                <input type="hidden" name="remove_company_logo" id="removeLogoFlag" value="0">

                {{-- Status bar below the drop zone --}}
                <div class="d-flex align-items-center justify-content-between mt-2">
                  <small class="text-muted">
                    Recommended: transparent PNG, min 200 × 60 px
                  </small>
                  <small id="logoStatusNote" class="text-muted" style="font-style:italic;">
                    {{ $s->company_logo ? 'Saved ✓' : '' }}
                  </small>
                </div>
              </div>
              {{-- ══ End Logo Upload ══ --}}

              <div class="form-group">
                <label class="inv-label">Address</label>
                <textarea name="company_address" class="form-control" rows="2">{{ old('company_address', $s->company_address) }}</textarea>
              </div>
              <div class="row">
                <div class="col-6"><div class="form-group"><label class="inv-label">City</label><input name="company_city" class="form-control" value="{{ old('company_city', $s->company_city) }}"></div></div>
                <div class="col-6"><div class="form-group"><label class="inv-label">State / Province</label><input name="company_state" class="form-control" value="{{ old('company_state', $s->company_state) }}"></div></div>
              </div>
              <div class="row">
                <div class="col-6"><div class="form-group"><label class="inv-label">Country</label><input name="company_country" class="form-control" value="{{ old('company_country', $s->company_country) }}"></div></div>
                <div class="col-6"><div class="form-group"><label class="inv-label">ZIP / Postcode</label><input name="company_pincode" class="form-control" value="{{ old('company_pincode', $s->company_pincode) }}"></div></div>
              </div>
              <div class="row">
                <div class="col-6"><div class="form-group"><label class="inv-label">Phone</label><input name="company_phone" class="form-control" value="{{ old('company_phone', $s->company_phone) }}"></div></div>
                <div class="col-6"><div class="form-group"><label class="inv-label">Email</label><input name="company_email" type="email" class="form-control" value="{{ old('company_email', $s->company_email) }}"></div></div>
              </div>
              <div class="form-group">
                <label class="inv-label">Website</label>
                <input name="company_website" class="form-control" value="{{ old('company_website', $s->company_website) }}">
              </div>
              <div class="row">
                <div class="col-6"><div class="form-group"><label class="inv-label">PAN</label><input name="company_pan" class="form-control" value="{{ old('company_pan', $s->company_pan) }}"></div></div>
                <div class="col-6"><div class="form-group"><label class="inv-label">RERA Number</label><input name="company_rera" class="form-control" value="{{ old('company_rera', $s->company_rera) }}"></div></div>
              </div>
            </div>
          </div>
        </div>

        {{-- ── Tax + Invoice Numbering ── --}}
        <div class="col-lg-6 mb-4">

          {{-- Tax System --}}
          <div class="card shadow-sm mb-4" style="border-top:3px solid #f59e0b;">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-percentage mr-2" style="color:#f59e0b;"></i>Tax System</h6></div>
            <div class="card-body">
              <div class="row align-items-center mb-3">
                <div class="col-8">
                  <div style="font-size:13px;font-weight:600;">Enable Tax on Invoices</div>
                  <small class="text-muted">GST, VAT, Sales Tax, IVA — whatever applies in your country</small>
                </div>
                <div class="col-4 text-right">
                  <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input fee-toggle" data-card="taxFields" id="taxEnabled" name="tax_enabled" value="1" {{ $s->tax_enabled ? 'checked' : '' }}>
                    <label class="custom-control-label" for="taxEnabled"></label>
                  </div>
                </div>
              </div>
              <div id="taxFields" style="{{ $s->tax_enabled ? '' : 'display:none;' }}">
                <div class="row">
                  <div class="col-6">
                    <div class="form-group">
                      <label class="inv-label">Tax System Type</label>
                      <select name="tax_system" class="form-control">
                        <option value="gst"       {{ old('tax_system', $s->tax_system) === 'gst'       ? 'selected' : '' }}>GST (India, Singapore, AU…)</option>
                        <option value="vat"       {{ old('tax_system', $s->tax_system) === 'vat'       ? 'selected' : '' }}>VAT (EU, UK, UAE, Gulf…)</option>
                        <option value="sales_tax" {{ old('tax_system', $s->tax_system) === 'sales_tax' ? 'selected' : '' }}>Sales Tax (USA, Canada…)</option>
                        <option value="none"      {{ old('tax_system', $s->tax_system) === 'none'      ? 'selected' : '' }}>None / Tax Exempt</option>
                        <option value="custom"    {{ old('tax_system', $s->tax_system) === 'custom'    ? 'selected' : '' }}>Custom</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-group">
                      <label class="inv-label">Tax Label on Invoice</label>
                      <input name="tax_label" class="form-control" value="{{ old('tax_label', $s->tax_label ?? 'GST') }}" placeholder="GST, VAT, IVA, Sales Tax…">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-6">
                    <div class="form-group">
                      <label class="inv-label">Tax Rate (%)</label>
                      <input type="number" name="tax_rate" step="0.01" class="form-control" value="{{ old('tax_rate', $s->tax_rate ?? 0) }}" placeholder="18, 5, 20, 9…">
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-group">
                      <label class="inv-label">Tax Registration Label</label>
                      <input name="tax_number_label" class="form-control" value="{{ old('tax_number_label', $s->tax_number_label ?? 'GSTIN') }}" placeholder="GSTIN, VAT No, ABN, TIN…">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="inv-label">Company Tax Registration Number</label>
                  <input name="company_tax_number" class="form-control" value="{{ old('company_tax_number', $s->company_tax_number) }}" placeholder="Shown on all invoices">
                </div>
                <div class="d-flex align-items-center gap-2">
                  <div class="custom-control custom-switch" style="padding-left:2.5rem;">
                    <input type="checkbox" class="custom-control-input" id="taxInclusive" name="tax_inclusive" value="1" {{ $s->tax_inclusive ? 'checked' : '' }}>
                    <label class="custom-control-label" for="taxInclusive">Tax Inclusive (tax already in unit price)</label>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {{-- Invoice Numbering --}}
          <div class="card shadow-sm" style="border-top:3px solid #3b82f6;">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-hashtag mr-2" style="color:#3b82f6;"></i>Invoice Numbering</h6></div>
            <div class="card-body">
              <div class="row">
                <div class="col-6">
                  <div class="form-group">
                    <label class="inv-label">Prefix</label>
                    <input name="invoice_prefix" class="form-control" value="{{ old('invoice_prefix', $s->invoice_prefix ?? 'INV') }}" placeholder="INV" style="text-transform:uppercase" required>
                  </div>
                </div>
                <div class="col-6">
                  <div class="form-group">
                    <label class="inv-label">Sequence Padding</label>
                    <select name="invoice_seq_padding" class="form-control">
                      @foreach([3,4,5,6] as $p)
                        <option value="{{ $p }}" {{ ($s->invoice_seq_padding ?? 4) == $p ? 'selected' : '' }}>{{ $p }} digits ({{ str_pad('1',$p,'0',STR_PAD_LEFT) }})</option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="inv-label">Format</label>
                <input name="invoice_number_format" class="form-control" value="{{ old('invoice_number_format', $s->invoice_number_format ?? '{PREFIX}-{YEAR}-{SEQ}') }}" required>
                <small class="text-muted">Tokens: <code>{PREFIX}</code> <code>{YEAR}</code> <code>{MONTH}</code> <code>{SEQ}</code></small>
              </div>
              <div class="alert alert-info py-2 px-3 mb-0" style="font-size:12px;">
                <strong>Preview:</strong> <span id="invPreview"></span>
              </div>
            </div>
          </div>
        </div>

        {{-- ── Additional Fees ── --}}
        <div class="col-12 mb-4">
          <div class="card shadow-sm" style="border-top:3px solid #8b5cf6;">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-plus-circle mr-2" style="color:#8b5cf6;"></i>Additional Fees</h6></div>
            <div class="card-body">
              <div class="row">

                @foreach([
                  ['processing_fee',     'Processing Fee',     '#3b82f6'],
                  ['stamp_duty',         'Stamp Duty',         '#ef4444'],
                  ['registration_fee',   'Registration Fee',   '#f59e0b'],
                  ['maintenance_charge', 'Maintenance Charge', '#22c55e'],
                  ['custom_fee1',        'Custom Fee 1',       '#8b5cf6'],
                  ['custom_fee2',        'Custom Fee 2',       '#64748b'],
                ] as [$key, $defaultLabel, $color])
                @php
                  $enabled = $s->{$key.'_enabled'} ?? false;
                  $label   = old($key.'_label', $s->{$key.'_label'} ?? $defaultLabel);
                  $rate    = old($key.'_rate',  $s->{$key.'_rate'}  ?? 0);
                  $fixed   = old($key.'_fixed', $s->{$key.'_fixed'} ?? 0);
                @endphp
                <div class="col-lg-4 col-md-6 mb-3">
                  <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                      <div style="font-size:14px;font-weight:700;color:{{ $color }};">{{ $defaultLabel }}</div>
                      <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input fee-toggle" data-card="{{ $key }}Fields"
                          id="{{ $key }}Enabled" name="{{ $key }}_enabled" value="1" {{ $enabled ? 'checked' : '' }}>
                        <label class="custom-control-label" for="{{ $key }}Enabled"></label>
                      </div>
                    </div>
                    <div id="{{ $key }}Fields" style="{{ $enabled ? '' : 'display:none;' }}">
                      <div class="form-group mb-2">
                        <label class="inv-label">Label on Invoice</label>
                        <input name="{{ $key }}_label" class="form-control form-control-sm" value="{{ $label }}">
                      </div>
                      <div class="row">
                        <div class="col-6">
                          <div class="form-group mb-0">
                            <label class="inv-label">Rate (%)</label>
                            <input type="number" name="{{ $key }}_rate" step="0.01" class="form-control form-control-sm" value="{{ $rate }}" placeholder="0">
                          </div>
                        </div>
                        <div class="col-6">
                          <div class="form-group mb-0">
                            <label class="inv-label">Fixed Amount</label>
                            <input type="number" name="{{ $key }}_fixed" step="0.01" class="form-control form-control-sm" value="{{ $fixed }}" placeholder="0">
                            <small class="text-muted" style="font-size:10px;">Fixed overrides %</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                @endforeach

              </div>
            </div>
          </div>
        </div>

        {{-- ── Currency ── --}}
        <div class="col-lg-6 mb-4">
          <div class="card shadow-sm h-100" style="border-top:3px solid #22c55e;">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-coins mr-2" style="color:#22c55e;"></i>Currency (Invoice Display)</h6></div>
            <div class="card-body">
              <div class="alert alert-info py-2 px-3 mb-3" style="font-size:12px;">
                <i class="fas fa-info-circle mr-1"></i>
                These are pulled from your <a href="/admin/global-settings">Global Settings</a> automatically. Only override here if your invoices use a different currency.
              </div>
              <div class="row">
                <div class="col-4"><div class="form-group"><label class="inv-label">Code</label><input name="currency_code" class="form-control" value="{{ old('currency_code', $s->currency_code) }}" placeholder="INR"></div></div>
                <div class="col-4"><div class="form-group"><label class="inv-label">Symbol</label><input name="currency_symbol" class="form-control" value="{{ old('currency_symbol', $s->currency_symbol) }}" placeholder="₹"></div></div>
                <div class="col-4">
                  <div class="form-group">
                    <label class="inv-label">Position</label>
                    <select name="currency_symbol_position" class="form-control">
                      <option value="before" {{ ($s->currency_symbol_position ?? 'before') === 'before' ? 'selected' : '' }}>Before (₹100)</option>
                      <option value="after"  {{ ($s->currency_symbol_position ?? 'before') === 'after'  ? 'selected' : '' }}>After (100 kr)</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-6"><div class="form-group"><label class="inv-label">Decimals</label><select name="currency_decimals" class="form-control"><option value="0" {{ ($s->currency_decimals??2)==0?'selected':'' }}>0</option><option value="2" {{ ($s->currency_decimals??2)==2?'selected':'' }}>2</option></select></div></div>
                <div class="col-6"><div class="form-group"><label class="inv-label">Number Format Locale</label><input name="number_format_locale" class="form-control" value="{{ old('number_format_locale', $s->number_format_locale ?? 'en-IN') }}" placeholder="en-IN, de-DE, fr-FR"></div></div>
              </div>
              <div class="form-group mb-0">
                <label class="inv-label">Accent Colour</label>
                <div class="d-flex gap-2">
                  <input type="color" name="accent_color" value="{{ old('accent_color', $s->accent_color ?? '#c9a96e') }}" style="height:38px;width:50px;padding:2px;border:1px solid #ced4da;border-radius:4px;" id="accentPicker">
                  <input class="form-control" id="accentHex" value="{{ old('accent_color', $s->accent_color ?? '#c9a96e') }}" placeholder="#c9a96e">
                </div>
              </div>
            </div>
          </div>
        </div>

        {{-- ── Email & Document ── --}}
        <div class="col-lg-6 mb-4">
          <div class="card shadow-sm mb-4" style="border-top:3px solid #22c55e;">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-envelope mr-2" style="color:#22c55e;"></i>Email Automation</h6></div>
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                  <div style="font-size:13px;font-weight:600;">Send on Booking Confirmed</div>
                  <small class="text-muted">Auto-email invoice when booking confirmed</small>
                </div>
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="sendBooking" name="send_on_booking_confirmed" value="1" {{ $s->send_on_booking_confirmed ? 'checked' : '' }}>
                  <label class="custom-control-label" for="sendBooking"></label>
                </div>
              </div>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                  <div style="font-size:13px;font-weight:600;">Send on Milestone Paid</div>
                  <small class="text-muted">Auto-email receipt each time a milestone is paid</small>
                </div>
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="sendMilestone" name="send_on_milestone_paid" value="1" {{ $s->send_on_milestone_paid ? 'checked' : '' }}>
                  <label class="custom-control-label" for="sendMilestone"></label>
                </div>
              </div>
              <div class="form-group">
                <label class="inv-label">Booking Email Subject</label>
                <input name="email_subject_booking" class="form-control" value="{{ old('email_subject_booking', $s->email_subject_booking) }}">
                <small class="text-muted">Tokens: <code>{INVOICE_NUMBER}</code> <code>{UNIT}</code> <code>{APP_NAME}</code></small>
              </div>
              <div class="form-group mb-0">
                <label class="inv-label">Milestone Email Subject</label>
                <input name="email_subject_milestone" class="form-control" value="{{ old('email_subject_milestone', $s->email_subject_milestone) }}">
                <small class="text-muted">Tokens: <code>{INVOICE_NUMBER}</code> <code>{MILESTONE_LABEL}</code> <code>{APP_NAME}</code></small>
              </div>
            </div>
          </div>

          <div class="card shadow-sm" style="border-top:3px solid #64748b;">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-file-alt mr-2" style="color:#64748b;"></i>Document Content</h6></div>
            <div class="card-body">
              <div class="form-group"><label class="inv-label">Bank Details</label><textarea name="bank_details" class="form-control" rows="4" placeholder="Bank: HDFC Bank&#10;Account: 1234567890&#10;IFSC: HDFC0001234">{{ old('bank_details', $s->bank_details) }}</textarea></div>
              <div class="form-group"><label class="inv-label">Terms & Conditions</label><textarea name="terms_conditions" class="form-control" rows="4" placeholder="1. All sales are final&#10;2. Payment due within 30 days">{{ old('terms_conditions', $s->terms_conditions) }}</textarea></div>
              <div class="form-group mb-0"><label class="inv-label">Footer Note</label><textarea name="invoice_footer_note" class="form-control" rows="2" placeholder="Thank you for your business!">{{ old('invoice_footer_note', $s->invoice_footer_note) }}</textarea></div>
            </div>
          </div>
        </div>

      </div>

      <button type="submit" class="btn btn-warning btn-lg mb-5" style="color:#fff;font-weight:700;min-width:220px;">
        <i class="fas fa-save mr-2"></i>Save Invoice Settings
      </button>
    </div>
  </form>

</div>
</div>
</section>
@include('Partials.footer')

<style>
.inv-label { font-size:12px; font-weight:600; margin-bottom:4px; display:block; }

/* ── Logo drop zone ── */
#logoDropZone                     { user-select:none; }
#logoDropZone:hover               { border-color:#c9a96e !important; background:#fffdf8 !important; }
#logoDropZone.drag-over           { border-color:#c9a96e !important; border-style:solid !important;
                                    background:#fffdf8 !important; box-shadow:0 0 0 4px rgba(201,169,110,.15); }
#logoRemoveBtn:hover              { background:rgba(220,53,69,0.25) !important; }
</style>

<script>
/* ── Fee / tax toggles ─────────────────────────────────────────────────────── */
document.querySelectorAll('.fee-toggle').forEach(function (cb) {
  cb.addEventListener('change', function () {
    var f = document.getElementById(this.dataset.card);
    if (f) f.style.display = this.checked ? 'block' : 'none';
  });
});

/* ── Accent colour sync ────────────────────────────────────────────────────── */
document.getElementById('accentPicker').addEventListener('input', function () {
  document.getElementById('accentHex').value = this.value;
});
document.getElementById('accentHex').addEventListener('input', function () {
  document.getElementById('accentPicker').value = this.value;
});

/* ── Invoice number live preview ───────────────────────────────────────────── */
function updatePreview () {
  var prefix  = (document.querySelector('[name="invoice_prefix"]').value || 'INV').toUpperCase();
  var format  = document.querySelector('[name="invoice_number_format"]').value || '{PREFIX}-{YEAR}-{SEQ}';
  var padding = parseInt(document.querySelector('[name="invoice_seq_padding"]').value) || 4;
  var result  = format
    .replace('{PREFIX}', prefix)
    .replace('{YEAR}',   new Date().getFullYear())
    .replace('{MONTH}',  String(new Date().getMonth() + 1).padStart(2, '0'))
    .replace('{SEQ}',    String(1).padStart(padding, '0'));
  document.getElementById('invPreview').textContent = result;
}
document.querySelectorAll('[name="invoice_prefix"],[name="invoice_number_format"],[name="invoice_seq_padding"]')
  .forEach(function (el) { el.addEventListener('input', updatePreview); });
updatePreview();

/* ══════════════════════════════════════════════════════════════════════════════
   Logo uploader — drag-and-drop + click + live preview + remove
   ══════════════════════════════════════════════════════════════════════════════ */
(function () {
  var zone        = document.getElementById('logoDropZone');
  var fileInput   = document.getElementById('logoFileInput');
  var preview     = document.getElementById('logoPreview');
  var placeholder = document.getElementById('logoPlaceholder');
  var removeBtn   = document.getElementById('logoRemoveBtn');
  var hoverHint   = document.getElementById('logoHoverHint');
  var removeFlag  = document.getElementById('removeLogoFlag');
  var statusNote  = document.getElementById('logoStatusNote');

  /* Determine initial state */
  var hasSaved = preview.src && preview.src !== window.location.href && !preview.src.endsWith('/');
  hasSaved ? activateImageState() : activatePlaceholderState();

  /* ── File chosen via click ── */
  fileInput.addEventListener('change', function () {
    var file = this.files[0];
    if (!file) return;
    if (!validateFile(file)) { this.value = ''; return; }
    loadFile(file);
    removeFlag.value = '0';
  });

  /* ── Drag events ── */
  zone.addEventListener('dragover', function (e) {
    e.preventDefault();
    this.classList.add('drag-over');
  });
  ['dragleave', 'dragend'].forEach(function (evt) {
    zone.addEventListener(evt, function (e) {
      if (!zone.contains(e.relatedTarget)) zone.classList.remove('drag-over');
    });
  });
  zone.addEventListener('drop', function (e) {
    e.preventDefault();
    zone.classList.remove('drag-over');
    var file = e.dataTransfer.files[0];
    if (!file) return;
    if (!file.type.startsWith('image/')) { alert('Please drop an image file (PNG, JPG, SVG, WEBP).'); return; }
    if (!validateFile(file)) return;
    /* Assign to the real file input so the form posts it */
    try {
      var dt = new DataTransfer();
      dt.items.add(file);
      fileInput.files = dt.files;
    } catch (_) { /* Safari fallback — file will be read for preview only */ }
    loadFile(file);
    removeFlag.value = '0';
  });

  /* ── Hover: show "Change Logo" hint when an image is displayed ── */
  zone.addEventListener('mouseenter', function () {
    if (preview.style.display !== 'none' && preview.src) {
      hoverHint.style.display = 'flex';
    }
  });
  zone.addEventListener('mouseleave', function () {
    hoverHint.style.display = 'none';
  });

  /* ── Remove button ── */
  window.removeLogo = function () {
    preview.src      = '';
    fileInput.value  = '';
    removeFlag.value = '1';
    setStatus('Logo will be removed when you save.', '#dc3545');
    activatePlaceholderState();
  };

  /* ── Helpers ── */
  function validateFile (file) {
    if (file.size > 2 * 1024 * 1024) {
      alert('File is too large. Please choose an image under 2 MB.');
      return false;
    }
    return true;
  }

  function loadFile (file) {
    var reader = new FileReader();
    reader.onload = function (e) {
      preview.src = e.target.result;
      activateImageState();
      setStatus('New logo selected — save to apply.', '#c9a96e');
    };
    reader.readAsDataURL(file);
  }

  function activateImageState () {
    preview.style.display     = 'block';
    placeholder.style.display = 'none';
    removeBtn.style.display   = 'flex';
    zone.style.borderStyle    = 'solid';
    zone.style.borderColor    = '#c9a96e';
    zone.style.background     = '#fffdf8';
  }

  function activatePlaceholderState () {
    preview.style.display     = 'none';
    placeholder.style.display = 'flex';
    removeBtn.style.display   = 'none';
    hoverHint.style.display   = 'none';
    zone.style.borderStyle    = 'dashed';
    zone.style.borderColor    = '#dee2e6';
    zone.style.background     = '#f8f9fa';
  }

  function setStatus (msg, color) {
    if (!statusNote) return;
    statusNote.textContent  = msg;
    statusNote.style.color  = color || '#6c757d';
  }
}());
</script>