@extends('layouts.app')

@section('title', 'Edit Customer')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('customers.index') }}" class="text-decoration-none">Customers</a></li>
            <li class="breadcrumb-item active">Edit Customer</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center">
        <h2 class="h4 fw-bold mb-0">Edit Customer: {{ $customer->display_name ?: $customer->name }}</h2>
        <a href="{{ route('customers.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
            <i class="fas fa-times me-1"></i> Cancel
        </a>
    </div>
</div>

<form action="{{ route('customers.update', $customer) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-4">
            <!-- Header Section: Basic Info -->
            <div class="row g-4 mb-5">
                <div class="col-md-3">
                    <label class="form-label fw-semibold">Customer Type</label>
                </div>
                <div class="col-md-9">
                    <div class="d-flex gap-4">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="customer_type" id="type_business" value="Business" {{ $customer->customer_type == 'Business' ? 'checked' : '' }}>
                            <label class="form-check-label" for="type_business">Business</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="customer_type" id="type_individual" value="Individual" {{ $customer->customer_type == 'Individual' ? 'checked' : '' }}>
                            <label class="form-check-label" for="type_individual">Individual</label>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold">Primary Contact</label>
                </div>
                <div class="col-md-9">
                    <div class="row g-2">
                        <div class="col-md-3">
                            <select name="salutation" class="form-select">
                                <option value="">Salutation</option>
                                @foreach(['Mr.', 'Mrs.', 'Ms.', 'Miss.', 'Dr.'] as $sal)
                                    <option value="{{ $sal }}" {{ $customer->salutation == $sal ? 'selected' : '' }}>{{ $sal }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="first_name" class="form-control" value="{{ $customer->first_name }}" placeholder="First Name">
                        </div>
                        <div class="col-md-5">
                            <input type="text" name="last_name" class="form-control" value="{{ $customer->last_name }}" placeholder="Last Name">
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold">Company Name</label>
                </div>
                <div class="col-md-9">
                    <input type="text" name="company_name" class="form-control" value="{{ $customer->company_name }}" placeholder="Company Name">
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold text-danger">Display Name*</label>
                </div>
                <div class="col-md-9">
                    <input type="text" name="display_name" class="form-control @error('display_name') is-invalid @enderror" value="{{ $customer->display_name ?: $customer->name }}" placeholder="Select or type to add" required>
                    @error('display_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold">Email Address</label>
                </div>
                <div class="col-md-9">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="far fa-envelope text-muted"></i></span>
                        <input type="email" name="email" class="form-control border-start-0 @error('email') is-invalid @enderror" value="{{ $customer->email }}" placeholder="Email Address">
                    </div>
                    @error('email')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold">Phone</label>
                </div>
                <div class="col-md-9">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="input-group">
                                <span class="input-group-text bg-light">+91</span>
                                <input type="text" name="phone" class="form-control" value="{{ $customer->phone }}" placeholder="Work Phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group">
                                <span class="input-group-text bg-light">+91</span>
                                <input type="text" name="mobile_phone" class="form-control" value="{{ $customer->mobile_phone }}" placeholder="Mobile">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold">Customer Language</label>
                </div>
                <div class="col-md-9">
                    <select name="language" class="form-select">
                        <option value="English" {{ $customer->language == 'English' ? 'selected' : '' }}>English</option>
                        <option value="Hindi" {{ $customer->language == 'Hindi' ? 'selected' : '' }}>Hindi</option>
                        <option value="Gujarati" {{ $customer->language == 'Gujarati' ? 'selected' : '' }}>Gujarati</option>
                    </select>
                </div>
            </div>

            <!-- Tabbed Section -->
            <ul class="nav nav-pills custom-tabs mb-4 border-bottom pb-2" id="customerFormTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="other-tab" data-bs-toggle="tab" data-bs-target="#other" type="button">Other Details</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="address-tab" data-bs-toggle="tab" data-bs-target="#address" type="button">Address</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="contacts-tab" data-bs-toggle="tab" data-bs-target="#contacts" type="button">Contact Persons</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="remarks-tab" data-bs-toggle="tab" data-bs-target="#remarks" type="button">Remarks</button>
                </li>
            </ul>

            <div class="tab-content" id="customerFormTabsContent">
                <!-- Other Details -->
                <div class="tab-pane fade show active" id="other" role="tabpanel">
                    <div class="row g-4 max-width-700">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">PAN</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" name="pan_number" class="form-control" value="{{ $customer->pan_number }}" placeholder="PAN Number">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold text-danger">Currency*</label>
                        </div>
                        <div class="col-md-8">
                            <select name="currency" class="form-select bg-light" required>
                                @foreach($currencies as $code => $name)
                                    <option value="{{ $code }}" {{ $customer->currency == $code ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Accounts Receivable</label>
                        </div>
                        <div class="col-md-8">
                            <select name="receivable_account_id" class="form-select">
                                <option value="">Select an account</option>
                                @foreach($accounts as $account)
                                    <option value="{{ $account->id }}" {{ $customer->receivable_account_id == $account->id ? 'selected' : '' }}>{{ $account->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Opening Balance</label>
                        </div>
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-text bg-light overflow-hidden">INR</span>
                                <input type="number" name="opening_balance" class="form-control" value="{{ $customer->opening_balance ?? '0.00' }}" step="0.01">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Payment Terms</label>
                        </div>
                        <div class="col-md-8">
                            <select name="payment_terms" class="form-select">
                                @foreach(['Due on Receipt', 'Net 15', 'Net 30', 'Net 45', 'Net 60'] as $term)
                                    <option value="{{ $term }}" {{ $customer->payment_terms == $term ? 'selected' : '' }}>{{ $term }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Enable Portal?</label>
                        </div>
                        <div class="col-md-8">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="enable_portal" id="enable_portal" value="1" {{ $customer->enable_portal ? 'checked' : '' }}>
                                <label class="form-check-label text-muted" for="enable_portal">Allow portal access for this customer</label>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Documents</label>
                        </div>
                        <div class="col-md-8">
                            <div class="border border-dashed rounded-3 p-3 text-center bg-light">
                                <label for="documents" class="btn btn-outline-primary btn-sm mb-2">
                                    <i class="fas fa-upload me-1"></i> Upload File
                                </label>
                                <input type="file" name="documents[]" id="documents" class="d-none" multiple>
                                <p class="text-muted small mb-0">You can upload a maximum of 10 files, 10MB each</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Address Tab -->
                <div class="tab-pane fade" id="address" role="tabpanel">
                    <div class="row g-5">
                        <div class="col-md-6">
                            <h5 class="fw-bold mb-4">Billing Address</h5>
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Attention</label>
                                    <input type="text" name="billing_attention" class="form-control" value="{{ $customer->billing_attention }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Country/Region</label>
                                    <select name="billing_country" class="form-select">
                                        <option value="India" {{ $customer->billing_country == 'India' ? 'selected' : '' }}>India</option>
                                        <option value="United States" {{ $customer->billing_country == 'United States' ? 'selected' : '' }}>United States</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Address</label>
                                    <textarea name="billing_address" class="form-control mb-2" rows="2" placeholder="Street 1">{{ $customer->billing_address }}</textarea>
                                    <textarea name="billing_street2" class="form-control" rows="2" placeholder="Street 2">{{ $customer->billing_street2 }}</textarea>
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">City</label>
                                    <input type="text" name="billing_city" class="form-control" value="{{ $customer->billing_city }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">State</label>
                                    <input type="text" name="billing_state" class="form-control" value="{{ $customer->billing_state }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Pin Code</label>
                                    <input type="text" name="billing_zip" class="form-control" value="{{ $customer->billing_zip }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Phone</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light">+91</span>
                                        <input type="text" name="billing_phone" class="form-control" value="{{ $customer->billing_phone }}">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Fax Number</label>
                                    <input type="text" name="billing_fax" class="form-control" value="{{ $customer->billing_fax }}">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 border-start ps-md-5">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="fw-bold mb-0">Shipping Address</h5>
                                <button type="button" class="btn btn-link text-decoration-none btn-sm fw-semibold" onclick="copyBillingAddress()">
                                    <i class="fas fa-arrow-down me-1"></i> Copy billing address
                                </button>
                            </div>
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Attention</label>
                                    <input type="text" name="shipping_attention" id="shipping_attention" class="form-control" value="{{ $customer->shipping_attention }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Country/Region</label>
                                    <select name="shipping_country" id="shipping_country" class="form-select">
                                        <option value="India" {{ $customer->shipping_country == 'India' ? 'selected' : '' }}>India</option>
                                        <option value="United States" {{ $customer->shipping_country == 'United States' ? 'selected' : '' }}>United States</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Address</label>
                                    <textarea name="shipping_address" id="shipping_address" class="form-control mb-2" rows="2" placeholder="Street 1">{{ $customer->shipping_address }}</textarea>
                                    <textarea name="shipping_street2" id="shipping_street2" class="form-control" rows="2" placeholder="Street 2">{{ $customer->shipping_street2 }}</textarea>
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">City</label>
                                    <input type="text" name="shipping_city" id="shipping_city" class="form-control" value="{{ $customer->shipping_city }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">State</label>
                                    <input type="text" name="shipping_state" id="shipping_state" class="form-control" value="{{ $customer->shipping_state }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Pin Code</label>
                                    <input type="text" name="shipping_zip" id="shipping_zip" class="form-control" value="{{ $customer->shipping_zip }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Phone</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light">+91</span>
                                        <input type="text" name="shipping_phone" id="shipping_phone" class="form-control" value="{{ $customer->shipping_phone }}">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label text-muted small fw-bold">Fax Number</label>
                                    <input type="text" name="shipping_fax" id="shipping_fax" class="form-control" value="{{ $customer->shipping_fax }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Persons Tab -->
                <div class="tab-pane fade" id="contacts" role="tabpanel">
                    <div class="table-responsive mb-3">
                        <table class="table table-bordered align-middle" id="contactsTable">
                            <thead class="bg-light text-muted small uppercase">
                                <tr>
                                    <th style="min-width: 120px;">SALUTATION</th>
                                    <th style="min-width: 150px;">FIRST NAME</th>
                                    <th style="min-width: 150px;">LAST NAME</th>
                                    <th style="min-width: 200px;">EMAIL ADDRESS</th>
                                    <th style="min-width: 150px;">WORK PHONE</th>
                                    <th style="min-width: 150px;">MOBILE</th>
                                    <th width="50"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($customer->contacts as $index => $contact)
                                <tr class="contact-row">
                                    <td class="p-0">
                                        <select name="contacts[{{ $index }}][salutation]" class="form-select border-0 bg-transparent shadow-none">
                                            <option value=""></option>
                                            @foreach(['Mr.', 'Mrs.', 'Ms.', 'Dr.'] as $sal)
                                                <option value="{{ $sal }}" {{ $contact->salutation == $sal ? 'selected' : '' }}>{{ $sal }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td class="p-0">
                                        <input type="text" name="contacts[{{ $index }}][first_name]" value="{{ $contact->first_name }}" class="form-control border-0 bg-transparent shadow-none">
                                    </td>
                                    <td class="p-0">
                                        <input type="text" name="contacts[{{ $index }}][last_name]" value="{{ $contact->last_name }}" class="form-control border-0 bg-transparent shadow-none">
                                    </td>
                                    <td class="p-0">
                                        <input type="email" name="contacts[{{ $index }}][email]" value="{{ $contact->email }}" class="form-control border-0 bg-transparent shadow-none">
                                    </td>
                                    <td class="p-0">
                                        <div class="input-group input-group-sm border-0">
                                            <span class="input-group-text bg-transparent border-0 pe-0 text-muted">+91</span>
                                            <input type="text" name="contacts[{{ $index }}][phone]" value="{{ $contact->phone }}" class="form-control border-0 bg-transparent shadow-none">
                                        </div>
                                    </td>
                                    <td class="p-0">
                                        <div class="input-group input-group-sm border-0">
                                            <span class="input-group-text bg-transparent border-0 pe-0 text-muted">+91</span>
                                            <input type="text" name="contacts[{{ $index }}][mobile]" value="{{ $contact->mobile }}" class="form-control border-0 bg-transparent shadow-none">
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-link link-danger btn-sm p-0" onclick="removeContactRow(this)"><i class="fas fa-times"></i></button>
                                    </td>
                                </tr>
                                @empty
                                <tr class="contact-row">
                                    <td class="p-0">
                                        <select name="contacts[0][salutation]" class="form-select border-0 bg-transparent shadow-none">
                                            <option value=""></option>
                                            <option value="Mr.">Mr.</option>
                                            <option value="Mrs.">Mrs.</option>
                                            <option value="Ms.">Ms.</option>
                                            <option value="Dr.">Dr.</option>
                                        </select>
                                    </td>
                                    <td class="p-0">
                                        <input type="text" name="contacts[0][first_name]" class="form-control border-0 bg-transparent shadow-none">
                                    </td>
                                    <td class="p-0">
                                        <input type="text" name="contacts[0][last_name]" class="form-control border-0 bg-transparent shadow-none">
                                    </td>
                                    <td class="p-0">
                                        <input type="email" name="contacts[0][email]" class="form-control border-0 bg-transparent shadow-none">
                                    </td>
                                    <td class="p-0">
                                        <div class="input-group input-group-sm border-0">
                                            <span class="input-group-text bg-transparent border-0 pe-0 text-muted">+91</span>
                                            <input type="text" name="contacts[0][phone]" class="form-control border-0 bg-transparent shadow-none">
                                        </div>
                                    </td>
                                    <td class="p-0">
                                        <div class="input-group input-group-sm border-0">
                                            <span class="input-group-text bg-transparent border-0 pe-0 text-muted">+91</span>
                                            <input type="text" name="contacts[0][mobile]" class="form-control border-0 bg-transparent shadow-none">
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-link link-danger btn-sm p-0 opacity-0" onclick="removeContactRow(this)"><i class="fas fa-times"></i></button>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <button type="button" class="btn btn-primary btn-sm rounded-pill px-3" onclick="addContactRow()">
                        <i class="fas fa-plus-circle me-1"></i> Add Contact Person
                    </button>
                </div>

                <!-- Remarks Tab -->
                <div class="tab-pane fade" id="remarks" role="tabpanel">
                    <div class="mb-3">
                        <label class="form-label fw-semibold text-muted">Remarks <span class="text-muted fw-normal">(For Internal Use)</span></label>
                        <textarea name="notes" class="form-control" rows="4">{{ $customer->notes }}</textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer bg-light p-4 border-0 rounded-bottom-4">
            <div class="d-flex gap-3">
                <button type="submit" class="btn btn-primary px-5 fw-bold">Update</button>
                <a href="{{ route('customers.index') }}" class="btn btn-outline-secondary px-5 fw-bold text-muted border-0">Cancel</a>
            </div>
        </div>
    </div>
</form>

<style>
    .max-width-700 { max-width: 700px; }
    .custom-tabs .nav-link {
        color: #6c757d;
        font-weight: 500;
        border: none;
        padding-bottom: 12px;
        position: relative;
        background: none;
    }
    .custom-tabs .nav-link.active {
        color: #0d6efd;
        background: none;
    }
    .custom-tabs .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 3px;
        background-color: #0d6efd;
        border-radius: 3px;
    }
    .form-label { font-size: 0.95rem; }
    .form-control:focus, .form-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
    }
    .border-dashed { border-style: dashed !important; border-width: 2px !important; border-color: #dee2e6 !important; }
    .contact-row:hover .btn-link { opacity: 1 !important; }
    .uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
    thead th { font-weight: 600; padding: 12px 15px !important; }
    .table-bordered > :not(caption) > * > * { border-width: 1px; }
</style>

<script>
    let contactCount = {{ count($customer->contacts) ?: 1 }};

    function addContactRow() {
        const table = document.getElementById('contactsTable').getElementsByTagName('tbody')[0];
        const newRow = table.insertRow();
        newRow.className = 'contact-row';
        
        newRow.innerHTML = `
            <td class="p-0">
                <select name="contacts[${contactCount}][salutation]" class="form-select border-0 bg-transparent shadow-none">
                    <option value=""></option>
                    <option value="Mr.">Mr.</option>
                    <option value="Mrs.">Mrs.</option>
                    <option value="Ms.">Ms.</option>
                    <option value="Dr.">Dr.</option>
                </select>
            </td>
            <td class="p-0">
                <input type="text" name="contacts[${contactCount}][first_name]" class="form-control border-0 bg-transparent shadow-none">
            </td>
            <td class="p-0">
                <input type="text" name="contacts[${contactCount}][last_name]" class="form-control border-0 bg-transparent shadow-none">
            </td>
            <td class="p-0">
                <input type="email" name="contacts[${contactCount}][email]" class="form-control border-0 bg-transparent shadow-none">
            </td>
            <td class="p-0">
                <div class="input-group input-group-sm border-0">
                    <span class="input-group-text bg-transparent border-0 pe-0 text-muted">+91</span>
                    <input type="text" name="contacts[${contactCount}][phone]" class="form-control border-0 bg-transparent shadow-none">
                </div>
            </td>
            <td class="p-0">
                <div class="input-group input-group-sm border-0">
                    <span class="input-group-text bg-transparent border-0 pe-0 text-muted">+91</span>
                    <input type="text" name="contacts[${contactCount}][mobile]" class="form-control border-0 bg-transparent shadow-none">
                </div>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-link link-danger btn-sm p-0" onclick="removeContactRow(this)"><i class="fas fa-times"></i></button>
            </td>
        `;
        contactCount++;
    }

    function removeContactRow(btn) {
        btn.closest('tr').remove();
    }

    function copyBillingAddress() {
        const fields = ['attention', 'country', 'address', 'street2', 'city', 'state', 'zip', 'phone', 'fax'];
        fields.forEach(field => {
            const billingEl = document.getElementsByName('billing_' + field)[0];
            const shippingEl = document.getElementById('shipping_' + field);
            if (billingEl && shippingEl) {
                shippingEl.value = billingEl.value;
            }
        });
    }

</script>
@endsection