@extends('layouts.vendor.vendor')

@section('content')

    <div class="container">
        <div class="card shadow-sm">
            <div class="card-body">

                <h4 class="mb-4">Edit Vendor Profile</h4>

                {{-- Success --}}
                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                {{-- Error --}}
                @if(session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <form method="POST" action="{{ route('vendor.update', $vendor->id) }}">
                    @csrf

                    {{-- Company --}}
                    <div class="mb-4">
                        <label class="form-label fw-bold">Company Name</label>
                        <input type="text" name="company_name" class="form-control" value="{{ $vendor->company_name }}"
                            placeholder="Enter company name">
                    </div>

                    <hr>

                    {{-- Products --}}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="mb-0">Products You Sell</h5>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addProduct()">
                            + Add Product
                        </button>
                    </div>

                    {{-- Header Row --}}
                    <div class="row fw-bold mb-2">
                        <div class="col-md-5">Product Name</div>
                        <div class="col-md-4">Price</div>
                        <div class="col-md-3 text-center">Action</div>
                    </div>

                    <div id="products-wrapper">

                        @forelse($products as $index => $product)
                            <div class="row mb-2 product-row align-items-center">

                                <div class="col-md-5">
                                    <input type="text" name="products[{{ $index }}][name]" class="form-control"
                                        value="{{ $product['name'] ?? '' }}">
                                </div>

                                <div class="col-md-4">
                                    <input type="number" name="products[{{ $index }}][price]" class="form-control"
                                        value="{{ $product['price'] ?? '' }}">
                                </div>

                                <div class="col-md-3 text-center">
                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeRow(this)">
                                        Remove
                                    </button>
                                </div>

                            </div>
                        @empty

                            {{-- Default Row --}}
                            <div class="row mb-2 product-row align-items-center">

                                <div class="col-md-5">
                                    <input type="text" name="products[0][name]" class="form-control" placeholder="Product Name">
                                </div>

                                <div class="col-md-4">
                                    <input type="number" name="products[0][price]" class="form-control" placeholder="Price">
                                </div>

                                <div class="col-md-3 text-center">
                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeRow(this)">
                                        Remove
                                    </button>
                                </div>

                            </div>

                        @endforelse

                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-success px-4">Update Profile</button>
                    </div>

                </form>

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

    {{-- JS --}}
    <script>
        let index = {{ count($products ?? []) }};

        function addProduct() {
            let html = `
                <div class="row mb-2 product-row align-items-center">

                    <div class="col-md-5">
                        <input type="text" name="products[${index}][name]" class="form-control"
                            placeholder="Product Name">
                    </div>

                    <div class="col-md-4">
                        <input type="number" name="products[${index}][price]" class="form-control"
                            placeholder="Price">
                    </div>

                    <div class="col-md-3 text-center">
                        <button type="button" class="btn btn-outline-danger btn-sm"
                            onclick="removeRow(this)">
                            Remove
                        </button>
                    </div>

                </div>
            `;

            document.getElementById('products-wrapper').insertAdjacentHTML('beforeend', html);
            index++;
        }

        function removeRow(btn) {
            btn.closest('.product-row').remove();
        }
    </script>

@endsection