@extends('backEnd.layouts.master')
@section('title', 'Website Settings')

@push('styles')
<style>
.theme-options-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.to-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    min-height: 420px;
}
.to-panel-body { padding: 1.25rem 1.5rem; }
.to-img-preview .to-img-remove span {
    position: absolute; top: -8px; right: -8px;
    width: 22px; height: 22px; background: #ef4444; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1;
}
.to-save-btn {
    background: #22c55e; border: none; color: #fff;
    font-weight: 700; padding: 8px 28px; border-radius: 4px;
}
.to-save-btn:hover { background: #16a34a; color: #fff; }
.list-group-item { font-size: 13px; padding: 10px 14px; }
</style>
@endpush

@section('content')
@php $activeTab = $tab ?? 'logo'; @endphp
<div class="container-fluid py-3">
    <div class="mb-3">
        <h4 class="fw-bold mb-1">Website Settings</h4>
        <p class="text-muted small mb-0">Logo, general info, footer, SEO এবং অন্যান্য site configuration।</p>
    </div>

    <div class="row g-3">
        @include('backEnd.settings.partials.theme-tabs')

        <div class="col-md-9 col-lg-10">
                    <div class="to-panel">
                        <form action="{{ route('admin.settings.general.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="tab" value="{{ $activeTab }}">
                            <div class="to-panel-body">

                                @if($activeTab === 'logo')
                                    @include('backEnd.settings.partials.theme-tab-logo')

                                @elseif($activeTab === 'general')
                                    <div class="alert alert-light border py-2 px-3 mb-3 small">
                                        <strong>General</strong> = shop er basic info (name, contact, address, currency).
                                        Logo upload er jonno bam pase <a href="{{ route('admin.settings.general', ['tab' => 'logo']) }}"><strong>Logo</strong></a> tab e jan —
                                        <strong>Main Logo = Header Logo</strong> (250×85 px)।
                                        Contact info footer, contact page ও invoice এ দেখাবে।
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">Store Name</label>
                                            <input type="text" name="name" class="form-control" value="{{ old('name', $setting->name) }}" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">Email</label>
                                            <input type="email" name="email" class="form-control" value="{{ old('email', $setting->email) }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">Phone</label>
                                            <input type="text" name="phone" class="form-control" value="{{ old('phone', $setting->phone) }}" placeholder="01XXXXXXXXX">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">Secondary Phone</label>
                                            <input type="text" name="contact_phone2" class="form-control" value="{{ old('contact_phone2', $setting->contact_phone2) }}" placeholder="01XXXXXXXXX">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">WhatsApp Number</label>
                                            <input type="text" name="whatsapp_number" class="form-control" value="{{ old('whatsapp_number', $setting->whatsapp_number) }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">Business Hours</label>
                                            <input type="text" name="contact_hours" class="form-control" value="{{ old('contact_hours', $setting->contact_hours) }}" placeholder="Sat-Thu 9AM-6PM">
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label fw-semibold">Address</label>
                                            <textarea name="address" class="form-control" rows="2">{{ old('address', $setting->address) }}</textarea>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label fw-semibold">Google Maps Embed URL</label>
                                            <textarea name="map_embed" class="form-control" rows="2" placeholder="Paste Google Maps embed iframe src URL">{{ old('map_embed', $setting->map_embed) }}</textarea>
                                            <div class="form-text">Google Maps → Share → Embed a map → Copy the src URL</div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label fw-semibold">Description</label>
                                            <textarea name="description" class="form-control" rows="3">{{ old('description', $setting->description) }}</textarea>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Currency</label>
                                            <input type="text" name="currency" class="form-control" value="{{ old('currency', $setting->currency ?? 'BDT') }}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Currency Symbol</label>
                                            <input type="text" name="currency_symbol" class="form-control" value="{{ old('currency_symbol', $setting->currency_symbol ?? '৳') }}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Invoice Size</label>
                                            <select name="default_invoice_size" class="form-select">
                                                <option value="a4" {{ $setting->default_invoice_size == 'a4' ? 'selected' : '' }}>A4</option>
                                                <option value="a6" {{ $setting->default_invoice_size == 'a6' ? 'selected' : '' }}>A6</option>
                                                <option value="thermal" {{ $setting->default_invoice_size == 'thermal' ? 'selected' : '' }}>80mm Thermal</option>
                                            </select>
                                        </div>
                                        <div class="col-md-8">
                                            <label class="form-label fw-semibold">Timezone</label>
                                            <select name="timezone" class="form-select">
                                                @php $currentTz = old('timezone', $setting->timezone ?? 'Asia/Dhaka'); @endphp
                                                @foreach($timezones ?? config('timezones', []) as $tz => $label)
                                                    <option value="{{ $tz }}" @selected($currentTz === $tz)>{{ $label }}</option>
                                                @endforeach
                                                @if($currentTz && ! array_key_exists($currentTz, $timezones ?? config('timezones', [])))
                                                    <option value="{{ $currentTz }}" selected>{{ $currentTz }}</option>
                                                @endif
                                            </select>
                                            <div class="form-text">
                                                Current time:
                                                <strong id="settings-current-time">{{ now()->format('d M Y, h:i A') }}</strong>
                                                ({{ $currentTz }})
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="cod_enabled" id="codEnabled" {{ $setting->cod_enabled ? 'checked' : '' }}>
                                                <label class="form-check-label" for="codEnabled">Enable Cash on Delivery</label>
                                            </div>
                                            <div class="form-text">
                                                COD checkout এ দেখাবে শুধু যখন কোনো online gateway (bKash/SSL) active নেই এবং cart-এ advance payment required product নেই।
                                                Gateway active থাকলে COD auto hide হবে।
                                            </div>
                                        </div>
                                    </div>

                                    <hr class="my-4">
                                    <h6 class="fw-bold mb-3">Invoice Number Format</h6>
                                    <p class="small text-muted mb-3">
                                        Customer order tracking এ যে Invoice number দেখাবে সেটি এখান থেকে customize করুন।
                                        Preview: <strong>{{ $invoicePreview ?? 'INV-0001' }}</strong>
                                    </p>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Prefix</label>
                                            <input type="text" name="invoice_prefix" class="form-control" value="{{ old('invoice_prefix', $setting->invoice_prefix ?? 'INV') }}" maxlength="20">
                                            <div class="form-text">Example: INV, ORD, SHOP</div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Number Style</label>
                                            <select name="invoice_number_mode" class="form-select">
                                                @foreach($invoiceModes ?? \App\Services\InvoiceNumberService::modes() as $mode => $label)
                                                    <option value="{{ $mode }}" @selected(old('invoice_number_mode', $setting->invoice_number_mode ?? 'sequential') === $mode)>{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Sequential Pad Length</label>
                                            <input type="number" name="invoice_pad_length" class="form-control" min="3" max="8" value="{{ old('invoice_pad_length', $setting->invoice_pad_length ?? 4) }}">
                                            <div class="form-text">INV-0001 = pad 4</div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Next Number</label>
                                            <input type="number" name="invoice_next_number" class="form-control" min="1" value="{{ old('invoice_next_number', $setting->invoice_next_number ?? 1) }}">
                                        </div>
                                        <div class="col-md-8 d-flex align-items-end">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="invoice_append_date" id="invoiceAppendDate" {{ old('invoice_append_date', $setting->invoice_append_date ?? false) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="invoiceAppendDate">Append date suffix (e.g. -14062026)</label>
                                            </div>
                                        </div>
                                    </div>

                                @elseif($activeTab === 'color')
                                    <div class="alert alert-info py-2 small mb-3">
                                        Section-wise colors (Footer, Nav, Hero, Top bar…) change করতে
                                        <a href="{{ route('admin.settings.theme.colors') }}" class="alert-link fw-semibold">Theme Color Settings</a>
                                        page ব্যবহার করুন — save করলে site এ auto sync হবে।
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Primary Color</label>
                                            <input type="color" name="primary_color" class="form-control form-control-color w-100" value="{{ old('primary_color', $setting->primary_color ?? '#22c55e') }}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Secondary Color</label>
                                            <input type="color" name="secondary_color" class="form-control form-control-color w-100" value="{{ old('secondary_color', $setting->secondary_color ?? '#16a34a') }}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Accent Color</label>
                                            <input type="color" name="accent_color" class="form-control form-control-color w-100" value="{{ old('accent_color', $setting->accent_color ?? '#f59e0b') }}">
                                        </div>
                                        <div class="col-12">
                                            <small class="text-muted">These colors apply to buttons, links and highlights on the storefront theme.</small>
                                        </div>
                                    </div>

                                @elseif($activeTab === 'header')
                                    <label class="form-label fw-semibold">Header Notice Text</label>
                                    <textarea name="header_notice" class="form-control" rows="4" placeholder="Top bar announcement text…">{{ old('header_notice', $setting->header_notice) }}</textarea>
                                    <small class="text-muted fst-italic">Shown as a scrolling or static notice in the website header.</small>

                                @elseif($activeTab === 'footer')
                                    @include('backEnd.settings.partials.theme-tab-footer')

                                @elseif($activeTab === 'trust_bar')
                                    @include('backEnd.settings.partials.theme-tab-trust-bar')

                                @elseif($activeTab === 'chat_widget')
                                    @include('backEnd.settings.partials.theme-tab-chat-widget')

                                @elseif($activeTab === 'banner')
                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Home Banner Image</label>
                                        <input type="file" name="banner_image" class="form-control" accept="image/*">
                                        @if($setting->banner_image)
                                        <div class="mt-2 position-relative d-inline-block">
                                            <img src="{{ asset($setting->banner_image) }}" alt="Banner" style="max-height:100px;border-radius:4px">
                                            <label class="to-img-remove position-absolute" style="top:-8px;right:-8px">
                                                <input type="checkbox" name="remove_banner_image" value="1" class="d-none">
                                                <span style="width:22px;height:22px;background:#ef4444;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer">×</span>
                                            </label>
                                        </div>
                                        @endif
                                    </div>
                                    <label class="form-label fw-semibold">Banner Link URL</label>
                                    <input type="url" name="banner_link" class="form-control" value="{{ old('banner_link', $setting->banner_link) }}" placeholder="https://">

                                @elseif($activeTab === 'language')
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="language_switcher" id="langSwitch" {{ ($setting->language_switcher ?? true) ? 'checked' : '' }}>
                                        <label class="form-check-label fw-semibold" for="langSwitch">Enable Language Switcher</label>
                                    </div>
                                    <label class="form-label fw-semibold">Default Language</label>
                                    <select name="default_language" class="form-select" style="max-width:220px">
                                        <option value="en" {{ ($setting->default_language ?? 'en') === 'en' ? 'selected' : '' }}>English</option>
                                        <option value="bn" {{ ($setting->default_language ?? 'en') === 'bn' ? 'selected' : '' }}>Bengali</option>
                                    </select>

                                @elseif($activeTab === 'product')
                                    @include('backEnd.settings.partials.theme-tab-product-items')

                                @elseif($activeTab === 'social')
                                    @php $platforms = ['facebook'=>'Facebook','instagram'=>'Instagram','youtube'=>'YouTube','twitter'=>'Twitter/X','tiktok'=>'TikTok']; @endphp
                                    @foreach($platforms as $plat => $label)
                                    @php $row = $socials->firstWhere('platform', $plat); @endphp
                                    <div class="row g-2 align-items-center mb-3">
                                        <div class="col-md-3"><span class="fw-semibold">{{ $label }}</span></div>
                                        <div class="col-md-7">
                                            <input type="url" name="social[{{ $plat }}][url]" class="form-control form-control-sm"
                                                   value="{{ old("social.{$plat}.url", $row->url ?? '') }}" placeholder="https://">
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="social[{{ $plat }}][status]" value="1"
                                                    {{ ($row->status ?? false) ? 'checked' : '' }}>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach

                                @elseif($activeTab === 'seo')
                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Meta Title</label>
                                        <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', $setting->meta_title) }}">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Meta Description</label>
                                        <textarea name="meta_description" class="form-control" rows="3">{{ old('meta_description', $setting->meta_description) }}</textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Meta Keywords</label>
                                        <input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords', $setting->meta_keywords) }}">
                                    </div>

                                @elseif($activeTab === 'robots')
                                    <label class="form-label fw-semibold">robots.txt Content</label>
                                    <textarea name="robots_txt" class="form-control font-monospace" rows="12" placeholder="User-agent: *&#10;Disallow:">{{ old('robots_txt', $setting->robots_txt ?? "User-agent: *\nDisallow:") }}</textarea>
                                    <div class="form-text mt-2">
                                        Live URL: <a href="{{ url('/robots.txt') }}" target="_blank">{{ url('/robots.txt') }}</a>
                                        — <code>Sitemap: {{ url('/sitemap.xml') }}</code> auto-append হবে যদি না দেন।
                                        Sitemap: <a href="{{ url('/sitemap.xml') }}" target="_blank">{{ url('/sitemap.xml') }}</a>
                                    </div>
                                @endif

                                <div class="mt-4 pt-3 border-top">
                                    <button type="submit" class="to-save-btn">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.to-img-remove span').forEach(el => {
    el.addEventListener('click', function() {
        const cb = this.closest('label')?.querySelector('input[type=checkbox]');
        if (cb) cb.checked = true;
    });
});
</script>
@endpush