@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>
</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

<div class="card border-0 shadow-sm">
    <div class="card-body p-4" style="max-width:600px">
        <form action="{{ route('admin.settings.company.update') }}" method="POST" enctype="multipart/form-data">
            @csrf @method('PATCH')

            {{-- Logo --}}
            <div class="mb-4">
                <label class="form-label fw-medium">Company Logo</label>
                <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. Displayed in the backoffice header.</div>
            </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>
        </form>
    </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