@extends('layouts.admin-master')
@section('title', 'Edit Vendor')
@section('style')
    @include('admin.style')
    <style>
        .edit-header-card {
            background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%);
            border-radius: 16px;
            padding: 28px 32px;
            color: #fff;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .edit-avatar-box {
            width: 80px; height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex; align-items: center; justify-content: center;
            font-size: 32px;
            border: 3px solid rgba(255,255,255,0.4);
            flex-shrink: 0;
        }
        .edit-header-info h3 { font-size: 1.4rem; font-weight: 700; margin: 0; }
        .edit-header-info p  { font-size: 0.9rem; opacity: 0.85; margin: 4px 0 0; }

        .section-card {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .section-card-header {
            padding: 16px 24px;
            border-bottom: 1px solid #f0f2f5;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .section-card-header .icon-box {
            width: 36px; height: 36px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 15px;
        }
        .section-card-header h6 {
            margin: 0; font-size: 0.95rem; font-weight: 700; color: #1a1a2e;
        }
        .section-card-body { padding: 24px; }

        .form-field-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 18px;
        }
        .form-field-row label {
            width: 150px;
            min-width: 150px;
            font-size: 0.82rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin: 0;
        }
        .form-field-row .field-wrap { flex: 1; }
        .form-control, .form-select {
            border-radius: 8px;
            border: 1.5px solid #e5e7eb;
            font-size: 0.9rem;
            padding: 9px 14px;
            color: #1a1a2e;
            transition: border-color 0.2s;
        }
        .form-control:focus, .form-select:focus {
            border-color: #1565c0;
            box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
        }

        .vendor-type-badge {
            display: inline-block;
            background: #e3f2fd;
            color: #1565c0;
            border-radius: 20px;
            padding: 3px 12px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .pincode-status {
            font-size: 11px;
            font-weight: 600;
            margin-top: 4px;
            display: block;
        }

        .btn-save {
            background: linear-gradient(135deg, #1565c0, #42a5f5);
            border: none; color: #fff;
            padding: 10px 32px; border-radius: 8px;
            font-weight: 600; font-size: 0.9rem;
            transition: opacity 0.2s;
        }
        .btn-save:hover { opacity: 0.9; color: #fff; }
        .btn-cancel {
            padding: 10px 28px; border-radius: 8px;
            font-size: 0.9rem; font-weight: 600;
        }

        @media (max-width: 576px) {
            .form-field-row { flex-direction: column; align-items: flex-start; }
            .form-field-row label { width: 100%; margin-bottom: 4px; }
        }
    </style>
@endsection
@section('content')
<div id="preloader"><div class="spinner"></div></div>

<aside class="sidebar-nav-wrapper">@include('admin.sidenav')</aside>
<div class="overlay"></div>

<main class="main-wrapper">
    @include('admin.header')

    <section class="section">
        <div class="container-fluid">

            {{-- Page Title --}}
            <div class="title-wrapper pt-30 mb-4">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h2 class="fw-bold" style="color:#1a1a2e;">Edit Vendor</h2>
                      
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger rounded-3 mb-4">
                    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                </div>
            @endif

            {{-- Header Card --}}
            <div class="edit-header-card">
                <div class="edit-avatar-box">
                    @if($vendor->brand_logo)
                        <img src="{{ $vendor->brand_logo_url }}" alt="{{ $vendor->vendor_name }}"
                            style="width:100%;height:100%;border-radius:50%;object-fit:cover;">
                    @else
                        <i class="fa-solid fa-store"></i>
                    @endif
                </div>
                <div class="edit-header-info">
                    <h3>{{ $vendor->vendor_name }}</h3>
                    <p>{{ $vendor->business_name ?? '—' }} &nbsp;·&nbsp;
                       <span style="background:rgba(255,255,255,0.2);border-radius:12px;padding:2px 10px;font-size:0.8rem;">{{ $vendor->vendor_type }}</span>
                    </p>
                    <p style="font-size:0.8rem; opacity:0.7;">
                        <i class="fa-solid fa-phone me-1"></i>{{ $vendor->user->phone ?? '—' }}
                        &nbsp;|&nbsp;<i class="fa-solid fa-envelope me-1"></i>{{ $vendor->user->email ?? '—' }}
                        &nbsp;·&nbsp; Vendor ID #{{ $vendor->id }}
                    </p>
                </div>
            </div>

            <form action="{{ route('vendor.update', $vendor->id) }}" method="POST" enctype="multipart/form-data" id="updateVendorForm">
                @csrf
                @method('PUT')

                <div class="row">

                    {{-- LEFT COLUMN --}}
                    <div class="col-lg-4">

                        {{-- Quick Info --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#e3f2fd;"><i class="fa-solid fa-circle-info" style="color:#1565c0;"></i></div>
                                <h6>Quick Info</h6>
                            </div>
                            <div class="section-card-body">
                                <div style="display:flex;flex-direction:column;gap:14px;">
                                    <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f3f4f6;">
                                        <span style="font-size:0.8rem;color:#6b7280;font-weight:600;">STATUS</span>
                                        @php $status = $vendor->status ?? 'pending'; @endphp
                                        <span class="badge" style="background:{{ $status === 'active' ? '#e8f5e9' : ($status === 'suspended' ? '#fce4ec' : '#fff8e1') }};color:{{ $status === 'active' ? '#2e7d32' : ($status === 'suspended' ? '#c62828' : '#f57f17') }};font-size:0.78rem;padding:5px 12px;border-radius:20px;">
                                            {{ ucfirst($status) }}
                                        </span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f3f4f6;">
                                        <span style="font-size:0.8rem;color:#6b7280;font-weight:600;">KYC</span>
                                        @if($vendor->user && $vendor->user->is_kyc_completed)
                                            <span style="background:#e8f5e9;color:#2e7d32;border-radius:20px;padding:4px 12px;font-size:0.78rem;font-weight:600;">Completed</span>
                                        @else
                                            <span style="background:#fff3e0;color:#e65100;border-radius:20px;padding:4px 12px;font-size:0.78rem;font-weight:600;">Pending</span>
                                        @endif
                                    </div>
                                    <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;">
                                        <span style="font-size:0.8rem;color:#6b7280;font-weight:600;">REGISTERED</span>
                                        <span style="font-size:0.82rem;color:#374151;">{{ $vendor->created_at->format('d M Y') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Brand Logo --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#ede9fe;"><i class="fa-solid fa-image" style="color:#7c3aed;"></i></div>
                                <h6>Brand Logo</h6>
                            </div>
                            <div class="section-card-body">
                                <div class="d-flex flex-column align-items-center gap-3">
                                    <img id="brandLogoPreview"
                                        src="{{ $vendor->brand_logo ? $vendor->brand_logo_url : 'https://placehold.co/120x120/ede9fe/7c3aed?text=Logo' }}"
                                        alt="Brand logo preview"
                                        style="width:120px;height:120px;border-radius:14px;object-fit:cover;border:1.5px solid #e5e7eb;background:#faf9ff;">
                                    <label class="btn btn-outline-secondary btn-cancel w-100 mb-0" style="cursor:pointer;">
                                        <i class="fa-solid fa-upload me-2"></i>Choose Logo
                                        <input type="file" name="brand_logo" id="brandLogoInput"
                                            accept="image/jpeg,image/png,image/webp" hidden>
                                    </label>
                                    <span style="font-size:11px;color:#9ca3af;text-align:center;">JPG, PNG or WEBP · max 2 MB</span>
                                </div>
                            </div>
                        </div>

                        {{-- Contact Details --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#fce4ec;"><i class="fa-solid fa-address-card" style="color:#e91e63;"></i></div>
                                <h6>Contact Details</h6>
                            </div>
                            <div class="section-card-body">
                                <div class="form-field-row">
                                    <label><i class="fa-solid fa-phone me-1" style="color:#e91e63;"></i>Phone</label>
                                    <div class="field-wrap">
                                        <input type="text" name="phone" class="form-control" maxlength="10"
                                            value="{{ old('phone', $vendor->user->phone ?? '') }}" required>
                                    </div>
                                </div>
                                <div class="form-field-row mb-0">
                                    <label><i class="fa-solid fa-envelope me-1" style="color:#6366f1;"></i>Email</label>
                                    <div class="field-wrap">
                                        <input type="email" name="email" class="form-control"
                                            value="{{ old('email', $vendor->user->email ?? '') }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    {{-- RIGHT COLUMN --}}
                    <div class="col-lg-8">

                        {{-- Business Details --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#e8f5e9;"><i class="fa-solid fa-briefcase" style="color:#2e7d32;"></i></div>
                                <h6>Business Details</h6>
                            </div>
                            <div class="section-card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Vendor Name</label>
                                            <div class="field-wrap">
                                                <input type="text" name="vendor_name" class="form-control"
                                                    value="{{ old('vendor_name', $vendor->vendor_name) }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Business Name</label>
                                            <div class="field-wrap">
                                                <input type="text" name="business_name" class="form-control"
                                                    value="{{ old('business_name', $vendor->business_name) }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Vendor Type</label>
                                            <div class="field-wrap">
                                                <select name="vendor_type" class="form-select" required>
                                                    @foreach(['APMC Trader','Commission Agent','e-NAM Trader','FPO','Private Aggregator'] as $type)
                                                        <option value="{{ $type }}" {{ old('vendor_type', $vendor->vendor_type) == $type ? 'selected' : '' }}>{{ $type }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Contact Person</label>
                                            <div class="field-wrap">
                                                <input type="text" name="contact_person" class="form-control"
                                                    value="{{ old('contact_person', $vendor->contact_person ?? '') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Address --}}
                        <div class="section-card">
                            <div class="section-card-header">
                                <div class="icon-box" style="background:#fff3e0;"><i class="fa-solid fa-location-dot" style="color:#e65100;"></i></div>
                                <h6>Address Information</h6>
                            </div>
                            <div class="section-card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Address Type</label>
                                            <div class="field-wrap">
                                                <select name="address_type" class="form-select" required>
                                                    @foreach(['Permanent','Current','Office','Market','Warehouse'] as $addrType)
                                                        <option value="{{ $addrType }}" {{ old('address_type', $vendor->user->addresses->first()->address_type ?? '') == $addrType ? 'selected' : '' }}>{{ $addrType }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Pincode</label>
                                            <div class="field-wrap">
                                                <input type="text" name="pin_code" id="pincode_field" class="form-control"
                                                    maxlength="6" required
                                                    value="{{ old('pin_code', $vendor->user->addresses->first()->pin_code ?? '') }}">
                                                <span class="pincode-status" id="pincode_status"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>State</label>
                                            <div class="field-wrap">
                                                <input type="text" name="state" id="vendor_state" class="form-control"
                                                    value="{{ old('state', $vendor->user->addresses->first()->state ?? '') }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>District</label>
                                            <div class="field-wrap">
                                                <input type="text" name="district" id="vendor_district" class="form-control"
                                                    value="{{ old('district', $vendor->user->addresses->first()->district ?? '') }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>City</label>
                                            <div class="field-wrap">
                                                <input type="text" name="city" class="form-control"
                                                    value="{{ old('city', $vendor->user->addresses->first()->city ?? '') }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Taluka</label>
                                            <div class="field-wrap">
                                                <input type="text" name="taluka" class="form-control"
                                                    value="{{ old('taluka', $vendor->user->addresses->first()->taluka ?? '') }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-field-row">
                                            <label>Village</label>
                                            <div class="field-wrap">
                                                <input type="text" name="village" class="form-control"
                                                    value="{{ old('village', $vendor->user->addresses->first()->village ?? '') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Actions --}}
                        <div class="d-flex gap-3 mb-5">
                            <button type="submit" id="saveBtn" class="btn btn-save">
                                <i class="fa-solid fa-floppy-disk me-2"></i>Save Changes
                            </button>
                            <a href="{{ route('vendor.view', $vendor->id) }}" class="btn btn-outline-secondary btn-cancel">
                                Cancel
                            </a>
                        </div>

                    </div>
                </div>
            </form>

        </div>
    </section>

    @include('admin.footer')

    @section('script')
    <script>
        // Pincode auto-fill
        document.getElementById('pincode_field').addEventListener('input', function() {
            const pincode = this.value.trim();
            const status  = document.getElementById('pincode_status');
            if (pincode.length === 6 && /^\d+$/.test(pincode)) {
                status.innerText = 'Fetching location…';
                status.style.color = '#6366f1';
                fetch(`https://api.postalpincode.in/pincode/${pincode}`)
                    .then(r => r.json())
                    .then(data => {
                        if (data[0].Status === 'Success') {
                            const info = data[0].PostOffice[0];
                            document.getElementById('vendor_state').value    = info.State;
                            document.getElementById('vendor_district').value = info.District;
                            status.innerText = '✓ Location found';
                            status.style.color = '#1565c0';
                        } else {
                            status.innerText = '✗ Pincode not found';
                            status.style.color = '#e53935';
                        }
                    })
                    .catch(() => { status.innerText = '✗ API error'; status.style.color = '#e53935'; });
            } else {
                status.innerText = '';
            }
        });

        // Brand logo live preview
        (function () {
            const input = document.getElementById('brandLogoInput');
            const preview = document.getElementById('brandLogoPreview');
            if (input) {
                input.addEventListener('change', function () {
                    const file = this.files && this.files[0];
                    if (file) preview.src = URL.createObjectURL(file);
                });
            }
        })();
    </script>
    @include('admin.script')
    @endsection
</main>
@endsection