@extends('layouts.app')
@section('title', 'Settings')
@section('page', 'settings')
@section('content')
@php
  $c = $agency->brand_color ?: '#2B4AF2';
  $sw = fn ($key) => '<label class="switch"><input type="checkbox" data-toggle-url="'.route('admin.settings.toggle').'" data-key="'.$key.'"'.($agency->setting($key) ? ' checked' : '').'><span></span></label>';
  $sel = fn ($key, $opts) => '<select class="input" style="width:auto" aria-label="'.e(str_replace('_', ' ', $key)).'" data-toggle-url="'.route('admin.settings.toggle').'" data-key="'.$key.'">'.collect($opts)->map(fn ($o) => '<option'.($agency->setting($key) === $o ? ' selected' : '').'>'.e($o).'</option>')->implode('').'</select>';
@endphp
<div class="page-head"><div><h1>Settings</h1><p>How your client portal looks and works.</p></div></div>
<div class="tabs" data-tabs>
  <button class="tab active" data-tab="s-brand">Branding</button><button class="tab" data-tab="s-portal">Client portal</button><button class="tab" data-tab="s-notify">Notifications</button><button class="tab" data-tab="s-pay">Payments</button><button class="tab" data-tab="s-security">Security</button>
</div>
<div class="tab-panel active" id="s-brand"><div class="grid g-main">
  <section class="panel panel-body">
    <form method="POST" action="{{ route('admin.settings.branding') }}" enctype="multipart/form-data" data-ajax>@csrf<div class="form-grid">
      <div class="field"><label for="agency-name">Agency name</label><input class="input" id="agency-name" name="name" value="{{ $agency->name }}" required></div>
      <div class="field"><label for="portal-domain">Portal address</label><input class="input" id="portal-domain" name="portal_domain" value="{{ $agency->portal_domain }}" placeholder="portal.youragency.com"><span class="help">Point a CNAME record to portals.agencydesk.app</span></div>
      <div class="field full"><label>Logo</label><label class="dropzone" style="padding:18px"><input type="file" name="logo" accept="image/*" class="sr-only" id="logo-input"><strong style="margin:0">Upload logo (SVG or PNG)</strong></label><div class="dz-list" id="logo-list">@if ($agency->logo_path)<div class="list-item" style="padding:10px 0"><i data-icon="image"></i><div class="grow"><strong>Current logo</strong><span class="meta">Upload a new file to replace it</span></div></div>@endif</div></div>
      <div class="field full"><label>Brand colour</label><input type="hidden" name="brand_color" id="brand-color" value="{{ $c }}"><div class="swatches" id="swatches">
        @foreach ($colors as $hex => $label)
        <button type="button" class="swatch {{ strtoupper($c) === $hex ? 'active' : '' }}" style="background:{{ $hex }}" data-c="{{ $hex }}" aria-label="{{ $label }}"></button>
        @endforeach
      </div></div>
      <div class="field full"><label for="welcome">Welcome message on the client dashboard</label><textarea class="input" id="welcome" name="welcome_message">{{ $agency->welcome_message }}</textarea></div>
    </div><div class="form-actions"><button class="btn btn-primary" type="submit">Save branding</button></div></form>
  </section>
  <section class="panel panel-body">
    <h3 style="margin-bottom:12px">Preview</h3>
    <div class="brand-preview"><div class="bp-side">@if ($agency->logo_path)<img src="{{ asset('storage/'.$agency->logo_path) }}" alt="" id="pv-logo" style="height:26px;max-width:40px;object-fit:contain">@endif<span class="av sm sq" id="pv-mark" style="background:{{ $c }}{{ $agency->logo_path ? ';display:none' : '' }}">{{ $agency->initials() }}</span><span id="pv-name">{{ $agency->name }}</span></div>
      <div class="bp-body"><strong>{{ greeting() }}, Sarah</strong><div class="progress" style="flex:none"><span id="pv-bar" style="width:60%;background:{{ $c }}"></span></div><button class="btn btn-sm" id="pv-btn" type="button" style="background:{{ $c }};border-color:{{ $c }};color:#fff;align-self:flex-start">Review approvals</button></div></div>
  </section>
</div></div>
<div class="tab-panel" id="s-portal"><section class="panel panel-body">
  <div class="setting"><div><strong>Show invoices to clients</strong><p>Clients can view and pay invoices in their portal</p></div>{!! $sw('show_invoices') !!}</div>
  <div class="setting"><div><strong>Let clients upload files</strong><p>Uploads go into the project's file list and notify the team</p></div>{!! $sw('client_uploads') !!}</div>
  <div class="setting"><div><strong>Require a comment when requesting changes</strong><p>Helps the team act on feedback without a follow-up call</p></div>{!! $sw('require_change_comment') !!}</div>
  <div class="setting"><div><strong>Show Desk Assistant on client pages</strong><p>Manage its answers in the <a href="{{ route('admin.knowledge') }}">Knowledge Hub</a></p></div>{!! $sw('show_assistant') !!}</div>
  <div class="setting"><div><strong>Project, invoice and email templates</strong><p>Reusable milestones, invoice layouts and the emails clients receive</p></div><a class="btn btn-sm" href="{{ route('admin.templates') }}">Manage templates</a></div>
  <div class="setting"><div><strong>Client portal language</strong><p>Clients can switch language in their profile</p></div>{!! $sel('portal_languages', ['English and Arabic', 'English only']) !!}</div>
</section></div>
<div class="tab-panel" id="s-notify"><section class="panel panel-body">
  <div class="setting"><div><strong>Remind clients about pending approvals</strong><p>Automatic email after this many days</p></div>{!! $sel('approval_reminder_days', ['2 days', '3 days', '5 days', 'Never']) !!}</div>
  <div class="setting"><div><strong>Payment reminders</strong><p>3 days before due, on the due date and 7 days after</p></div>{!! $sw('payment_reminders') !!}</div>
  <div class="setting"><div><strong>Notify me when a client approves</strong></div>{!! $sw('notify_on_approve') !!}</div>
  <div class="setting"><div><strong>Notify me when the assistant hands a question over</strong></div>{!! $sw('notify_on_handover') !!}</div>
</section></div>
<div class="tab-panel" id="s-pay"><section class="panel panel-body">
  <div class="setting"><div class="row"><span class="ic-box"><i data-icon="card"></i></span><div><strong>Demo payments</strong><p>Card and bank transfer payments are simulated. No money moves and no card details are stored.</p></div></div><span class="badge b-green">Active</span></div>
  <div class="setting"><div class="row"><span class="ic-box gray"><i data-icon="card"></i></span><div><strong>Stripe or PayTabs</strong><p>Connect a real payment provider in a later phase</p></div></div><span class="badge">Coming later</span></div>
  <form method="POST" action="{{ route('admin.settings.payments') }}" data-ajax class="mt-16">@csrf<div class="form-grid">
    <div class="field"><label for="p-cur">Default currency</label><select class="input" id="p-cur" name="default_currency">@foreach (['AED', 'SAR', 'USD'] as $cur)<option @selected($agency->default_currency === $cur)>{{ $cur }}</option>@endforeach</select></div>
    <div class="field"><label for="p-vat">VAT rate</label><input class="input" id="p-vat" name="vat_rate" value="{{ rtrim(rtrim(number_format((float) $agency->vat_rate, 2), '0'), '.') }}%"></div>
    <div class="field"><label for="p-trn">TRN</label><input class="input" id="p-trn" name="trn" value="{{ $agency->trn }}"></div>
    <div class="field"><label for="p-fmt">Invoice number format</label><input class="input" id="p-fmt" name="invoice_format" value="{{ $agency->invoice_format }}"><span class="help">Next number: {{ \App\Models\Invoice::nextNumber($agency) }}</span></div>
  </div><div class="form-actions"><button class="btn btn-primary" type="submit">Save payment settings</button></div></form>
</section></div>
<div class="tab-panel" id="s-security"><section class="panel panel-body">
  <div class="setting"><div><strong>Require two-step verification for the team</strong></div>{!! $sw('require_2fa_team') !!}</div>
  <div class="setting"><div><strong>Require two-step verification for clients</strong></div>{!! $sw('require_2fa_clients') !!}</div>
  <div class="setting"><div><strong>Sign out after inactivity</strong></div>{!! $sel('session_timeout', ['30 minutes', '8 hours', '7 days']) !!}</div>
  <div class="setting"><div><strong>Download activity log</strong><p>Every sign-in, approval and payment for the last 12 months</p></div><a class="btn btn-sm" href="{{ route('admin.settings.activity') }}"><i data-icon="download"></i>Download CSV</a></div>
</section></div>
@endsection
@push('scripts')
<script>
document.querySelectorAll("#swatches .swatch").forEach(function(s){
  s.addEventListener("click", function(){
    document.querySelectorAll("#swatches .swatch").forEach(function(x){ x.classList.toggle("active", x===s); });
    var c = s.dataset.c; document.getElementById("brand-color").value = c;
    document.getElementById("pv-mark").style.background = c; document.getElementById("pv-bar").style.background = c;
    var b = document.getElementById("pv-btn"); b.style.background = c; b.style.borderColor = c;
  });
});
document.getElementById("agency-name").addEventListener("input", function(){ document.getElementById("pv-name").textContent = this.value || "Your agency"; });
document.getElementById("logo-input").addEventListener("change", function(){
  var f = this.files[0]; if (!f) return;
  var url = URL.createObjectURL(f), img = document.getElementById("pv-logo");
  if (!img) { img = document.createElement("img"); img.id = "pv-logo"; img.alt = ""; img.style.cssText = "height:26px;max-width:40px;object-fit:contain"; document.querySelector(".bp-side").prepend(img); }
  img.src = url; document.getElementById("pv-mark").style.display = "none";
});
</script>
@endpush