@extends('layouts.setup')

@section('header')
<div class="setup-header">
    <h1>Settings</h1>
    <p>Configure your preferences</p>
    <span class="step-counter">Step 3 of 3</span>
</div>
@endsection

@section('progress')
<div class="progress-wrapper">
    <div class="progress-bar">
        <div class="progress" style="width: 100%"></div>
    </div>
    <div class="progress-steps">
        <span class="step-label completed">
            <span class="step-num">✓</span> Branding
        </span>
        <span class="step-label completed">
            <span class="step-num">✓</span> Company
        </span>
        <span class="step-label active">
            <span class="step-num">3</span> Settings
        </span>
    </div>
</div>
@endsection

@section('content')
@php
    $tenantSlug = request()->segment(1);
@endphp

<form method="POST" action="{{ route('tenant.setup.settings.save', ['tenant' => $tenantSlug]) }}">
    @csrf

    <div class="form-row">
        <div class="form-group">
            <label>Currency Symbol</label>
            <input type="text" name="currency_symbol" value="{{ old('currency_symbol', $settings['currency_symbol'] ?? '₹') }}" maxlength="5" placeholder="₹">
            <span class="help-text">e.g., $, €, ₹, £</span>
        </div>

        <div class="form-group">
            <label>Currency Code</label>
            <input type="text" name="currency_code" value="{{ old('currency_code', $settings['currency_code'] ?? 'INR') }}" maxlength="5" placeholder="INR">
            <span class="help-text">e.g., USD, EUR, INR, GBP</span>
        </div>

        <div class="form-group">
            <label>Currency Position</label>
            <select name="currency_position">
                <option value="before" {{ old('currency_position', $settings['currency_position'] ?? 'before') == 'before' ? 'selected' : '' }}>Before (₹ 100)</option>
                <option value="after" {{ old('currency_position', $settings['currency_position'] ?? 'before') == 'after' ? 'selected' : '' }}>After (100 ₹)</option>
            </select>
            <span class="help-text">Where to display the currency symbol</span>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label>Timezone</label>
            <select name="timezone">
                <option value="Asia/Kolkata" {{ old('timezone', $settings['timezone'] ?? 'Asia/Kolkata') == 'Asia/Kolkata' ? 'selected' : '' }}>Asia/Kolkata (IST)</option>
                <option value="Asia/Dubai" {{ old('timezone', $settings['timezone'] ?? 'Asia/Kolkata') == 'Asia/Dubai' ? 'selected' : '' }}>Asia/Dubai (GST)</option>
                <option value="America/New_York" {{ old('timezone', $settings['timezone'] ?? 'Asia/Kolkata') == 'America/New_York' ? 'selected' : '' }}>America/New York (EST)</option>
                <option value="America/Los_Angeles" {{ old('timezone', $settings['timezone'] ?? 'Asia/Kolkata') == 'America/Los_Angeles' ? 'selected' : '' }}>America/Los Angeles (PST)</option>
                <option value="Europe/London" {{ old('timezone', $settings['timezone'] ?? 'Asia/Kolkata') == 'Europe/London' ? 'selected' : '' }}>Europe/London (GMT)</option>
                <option value="Europe/Paris" {{ old('timezone', $settings['timezone'] ?? 'Asia/Kolkata') == 'Europe/Paris' ? 'selected' : '' }}>Europe/Paris (CET)</option>
                <option value="Australia/Sydney" {{ old('timezone', $settings['timezone'] ?? 'Asia/Kolkata') == 'Australia/Sydney' ? 'selected' : '' }}>Australia/Sydney (AEDT)</option>
                <option value="UTC" {{ old('timezone', $settings['timezone'] ?? 'Asia/Kolkata') == 'UTC' ? 'selected' : '' }}>UTC</option>
            </select>
            <span class="help-text">Your local timezone</span>
        </div>

        <div class="form-group">
            <label>Date Format</label>
            <select name="date_format">
                <option value="d M Y" {{ old('date_format', $settings['date_format'] ?? 'd M Y') == 'd M Y' ? 'selected' : '' }}>15 Jan 2025</option>
                <option value="d/m/Y" {{ old('date_format', $settings['date_format'] ?? 'd M Y') == 'd/m/Y' ? 'selected' : '' }}>15/01/2025</option>
                <option value="m/d/Y" {{ old('date_format', $settings['date_format'] ?? 'd M Y') == 'm/d/Y' ? 'selected' : '' }}>01/15/2025</option>
                <option value="Y-m-d" {{ old('date_format', $settings['date_format'] ?? 'd M Y') == 'Y-m-d' ? 'selected' : '' }}>2025-01-15</option>
                <option value="d-m-Y" {{ old('date_format', $settings['date_format'] ?? 'd M Y') == 'd-m-Y' ? 'selected' : '' }}>15-01-2025</option>
            </select>
            <span class="help-text">How dates should be displayed</span>
        </div>

        <div class="form-group">
            <label>Time Format</label>
            <select name="time_format">
                <option value="h:i A" {{ old('time_format', $settings['time_format'] ?? 'h:i A') == 'h:i A' ? 'selected' : '' }}>02:30 PM (12-hour)</option>
                <option value="H:i" {{ old('time_format', $settings['time_format'] ?? 'h:i A') == 'H:i' ? 'selected' : '' }}>14:30 (24-hour)</option>
            </select>
            <span class="help-text">How times should be displayed</span>
        </div>
    </div>

    <div class="form-actions">
        <a href="{{ route('tenant.setup.company', ['tenant' => $tenantSlug]) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left" style="margin-right:8px;"></i> Back
        </a>
        <button type="submit" class="btn btn-success">
            <i class="fas fa-check" style="margin-right:8px;"></i> Complete Setup
        </button>
    </div>
</form>
@endsection