@extends('layouts.app')

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

@section('content')
<form action="{{ route('customers.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <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 <i class="fas fa-info-circle text-muted ms-1" title="Select if the customer is a business or an individual"></i></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" 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">
                            <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 <i class="fas fa-info-circle text-muted ms-1" title="Primary contact person for this customer"></i></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>
                                <option value="Mr.">Mr.</option>
                                <option value="Mrs.">Mrs.</option>
                                <option value="Ms.">Ms.</option>
                                <option value="Miss.">Miss.</option>
                                <option value="Dr.">Dr.</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="first_name" class="form-control" placeholder="First Name">
                        </div>
                        <div class="col-md-5">
                            <input type="text" name="last_name" class="form-control" 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" placeholder="Company Name">
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold text-danger">Display Name* <i class="fas fa-info-circle text-muted ms-1" title="This name will be used in invoices and reports"></i></label>
                </div>
                <div class="col-md-9">
                    <input type="text" name="display_name" class="form-control @error('display_name') is-invalid @enderror" 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 <i class="fas fa-info-circle text-muted ms-1" title="Primary email for communications"></i></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" 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 <i class="fas fa-info-circle text-muted ms-1" title="Primary contact numbers"></i></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" 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" placeholder="Mobile">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold">Customer Language <i class="fas fa-info-circle text-muted ms-1" title="Preferred language for documents"></i></label>
                </div>
                <div class="col-md-9">
                    <select name="language" class="form-select">
                        <option value="English" selected>English</option>
                        <option value="Hindi">Hindi</option>
                        <option value="Gujarati">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 <i class="fas fa-info-circle text-muted ms-1"></i></label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" name="pan_number" class="form-control" 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 }}" {{ $code == 'INR' ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Accounts Receivable <i class="fas fa-info-circle text-muted ms-1"></i></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 }}">{{ $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="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">
                                <option value="Due on Receipt" selected>Due on Receipt</option>
                                <option value="Net 15">Net 15</option>
                                <option value="Net 30">Net 30</option>
                                <option value="Net 45">Net 45</option>
                                <option value="Net 60">Net 60</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Enable Portal? <i class="fas fa-info-circle text-muted ms-1"></i></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">
                                <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">
                                </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" selected>India</option>
                                        <option value="United States">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"></textarea>
                                    <textarea name="billing_street2" class="form-control" rows="2" placeholder="Street 2"></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">
                                </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">
                                </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">
                                </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">
                                    </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">
                                </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">
                                </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" selected>India</option>
                                        <option value="United States">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"></textarea>
                                    <textarea name="shipping_street2" id="shipping_street2" class="form-control" rows="2" placeholder="Street 2"></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">
                                </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">
                                </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">
                                </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">
                                    </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">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info mt-5 border-0 bg-light">
                        <h6 class="fw-bold"><i class="fas fa-info-circle me-2"></i> Note:</h6>
                        <ul class="mb-0 small ps-3">
                            <li>Add and manage additional addresses from this Customers and Vendors details section.</li>
                            <li>You can customise how customers' addresses are displayed in transaction PDFs. To do this, go to Settings > Preferences > Customers and Vendors, and navigate to the Address Format sections.</li>
                        </ul>
                    </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>
                                <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>
                            </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"></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">Save</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 = 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;
            }
        });
    }

    // Auto-update Display Name if it's empty and name fields are filled
    document.addEventListener('input', function(e) {
        if (e.target.name === 'first_name' || e.target.name === 'last_name' || e.target.name === 'company_name') {
            const displayNameEl = document.getElementsByName('display_name')[0];
            if (!displayNameEl.value || displayNameEl.getAttribute('data-auto') === 'true') {
                const firstName = document.getElementsByName('first_name')[0].value;
                const lastName = document.getElementsByName('last_name')[0].value;
                const companyName = document.getElementsByName('company_name')[0].value;
                
                let name = (firstName + ' ' + lastName).trim();
                if (!name) name = companyName;
                
                if (name) {
                    displayNameEl.value = name;
                    displayNameEl.setAttribute('data-auto', 'true');
                }
            }
        }
        
        if (e.target.name === 'display_name') {
            e.target.setAttribute('data-auto', 'false');
        }
    });

</script>
@endsection