@extends('admin.layouts.app')
@section('title', 'Settings')

@section('content')
<div class="max-w-2xl space-y-6">

    {{-- Shop Details --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-700 mb-1">Shop Details</h3>
        <p class="text-xs text-slate-400 mb-5">Update your store information.</p>

        <form method="POST" action="{{ route('admin.settings.shop') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Shop Name</label>
                <input type="text" name="name" value="{{ $shop->name }}" required
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Email</label>
                <input type="email" name="email" value="{{ $shop->email }}" required
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <button type="submit" class="px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
                Save Changes
            </button>
        </form>
    </div>

    {{-- Change Password --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-700 mb-1">Change Password</h3>
        <p class="text-xs text-slate-400 mb-5">Use a strong password.</p>

        <form method="POST" action="{{ route('admin.settings.password') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Current Password</label>
                <input type="password" name="current_password" required
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500
                           @error('current_password') border-red-400 @enderror">
                @error('current_password')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">New Password</label>
                <input type="password" name="password" required minlength="8"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Confirm New Password</label>
                <input type="password" name="password_confirmation" required
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <button type="submit" class="px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
                Update Password
            </button>
        </form>
    </div>

    {{-- SDK Embed Code --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-700 mb-1">SDK Embed Code</h3>
        <p class="text-xs text-slate-400 mb-4">This is automatically injected via the Shopify Theme App Extension. For manual testing:</p>
        <div class="bg-slate-900 rounded-lg p-4 overflow-x-auto" x-data>
            <pre class="text-xs text-green-400 font-mono whitespace-pre-wrap">&lt;script src="{{ config('CDN_URL', 'https://cdn.yourdomain.com') }}/checkout-sdk.js"
  onload="window.ExternalCheckout.init({ shop: '{{ $shop->domain }}', apiUrl: '{{ config('app.url') }}' })"
  defer&gt;&lt;/script&gt;</pre>
        </div>
    </div>

    {{-- Account Info --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6">
        <h3 class="font-semibold text-slate-700 mb-4">Account Info</h3>
        <dl class="space-y-3 text-sm">
            <div class="flex justify-between"><dt class="text-slate-400">Name</dt><dd class="font-medium">{{ $user->name }}</dd></div>
            <div class="flex justify-between"><dt class="text-slate-400">Email</dt><dd class="font-medium">{{ $user->email }}</dd></div>
            <div class="flex justify-between"><dt class="text-slate-400">Role</dt><dd><span class="px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full text-xs font-medium">{{ ucfirst($user->role) }}</span></dd></div>
            <div class="flex justify-between"><dt class="text-slate-400">Shop Domain</dt><dd class="font-mono text-xs">{{ $shop->domain }}</dd></div>
            <div class="flex justify-between"><dt class="text-slate-400">Last Login</dt><dd class="text-slate-500">{{ $user->last_login_at?->diffForHumans() ?? 'First login' }}</dd></div>
        </dl>
    </div>

</div>
@endsection