@extends('layouts.admin')

@section('title', trans('admin.Settings'))
@section('page-title', trans('admin.Settings'))

@section('content')

<style>
  #dpage-settings .switch-field{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; grid-column:1 / -1; padding:16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-alt); }
  #dpage-settings .switch-field .switch-copy b{ font-size:14px; }
  #dpage-settings .switch-field .switch-copy .hint{ display:block; margin-top:3px; }
  #dpage-settings .switch{ position:relative; width:42px; height:24px; flex-shrink:0; }
  #dpage-settings .switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
  #dpage-settings .switch-slider{ position:absolute; inset:0; background:var(--border-strong,var(--border)); border-radius:100px; transition:background .18s ease; }
  #dpage-settings .switch-slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .18s ease; box-shadow:0 1px 3px rgba(0,0,0,.25); }
  #dpage-settings .switch input:checked + .switch-slider{ background:var(--primary); }
  #dpage-settings .switch input:checked + .switch-slider::before{ transform:translateX(18px); }
  #dpage-settings #defaultInstructorField.is-required label .req-badge{ display:inline-block; }
  #dpage-settings .req-badge{ display:none; font-size:10.5px; font-weight:700; color:var(--primary); border:1px solid var(--primary); border-radius:100px; padding:1px 8px; margin-inline-start:8px; vertical-align:middle; }
  #dpage-settings .settings-card{ margin-bottom:16px; }
  #dpage-settings .settings-actions{ position:sticky; bottom:0; display:flex; justify-content:flex-end; padding:16px 22px; margin-top:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
</style>

<section class="dpage active" id="dpage-settings">
    <div class="page-head">
        <div><h2>{{ trans('admin.Settings') }}</h2></div>
    </div>

    <form method="post" action="" enctype="multipart/form-data">
        @csrf

        <div class="card settings-card">
            <div class="section-sub-head">
                <div><h3>{{ trans('admin.Branding') }}</h3><div class="sub">{{ trans('admin.Branding hint') }}</div></div>
            </div>
            <div class="card-pad">
                <div class="form-grid">
                    <div class="field" style="grid-column:1 / -1; display:flex; align-items:center; gap:16px;">
                        <img src="{{ getSiteLogo() }}" alt="{{ $data->site_name }}" style="width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--border); flex-shrink:0;">
                        <div style="flex-grow:1;">
                            <label>{{ trans('admin.Logo') }}</label>
                            <input type="file" name="logo" accept="image/*">
                            <span class="hint">{{ trans('admin.Replaces the logo shown across the site') }}</span>
                            @error('logo')
                                <span class="hint" style="color:var(--red);">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Site name') }}</label>
                        <input type="text" name="site_name" value="{{ isset($data) ? $data->site_name : old('site_name') }}" required>
                        @error('site_name')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Site color') }}</label>
                        <div style="display:flex; align-items:center; gap:10px;">
                            <input type="color" id="primaryColorPicker" value="{{ old('primary_color', $data->primary_color ?: '#C22513') }}" style="width:44px; height:38px; padding:2px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); cursor:pointer; flex-shrink:0;">
                            <input type="text" name="primary_color" id="primaryColorHex" value="{{ old('primary_color', $data->primary_color ?: '#C22513') }}" pattern="^#[A-Fa-f0-9]{6}$" maxlength="7" style="font-family:var(--font-mono); text-transform:uppercase;">
                            <button type="button" id="primaryColorReset" class="btn btn-ghost btn-sm" style="flex-shrink:0;">{{ trans('admin.Reset to default') }}</button>
                        </div>
                        <span class="hint">{{ trans('admin.Site color hint') }}</span>
                        @error('primary_color')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Site secondary color') }}</label>
                        <div style="display:flex; align-items:center; gap:10px;">
                            <input type="color" id="secondaryColorPicker" value="{{ old('secondary_color', $data->secondary_color ?: '#faf5ec') }}" style="width:44px; height:38px; padding:2px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); cursor:pointer; flex-shrink:0;">
                            <input type="text" name="secondary_color" id="secondaryColorHex" value="{{ old('secondary_color', $data->secondary_color ?: '#faf5ec') }}" pattern="^#[A-Fa-f0-9]{6}$" maxlength="7" style="font-family:var(--font-mono); text-transform:uppercase;">
                            <button type="button" id="secondaryColorReset" class="btn btn-ghost btn-sm" style="flex-shrink:0;">{{ trans('admin.Reset to default') }}</button>
                        </div>
                        <span class="hint">{{ trans('admin.Site secondary color hint') }}</span>
                        @error('secondary_color')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Contact email') }}</label>
                        <input type="email" name="contact_email" value="{{ old('contact_email', $data->contact_email) }}" maxlength="255" placeholder="info@example.com" dir="ltr">
                        <span class="hint">{{ trans('admin.Contact email hint') }}</span>
                        @error('contact_email')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.WhatsApp number') }}</label>
                        <input type="tel" name="whatsapp_number" value="{{ old('whatsapp_number', $data->whatsapp_number) }}" maxlength="16" pattern="^\+?[0-9]{7,15}$" placeholder="+201001234567" dir="ltr">
                        <span class="hint">{{ trans('admin.WhatsApp number hint') }}</span>
                        @error('whatsapp_number')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="card settings-card" style="display:none;">
            <input type="hidden" name="time_zone" value="{{ $data->time_zone }}">
            <input type="hidden" name="date_format" value="{{ $data->date_format }}">
        </div>

        <div class="card settings-card">
            <div class="section-sub-head">
                <div><h3>{{ trans('admin.Instructor settings') }}</h3><div class="sub">{{ trans('admin.Instructor settings hint') }}</div></div>
            </div>
            <div class="card-pad">
                <div class="form-grid">
                    <div class="switch-field">
                        <div class="switch-copy">
                            <b>{{ trans('admin.Multi instructors mode') }}</b>
                            <span class="hint">{{ trans('admin.When disabled, courses are always assigned to the default instructor') }}</span>
                        </div>
                        <span class="switch">
                            <input type="checkbox" id="multiInstructorsToggle" name="multi_instructors_mode" value="1" @if ($data->multi_instructors_mode) checked @endif>
                            <span class="switch-slider"></span>
                        </span>
                        @error('multi_instructors_mode')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field" id="defaultInstructorField">
                        <label>{{ trans('admin.Default instructor') }}<span class="req-badge">{{ trans('admin.Required') }}</span></label>
                        <select name="default_instructor_id" id="defaultInstructorSelect">
                            <option value="">—</option>
                            @foreach ($instructors as $instructor)
                                <option value="{{ $instructor->id }}" @if ($data->default_instructor_id == $instructor->id) selected @endif>{{ $instructor->user?->name }}</option>
                            @endforeach
                        </select>
                        <span class="hint">{{ trans('admin.Used for courses created by admins') }}</span>
                        @error('default_instructor_id')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="card settings-card">
            <div class="section-sub-head">
                <div><h3>{{ trans('admin.Site subscription plans') }}</h3><div class="sub">{{ trans('admin.Subscription pricing hint') }}</div></div>
            </div>
            <div class="card-pad">
                <div class="form-grid">
                    <div class="field">
                        <label>{{ trans('admin.Monthly price') }}</label>
                        <input type="number" name="subscription_price_monthly" step="0.01" min="0" value="{{ round($data->subscription_price_monthly) }}">
                        @error('subscription_price_monthly')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Quarterly price') }}</label>
                        <input type="number" name="subscription_price_quarterly" step="0.01" min="0" value="{{ round($data->subscription_price_quarterly) }}">
                        @error('subscription_price_quarterly')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Half-yearly price') }}</label>
                        <input type="number" name="subscription_price_half_yearly" step="0.01" min="0" value="{{ round($data->subscription_price_half_yearly) }}">
                        @error('subscription_price_half_yearly')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Yearly price') }}</label>
                        <input type="number" name="subscription_price_yearly" step="0.01" min="0" value="{{ round($data->subscription_price_yearly) }}">
                        @error('subscription_price_yearly')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="card settings-card">
            <div class="section-sub-head">
                <div><h3>{{ trans('admin.Gamification points') }}</h3><div class="sub">{{ trans('admin.Gamification points hint') }}</div></div>
            </div>
            <div class="card-pad">
                <div class="form-grid">
                    <div class="field">
                        <label>{{ trans('admin.Points per completed lesson') }}</label>
                        <input type="number" name="lesson_points" step="1" min="0" value="{{ $data->lesson_points }}">
                        @error('lesson_points')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Points per course review') }}</label>
                        <input type="number" name="review_points" step="1" min="0" value="{{ $data->review_points }}">
                        @error('review_points')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="field">
                        <label>{{ trans('admin.Points for passing an exam') }}</label>
                        <input type="number" name="exam_pass_points" step="1" min="0" value="{{ $data->exam_pass_points }}">
                        @error('exam_pass_points')
                            <span class="hint" style="color:var(--red);">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        @if (auth('user')->user()->has_permission('update-settings'))
            <div class="settings-actions">
                <button type="submit" class="btn btn-primary">{{ trans('admin.Save') }}</button>
            </div>
        @endif
    </form>
</section>

@endsection

@section('script')
<script>
  (function(){
    var toggle = document.getElementById('multiInstructorsToggle');
    var field  = document.getElementById('defaultInstructorField');
    var select = document.getElementById('defaultInstructorSelect');
    if(!toggle || !field || !select) return;

    function sync(){
      var singleMode = !toggle.checked;
      field.classList.toggle('is-required', singleMode);
      select.required = singleMode;
    }

    toggle.addEventListener('change', sync);
    sync();
  })();

  (function(){
    var DEFAULT_COLOR = '#C22513';
    var picker = document.getElementById('primaryColorPicker');
    var hex    = document.getElementById('primaryColorHex');
    var reset  = document.getElementById('primaryColorReset');
    if(!picker || !hex || !reset) return;

    picker.addEventListener('input', function(){ hex.value = picker.value.toUpperCase(); });
    hex.addEventListener('input', function(){
        if(/^#[A-Fa-f0-9]{6}$/.test(hex.value)) picker.value = hex.value;
    });
    reset.addEventListener('click', function(){
        picker.value = DEFAULT_COLOR;
        hex.value = DEFAULT_COLOR;
    });
  })();

  (function(){
    var DEFAULT_COLOR = '#faf5ec';
    var picker = document.getElementById('secondaryColorPicker');
    var hex    = document.getElementById('secondaryColorHex');
    var reset  = document.getElementById('secondaryColorReset');
    if(!picker || !hex || !reset) return;

    picker.addEventListener('input', function(){ hex.value = picker.value.toUpperCase(); });
    hex.addEventListener('input', function(){
        if(/^#[A-Fa-f0-9]{6}$/.test(hex.value)) picker.value = hex.value;
    });
    reset.addEventListener('click', function(){
        picker.value = DEFAULT_COLOR;
        hex.value = DEFAULT_COLOR;
    });
  })();
</script>
@endsection