@extends('layouts.app')

@section('page_title','System Settings')

@section('content')

@php
    $displayName = $settings['display_name'] ?? auth()->user()->name;
    $currency = $settings['currency'] ?? 'BDT';
    $dateFormat = $settings['date_format'] ?? 'd M Y';
    $firstDayOfWeek = $settings['first_day_of_week'] ?? 'saturday';
    $defaultTransactionDate = $settings['default_transaction_date'] ?? 'today';
    $dashboardPeriod = $settings['dashboard_period'] ?? 'this_month';
    $monthlyIncomeTarget = $settings['monthly_income_target'] ?? '';
    $lowBalanceAlert = $settings['low_balance_alert'] ?? '';
    $showWelcome = $settings['show_welcome'] ?? '1';
@endphp

<div class="max-w-3xl space-y-4">

    {{-- Finance Preferences --}}
    <div class="fp-card p-5">

        <h2 class="font-semibold text-[15px]">Finance Preferences</h2>

        <p class="fp-muted text-[11px] mt-1">
            Manage your financial display and planning preferences.
        </p>

        <form
            method="post"
            action="{{route('settings.save')}}"
            class="grid md:grid-cols-2 gap-4 mt-5"
        >
            @csrf

            {{-- Display Name --}}
            <div>
                <label class="text-[11px] font-semibold">
                    Display Name
                </label>

                <input
                    name="display_name"
                    value="{{old('display_name', $displayName)}}"
                    class="fp-input mt-1"
                    placeholder="FinancePro"
                    required
                >
            </div>


            {{-- Currency --}}
            <div>
                <label class="text-[11px] font-semibold">
                    Currency
                </label>

                <select name="currency" class="fp-input mt-1" required>

                    <option value="BDT" {{$currency === 'BDT' ? 'selected' : ''}}>
                        BDT — Bangladeshi Taka (৳)
                    </option>

                    <option value="USD" {{$currency === 'USD' ? 'selected' : ''}}>
                        USD — US Dollar ($)
                    </option>

                    <option value="EUR" {{$currency === 'EUR' ? 'selected' : ''}}>
                        EUR — Euro (€)
                    </option>

                    <option value="GBP" {{$currency === 'GBP' ? 'selected' : ''}}>
                        GBP — British Pound (£)
                    </option>

                    <option value="INR" {{$currency === 'INR' ? 'selected' : ''}}>
                        INR — Indian Rupee (₹)
                    </option>

                    <option value="SAR" {{$currency === 'SAR' ? 'selected' : ''}}>
                        SAR — Saudi Riyal
                    </option>

                    <option value="AED" {{$currency === 'AED' ? 'selected' : ''}}>
                        AED — UAE Dirham
                    </option>

                </select>
            </div>


            {{-- Date Format --}}
            <div>
                <label class="text-[11px] font-semibold">
                    Date Format
                </label>

                <select name="date_format" class="fp-input mt-1">

                    <option
                        value="Y-m-d"
                        {{$dateFormat === 'Y-m-d' ? 'selected' : ''}}
                    >
                        2026-08-14
                    </option>

                    <option
                        value="d M Y"
                        {{$dateFormat === 'd M Y' ? 'selected' : ''}}
                    >
                        14 Aug 2026
                    </option>

                    <option
                        value="d/m/Y"
                        {{$dateFormat === 'd/m/Y' ? 'selected' : ''}}
                    >
                        14/08/2026
                    </option>

                    <option
                        value="m/d/Y"
                        {{$dateFormat === 'm/d/Y' ? 'selected' : ''}}
                    >
                        08/14/2026
                    </option>

                    <option
                        value="F j, Y"
                        {{$dateFormat === 'F j, Y' ? 'selected' : ''}}
                    >
                        August 14, 2026
                    </option>

                </select>
            </div>


            {{-- First Day of Week --}}
            <div>
                <label class="text-[11px] font-semibold">
                    First Day of Week
                </label>

                <select name="first_day_of_week" class="fp-input mt-1">

                    <option
                        value="saturday"
                        {{$firstDayOfWeek === 'saturday' ? 'selected' : ''}}
                    >
                        Saturday
                    </option>

                    <option
                        value="sunday"
                        {{$firstDayOfWeek === 'sunday' ? 'selected' : ''}}
                    >
                        Sunday
                    </option>

                    <option
                        value="monday"
                        {{$firstDayOfWeek === 'monday' ? 'selected' : ''}}
                    >
                        Monday
                    </option>

                </select>
            </div>


            {{-- Default Transaction Date --}}
            <div>
                <label class="text-[11px] font-semibold">
                    Default Transaction Date
                </label>

                <select
                    name="default_transaction_date"
                    class="fp-input mt-1"
                >

                    <option
                        value="today"
                        {{$defaultTransactionDate === 'today' ? 'selected' : ''}}
                    >
                        Today
                    </option>

                    <option
                        value="last_used"
                        {{$defaultTransactionDate === 'last_used' ? 'selected' : ''}}
                    >
                        Last Used Date
                    </option>

                </select>

                <p class="fp-muted text-[9px] mt-1">
                    Controls the date automatically selected when adding a transaction.
                </p>
            </div>


            {{-- Dashboard Period --}}
            <div>
                <label class="text-[11px] font-semibold">
                    Dashboard Default Period
                </label>

                <select
                    name="dashboard_period"
                    class="fp-input mt-1"
                >

                    <option
                        value="this_month"
                        {{$dashboardPeriod === 'this_month' ? 'selected' : ''}}
                    >
                        This Month
                    </option>

                    <option
                        value="this_year"
                        {{$dashboardPeriod === 'this_year' ? 'selected' : ''}}
                    >
                        This Year
                    </option>

                </select>
            </div>


            {{-- Monthly Income Target --}}
            <div>
                <label class="text-[11px] font-semibold">
                    Monthly Income Target
                </label>

                <input
                    name="monthly_income_target"
                    type="number"
                    min="0"
                    step="0.01"
                    value="{{old('monthly_income_target', $monthlyIncomeTarget)}}"
                    class="fp-input mt-1"
                    placeholder="e.g. 50000"
                >

                <p class="fp-muted text-[9px] mt-1">
                    Optional monthly income target for planning.
                </p>
            </div>


            {{-- Low Balance Alert --}}
            <div>
                <label class="text-[11px] font-semibold">
                    Low Balance Alert
                </label>

                <input
                    name="low_balance_alert"
                    type="number"
                    min="0"
                    step="0.01"
                    value="{{old('low_balance_alert', $lowBalanceAlert)}}"
                    class="fp-input mt-1"
                    placeholder="e.g. 1000"
                >

                <p class="fp-muted text-[9px] mt-1">
                    Alert when an account balance falls below this amount.
                </p>
            </div>


            {{-- Welcome Message --}}
            <div class="md:col-span-2">

                <label class="flex items-center gap-3 cursor-pointer">

                    <input
                        type="checkbox"
                        name="show_welcome"
                        value="1"
                        {{$showWelcome === '1' ? 'checked' : ''}}
                        class="w-4 h-4"
                    >

                    <span>
                        <span class="block text-[11px] font-semibold">
                            Show Dashboard Welcome Message
                        </span>

                        <span class="block fp-muted text-[9px] mt-1">
                            Display the welcome message on the dashboard.
                        </span>
                    </span>

                </label>

            </div>


            {{-- Save --}}
            <div class="md:col-span-2 pt-2">

                <button class="fp-btn fp-primary">
                    Save Settings
                </button>

            </div>

        </form>

    </div>

</div>

@endsection