@extends("layouts.app")
@section("title", "Apparence & Marque")

@section("styles")
<style>
    .admin-card { background:white; border-radius:14px; border:1px solid #dde3e8; padding:28px; max-width:600px; }
    .admin-title { font-family:"Cormorant Garamond",serif; font-size:22px; font-weight:600; color:#2D4A5F; margin-bottom:24px; }
    .form-group { margin-bottom:18px; }
    .form-label { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6b7c8d; margin-bottom:6px; }
    .form-input { width:100%; padding:11px 14px; border:1px solid #dde3e8; border-radius:8px; font-size:13px; font-family:"Jost",sans-serif; color:#1e2d3a; outline:none; transition:border-color .2s; }
    .form-input:focus { border-color:#3a5f78; }
    .color-row { display:flex; align-items:center; gap:10px; }
    .color-preview { width:36px; height:36px; border-radius:8px; border:1px solid #dde3e8; flex-shrink:0; }
    .btn-save { background:#2D4A5F; color:#C8B47A; border:none; border-radius:10px; padding:12px 28px; font-size:13px; font-family:"Jost",sans-serif; font-weight:500; letter-spacing:.08em; cursor:pointer; }
    .btn-save:hover { background:#3a5f78; }
    .alert-success { background:#E1F5EE; border:1px solid #9FE1CB; border-radius:10px; padding:12px 16px; font-size:13px; color:#085041; margin-bottom:20px; }
    .logo-preview { max-height:60px; border-radius:8px; margin-top:8px; display:block; }
    .form-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
</style>
@endsection

@section("content")

@if(session("success"))
<div class="alert-success">✓ {{ session("success") }}</div>
@endif

<div class="admin-card">
    <div class="admin-title">🎨 Apparence & Marque blanche</div>

    <form method="POST" action="{{ route("admin.tenant.update") }}" enctype="multipart/form-data">
        @csrf @method("PUT")

        <div class="form-group">
            <label class="form-label">Nom de l'application</label>
            <input class="form-input" type="text" name="nom_app" value="{{ $tenant->nom_app }}" required>
        </div>

        <div class="form-group">
            <label class="form-label">Logo (PNG/JPG, max 1Mo)</label>
            <input class="form-input" type="file" name="logo" accept="image/*" onchange="previewLogo(this)">
            @if($tenant->logo)
                <img src="{{ Storage::url($tenant->logo) }}" class="logo-preview" id="logoPreview">
            @else
                <img src="" class="logo-preview" id="logoPreview" style="display:none">
            @endif
        </div>

        <div class="form-group">
            <label class="form-label">Couleurs</label>
            <div class="form-row">
                <div>
                    <div class="form-label">Principale</div>
                    <div class="color-row">
                        <div class="color-preview" id="prev1" style="background:{{ $tenant->couleur_principale }}"></div>
                        <input class="form-input" type="text" name="couleur_principale" value="{{ $tenant->couleur_principale }}" oninput="document.getElementById('prev1').style.background=this.value" placeholder="#2D4A5F">
                    </div>
                </div>
                <div>
                    <div class="form-label">Accent</div>
                    <div class="color-row">
                        <div class="color-preview" id="prev2" style="background:{{ $tenant->couleur_accent }}"></div>
                        <input class="form-input" type="text" name="couleur_accent" value="{{ $tenant->couleur_accent }}" oninput="document.getElementById('prev2').style.background=this.value" placeholder="#C8B47A">
                    </div>
                </div>
                <div>
                    <div class="form-label">Fond clair</div>
                    <div class="color-row">
                        <div class="color-preview" id="prev3" style="background:{{ $tenant->couleur_accent_pale }}"></div>
                        <input class="form-input" type="text" name="couleur_accent_pale" value="{{ $tenant->couleur_accent_pale }}" oninput="document.getElementById('prev3').style.background=this.value" placeholder="#f7f2e8">
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Email de contact</label>
            <input class="form-input" type="email" name="email_contact" value="{{ $tenant->email_contact }}">
        </div>

        <button type="submit" class="btn-save">Enregistrer</button>
    </form>
</div>

@endsection

@push("scripts")
<script>
function previewLogo(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = document.getElementById("logoPreview");
            img.src = e.target.result;
            img.style.display = "block";
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush