@extends('layouts.app')

@section('title', 'Settings')

@section('content')

@php use Illuminate\Support\Facades\Storage; @endphp

<div class="px-8 py-8">

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-100 px-4 py-3 text-sm text-emerald-700">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- Page header --}}
    <div>
        <h1 class="text-xl font-semibold text-slate-900">Settings</h1>
        <p class="text-sm text-slate-400 mt-0.5">Manage your company profile</p>
    </div>

    {{-- Main layout --}}
    <div class="grid grid-cols-3 gap-8 mt-8">

        {{-- LEFT COLUMN (col-span-2) --}}
        <div class="col-span-2 space-y-6">

            {{-- CARD 1: Company Profile --}}
            <div class="bg-white border border-slate-100 rounded-xl overflow-hidden" data-card>

                <div class="px-6 py-4 border-b border-slate-100">
                    <p class="text-sm font-semibold text-slate-900">Company Profile</p>
                </div>

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

                    <div class="px-6 py-6 space-y-5">

                        {{-- Company Name --}}
                        <div>
                            <label for="name" class="block text-sm font-medium text-slate-700 mb-1.5">
                                Company Name
                                <span class="text-red-500 ml-0.5" aria-hidden="true">*</span>
                            </label>
                            <input
                                type="text"
                                id="name"
                                name="name"
                                value="{{ old('name', $company?->name) }}"
                                required
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent transition-colors @error('name') border-red-300 @enderror"
                                placeholder="Echt Solutions Inc."
                            >
                            @error('name')
                                <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Email + Phone --}}
                        <div class="grid grid-cols-2 gap-4">

                            <div>
                                <label for="email" class="block text-sm font-medium text-slate-700 mb-1.5">
                                    Email
                                </label>
                                <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    value="{{ old('email', $company?->email) }}"
                                    class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent transition-colors @error('email') border-red-300 @enderror"
                                    placeholder="hello@example.com"
                                >
                                @error('email')
                                    <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="phone" class="block text-sm font-medium text-slate-700 mb-1.5">
                                    Phone
                                </label>
                                <input
                                    type="text"
                                    id="phone"
                                    name="phone"
                                    value="{{ old('phone', $company?->phone) }}"
                                    class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent transition-colors @error('phone') border-red-300 @enderror"
                                    placeholder="+1 (555) 000-0000"
                                >
                                @error('phone')
                                    <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                        </div>

                        {{-- Address --}}
                        <div>
                            <label for="address" class="block text-sm font-medium text-slate-700 mb-1.5">
                                Address
                            </label>
                            <textarea
                                id="address"
                                name="address"
                                rows="3"
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent transition-colors resize-none @error('address') border-red-300 @enderror"
                                placeholder="123 Main Street, Suite 100&#10;City, State 00000"
                            >{{ old('address', $company?->address) }}</textarea>
                            @error('address')
                                <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Default Currency --}}
                        <div>
                            <label for="currency" class="block text-sm font-medium text-slate-700 mb-1.5">
                                Default Currency
                            </label>
                            <select
                                id="currency"
                                name="currency"
                                class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent transition-colors bg-white @error('currency') border-red-300 @enderror"
                            >
                                @foreach ($currencies as $c)
                                    <option
                                        value="{{ $c->value }}"
                                        @selected(
                                            old('currency')
                                                ? old('currency') === $c->value
                                                : $company?->currency?->value === $c->value
                                        )
                                    >{{ $c->value }} ({{ $c->symbol() }})</option>
                                @endforeach
                            </select>
                            @error('currency')
                                <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs text-slate-400 mt-1">
                                All revenue totals on the dashboard are displayed in this currency. Historical payment rates are preserved.
                            </p>
                        </div>

                    </div>

                    {{-- Form footer --}}
                    <div class="flex justify-end px-6 pt-4 pb-5 border-t border-slate-100">
                        <button
                            type="submit"
                            class="bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium px-4 py-2.5 rounded-lg transition-colors cursor-pointer"
                        >
                            Save Changes
                        </button>
                    </div>

                </form>

            </div>

            {{-- CARD 2: Company Logo --}}
            <div class="bg-white border border-slate-100 rounded-xl overflow-hidden" data-card>

                <div class="px-6 py-4 border-b border-slate-100">
                    <p class="text-sm font-semibold text-slate-900">Company Logo</p>
                </div>

                <div class="px-6 py-6">

                    {{-- Current logo or placeholder --}}
                    @if ($company?->logo_path && str_starts_with($company->logo_path, 'logos/'))
                        <img
                            src="{{ Storage::url($company->logo_path) }}"
                            alt="Company logo"
                            class="max-h-28 rounded-lg border border-slate-100"
                        >
                        <form
                            method="POST"
                            action="{{ route('settings.logo.delete') }}"
                            onsubmit="return confirm('Remove the company logo?')"
                            class="inline"
                        >
                            @csrf
                            @method('DELETE')
                            <button
                                type="submit"
                                class="text-xs text-red-500 hover:text-red-700 mt-3 inline-block transition-colors cursor-pointer"
                            >
                                Remove logo
                            </button>
                        </form>
                    @else
                        <div class="border-2 border-dashed border-slate-200 rounded-xl p-10 text-center">
                            <svg
                                class="w-8 h-8 text-slate-300 mx-auto mb-2"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                aria-hidden="true"
                            >
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <p class="text-sm text-slate-400">No logo uploaded</p>
                        </div>
                    @endif

                    {{-- Upload form --}}
                    <div class="mt-6 pt-5 border-t border-slate-100">
                        <form method="POST" action="{{ route('settings.logo.upload') }}" enctype="multipart/form-data">
                            @csrf

                            <label for="logo" class="text-sm font-medium text-slate-700 mb-2 block">
                                Upload new logo
                            </label>

                            <input
                                type="file"
                                id="logo"
                                name="logo"
                                accept="image/jpeg,image/png,image/webp"
                                class="text-sm text-slate-600 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200 file:cursor-pointer"
                            >

                            @error('logo')
                                <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                            @enderror

                            <p class="text-xs text-slate-400 mt-1.5">JPG, PNG or WebP &middot; Max 2 MB</p>

                            <button
                                type="submit"
                                class="bg-white border border-slate-200 hover:border-slate-300 text-slate-700 text-sm font-medium px-4 py-2.5 rounded-lg transition-colors mt-3 inline-flex items-center gap-2 cursor-pointer"
                            >
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                                </svg>
                                Upload Logo
                            </button>

                        </form>
                    </div>

                </div>

            </div>

        </div>

        {{-- RIGHT COLUMN (col-span-1) --}}
        <div class="col-span-1 space-y-6">

            {{-- CARD A: Account --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-card>

                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Account</p>

                <p class="text-sm font-semibold text-slate-900 mb-0.5">{{ auth()->user()->name }}</p>
                <p class="text-sm text-slate-500">{{ auth()->user()->email }}</p>

                <div class="mt-4 pt-4 border-t border-slate-50 space-y-2">
                    <a href="/profile" class="block text-sm text-sky-700 hover:underline">Edit profile</a>
                    <a href="/profile" class="block text-sm text-sky-700 hover:underline">Change password</a>
                </div>

            </div>

            {{-- CARD A2: Timezone --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-card>

                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Timezone</p>

                <p class="text-xs text-slate-400 mb-3">
                    Current: <span class="font-medium text-slate-700">{{ auth()->user()->timezone ?? 'UTC' }}</span>
                </p>

                <form method="POST" action="{{ route('user.timezone.manual') }}">
                    @csrf
                    @method('PATCH')

                    <select
                        name="timezone"
                        class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 bg-white focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent mb-3"
                    >
                        @php $currentTz = auth()->user()->timezone ?? 'UTC'; @endphp

                        <optgroup label="UTC">
                            <option value="UTC" @selected($currentTz === 'UTC')>UTC</option>
                        </optgroup>

                        <optgroup label="Europe">
                            <option value="Europe/London"    @selected($currentTz === 'Europe/London')>London (GMT/BST)</option>
                            <option value="Europe/Paris"     @selected($currentTz === 'Europe/Paris')>Paris (CET)</option>
                            <option value="Europe/Berlin"    @selected($currentTz === 'Europe/Berlin')>Berlin (CET)</option>
                            <option value="Europe/Amsterdam" @selected($currentTz === 'Europe/Amsterdam')>Amsterdam (CET)</option>
                        </optgroup>

                        <optgroup label="Asia — Pakistan">
                            <option value="Asia/Karachi" @selected($currentTz === 'Asia/Karachi')>Karachi (PKT +5)</option>
                        </optgroup>

                        <optgroup label="Asia — Gulf">
                            <option value="Asia/Dubai"  @selected($currentTz === 'Asia/Dubai')>Dubai (GST +4)</option>
                            <option value="Asia/Riyadh" @selected($currentTz === 'Asia/Riyadh')>Riyadh (AST +3)</option>
                        </optgroup>

                        <optgroup label="Asia — South">
                            <option value="Asia/Kolkata" @selected($currentTz === 'Asia/Kolkata')>Kolkata (IST +5:30)</option>
                            <option value="Asia/Dhaka"   @selected($currentTz === 'Asia/Dhaka')>Dhaka (BST +6)</option>
                        </optgroup>

                        <optgroup label="Americas">
                            <option value="America/New_York"    @selected($currentTz === 'America/New_York')>New York (ET)</option>
                            <option value="America/Chicago"     @selected($currentTz === 'America/Chicago')>Chicago (CT)</option>
                            <option value="America/Los_Angeles" @selected($currentTz === 'America/Los_Angeles')>Los Angeles (PT)</option>
                        </optgroup>

                        <optgroup label="Australia">
                            <option value="Australia/Sydney"    @selected($currentTz === 'Australia/Sydney')>Sydney (AEST)</option>
                            <option value="Australia/Melbourne" @selected($currentTz === 'Australia/Melbourne')>Melbourne (AEST)</option>
                        </optgroup>
                    </select>

                    @error('timezone')
                        <p class="text-xs text-red-600 mb-2">{{ $message }}</p>
                    @enderror

                    <button
                        type="submit"
                        class="w-full bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer"
                    >
                        Save Timezone
                    </button>
                </form>

            </div>

            {{-- CARD B: Danger Zone --}}
            <div class="bg-white border border-red-100 rounded-xl p-5" data-card>

                <p class="text-xs font-semibold text-red-400 uppercase tracking-wider mb-3">Danger Zone</p>

                <p class="text-sm font-medium text-slate-700 mb-1">Delete all company data</p>
                <p class="text-xs text-slate-400 mb-3">Contact support to manage account data.</p>

                <button
                    type="button"
                    disabled
                    title="Contact support to delete account data"
                    class="px-3 py-2 text-sm font-medium text-slate-400 bg-slate-50 border border-slate-200 rounded-lg cursor-not-allowed opacity-60"
                >
                    Delete Data
                </button>

            </div>

            {{-- CARD C: About --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-card>

                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">About EchtSol Ops</p>

                <div class="space-y-2">

                    <div class="flex items-center justify-between">
                        <span class="text-xs text-slate-400">Version</span>
                        <span class="text-xs font-medium text-slate-700">1.0.0</span>
                    </div>

                    <div class="flex items-center justify-between">
                        <span class="text-xs text-slate-400">Framework</span>
                        <span class="text-xs font-medium text-slate-700">Laravel 11</span>
                    </div>

                    <div class="flex items-center justify-between">
                        <span class="text-xs text-slate-400">UI</span>
                        <span class="text-xs font-medium text-slate-700">Tailwind CSS v3</span>
                    </div>

                </div>

                <div class="mt-4 pt-4 border-t border-slate-50">
                    <a href="#" class="text-xs text-sky-700 hover:underline">View on GitHub &rarr;</a>
                </div>

            </div>

        </div>

    </div>

</div>

<script>
(function() {
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;
    var Motion = window.Motion;
    if (!Motion) return;
    var cards = document.querySelectorAll('[data-card]');
    if (cards.length) {
        Motion.animate(cards, { opacity: [0, 1], y: [12, 0] }, { delay: Motion.stagger(0.07), duration: 0.25, easing: 'ease-out' });
    }
})();
</script>

@endsection