@extends('layouts.app')
@section('content')

<form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data" class="dedi-settings-form" id="settingsForm">
    @csrf

    <div class="page-header dedi-settings-header">
        <div class="page-title">
            <h4>Réglages</h4>
            <h6>Informations de l’entreprise affichées sur les tickets et documents</h6>
        </div>
        <div class="page-btn dedi-settings-header__actions">
            <a href="{{ route('dashboard') }}" class="btn dedi-btn-retour">Retour</a>
            <button type="submit" class="btn btn-submit">Enregistrer</button>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger dedi-settings-alert" role="alert">
            <strong>Impossible d’enregistrer.</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="row">
        {{-- Identité / Logo --}}
        <div class="col-lg-4 col-md-12">
            <div class="card dedi-settings-card">
                <div class="card-body">
                    <div class="dedi-settings-section-title">
                        <h5>Identité</h5>
                        <p>Logo et nom de l’entreprise</p>
                    </div>

                    <div class="dedi-logo-upload">
                        <div class="dedi-logo-upload__preview">
                            <img
                                id="logo_preview"
                                src="{{ asset('assets/img/' . ($settings->logo ?: 'logo.png')) }}"
                                alt="Logo {{ $settings->entreprise ?? 'DEDI SARL' }}"
                            >
                        </div>
                        <div class="dedi-logo-upload__actions">
                            <label for="logo" class="btn btn-outline-primary btn-sm mb-0">
                                Changer le logo
                            </label>
                            <input
                                type="file"
                                name="logo"
                                id="logo"
                                class="d-none @error('logo') is-invalid @enderror"
                                accept="image/png,image/jpeg,image/webp"
                            >
                            <small class="text-muted d-block mt-2">PNG, JPG ou WebP · max. 2 Mo</small>
                            @error('logo')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-0 mt-4">
                        <label for="entreprise" class="form-label">Nom de l’entreprise</label>
                        <input
                            type="text"
                            name="entreprise"
                            id="entreprise"
                            class="form-control @error('entreprise') is-invalid @enderror"
                            value="{{ old('entreprise', $settings->entreprise) }}"
                            maxlength="255"
                            required
                        >
                        @error('entreprise')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- Coordonnées --}}
        <div class="col-lg-8 col-md-12">
            <div class="card dedi-settings-card">
                <div class="card-body">
                    <div class="dedi-settings-section-title">
                        <h5>Coordonnées</h5>
                        <p>Téléphones et e-mails figurant sur les documents</p>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="no_telephone" class="form-label">Téléphone principal</label>
                            <input
                                type="text"
                                name="no_telephone"
                                id="no_telephone"
                                class="form-control @error('no_telephone') is-invalid @enderror"
                                value="{{ old('no_telephone', $settings->no_telephone) }}"
                                placeholder="Ex. 07 00 00 00 00"
                                maxlength="50"
                                required
                            >
                            @error('no_telephone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="no_telephone2" class="form-label">Téléphone secondaire <span class="text-muted fw-normal">(optionnel)</span></label>
                            <input
                                type="text"
                                name="no_telephone2"
                                id="no_telephone2"
                                class="form-control @error('no_telephone2') is-invalid @enderror"
                                value="{{ old('no_telephone2', $settings->no_telephone2) }}"
                                placeholder="Ex. 05 00 00 00 00"
                                maxlength="50"
                            >
                            @error('no_telephone2')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">E-mail principal</label>
                            <input
                                type="email"
                                class="form-control @error('email') is-invalid @enderror"
                                id="email"
                                name="email"
                                value="{{ old('email', $settings->email) }}"
                                maxlength="255"
                                required
                            >
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="email2" class="form-label">E-mail secondaire <span class="text-muted fw-normal">(optionnel)</span></label>
                            <input
                                type="email"
                                class="form-control @error('email2') is-invalid @enderror"
                                id="email2"
                                name="email2"
                                value="{{ old('email2', $settings->email2) }}"
                                maxlength="255"
                            >
                            @error('email2')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="card dedi-settings-card">
                <div class="card-body">
                    <div class="dedi-settings-section-title">
                        <h5>Adresse & horaires</h5>
                        <p>Informations de localisation</p>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="horaires" class="form-label">Horaires</label>
                            <input
                                type="text"
                                class="form-control @error('horaires') is-invalid @enderror"
                                id="horaires"
                                name="horaires"
                                value="{{ old('horaires', $settings->horaires) }}"
                                placeholder="Ex. Lun–Sam 8h–18h"
                                maxlength="255"
                                required
                            >
                            @error('horaires')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="adresse" class="form-label">Adresse</label>
                            <input
                                type="text"
                                class="form-control @error('adresse') is-invalid @enderror"
                                id="adresse"
                                name="adresse"
                                value="{{ old('adresse', $settings->adresse) }}"
                                placeholder="BP, ville…"
                                maxlength="255"
                            >
                            @error('adresse')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-12 mb-0">
                            <label for="adresse2" class="form-label">Adresse complémentaire <span class="text-muted fw-normal">(optionnel)</span></label>
                            <input
                                type="text"
                                class="form-control @error('adresse2') is-invalid @enderror"
                                id="adresse2"
                                name="adresse2"
                                value="{{ old('adresse2', $settings->adresse2) }}"
                                maxlength="255"
                            >
                            @error('adresse2')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="card dedi-settings-card">
                <div class="card-body">
                    <div class="dedi-settings-section-title">
                        <h5>Message ticket</h5>
                        <p>Texte affiché en bas des reçus de vente</p>
                    </div>

                    <div class="mb-0">
                        <label for="message" class="form-label">Message</label>
                        <textarea
                            class="form-control @error('message') is-invalid @enderror"
                            id="message"
                            name="message"
                            rows="3"
                            maxlength="500"
                            placeholder="Ex. Merci pour votre confiance."
                        >{{ old('message', $settings->message) }}</textarea>
                        @error('message')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<style>
.dedi-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dedi-settings-header .page-title h4 {
    margin-bottom: 4px;
}

.dedi-settings-header .page-title h6 {
    margin: 0;
    color: var(--dedi-muted, #5B6475);
    font-weight: 500;
}

.dedi-settings-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dedi-settings-alert {
    border-radius: 8px;
    border: 1px solid #f1aeb5;
    background: #fff5f5;
    color: #842029;
    margin-bottom: 16px;
}

.dedi-settings-card {
    margin-bottom: 16px;
}

.dedi-settings-card .card-body {
    padding: 24px;
}

.dedi-settings-section-title {
    margin-bottom: 20px;
}

.dedi-settings-section-title h5 {
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--dedi-ink, #121826);
    margin: 0 0 4px;
}

.dedi-settings-section-title p {
    margin: 0;
    font-size: 13px;
    color: var(--dedi-muted, #5B6475);
}

.dedi-logo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 8px 0 4px;
}

.dedi-logo-upload__preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid var(--dedi-line, #E3E7EF);
    background: var(--dedi-blue-mist, #F3F6FC);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dedi-logo-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.dedi-settings-form .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dedi-ink, #121826);
    margin-bottom: 6px;
}

.dedi-settings-form .form-control {
    min-height: 42px;
    border-color: var(--dedi-line, #E3E7EF);
}

.dedi-settings-form textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.dedi-btn-retour {
    background: var(--dedi-gold, #FABA01) !important;
    border: 1px solid var(--dedi-gold, #FABA01) !important;
    color: var(--dedi-ink, #121826) !important;
    font-weight: 600;
    border-radius: 8px !important;
}

.dedi-btn-retour:hover {
    background: var(--dedi-gold-deep, #D4A000) !important;
    border-color: var(--dedi-gold-deep, #D4A000) !important;
    color: var(--dedi-ink, #121826) !important;
}

@media (max-width: 767.98px) {
    .dedi-settings-card .card-body {
        padding: 18px 16px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var input = document.getElementById('logo');
    var preview = document.getElementById('logo_preview');
    if (!input || !preview) return;

    input.addEventListener('change', function () {
        var file = this.files && this.files[0];
        if (!file) return;
        if (!file.type.startsWith('image/')) return;

        var reader = new FileReader();
        reader.onload = function (e) {
            preview.src = e.target.result;
        };
        reader.readAsDataURL(file);
    });
});
</script>

@endsection