@extends('layouts.app')
@section('title')
    CUSTOMER EDIT
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('customer.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card">
        <form method="post" action="{{ route('customer.update', $customer->id) }}">
            @csrf
            <div class="card-body">
                <div class="row">
                    <h5>Custmer Detail</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="name">Customer Name</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="name" name="name"
                                    value="{{ $customer->name }}" placeholder="Enter Name">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="code">Customer Code</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="code" name="code"
                                    value="{{ $customer->code }}" placeholder="Enter Code">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="phone">Phone No</label>
                            <div class="col-6">
                                <input type="number" class="form-control rounded-4" id="phone" name="phone"  min="0"
                                    value="{{ $customer->phone }}" placeholder="Enter Phone">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="fax">Fax</label>
                            <div class="col-6">
                                <input type="number" class="form-control rounded-4" id="fax" name="fax" min="0"
                                    value="{{ $customer->fax }}" placeholder="Enter Fax name">  
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="address">Address</label>
                            <div class="col-6">
                                <textarea name="address" id="address" class="form-control rounded-4" rows="1" placeholder="Enter Address">{{ $customer->address }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <h5>Contact Person Details</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="fax">Name</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="fax" name="contact_name"
                                    value="{{ $customer->contact_name }}" placeholder="Enter Contact name">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="contact_department">Department</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="contact_department"
                                    name="contact_department" value="{{ $customer->contact_department }}"
                                    placeholder="Enter Contact department">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="contact_phone_work">Phone(Office)</label>
                            <div class="col-6">
                                <input type="number" class="form-control rounded-4" id="contact_phone_work"
                                    name="contact_phone_work" value="{{ $customer->contact_phone_work }}"
                                    placeholder="Enter Contact phone work">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="contact_phone_mobile">Phone(Mobile)</label>
                            <div class="col-6">
                                <input type="number" class="form-control rounded-4" id="contact_phone_mobile"
                                    name="contact_phone_mobile" value="{{ $customer->contact_phone_mobile }}"
                                    placeholder="Enter Contact phone mobile">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="contact_email">Email</label>
                            <div class="col-6">
                                <input type="email" class="form-control rounded-4" id="contact_email"
                                    name="contact_email" value="{{ $customer->contact_email }}"
                                    placeholder="Enter Contact email">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="contact_fax">Fax</label>
                            <div class="col-6">
                                <input type="number" class="form-control rounded-4" id="contact_fax" name="contact_fax" min="0"
                                    value="{{ $customer->contact_fax }}" placeholder="Enter Contact fax">
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-12 mt-3" id="fields-container">
                        <h5>Shipping Location</h5>
                        <div class="text-end">
                            <button type="button" class="btn btn-primary mb-3" id="add-field-button">
                                + Add
                            </button>
                        </div>
                        @foreach ($customerlocations as $key => $customerlocation)
                            <div class="row mb-3 field-container">
                                <div class="col-lg-3 col-md-3">
                                    <label class="form-label" for="shipping_location{{ $key + 1 }}">Shipping
                                        Location</label>
                                </div>
                                <div class="col-lg-7 col-md-7 ">
                                    <div class="input-group">
                                        <input type="text" name="shipping_location[]"
                                            id="shipping_location{{ $key + 1 }}" class="form-control"
                                            placeholder="Enter Address"
                                            value="{{ $customerlocation->shipping_location }}">
                                             @if ($key > 0)
                    <button type="button" class="btn btn-danger btn-sm" onclick="this.closest('.row').remove();">
                        <i class="bi bi-trash"></i> 
                    </button>
                @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex gap-2 justify-content-end">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const addButton = document.getElementById('add-field-button');
            const fieldsContainer = document.getElementById('fields-container');
            let fieldCount = document.querySelectorAll('.field-container')
            .length; 

            addButton.addEventListener('click', () => {
                fieldCount++;

                const rowDiv = document.createElement('div');
                rowDiv.className = 'row mb-3 field-container';

                const labelDiv = document.createElement('div');
                labelDiv.className = 'col-lg-3';
                labelDiv.innerHTML =
                    `<label class="form-label" for="shipping_location${fieldCount}">Shipping Location</label>`;

                const parentInputDiv = document.createElement('div');
                parentInputDiv.className = 'col-lg-7 ';
                const inputDiv = document.createElement('div');
                inputDiv.className = 'form-group input-group';
                inputDiv.innerHTML = `
            <input type="text" name="shipping_location[]" id="shipping_location${fieldCount}" class="form-control" placeholder="Enter Address">
            <button type="button" class="btn btn-danger btn-sm" onclick="removeField(this)"><i class="bi bi-trash"></i></button>
        `;
        parentInputDiv.appendChild(inputDiv);
                rowDiv.appendChild(labelDiv);
                rowDiv.appendChild(parentInputDiv);

                fieldsContainer.appendChild(rowDiv);
            });
        });
        function removeField(button) {
            const fieldContainer = button.closest('.field-container');
            fieldContainer.remove();
        }
    </script>
@endsection