@php
    $resolvePreviewImage = function ($value, $default) {
        if (empty($value)) {
            return $default;
        }

        if (\Illuminate\Support\Str::startsWith($value, ['http://', 'https://', 'data:'])) {
            return $value;
        }

        $normalizedValue = ltrim($value, '/');
        $candidates = [$normalizedValue];

        if (!\Illuminate\Support\Str::startsWith($normalizedValue, 'uploads/')) {
            $candidates[] = 'uploads/' . $normalizedValue;
        }

        if (!\Illuminate\Support\Str::startsWith($normalizedValue, 'storage/')) {
            $candidates[] = 'storage/' . $normalizedValue;
        }

        $candidates[] = 'assets/admin/images/' . $normalizedValue;

        foreach ($candidates as $candidate) {
            if (file_exists(public_path($candidate))) {
                return asset($candidate);
            }
        }

        return asset($normalizedValue);
    };

    $websiteLogoValue = $settings->website_logo ?? null;
    $websiteLogoPreview = $resolvePreviewImage($websiteLogoValue, asset('assets/web/images/logo.svg'));

    $faviconValue = $settings->favicon ?? null;
    $faviconPreview = $resolvePreviewImage($faviconValue, asset('assets/web/images/logo.svg'));

    $generalFields = [
        ['name' => 'website_name', 'type' => 'text', 'icon' => 'fal fa-globe'],
        ['name' => 'keywords', 'type' => 'text', 'icon' => 'fal fa-tags'],
        ['name' => 'meta_description', 'type' => 'text', 'icon' => 'fal fa-align-left'],
        ['name' => 'vat_value', 'type' => 'number', 'icon' => 'fal fa-percent', 'min' => 0, 'max' => 100],
    ];

    $mailFields = [
        ['name' => 'mail_driver', 'type' => 'text', 'icon' => 'fal fa-envelope-open-text'],
        ['name' => 'mail_host', 'type' => 'text', 'icon' => 'fal fa-server'],
        ['name' => 'mail_port', 'type' => 'number', 'icon' => 'fal fa-network-wired'],
        ['name' => 'mail_username', 'type' => 'text', 'icon' => 'fal fa-user'],
        ['name' => 'mail_password', 'type' => 'password', 'icon' => 'fal fa-lock-alt'],
        ['name' => 'mail_encryption', 'type' => 'text', 'icon' => 'fal fa-shield-check'],
        ['name' => 'mail_from_address', 'type' => 'email', 'icon' => 'fal fa-at'],
        ['name' => 'mail_from_name', 'type' => 'text', 'icon' => 'fal fa-signature'],
    ];

    $contactFields = [
        ['name' => 'site_phone', 'type' => 'tel', 'icon' => 'fal fa-phone-alt'],
        ['name' => 'site_email', 'type' => 'email', 'icon' => 'fal fa-envelope'],
        ['name' => 'site_address_ar', 'type' => 'text', 'icon' => 'fal fa-map-marker-alt'],
        ['name' => 'site_address_en', 'type' => 'text', 'icon' => 'fal fa-map-marker-alt'],
    ];

    $socialFields = [
        ['name' => 'whatsapp', 'type' => 'text', 'icon' => 'fab fa-whatsapp'],
        ['name' => 'instagram', 'type' => 'text', 'icon' => 'fab fa-instagram'],
        ['name' => 'twitter', 'type' => 'text', 'icon' => 'fab fa-x-twitter'],
        ['name' => 'facebook', 'type' => 'text', 'icon' => 'fab fa-facebook-f'],
    ];
@endphp

<style>
    .settings-shell {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .settings-hero,
    .settings-card {
        border: 0;
        border-radius: 24px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        box-shadow: 0 14px 35px rgba(15, 23, 42, 0.07);
    }

    .settings-hero {
        padding: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .settings-hero-title {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 700;
        color: #111827;
    }

    .settings-hero-note {
        margin: .45rem 0 0;
        color: #6b7280;
        max-width: 620px;
    }

    .settings-pill {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .7rem 1rem;
        border-radius: 999px;
        background: rgba(13, 110, 253, 0.08);
        color: #0d6efd;
        font-weight: 600;
    }

    .settings-card {
        padding: 1.5rem;
    }

    .settings-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }

    .settings-card-title {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        color: #111827;
    }

    .settings-card-note {
        margin: .35rem 0 0;
        color: #6b7280;
        font-size: .92rem;
    }

    .settings-grid {
        row-gap: 1rem;
    }

    .settings-field {
        height: 100%;
        padding: 1rem;
        border: 1px solid #e8edf5;
        border-radius: 20px;
        background: #fff;
    }

    .settings-label {
        display: flex;
        align-items: center;
        gap: .75rem;
        margin-bottom: .75rem;
        font-weight: 600;
        color: #374151;
    }

    .settings-label-icon {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eff6ff;
        color: #2563eb;
        flex-shrink: 0;
    }

    .settings-control {
        min-height: 48px;
        border-radius: 14px;
        border-color: #dbe3ef;
        box-shadow: none;
    }

    .settings-control:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .2rem rgba(13, 110, 253, 0.12);
    }

    .settings-branding {
        display: grid;
        grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: center;
    }

    .settings-upload-wrap {
        padding: 1rem;
        border: 1px dashed #d4deeb;
        border-radius: 20px;
        background: linear-gradient(180deg, #fcfdff 0%, #f5f7fb 100%);
    }

    .settings-upload-note {
        margin-top: .85rem;
        color: #6b7280;
        font-size: .88rem;
    }

    .settings-upload-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .85rem;
    }

    .settings-submit {
        display: flex;
        justify-content: center;
        margin-top: .5rem;
    }

    @media (max-width: 991.98px) {
        .settings-branding {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="border-item">
    <div class="settings-shell">
        <div class="settings-hero">
            <div>
                <h1 class="settings-hero-title">{{ __('settings.head') }}</h1>
                <p class="settings-hero-note">{{ __('settings.overview_note') }}</p>
            </div>
            <span class="settings-pill">
                <i class="fal fa-sliders-h"></i>
                {{ __('settings.edit') }}
            </span>
        </div>

        <form class="row g-4" method="post" action="{{ $settingsAction }}" enctype="multipart/form-data">
            @if ($settings)
                <input type="hidden" name="update" value="true">
            @endif
            @csrf

            <div class="col-12">
                <div class="settings-card">
                    <div class="settings-card-header">
                        <div>
                            <h2 class="settings-card-title">{{ __('settings.general_section') }}</h2>
                            <p class="settings-card-note">{{ __('settings.general_section_note') }}</p>
                        </div>
                    </div>

                    <div class="row settings-grid">
                        @foreach ($generalFields as $field)
                            <div class="col-xl-6">
                                <div class="settings-field">
                                    <label class="settings-label" for="{{ $field['name'] }}">
                                        <span class="settings-label-icon">
                                            <i class="{{ $field['icon'] }}"></i>
                                        </span>
                                        <span>{{ __('settings.' . $field['name']) }}</span>
                                    </label>
                                    <input
                                        id="{{ $field['name'] }}"
                                        type="{{ $field['type'] }}"
                                        class="form-control settings-control {{ $errors->has($field['name']) ? 'is-invalid' : '' }}"
                                        name="{{ $field['name'] }}"
                                        placeholder="{{ __('settings.' . $field['name']) }}"
                                        value="{{ old($field['name'], $settings->{$field['name']} ?? '') }}"
                                        @if (isset($field['min'])) min="{{ $field['min'] }}" @endif
                                        @if (isset($field['max'])) max="{{ $field['max'] }}" @endif
                                    />
                                    @if ($errors->has($field['name']))
                                        <div class="invalid-feedback d-block">{{ $errors->first($field['name']) }}</div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="settings-card">
                    <div class="settings-card-header">
                        <div>
                            <h2 class="settings-card-title">{{ __('settings.mail_section') }}</h2>
                            <p class="settings-card-note">{{ __('settings.mail_section_note') }}</p>
                        </div>
                    </div>

                    <div class="row settings-grid">
                        @foreach ($mailFields as $field)
                            <div class="col-xl-6">
                                <div class="settings-field">
                                    <label class="settings-label" for="{{ $field['name'] }}">
                                        <span class="settings-label-icon">
                                            <i class="{{ $field['icon'] }}"></i>
                                        </span>
                                        <span>{{ __('settings.' . $field['name']) }}</span>
                                    </label>
                                    <input
                                        id="{{ $field['name'] }}"
                                        type="{{ $field['type'] }}"
                                        class="form-control settings-control {{ $errors->has($field['name']) ? 'is-invalid' : '' }}"
                                        name="{{ $field['name'] }}"
                                        placeholder="{{ __('settings.' . $field['name']) }}"
                                        value="{{ old($field['name'], $settings->{$field['name']} ?? '') }}"
                                    />
                                    @if ($errors->has($field['name']))
                                        <div class="invalid-feedback d-block">{{ $errors->first($field['name']) }}</div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="settings-card">
                    <div class="settings-card-header">
                        <div>
                            <h2 class="settings-card-title">{{ __('settings.contact_section') }}</h2>
                            <p class="settings-card-note">{{ __('settings.contact_section_note') }}</p>
                        </div>
                    </div>

                    <div class="row settings-grid">
                        @foreach ($contactFields as $field)
                            <div class="col-xl-6">
                                <div class="settings-field">
                                    <label class="settings-label" for="{{ $field['name'] }}">
                                        <span class="settings-label-icon">
                                            <i class="{{ $field['icon'] }}"></i>
                                        </span>
                                        <span>{{ __('settings.' . $field['name']) }}</span>
                                    </label>
                                    <input
                                        id="{{ $field['name'] }}"
                                        type="{{ $field['type'] }}"
                                        class="form-control settings-control {{ $errors->has($field['name']) ? 'is-invalid' : '' }}"
                                        name="{{ $field['name'] }}"
                                        placeholder="{{ __('settings.' . $field['name']) }}"
                                        value="{{ old($field['name'], $settings->{$field['name']} ?? '') }}"
                                    />
                                    @if ($errors->has($field['name']))
                                        <div class="invalid-feedback d-block">{{ $errors->first($field['name']) }}</div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="settings-card">
                    <div class="settings-card-header">
                        <div>
                            <h2 class="settings-card-title">{{ __('settings.social_section') }}</h2>
                            <p class="settings-card-note">{{ __('settings.social_section_note') }}</p>
                        </div>
                    </div>

                    <div class="row settings-grid">
                        @foreach ($socialFields as $field)
                            <div class="col-xl-6">
                                <div class="settings-field">
                                    <label class="settings-label" for="{{ $field['name'] }}">
                                        <span class="settings-label-icon">
                                            <i class="{{ $field['icon'] }}"></i>
                                        </span>
                                        @if ($field['name'] == 'twitter')
                                            <span>{{ __('settings.x') }}</span>
                                        @else
                                        <span>{{ __('settings.' . $field['name']) }}</span>
                                        @endif
                                    </label>
                                    <input
                                        id="{{ $field['name'] }}"
                                        type="{{ $field['type'] }}"
                                        class="form-control settings-control {{ $errors->has($field['name']) ? 'is-invalid' : '' }}"
                                        name="{{ $field['name'] }}"
                                        placeholder="{{ __('settings.' . $field['name']) }}"
                                        value="{{ old($field['name'], $settings->{$field['name']} ?? '') }}"
                                    />
                                    @if ($errors->has($field['name']))
                                        <div class="invalid-feedback d-block">{{ $errors->first($field['name']) }}</div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="settings-card">
                    <div class="settings-card-header">
                        <div>
                            <h2 class="settings-card-title">{{ __('settings.branding_section') }}</h2>
                            <p class="settings-card-note">{{ __('settings.branding_section_note') }}</p>
                        </div>
                    </div>

                    <div class="row settings-grid">
                        <div class="col-xl-6">
                            <div class="settings-upload-wrap">
                                <div class="avatar-upload mb-0">
                                    <div class="avatar-preview">
                                        <div id="imagePreviewWebsiteLogo" style="background-image: url('{{ $websiteLogoPreview }}');"></div>
                                    </div>
                                    <div class="avatar-edit">
                                        <input type="file" name="website_logo" id="imageUploadWebsiteLogo" accept=".png, .jpg, .jpeg, .webp, .ico, .svg" />
                                        <label for="imageUploadWebsiteLogo">
                                            <i class="fal fa-upload me-2"></i> {{ __('settings.website_logo') }}
                                        </label>
                                    </div>
                                </div>
                                <div class="settings-upload-actions">
                                    <a
                                        class="btn btn-outline-primary btn-sm"
                                        id="websiteLogoPreviewButton"
                                        href="{{ $websiteLogoPreview }}"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        <i class="fal fa-eye me-1"></i>{{ __('settings.preview_image') }}
                                    </a>
                                </div>
                                <div class="settings-upload-note mt-2" id="websiteLogoSelectedFileName">
                                    {{ $websiteLogoValue ? basename($websiteLogoValue) : __('settings.no_file_selected') }}
                                </div>
                                <div class="settings-upload-note">{{ __('settings.logo_help') }}</div>
                                @if ($errors->has('website_logo'))
                                    <div class="invalid-feedback d-block mt-3">{{ $errors->first('website_logo') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="col-xl-6">
                            <div class="settings-upload-wrap">
                                <div class="avatar-upload mb-0">
                                    <div class="avatar-preview">
                                        <div id="imagePreviewFavicon" style="background-image: url('{{ $faviconPreview }}');"></div>
                                    </div>
                                    <div class="avatar-edit">
                                        <input type="file" name="favicon" id="imageUploadFavicon" accept=".png, .jpg, .jpeg, .webp, .ico, .svg" />
                                        <label for="imageUploadFavicon">
                                            <i class="fal fa-upload me-2"></i> {{ __('settings.favicon') }}
                                        </label>
                                    </div>
                                </div>
                                <div class="settings-upload-actions">
                                    <a
                                        class="btn btn-outline-primary btn-sm"
                                        id="faviconPreviewButton"
                                        href="{{ $faviconPreview }}"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        <i class="fal fa-eye me-1"></i>{{ __('settings.preview_image') }}
                                    </a>
                                </div>
                                <div class="settings-upload-note mt-2" id="faviconSelectedFileName">
                                    {{ $faviconValue ? basename($faviconValue) : __('settings.no_file_selected') }}
                                </div>
                                <div class="settings-upload-note">{{ __('settings.favicon_help') }}</div>
                                @if ($errors->has('favicon'))
                                    <div class="invalid-feedback d-block mt-3">{{ $errors->first('favicon') }}</div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 settings-submit">
                <button type="submit" class="blue-butn butn-st2 butn-md">
                    <span>{{ __('dashboard.save') }}</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script src="{{ asset('assets/admin/js/custom/imageUpload.js') }}"></script>
<script>
    (function () {
        function bindPreviewButton(fileInputId, previewId, buttonId, fileNameId) {
            var fileInput = document.getElementById(fileInputId);
            var preview = document.getElementById(previewId);
            var button = document.getElementById(buttonId);
            var fileName = document.getElementById(fileNameId);

            if (!fileInput || !preview || !button) {
                return;
            }

            fileInput.addEventListener('change', function () {
                if (this.files && this.files[0]) {
                    var objectUrl = URL.createObjectURL(this.files[0]);
                    preview.style.backgroundImage = 'url("' + objectUrl + '")';
                    button.href = objectUrl;
                    if (fileName) {
                        fileName.textContent = this.files[0].name;
                    }
                } else {
                    var backgroundImage = window.getComputedStyle(preview).backgroundImage || '';
                    button.href = backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
                    if (fileName) {
                        fileName.textContent = @json(__('settings.no_file_selected'));
                    }
                }
            });
        }

        bindPreviewButton('imageUploadWebsiteLogo', 'imagePreviewWebsiteLogo', 'websiteLogoPreviewButton', 'websiteLogoSelectedFileName');
        bindPreviewButton('imageUploadFavicon', 'imagePreviewFavicon', 'faviconPreviewButton', 'faviconSelectedFileName');
    })();
</script>