@extends('layouts.franchise', ['heading' => 'Profile & Settings'])

@section('content')
    @php
        $fp = optional($franchise);
        $themePreference = auth()->user()?->theme_preference;
        if (! in_array($themePreference, ['light', 'dark', 'auto'], true)) {
            $themePreference = auth()->user()?->dark_mode_enabled ? 'dark' : 'light';
        }
    @endphp
    <form method="POST" enctype="multipart/form-data" action="{{ route('franchise.profile.update') }}" class="space-y-4">
        @csrf

        <div class="user-card p-4">
            <div class="mb-3 text-sm font-semibold">Shop Details</div>
            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Shop Name</label>
                    <input name="name" value="{{ old('name', $fp->name) }}" required class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Owner Name</label>
                    <input name="owner_name" value="{{ old('owner_name', $fp->owner_name) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Mobile</label>
                    <input name="mobile" value="{{ old('mobile', $fp->mobile) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Email</label>
                    <input type="email" name="email" value="{{ old('email', $fp->email) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div class="md:col-span-2">
                    <label class="text-xs text-[var(--user-muted)]">Address</label>
                    <textarea name="address" rows="2" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">{{ old('address', $fp->address) }}</textarea>
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">City</label>
                    <input name="city" value="{{ old('city', $fp->city) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">State</label>
                    <input name="state" value="{{ old('state', $fp->state) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Pincode</label>
                    <input name="pincode" value="{{ old('pincode', $fp->pincode) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">GST Number</label>
                    <input name="gst_number" value="{{ old('gst_number', $fp->gst_number) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
            </div>
        </div>

        <div class="user-card p-4">
            <div class="mb-3 text-sm font-semibold">Bank & UPI</div>
            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Account Holder</label>
                    <input name="bank_account_holder" value="{{ old('bank_account_holder', $fp->bank_account_holder) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Account Number</label>
                    <input name="bank_account_number" value="{{ old('bank_account_number', $fp->bank_account_number) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">IFSC</label>
                    <input name="bank_ifsc" value="{{ old('bank_ifsc', $fp->bank_ifsc) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Bank Name</label>
                    <input name="bank_name" value="{{ old('bank_name', $fp->bank_name) }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
                <div class="md:col-span-2">
                    <label class="text-xs text-[var(--user-muted)]">UPI ID</label>
                    <input name="upi_id" value="{{ old('upi_id', $fp->upi_id) }}" placeholder="name@bank" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                </div>
            </div>
        </div>

        <div class="user-card p-4">
            <div class="mb-3 text-sm font-semibold">Compliance Documents</div>
            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                <div>
                    <label class="text-xs text-[var(--user-muted)]">Shop License (JPG/PNG/PDF)</label>
                    <input type="file" name="shop_license" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-xs">
                    @if(! empty($fp->shop_license_path))
                        <a href="{{ asset('storage/'.$fp->shop_license_path) }}" target="_blank" class="mt-1 inline-block text-xs text-[var(--user-primary)]">View current file</a>
                    @endif
                </div>
                <div>
                    <label class="text-xs text-[var(--user-muted)]">GST Certificate (JPG/PNG/PDF)</label>
                    <input type="file" name="gst_certificate" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-xs">
                    @if(! empty($fp->gst_certificate_path))
                        <a href="{{ asset('storage/'.$fp->gst_certificate_path) }}" target="_blank" class="mt-1 inline-block text-xs text-[var(--user-primary)]">View current file</a>
                    @endif
                </div>
            </div>
        </div>

        <div class="user-card p-4">
            <div class="mb-3 text-sm font-semibold">Preferences</div>
            <div>
                <label class="text-xs text-[var(--user-muted)]">Theme</label>
                <select name="theme_preference" data-theme-select class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
                    <option value="light" @selected($themePreference === 'light')>Light</option>
                    <option value="dark" @selected($themePreference === 'dark')>Dark</option>
                    <option value="auto" @selected($themePreference === 'auto')>Auto (System)</option>
                </select>
            </div>
        </div>

        <button class="rounded-lg bg-[var(--user-primary)] px-4 py-2 text-sm font-semibold text-white">Save Profile</button>
    </form>
@endsection