@extends('layouts.omd.omd')

@section('title', 'Add Vendor')

@section('content')
            <div class="container py-4">
                <h2>Add New Vendor</h2>

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

                <form action="{{ route('omd.store.vendor') }}" method="POST" class="mt-3">
                    @csrf

                    {{-- Basic Info --}}
                    <div class="row g-3">

                        <div class="col-md-6">
                            <label class="form-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name"
                                class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name') }}" placeholder="e.g. John Doe">
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email"
                                class="form-control @error('email') is-invalid @enderror"
                                value="{{ old('email') }}" placeholder="e.g. john@example.com">
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone"
                                class="form-control @error('phone') is-invalid @enderror"
                                value="{{ old('phone') }}" placeholder="e.g. 9876543210">
                            @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Vendor Password <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" id="vendor_password" name="vendor_password"
                                    class="form-control @error('vendor_password') is-invalid @enderror">
                                <button type="button" class="btn btn-outline-primary"
                                    onclick="generatePassword('vendor_password')">Generate</button>
                            </div>
                            @error('vendor_password') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                    </div>

                    {{-- Company Details --}}
                    <div class="card mt-3">
                        <div class="card-header fw-semibold">Company Details</div>
                        <div class="card-body">
                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label class="form-label">Company Name <span class="text-danger">*</span></label>
                                    <input type="text" name="company_name"
                                        class="form-control @error('company_name') is-invalid @enderror"
                                        value="{{ old('company_name') }}" placeholder="e.g. ABC Pvt Ltd">
                                    @error('company_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">GST Number</label>
                                    <input type="text" name="gst_number" class="form-control"
                                        value="{{ old('gst_number') }}" placeholder="e.g. 22AAAAA0000A1Z5">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">PAN Number</label>
                                    <input type="text" name="pan_number" class="form-control"
                                        value="{{ old('pan_number') }}" placeholder="e.g. AAAAA0000A">
                                </div>

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


                    {{-- Products Sold --}}
                    <div class="card mt-3">
                        <div class="card-header fw-semibold">Products They Sell</div>
                        <div class="card-body">

                            <label class="form-label">Enter products</label>
                            <div id="product-container" class="d-flex flex-wrap gap-2 mb-2"></div>

                          <div class="d-flex gap-2 mt-2">
                                <input type="text" id="product-name" class="form-control" placeholder="Product name">
                                <input type="number" id="product-price" class="form-control" placeholder="Price">
                                <button type="button" class="btn btn-primary" onclick="addProduct()">Add</button>
                            </div>

                            <input type="hidden" name="products_sold" id="products_sold">

                            <small class="text-muted">Press comma to seperate</small>

                        </div>
                    </div>


                    {{-- Address --}}
                   <div class="card mt-3">
                        <div class="card-header fw-semibold">Address</div>
                        <div class="card-body">
                            <div class="row g-3">

                                <div class="col-md-12">
                                    <label class="form-label">Location</label>
                                    <input type="text" id="location" class="form-control" placeholder="Search location">
                                    <input type="hidden" name="address" id="address">
                                </div>
<!-- 
                                <div class="col-md-4">
                                    <label class="form-label">City</label>
                                    <input type="text" name="city" id="city" class="form-control" placeholder="City">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">State</label>
                                    <input type="text" name="state" id="state" class="form-control" placeholder="State">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Pincode</label>
                                    <input type="text" name="pincode" id="pincode" class="form-control" placeholder="Pincode">
                                </div> -->

                                <!-- Hidden Lat/Lng -->
                                <input type="hidden" name="latitude" id="latitude">
                                <input type="hidden" name="longitude" id="longitude">

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

                    {{-- Bank Details --}}
                    <div class="card mt-3">
                        <div class="card-header fw-semibold">Bank Details</div>
                        <div class="card-body">
                            <div class="row g-3">

                                <div class="col-md-4">
                                    <label class="form-label">Bank Name</label>
                                    <input type="text" name="bank_name" class="form-control"
                                        value="{{ old('bank_name') }}" placeholder="e.g. SBI, HDFC">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Account Number</label>
                                    <input type="text" name="account_number" class="form-control"
                                        value="{{ old('account_number') }}" placeholder="Account number">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">IFSC Code</label>
                                    <input type="text" name="ifsc_code" class="form-control"
                                        value="{{ old('ifsc_code') }}" placeholder="e.g. SBIN0001234">
                                </div>

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

                    <div class="mt-4">
                        <button type="submit" class="btn btn-success">Save Vendor</button>
                        <a href="{{ route('omd.dashboard') }}" class="btn btn-secondary">Back</a>
                    </div>

                </form>
            </div>


    <script>
        let products = [];

        function addProduct() {
            let name = document.getElementById('product-name').value.trim();
            let price = document.getElementById('product-price').value;

            if (!name || !price) return;

            products.push({ name: name.toLowerCase(), price: price });

            renderProducts();

            document.getElementById('product-name').value = '';
            document.getElementById('product-price').value = '';
        }

        function renderProducts() {
            let container = document.getElementById('product-container');
            container.innerHTML = '';

            products.forEach((p, index) => {
                container.innerHTML += `
                <span class="badge bg-primary p-2">
                    ${p.name} - ₹${p.price}
                    <span style="cursor:pointer;margin-left:5px;" onclick="removeProduct(${index})">×</span>
                </span>
            `;
            });

            document.getElementById('products_sold').value = JSON.stringify(products);
        }

        function removeProduct(index) {
            products.splice(index, 1);
            renderProducts();
        }
    </script>

@endsection