@extends('layouts.vendor')

@section('title', 'Store & Payment Settings')
@section('header_title', 'Store Profile & Direct Payment Setup')

@section('content')
    <style>
        .qr-preview-box {
            width: 140px;
            height: 140px;
            border-radius: 12px;
            background: #0f172a;
            border: 2px dashed rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        .qr-preview-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .qr-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(16, 185, 129, 0.15);
            color: var(--success);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
        }
    </style>

    <div class="card" style="max-width: 800px;">
        <form action="{{ route('vendor.profile.update') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Section 1: Store Information -->
            <h3 style="margin-bottom: 1.2rem; color: #fff;"><i class="fa-solid fa-store" style="color: var(--primary);"></i> Optical Store Information</h3>

            <div>
                <label>Optical Store / Brand Name *</label>
                <input type="text" name="vendor_name" value="{{ $user->vendorProfile->vendor_name ?? '' }}" required placeholder="e.g. VisionCraft Opticals">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label>Owner / Contact Person *</label>
                    <input type="text" name="name" value="{{ $user->name }}" required>
                </div>
                <div>
                    <label>Store Mobile / Phone *</label>
                    <input type="text" name="phone" value="{{ $user->phone }}" required>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label>WhatsApp Number for Customer Inquiries</label>
                    <input type="text" name="whatsapp_number" value="{{ $user->vendorProfile->whatsapp_number ?? $user->phone }}" placeholder="+91 9876543210">
                </div>
                <div>
                    <label>City *</label>
                    <input type="text" name="city" value="{{ $user->vendorProfile->city ?? '' }}" placeholder="Ahmedabad" required>
                </div>
            </div>

            <!-- Store Timings & Working Days -->
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                <div>
                    <label><i class="fa-regular fa-clock"></i> Opening Time</label>
                    <input type="text" name="opening_time" value="{{ $user->vendorProfile->opening_time ?? '10:00 AM' }}" placeholder="e.g. 10:00 AM">
                </div>
                <div>
                    <label><i class="fa-regular fa-clock"></i> Closing Time</label>
                    <input type="text" name="closing_time" value="{{ $user->vendorProfile->closing_time ?? '09:00 PM' }}" placeholder="e.g. 09:00 PM">
                </div>
                <div>
                    <label><i class="fa-regular fa-calendar-days"></i> Working Days</label>
                    <input type="text" name="working_days" value="{{ $user->vendorProfile->working_days ?? 'Mon - Sat' }}" placeholder="e.g. Mon - Sat">
                </div>
            </div>

            <div>
                <label>Store Logo Image (Optional)</label>
                <div style="display: flex; gap: 16px; align-items: center; margin-top: 4px;">
                    @if(!empty($user->vendorProfile->store_logo))
                        <img src="{{ $user->vendorProfile->store_logo }}" alt="Logo" style="height: 48px; border-radius: 8px; background: #000; border: 1px solid var(--border);">
                    @endif
                    <input type="file" name="store_logo" accept="image/*" style="padding: 0.4rem;">
                </div>
            </div>

            <div>
                <label>Store Physical Address</label>
                <textarea name="address" rows="2" placeholder="Full shop address, landmark, and pin code">{{ $user->vendorProfile->address ?? '' }}</textarea>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label>GPS Latitude (Store Locator Pin)</label>
                    <input type="text" name="latitude" id="latInput" value="{{ $user->vendorProfile->latitude ?? '23.0225' }}">
                </div>
                <div>
                    <label>GPS Longitude (Store Locator Pin)</label>
                    <input type="text" name="longitude" id="lngInput" value="{{ $user->vendorProfile->longitude ?? '72.5714' }}">
                </div>
            </div>
            <button type="button" class="btn" style="background: #334155; color: #fff; font-size: 0.8rem; padding: 0.4rem 0.8rem; margin-bottom: 1rem;" onclick="getCurrentGps()">
                <i class="fa-solid fa-location-crosshairs"></i> Get Current GPS Location
            </button>

            <script>
                function getCurrentGps() {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function(position) {
                            document.getElementById('latInput').value = position.coords.latitude.toFixed(6);
                            document.getElementById('lngInput').value = position.coords.longitude.toFixed(6);
                            alert('Location coordinates updated!');
                        }, function(err) {
                            alert('Could not fetch location: ' + err.message);
                        });
                    } else {
                        alert('Geolocation is not supported by your browser.');
                    }
                }
            </script>

            <hr style="border: 0; border-top: 1px solid var(--border); margin: 2rem 0 1.5rem;">

            <!-- Section 2: Direct Customer Payments (UPI & QR Code) -->
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem;">
                <h3 style="color: #fff; margin: 0;"><i class="fa-solid fa-qrcode" style="color: var(--accent);"></i> Direct Customer Payments (UPI & QR Code)</h3>
                <span class="qr-badge"><i class="fa-solid fa-shield-check"></i> Direct to Store</span>
            </div>
            <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.2rem;">
                Customers browsing your store catalog on the mobile app can pay you directly by scanning your store's UPI QR Code (Google Pay, PhonePe, Paytm, BHIM).
            </p>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start;">
                <div>
                    <label>Store UPI ID / VPA</label>
                    <input type="text" name="upi_id" value="{{ $user->vendorProfile->upi_id ?? '' }}" placeholder="e.g. visioncraft@upi or 9876543210@paytm">
                    <span style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 4px;">Supports instant 1-tap UPI app intents on mobile.</span>

                    <div style="margin-top: 1.2rem;">
                        <label>Payment Instructions for Customers</label>
                        <textarea name="payment_instructions" rows="2" placeholder="e.g. Scan QR to pay & WhatsApp payment screenshot with frame name.">{{ $user->vendorProfile->payment_instructions ?? '' }}</textarea>
                    </div>
                </div>

                <div>
                    <label>Upload Store UPI QR Code Image</label>
                    <div style="display: flex; gap: 16px; align-items: center; margin-top: 6px;">
                        <div class="qr-preview-box" id="qrPreviewBox">
                            @if(!empty($user->vendorProfile->upi_qr_code))
                                <img src="{{ $user->vendorProfile->upi_qr_code }}" alt="UPI QR Code" id="qrImg">
                            @else
                                <div id="noQrText" style="text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 8px;">
                                    <i class="fa-solid fa-qrcode" style="font-size: 2rem; margin-bottom: 6px; color: rgba(255,255,255,0.2);"></i><br>
                                    No QR Uploaded
                                </div>
                                <img src="" alt="QR" id="qrImg" style="display: none;">
                            @endif
                        </div>

                        <div>
                            <input type="file" name="upi_qr_code" id="upi_qr_file" accept="image/*" onchange="previewQr(this)" style="font-size: 0.85rem; padding: 0.5rem;">
                            <span style="display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 6px;">
                                Upload PNG, JPG, or screenshot of your Google Pay / PhonePe QR code.
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <hr style="border: 0; border-top: 1px solid var(--border); margin: 2rem 0 1.5rem;">

            <!-- Section 3: Bank Account Details -->
            <h3 style="margin-bottom: 1.2rem; color: #fff;"><i class="fa-solid fa-building-columns" style="color: var(--primary);"></i> Bank Account Details (NEFT / IMPS)</h3>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label>Account Holder Name</label>
                    <input type="text" name="account_holder_name" value="{{ $user->vendorProfile->account_holder_name ?? '' }}" placeholder="Store or Proprietor Name">
                </div>
                <div>
                    <label>Bank Name</label>
                    <input type="text" name="bank_name" value="{{ $user->vendorProfile->bank_name ?? '' }}" placeholder="e.g. HDFC Bank, SBI">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label>Bank Account Number</label>
                    <input type="text" name="account_number" value="{{ $user->vendorProfile->account_number ?? '' }}" placeholder="Account Number">
                </div>
                <div>
                    <label>IFSC Code</label>
                    <input type="text" name="ifsc_code" value="{{ $user->vendorProfile->ifsc_code ?? '' }}" placeholder="e.g. HDFC0001234">
                </div>
            </div>

            <hr style="border: 0; border-top: 1px solid var(--border); margin: 2rem 0 1.5rem;">

            <!-- Section 4: Custom Payment Gateway (Optional) -->
            <h3 style="margin-bottom: 0.5rem; color: #fff;"><i class="fa-solid fa-bolt" style="color: #F59E0B;"></i> Custom Online Gateway (Optional)</h3>
            <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.2rem;">
                If you have your own Razorpay Merchant Account and wish to accept direct card/netbanking payments on your store catalog.
            </p>

            <div>
                <label>Custom Razorpay Key ID (Optional)</label>
                <input type="text" name="custom_razorpay_key" value="{{ $user->vendorProfile->custom_razorpay_key ?? '' }}" placeholder="rzp_live_... or rzp_test_...">
            </div>

            <button type="submit" class="btn btn-primary" style="padding: 0.85rem 2.5rem; font-size: 1rem; margin-top: 1.5rem;">
                <i class="fa-solid fa-floppy-disk"></i> Save Store & Payment Settings
            </button>
        </form>
    </div>

    <script>
        function previewQr(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = document.getElementById('qrImg');
                    img.src = e.target.result;
                    img.style.display = 'block';
                    const noQr = document.getElementById('noQrText');
                    if (noQr) noQr.style.display = 'none';
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection
