@extends('layouts.app')

@section('title', 'Settings — Company')
@section('page-title', 'Company Settings')

@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="fw-bold mb-0">Company Settings</h4>
        <div class="text-muted small">Branding and contact details displayed across the backoffice</div>
    </div>
    <a href="{{ route('admin.settings.home-content.index') }}" class="btn btn-light btn-sm">
        <i class="bi bi-house-heart me-1"></i> Home Page Content
    </a>
</div>

{{--
    Remove-logo form is a standalone element OUTSIDE the settings form.
    The Remove button inside the settings form uses form="remove-logo-form" (HTML5 form
    association) to submit this form instead of the outer settings form.
    The global data-confirm handler in app.blade.php intercepts the submit event on this form.
--}}
@if(!empty($settings['company_logo']))
<form id="remove-logo-form"
      action="{{ route('admin.settings.company.logo.remove') }}"
      method="POST"
      data-confirm="Remove the company logo? This cannot be undone.">
    @csrf
    @method('DELETE')
</form>
@endif

<form action="{{ route('admin.settings.company.update') }}" method="POST" enctype="multipart/form-data">
    @csrf @method('PATCH')

    <div class="card border-0 shadow-sm">
        <div class="card-body p-4" style="max-width:600px">
            <h5 class="fw-bold mb-1">Company Logo</h5>
            <div class="text-muted small mb-3">
                The single image used everywhere the app shows its branding — the admin sidebar, and the site
                header and footer.
            </div>

            <div class="d-flex align-items-center gap-3 mb-2">
                @if(!empty($settings['company_logo']))
                    <img src="{{ asset('storage/' . $settings['company_logo']) }}"
                         alt="Company Logo"
                         style="max-height:64px;max-width:200px;object-fit:contain;border:1px solid #dee2e6;border-radius:6px;padding:6px;background:#fff"
                         id="logo-preview">
                    {{-- form="remove-logo-form" links this button to the standalone remove form above --}}
                    <button type="submit" form="remove-logo-form"
                            class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-trash me-1"></i> Remove
                    </button>
                @else
                    <div class="d-flex align-items-center justify-content-center bg-light rounded"
                         style="width:80px;height:64px;border:1px solid #dee2e6" id="logo-placeholder">
                        <i class="bi bi-building text-muted fs-4"></i>
                    </div>
                @endif
            </div>
            <input type="file" name="company_logo" id="logo-input"
                   class="form-control @error('company_logo') is-invalid @enderror"
                   accept="image/jpeg,image/jpg,image/png">
            @error('company_logo')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <div class="form-text">JPG or PNG, max 2 MB. Any aspect ratio — it's scaled to fit each location automatically.</div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mt-4">
        <div class="card-body p-4" style="max-width:600px">
            <h5 class="fw-bold mb-1">Company Info</h5>
            <div class="text-muted small mb-3">
                Used in page titles, emails, and property listings — not shown alongside the logo above.
            </div>

            {{-- Name --}}
            <div class="mb-3">
                <label class="form-label fw-medium" for="company_name">
                    Company Name <span class="text-danger">*</span>
                </label>
                <input type="text" name="company_name" id="company_name"
                       class="form-control @error('company_name') is-invalid @enderror"
                       value="{{ old('company_name', $settings['company_name']) }}" required maxlength="150">
                @error('company_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            {{-- Phone --}}
            <div class="mb-3">
                <label class="form-label fw-medium" for="company_phone">Phone</label>
                <input type="text" name="company_phone" id="company_phone"
                       class="form-control @error('company_phone') is-invalid @enderror"
                       value="{{ old('company_phone', $settings['company_phone']) }}" maxlength="30"
                       placeholder="+91 98765 43210">
                @error('company_phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            {{-- Email --}}
            <div class="mb-3">
                <label class="form-label fw-medium" for="company_email">Email</label>
                <input type="email" name="company_email" id="company_email"
                       class="form-control @error('company_email') is-invalid @enderror"
                       value="{{ old('company_email', $settings['company_email']) }}" maxlength="150"
                       placeholder="info@example.com">
                @error('company_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            {{-- Address --}}
            <div class="mb-4">
                <label class="form-label fw-medium" for="company_address">Address</label>
                <textarea name="company_address" id="company_address"
                          class="form-control @error('company_address') is-invalid @enderror"
                          rows="3" maxlength="500"
                          placeholder="Street, City, State, PIN">{{ old('company_address', $settings['company_address']) }}</textarea>
                @error('company_address')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg me-1"></i> Save Settings
            </button>
        </div>
    </div>
</form>

{{-- Standalone form (outside the card body it's referenced from below via
     form="") — same pattern as remove-logo-form above; the global
     data-confirm handler in layouts/app.blade.php intercepts its submit. --}}
<form id="regenerate-slugs-form"
      action="{{ route('admin.settings.property-maintenance.regenerate-public-slugs') }}"
      method="POST"
      data-confirm="Regenerate public_slug for every Published property? Old links keep working (they redirect to the new slug), but this updates a lot of rows at once and can't be undone.">
    @csrf
</form>

<div class="card border-0 shadow-sm mt-4">
    <div class="card-body p-4" style="max-width:600px">
        <h5 class="fw-bold mb-1">Property Slug Maintenance</h5>
        <div class="text-muted small mb-3">
            Regenerates every Published property's public URL slug from its current type/BHK/purpose/city
            (fixes any slug still carrying old full-address text from before that was excluded). Visitors with an
            old link keep working — the detail page redirects any outdated slug to the new one automatically.
        </div>
        <button type="submit" form="regenerate-slugs-form" class="btn btn-outline-primary">
            <i class="bi bi-arrow-repeat me-1"></i> Regenerate Property Slugs
        </button>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var input = document.getElementById('logo-input');
    if (input) {
        input.addEventListener('change', function () {
            var file = this.files[0];
            if (!file) return;
            var reader = new FileReader();
            reader.onload = function (e) {
                var preview     = document.getElementById('logo-preview');
                var placeholder = document.getElementById('logo-placeholder');
                if (preview) {
                    preview.src = e.target.result;
                } else if (placeholder) {
                    var img = document.createElement('img');
                    img.id = 'logo-preview';
                    img.src = e.target.result;
                    img.style.cssText = 'max-height:64px;max-width:200px;object-fit:contain;border:1px solid #dee2e6;border-radius:6px;padding:6px;background:#fff';
                    placeholder.replaceWith(img);
                }
            };
            reader.readAsDataURL(file);
        });
    }
}());
</script>
@endpush

@endsection