@extends('admin.layouts.master')

@section('title', __('lang.settings'))

@section('content')
    <x-ui.breadcrumb :items="[__('lang.settings') => null]" />
    <h1 class="h5 fw-semibold mb-4">{{ __('lang.settings') }}</h1>

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

        <ul class="nav nav-tabs mb-4" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-general" type="button" role="tab">{{ __('lang.general') }}</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-seo" type="button" role="tab">{{ __('lang.seo') }}</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-office-auth" type="button" role="tab">{{ __('lang.office_auth_settings') }}</button>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab-general" role="tabpanel">
                <div class="card mb-4">
                    <div class="card-body">
                        <x-ui.input name="name" :label="__('lang.platform_name')" :value="$settings->name" required />

                        <div class="mb-3">
                            <label class="form-label" for="primary_color">{{ __('lang.primary_color') }}</label>
                            <div class="d-flex align-items-center gap-2" style="max-width: 14rem;">
                                <input type="color" class="form-control form-control-color" id="primary_color" name="primary_color" value="{{ old('primary_color', $settings->primary_color) }}">
                                <input type="text" class="form-control" id="primary_color_hex" value="{{ old('primary_color', $settings->primary_color) }}" maxlength="7" placeholder="#RRGGBB">
                            </div>
                            @error('primary_color') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h2 class="h6 fw-semibold mb-3">{{ __('lang.branding_images') }}</h2>

                        <div class="row g-4">
                            <div class="col-sm-6 col-lg-4">
                                <label class="form-label d-block">{{ __('lang.logo') }}</label>
                                @if ($settings->logoUrl())
                                    <img src="{{ $settings->logoUrl() }}" alt="{{ __('lang.logo') }}" class="rounded-3 border mb-2 d-block" style="width: 4rem; height: 4rem; object-fit: cover;">
                                @else
                                    <div class="rounded-3 border d-flex align-items-center justify-content-center text-muted mb-2" style="width: 4rem; height: 4rem;">
                                        <i class="bi bi-image"></i>
                                    </div>
                                @endif
                                <input type="file" name="logo" class="form-control form-control-sm" accept="image/*">
                                @error('logo') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-sm-6 col-lg-4">
                                <label class="form-label d-block">{{ __('lang.favicon') }}</label>
                                @if ($settings->faviconUrl())
                                    <img src="{{ $settings->faviconUrl() }}" alt="{{ __('lang.favicon') }}" class="rounded-3 border mb-2 d-block" style="width: 4rem; height: 4rem; object-fit: cover;">
                                @else
                                    <div class="rounded-3 border d-flex align-items-center justify-content-center text-muted mb-2" style="width: 4rem; height: 4rem;">
                                        <i class="bi bi-image"></i>
                                    </div>
                                @endif
                                <input type="file" name="favicon" class="form-control form-control-sm" accept="image/*">
                                @error('favicon') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-sm-6 col-lg-4">
                                <label class="form-label d-block">{{ __('lang.header_image') }}</label>
                                @if ($settings->headerImageUrl())
                                    <img src="{{ $settings->headerImageUrl() }}" alt="{{ __('lang.header_image') }}" class="rounded-3 border mb-2 d-block" style="width: 4rem; height: 4rem; object-fit: cover;">
                                @else
                                    <div class="rounded-3 border d-flex align-items-center justify-content-center text-muted mb-2" style="width: 4rem; height: 4rem;">
                                        <i class="bi bi-image"></i>
                                    </div>
                                @endif
                                <input type="file" name="header_image" class="form-control form-control-sm" accept="image/*">
                                @error('header_image') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-seo" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <x-ui.input name="meta_title" :label="__('lang.meta_title')" :value="$settings->meta_title" />

                        <div class="mb-3">
                            <label class="form-label" for="meta_description">{{ __('lang.meta_description') }}</label>
                            <textarea class="form-control" id="meta_description" name="meta_description" rows="3">{{ old('meta_description', $settings->meta_description) }}</textarea>
                            @error('meta_description') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        <x-ui.input name="meta_keywords" :label="__('lang.meta_keywords')" :value="$settings->meta_keywords" />
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-office-auth" role="tabpanel">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label" for="office_auth_channel">{{ __('lang.office_auth_channel') }}</label>
                            <select name="office_auth_channel" id="office_auth_channel" class="form-select">
                                <option value="whatsapp" @selected(old('office_auth_channel', $settings->office_auth_channel) === 'whatsapp')>{{ __('lang.office_auth_channel_whatsapp') }}</option>
                                <option value="email" @selected(old('office_auth_channel', $settings->office_auth_channel) === 'email')>{{ __('lang.office_auth_channel_email') }}</option>
                            </select>
                            @error('office_auth_channel') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>

                <div class="card mb-4" id="officeAuthWhatsapp">
                    <div class="card-body">
                        <h2 class="h6 fw-semibold mb-3">{{ __('lang.whatsapp_settings') }}</h2>

                        <x-ui.input name="whatsapp_meta_access_token" type="password" :label="__('lang.whatsapp_meta_access_token')" placeholder="••••••••" />
                        <x-ui.input name="whatsapp_meta_phone_number_id" :label="__('lang.whatsapp_meta_phone_number_id')" :value="$settings->whatsapp_meta_phone_number_id" />
                        <x-ui.input name="whatsapp_otp_template" :label="__('lang.whatsapp_otp_template')" :value="$settings->whatsapp_otp_template" />
                        <x-ui.input name="whatsapp_otp_template_lang" :label="__('lang.whatsapp_otp_template_lang')" :value="$settings->whatsapp_otp_template_lang" />
                    </div>
                </div>

                <div class="card" id="officeAuthSmtp">
                    <div class="card-body">
                        <h2 class="h6 fw-semibold mb-3">{{ __('lang.smtp_settings') }}</h2>

                        <x-ui.input name="smtp_host" :label="__('lang.smtp_host')" :value="$settings->smtp_host" />
                        <x-ui.input name="smtp_port" type="number" :label="__('lang.smtp_port')" :value="$settings->smtp_port" />
                        <x-ui.input name="smtp_username" :label="__('lang.smtp_username')" :value="$settings->smtp_username" />
                        <x-ui.input name="smtp_password" type="password" :label="__('lang.smtp_password')" placeholder="••••••••" />
                        <x-ui.input name="smtp_encryption" :label="__('lang.smtp_encryption')" :value="$settings->smtp_encryption" placeholder="tls" />
                        <x-ui.input name="smtp_from_address" type="email" :label="__('lang.smtp_from_address')" :value="$settings->smtp_from_address" />
                        <x-ui.input name="smtp_from_name" :label="__('lang.smtp_from_name')" :value="$settings->smtp_from_name" />
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end mt-4">
            <x-button type="submit" variant="primary">{{ __('lang.save') }}</x-button>
        </div>
    </form>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const colorInput = document.getElementById('primary_color');
                const hexInput = document.getElementById('primary_color_hex');
                const hexPattern = /^#[0-9A-Fa-f]{6}$/;

                colorInput.addEventListener('input', function () {
                    hexInput.value = colorInput.value;
                });

                hexInput.addEventListener('input', function () {
                    const value = hexInput.value.trim();
                    if (hexPattern.test(value)) {
                        colorInput.value = value;
                    }
                });

                const channelSelect = document.getElementById('office_auth_channel');
                const whatsappCard = document.getElementById('officeAuthWhatsapp');
                const smtpCard = document.getElementById('officeAuthSmtp');

                function toggleAuthChannelCards() {
                    const isWhatsapp = channelSelect.value === 'whatsapp';
                    whatsappCard.classList.toggle('d-none', !isWhatsapp);
                    smtpCard.classList.toggle('d-none', isWhatsapp);
                }

                channelSelect.addEventListener('change', toggleAuthChannelCards);
                toggleAuthChannelCards();
            });
        </script>
    @endpush
@endsection