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

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="fw-bold mb-0">Edit Customer: {{ $customer->name ?? '' }}</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.update', $customer->id ?? 0) }}" method="POST" id="customerForm" novalidate>
    @csrf
    @method('PUT')

    <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', $customer->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', $customer->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', $customer->type ?? '') === 'buyer' ? 'selected' : '' }}>Buyer</option>
                                <option value="consignee" {{ old('type', $customer->type ?? '') === 'consignee' ? 'selected' : '' }}>Consignee</option>
                                <option value="notify" {{ old('type', $customer->type ?? '') === 'notify' ? 'selected' : '' }}>Notify Party</option>
                                <option value="both" {{ old('type', $customer->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', $customer->group ?? '') === 'domestic' ? 'selected' : '' }}>Domestic</option>
                                <option value="international" {{ old('group', $customer->group ?? '') === 'international' ? 'selected' : '' }}>International</option>
                                <option value="government" {{ old('group', $customer->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', $customer->industry ?? '') }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">GSTIN</label>
                            <input type="text" class="form-control" name="gstin" value="{{ old('gstin', $customer->gstin ?? '') }}" 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', $customer->pan ?? '') }}" 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', $customer->iec_code ?? '') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Website</label>
                            <input type="url" class="form-control" name="website" value="{{ old('website', $customer->website ?? '') }}">
                        </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="{{ $customer->currency_id ?? '' }}" selected>{{ $customer->currency->code ?? 'INR' }}</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">
                                <option value="{{ $customer->payment_term_id ?? '' }}" selected>{{ $customer->paymentTerm->name ?? '' }}</option>
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Remarks</label>
                            <textarea class="form-control" name="remarks" rows="2">{{ old('remarks', $customer->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" {{ ($customer->is_active ?? true) ? '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" name="address_line1" value="{{ old('address_line1', $customer->address_line1 ?? '') }}" required></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', $customer->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" name="country_id" data-url="{{ route('api.countries.search') }}" data-placeholder="Select Country"><option value="{{ $customer->country_id ?? '' }}" selected>{{ $customer->country->name ?? '' }}</option></select></div>
                        <div class="col-md-3"><label class="form-label">State <span class="text-danger">*</span></label><select class="form-select select2-ajax" name="state_id" data-url="{{ route('api.states.search') }}" data-placeholder="Select State"><option value="{{ $customer->state_id ?? '' }}" selected>{{ $customer->state->name ?? '' }}</option></select></div>
                        <div class="col-md-3"><label class="form-label">City <span class="text-danger">*</span></label><select class="form-select select2-ajax" name="city_id" data-url="{{ route('api.cities.search') }}" data-placeholder="Select City"><option value="{{ $customer->city_id ?? '' }}" selected>{{ $customer->city->name ?? '' }}</option></select></div>
                        <div class="col-md-3"><label class="form-label">Pincode <span class="text-danger">*</span></label><input type="text" class="form-control" name="pincode" value="{{ old('pincode', $customer->pincode ?? '') }}" maxlength="10" required></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 <span class="text-danger">*</span></label><input type="text" class="form-control" name="contact_person" value="{{ old('contact_person', $customer->contact_person ?? '') }}" required></div>
                        <div class="col-md-4"><label class="form-label">Designation</label><input type="text" class="form-control" name="designation" value="{{ old('designation', $customer->designation ?? '') }}"></div>
                        <div class="col-md-4"><label class="form-label">Department</label><input type="text" class="form-control" name="department" value="{{ old('department', $customer->department ?? '') }}"></div>
                        <div class="col-md-4"><label class="form-label">Email <span class="text-danger">*</span></label><input type="email" class="form-control" name="email" value="{{ old('email', $customer->email ?? '') }}" required></div>
                        <div class="col-md-4"><label class="form-label">Phone <span class="text-danger">*</span></label><input type="tel" class="form-control" name="phone" value="{{ old('phone', $customer->phone ?? '') }}" required></div>
                        <div class="col-md-4"><label class="form-label">Mobile</label><input type="tel" class="form-control" name="mobile" value="{{ old('mobile', $customer->mobile ?? '') }}"></div>
                        <div class="col-md-4"><label class="form-label">Fax</label><input type="tel" class="form-control" name="fax" value="{{ old('fax', $customer->fax ?? '') }}"></div>
                        <div class="col-md-4"><label class="form-label">WhatsApp</label><input type="tel" class="form-control" name="whatsapp" value="{{ old('whatsapp', $customer->whatsapp ?? '') }}"></div>
                    </div>
                </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', $customer->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', $customer->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', $customer->tds_section ?? '') === '194C' ? 'selected' : '' }}>194C</option><option value="194J" {{ old('tds_section', $customer->tds_section ?? '') === '194J' ? 'selected' : '' }}>194J</option><option value="194H" {{ old('tds_section', $customer->tds_section ?? '') === '194H' ? 'selected' : '' }}>194H</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', $customer->tds_rate ?? '') }}" step="0.01"></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', $customer->opening_balance ?? 0) }}" step="0.01"></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', $customer->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', $customer->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', $customer->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', $customer->swift_code ?? '') }}"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tabDocuments">
            <div class="card border shadow-sm">
                <div class="card-body">
                    @if(isset($customer->documents) && count($customer->documents))
                        <div class="mb-3">
                            <h6 class="fw-semibold mb-2">Existing Documents</h6>
                            @foreach($customer->documents as $doc)
                                <div class="d-flex align-items-center justify-content-between p-2 border rounded mb-1">
                                    <span><i class="bi bi-file-earmark me-2"></i>{{ $doc->name ?? basename($doc->path ?? '') }}</span>
                                    <a href="{{ asset('storage/' . ($doc->path ?? '')) }}" target="_blank" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <x-file-upload id="customerDocs" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx" maxSize="10" multiple="true" uploadUrl="{{ route('api.upload') }}" label="Upload additional documents" />
                </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>Update Customer</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.select2-ajax').forEach(function(el) {
        jQuery(el).select2({
            theme: 'bootstrap-5',
            ajax: { url: el.dataset.url, dataType: 'json', delay: 250, data: function(p) { return { q: p.term }; }, processResults: function(d) { return { results: d }; } },
            placeholder: el.dataset.placeholder || 'Search...',
            minimumInputLength: 1
        });
    });
});
</script>
@endpush