@extends('layouts.app')
@section('title', 'Create Customer')
@php $breadcrumbs = [['label' => 'Masters', 'url' => route('masters.customers.index')], ['label' => 'Customers', 'url' => route('masters.customers.index')], ['label' => 'Create']]; @endphp

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="fw-bold mb-0">Create New Customer</h4>
    <a href="{{ route('masters.customers.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left me-1"></i>Back to List</a>
</div>

<form action="{{ route('masters.customers.store') }}" method="POST" id="customerForm" novalidate>
    @csrf

    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabGeneral" type="button"><i class="bi bi-person me-1"></i>General</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabAddress" type="button"><i class="bi bi-geo-alt me-1"></i>Address</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabContact" type="button"><i class="bi bi-telephone me-1"></i>Contact</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabFinancial" type="button"><i class="bi bi-wallet2 me-1"></i>Financial</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabDocuments" type="button"><i class="bi bi-file-earmark me-1"></i>Documents</button></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="tabGeneral">
            <div class="card border shadow-sm">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Customer Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('code') is-invalid @enderror" name="code" value="{{ old('code') }}" required>
                            @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Customer Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Customer Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('type') is-invalid @enderror" name="type" required>
                                <option value="">Select Type</option>
                                <option value="buyer" {{ old('type') === 'buyer' ? 'selected' : '' }}>Buyer</option>
                                <option value="consignee" {{ old('type') === 'consignee' ? 'selected' : '' }}>Consignee</option>
                                <option value="notify" {{ old('type') === 'notify' ? 'selected' : '' }}>Notify Party</option>
                                <option value="both" {{ old('type') === 'both' ? 'selected' : '' }}>Buyer &amp; Consignee</option>
                            </select>
                            @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Group</label>
                            <select class="form-select" name="group">
                                <option value="domestic" {{ old('group') === 'domestic' ? 'selected' : '' }}>Domestic</option>
                                <option value="international" {{ old('group') === 'international' ? 'selected' : '' }}>International</option>
                                <option value="government" {{ old('group') === 'government' ? 'selected' : '' }}>Government</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Industry</label>
                            <input type="text" class="form-control" name="industry" value="{{ old('industry') }}" placeholder="e.g. Manufacturing">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">GSTIN</label>
                            <input type="text" class="form-control" name="gstin" value="{{ old('gstin') }}" placeholder="22AAAAA0000A1Z5" maxlength="15">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">PAN</label>
                            <input type="text" class="form-control" name="pan" value="{{ old('pan') }}" placeholder="AAAAA0000A" maxlength="10">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">IEC Code</label>
                            <input type="text" class="form-control" name="iec_code" value="{{ old('iec_code') }}" placeholder="Import Export Code">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Website</label>
                            <input type="url" class="form-control" name="website" value="{{ old('website') }}" placeholder="https://www.example.com">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Currency</label>
                            <select class="form-select select2-ajax" name="currency_id" data-url="{{ route('api.currencies.search') }}" data-placeholder="Select Currency">
                                <option value="1" selected>INR - Indian Rupee</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Payment Terms</label>
                            <select class="form-select select2-ajax" name="payment_term_id" data-url="{{ route('api.payment-terms.search') }}" data-placeholder="Select Payment Terms"></select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Remarks</label>
                            <textarea class="form-control" name="remarks" rows="2" placeholder="Internal notes about this customer">{{ old('remarks') }}</textarea>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-switch mt-4">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1" id="isActive" checked>
                                <label class="form-check-label" for="isActive">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tabAddress">
            <div class="card border shadow-sm">
                <div class="card-body">
                    <h6 class="fw-semibold mb-3"><i class="bi bi-building me-2 text-primary"></i>Registered Address</h6>
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Address Line 1 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('address_line1') is-invalid @enderror" name="address_line1" value="{{ old('address_line1') }}" required>
                            @error('address_line1')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Address Line 2</label>
                            <input type="text" class="form-control" name="address_line2" value="{{ old('address_line2') }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <select class="form-select select2-ajax @error('country_id') is-invalid @enderror" name="country_id" data-url="{{ route('api.countries.search') }}" data-placeholder="Select Country" required>
                                @if(old('country_id'))
                                    <option value="{{ old('country_id') }}" selected>{{ old('country_name', '') }}</option>
                                @endif
                            </select>
                            @error('country_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">State <span class="text-danger">*</span></label>
                            <select class="form-select select2-ajax @error('state_id') is-invalid @enderror" name="state_id" data-url="{{ route('api.states.search') }}" data-placeholder="Select State" data-parent="country_id" required>
                                @if(old('state_id'))
                                    <option value="{{ old('state_id') }}" selected>{{ old('state_name', '') }}</option>
                                @endif
                            </select>
                            @error('state_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">City <span class="text-danger">*</span></label>
                            <select class="form-select select2-ajax @error('city_id') is-invalid @enderror" name="city_id" data-url="{{ route('api.cities.search') }}" data-placeholder="Select City" data-parent="state_id" required>
                                @if(old('city_id'))
                                    <option value="{{ old('city_id') }}" selected>{{ old('city_name', '') }}</option>
                                @endif
                            </select>
                            @error('city_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Pincode <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('pincode') is-invalid @enderror" name="pincode" value="{{ old('pincode') }}" maxlength="10" required>
                            @error('pincode')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">GSTIN (for address)</label>
                            <input type="text" class="form-control" name="address_gstin" value="{{ old('address_gstin') }}" maxlength="15">
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6 class="fw-semibold mb-3"><i class="bi bi-geo-alt me-2 text-success"></i>Shipping Address</h6>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="sameAsRegistered" checked>
                        <label class="form-check-label" for="sameAsRegistered">Same as registered address</label>
                    </div>
                    <div id="shippingAddressFields" style="display:none;">
                        <div class="row g-3">
                            <div class="col-md-8"><label class="form-label">Address Line 1</label><input type="text" class="form-control" name="ship_address_line1" value="{{ old('ship_address_line1') }}"></div>
                            <div class="col-md-4"><label class="form-label">Address Line 2</label><input type="text" class="form-control" name="ship_address_line2" value="{{ old('ship_address_line2') }}"></div>
                            <div class="col-md-3"><label class="form-label">Country</label><select class="form-select select2-ajax" name="ship_country_id" data-url="{{ route('api.countries.search') }}" data-placeholder="Select"></select></div>
                            <div class="col-md-3"><label class="form-label">State</label><select class="form-select select2-ajax" name="ship_state_id" data-url="{{ route('api.states.search') }}" data-placeholder="Select"></select></div>
                            <div class="col-md-3"><label class="form-label">City</label><select class="form-select select2-ajax" name="ship_city_id" data-url="{{ route('api.cities.search') }}" data-placeholder="Select"></select></div>
                            <div class="col-md-3"><label class="form-label">Pincode</label><input type="text" class="form-control" name="ship_pincode" value="{{ old('ship_pincode') }}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tabContact">
            <div class="card border shadow-sm">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Primary Contact Person <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('contact_person') is-invalid @enderror" name="contact_person" value="{{ old('contact_person') }}" required>
                            @error('contact_person')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Designation</label>
                            <input type="text" class="form-control" name="designation" value="{{ old('designation') }}" placeholder="e.g. Purchase Manager">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Department</label>
                            <input type="text" class="form-control" name="department" value="{{ old('department') }}" placeholder="e.g. Procurement">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required>
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Phone <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" required>
                            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Mobile</label>
                            <input type="tel" class="form-control" name="mobile" value="{{ old('mobile') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Fax</label>
                            <input type="tel" class="form-control" name="fax" value="{{ old('fax') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">WhatsApp</label>
                            <input type="tel" class="form-control" name="whatsapp" value="{{ old('whatsapp') }}">
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6 class="fw-semibold mb-3"><i class="bi bi-people me-2 text-info"></i>Additional Contacts</h6>
                    <div id="additionalContacts">
                        <div class="row g-3 mb-2 additional-contact-row">
                            <div class="col-md-3"><input type="text" class="form-control" name="additional_contacts[0][name]" placeholder="Contact Name"></div>
                            <div class="col-md-2"><input type="text" class="form-control" name="additional_contacts[0][designation]" placeholder="Designation"></div>
                            <div class="col-md-3"><input type="email" class="form-control" name="additional_contacts[0][email]" placeholder="Email"></div>
                            <div class="col-md-2"><input type="tel" class="form-control" name="additional_contacts[0][phone]" placeholder="Phone"></div>
                            <div class="col-md-2"><button type="button" class="btn btn-outline-danger btn-sm remove-contact"><i class="bi bi-trash"></i></button></div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="addContactBtn"><i class="bi bi-plus-lg me-1"></i>Add Contact</button>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tabFinancial">
            <div class="card border shadow-sm">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Credit Limit</label>
                            <input type="number" class="form-control" name="credit_limit" value="{{ old('credit_limit') }}" step="0.01" min="0">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Credit Days</label>
                            <input type="number" class="form-control" name="credit_days" value="{{ old('credit_days') }}" min="0">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">TDS Section</label>
                            <select class="form-select" name="tds_section">
                                <option value="">Not Applicable</option>
                                <option value="194C" {{ old('tds_section') === '194C' ? 'selected' : '' }}>194C - Contractors</option>
                                <option value="194J" {{ old('tds_section') === '194J' ? 'selected' : '' }}>194J - Professional Fees</option>
                                <option value="194H" {{ old('tds_section') === '194H' ? 'selected' : '' }}>194H - Commission</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">TDS Rate (%)</label>
                            <input type="number" class="form-control" name="tds_rate" value="{{ old('tds_rate') }}" step="0.01" min="0" max="100">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Opening Balance</label>
                            <input type="number" class="form-control" name="opening_balance" value="{{ old('opening_balance', 0) }}" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Balance Type</label>
                            <select class="form-select" name="balance_type">
                                <option value="debit" {{ old('balance_type') === 'debit' ? 'selected' : '' }}>Debit (They owe us)</option>
                                <option value="credit" {{ old('balance_type') === 'credit' ? 'selected' : '' }}>Credit (We owe them)</option>
                            </select>
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6 class="fw-semibold mb-3"><i class="bi bi-bank me-2 text-primary"></i>Bank Details</h6>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Bank Name</label>
                            <input type="text" class="form-control" name="bank_name" value="{{ old('bank_name') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Account Number</label>
                            <input type="text" class="form-control" name="bank_account" value="{{ old('bank_account') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">IFSC Code</label>
                            <input type="text" class="form-control" name="bank_ifsc" value="{{ old('bank_ifsc') }}" maxlength="11">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Swift Code</label>
                            <input type="text" class="form-control" name="swift_code" value="{{ old('swift_code') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">SWIFT/BIC</label>
                            <input type="text" class="form-control" name="bic_code" value="{{ old('bic_code') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tabDocuments">
            <div class="card border shadow-sm">
                <div class="card-body">
                    <x-file-upload id="customerDocs" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx" maxSize="10" multiple="true" uploadUrl="{{ route('api.upload') }}" label="Drop customer documents here (PAN, GSTIN Certificate, IEC, etc.)" />
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mt-3 mb-4">
        <a href="{{ route('masters.customers.index') }}" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>Create Customer</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const sameAsRegistered = document.getElementById('sameAsRegistered');
    const shippingFields = document.getElementById('shippingAddressFields');
    if (sameAsRegistered) {
        sameAsRegistered.addEventListener('change', function() {
            shippingFields.style.display = this.checked ? 'none' : 'block';
        });
    }

    let contactIndex = 1;
    const addContactBtn = document.getElementById('addContactBtn');
    const contactsContainer = document.getElementById('additionalContacts');
    if (addContactBtn) {
        addContactBtn.addEventListener('click', function() {
            const html = '<div class="row g-3 mb-2 additional-contact-row">' +
                '<div class="col-md-3"><input type="text" class="form-control" name="additional_contacts[' + contactIndex + '][name]" placeholder="Contact Name"></div>' +
                '<div class="col-md-2"><input type="text" class="form-control" name="additional_contacts[' + contactIndex + '][designation]" placeholder="Designation"></div>' +
                '<div class="col-md-3"><input type="email" class="form-control" name="additional_contacts[' + contactIndex + '][email]" placeholder="Email"></div>' +
                '<div class="col-md-2"><input type="tel" class="form-control" name="additional_contacts[' + contactIndex + '][phone]" placeholder="Phone"></div>' +
                '<div class="col-md-2"><button type="button" class="btn btn-outline-danger btn-sm remove-contact"><i class="bi bi-trash"></i></button></div></div>';
            contactsContainer.insertAdjacentHTML('beforeend', html);
            contactIndex++;
        });
    }

    contactsContainer.addEventListener('click', function(e) {
        if (e.target.closest('.remove-contact')) {
            e.target.closest('.additional-contact-row').remove();
        }
    });

    document.querySelectorAll('.select2-ajax').forEach(function(el) {
        jQuery(el).select2({
            theme: 'bootstrap-5',
            ajax: {
                url: el.dataset.url,
                dataType: 'json',
                delay: 250,
                data: function(params) { return { q: params.term }; },
                processResults: function(data) { return { results: data }; }
            },
            placeholder: el.dataset.placeholder || 'Search...',
            minimumInputLength: 1
        });
    });

    jQuery('#customerForm').on('submit', function(e) {
        let valid = true;
        const required = this.querySelectorAll('[required]');
        required.forEach(function(field) {
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                valid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });
        if (!valid) {
            e.preventDefault();
            Swal.fire({ title: 'Validation Error', text: 'Please fill all required fields.', icon: 'error' });
        }
    });
});
</script>
@endpush