@extends('layouts.master')
@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-end mb-3">
        <a href="{{ route('home') }}" class="btn-back">
            <i class="fas fa-arrow-left me-2"></i> Back to Dashboard
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-user me-2"></i> Add Customer Account</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('customer.accounts.store') }}" method="POST" id="customerAccountForm">
                        @csrf
                        <input type="hidden" name="id" id="accountId">
                        <div id="timeout">
                            @if(Session::has('success'))
                                <div class="alert alert-success alert-dismissible fade show">
                                    {{ Session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif
                            @if(Session::has('error'))
                                <div class="alert alert-danger alert-dismissible fade show">
                                    {{ Session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif
                            @if($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show">
                                    <ul class="mb-0">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif
                        </div>
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label"><strong>Customer Code:</strong></label>
                                <input class="form-control @error('customer_code') is-invalid @enderror" type="text" name="customer_code" id="customer_code" value="{{ old('customer_code') }}" required />
                                @error('customer_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label"><strong>Customer Name:</strong></label>
                                <input class="form-control @error('customer_account') is-invalid @enderror" type="text" name="customer_account" id="customer_account" value="{{ old('customer_account') }}" required />
                                @error('customer_account')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label"><strong>Contact Person:</strong></label>
                                <input class="form-control @error('contact_person') is-invalid @enderror" type="text" name="contact_person" id="contact_person" value="{{ old('contact_person') }}" required />
                                @error('contact_person')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><strong>Contact 1:</strong></label>
                                <input class="form-control @error('contact_1') is-invalid @enderror" type="text" name="contact_1" id="contact_1" value="{{ old('contact_1') }}" required />
                                @error('contact_1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label"><strong>Contact 2:</strong></label>
                                <input class="form-control @error('contact_2') is-invalid @enderror" type="text" name="contact_2" id="contact_2" value="{{ old('contact_2') }}" />
                                @error('contact_2')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><strong>Email Address:</strong></label>
                                <input class="form-control @error('email') is-invalid @enderror" type="email" name="email" id="email" value="{{ old('email') }}" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label"><strong>Physical Address:</strong></label>
                                <textarea class="form-control @error('address') is-invalid @enderror" placeholder="Enter description" name="address" id="address">{{ old('address') }}</textarea>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label"><strong>Category:</strong></label>
                                <select name="category_id" id="category_id" class="form-control @error('category_id') is-invalid @enderror">
                                    <option value="">Select Category</option>
                                    @foreach($customerCategories as $cat)
                                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><strong>Sales Rep:</strong></label>
                                <select name="sales_rep_id" id="sales_rep_id" class="form-control @error('sales_rep_id') is-invalid @enderror">
                                    <option value="">Select Sales Rep</option>
                                    @foreach($salesReps as $rep)
                                        <option value="{{ $rep->id }}" {{ old('sales_rep_id') == $rep->id ? 'selected' : '' }}>{{ $rep->name }}</option>
                                    @endforeach
                                </select>
                                @error('sales_rep_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label"><strong>Age Analysis:</strong></label>
                                <select name="age_analysis_id" id="age_analysis_id" class="form-control @error('age_analysis_id') is-invalid @enderror">
                                    <option value="">Select Age Analysis</option>
                                    @foreach($ageings as $ageing)
                                        <option value="{{ $ageing->id }}" {{ old('age_analysis_id') == $ageing->id ? 'selected' : '' }}>{{ $ageing->description }}</option>
                                    @endforeach
                                </select>
                                @error('age_analysis_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><strong>Terms:</strong></label>
                                <select name="terms" id="terms" class="form-control @error('terms') is-invalid @enderror">
                                    <option value="">Select Terms</option>
                                    @if(old('age_analysis_id'))
                                        @php
                                            $selectedAgeing = $ageings->where('id', old('age_analysis_id'))->first();
                                            if ($selectedAgeing) {
                                                $terms = [];
                                                if ($selectedAgeing->custom_age_1) $terms[] = $selectedAgeing->custom_age_1;
                                                if ($selectedAgeing->custom_age_2) $terms[] = $selectedAgeing->custom_age_2;
                                                if ($selectedAgeing->custom_age_3) $terms[] = $selectedAgeing->custom_age_3;
                                                if ($selectedAgeing->custom_age_4) $terms[] = $selectedAgeing->custom_age_4;
                                                if ($selectedAgeing->custom_age_5) $terms[] = $selectedAgeing->custom_age_5;
                                                if ($selectedAgeing->custom_age_6) $terms[] = $selectedAgeing->custom_age_6;
                                                if ($selectedAgeing->custom_age_7) $terms[] = $selectedAgeing->custom_age_7;
                                            }
                                        @endphp
                                        @if(isset($terms))
                                            @foreach($terms as $term)
                                                <option value="{{ $term }}" {{ old('terms') == $term ? 'selected' : '' }}>{{ $term }}</option>
                                            @endforeach
                                        @endif
                                    @endif
                                </select>
                                @error('terms')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><strong>Area:</strong></label>
                                <select name="area_id" id="area_id" class="form-control @error('area_id') is-invalid @enderror">
                                    <option value="">Select Area</option>
                                    @foreach($areas as $area)
                                        <option value="{{ $area->id }}" {{ old('area_id') == $area->id ? 'selected' : '' }}>{{ $area->name }}</option>
                                    @endforeach
                                </select>
                                @error('area_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <!-- New fields -->
                            <div class="col-md-6">
                                <label class="form-label"><strong>VAT:</strong></label>
                                <input class="form-control @error('vat') is-invalid @enderror" type="text" name="vat" id="vat" value="{{ old('vat') }}" />
                                @error('vat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><strong>TIN:</strong></label>
                                <input class="form-control @error('tin') is-invalid @enderror" type="text" name="tin" id="tin" value="{{ old('tin') }}" />
                                @error('tin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><strong>City:</strong></label>
                                <input class="form-control @error('city') is-invalid @enderror" type="text" name="city" id="city" value="{{ old('city') }}" />
                                @error('city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label"><strong>Province:</strong></label>
                                <input class="form-control @error('province') is-invalid @enderror" type="text" name="province" id="province" value="{{ old('province') }}" />
                                @error('province')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <!-- Foreign Currency Section -->
                            <div class="col-md-6">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" name="is_foreign_currency" id="is_foreign_currency" value="1" {{ old('is_foreign_currency') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_foreign_currency">
                                        <strong>Foreign Currency</strong>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-6" id="foreignCurrencyField" style="display: {{ old('is_foreign_currency') ? 'block' : 'none' }};">
                                <label class="form-label"><strong>Foreign Currency:</strong></label>
                                <select name="foreign_currency_id" id="foreign_currency_id" class="form-control @error('foreign_currency_id') is-invalid @enderror">
                                    <option value="">Select Currency</option>
                                    @foreach($foreignCurrencies as $currency)
                                        <option value="{{ $currency->id }}" {{ old('foreign_currency_id') == $currency->id ? 'selected' : '' }}>{{ $currency->name }} ({{ $currency->code }})</option>
                                    @endforeach
                                </select>
                                @error('foreign_currency_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-end mt-4">
                            <input type="submit" id="submitButton" class="btn btn-primary me-2" value="SUBMIT">
                            <input type="reset" class="btn btn-outline-secondary" onclick="resetForm()" value="REFRESH">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Section -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i> Customer Accounts</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Customer Code</th>
                                    <th>Customer Name</th>
                                    <th>Contact Person</th>
                                    <th>Contact 1</th>
                                    <th>Contact 2</th>
                                    <th>Email</th>
                                    <th>Address</th>
                                    <th>VAT</th>
                                    <th>TIN</th>
                                    <th>City</th>
                                    <th>Province</th>
                                    <th>Foreign Currency</th>
                                    <th>Category</th>
                                    <th>Sales Rep</th>
                                    <th>Age Analysis</th>
                                    <th>Terms</th>
                                    <th>Area</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($customerAccounts as $record)
                                <tr>
                                    <td>{{ $record->customer_code }}</td>
                                    <td>{{ $record->customer_account }}</td>
                                    <td>{{ $record->contact_person }}</td>
                                    <td>{{ $record->contact_1 }}</td>
                                    <td>{{ $record->contact_2 }}</td>
                                    <td>{{ $record->email }}</td>
                                    <td>{{ $record->address }}</td>
                                    <td>{{ $record->vat }}</td>
                                    <td>{{ $record->tin }}</td>
                                    <td>{{ $record->city }}</td>
                                    <td>{{ $record->province }}</td>
                                    <td>
                                        @if($record->is_foreign_currency && $record->foreignCurrency)
                                            {{ $record->foreignCurrency->name }}
                                        @else
                                            {{ $defaultHomeCurrencyName }}
                                        @endif
                                    </td>
                                    <td>{{ $record->category->name ?? '' }}</td>
                                    <td>{{ $record->salesRep->name ?? '' }}</td>
                                    <td>{{ $record->ageAnalysis->description ?? '' }}</td>
                                    <td>{{ $record->terms }}</td>
                                    <td>{{ $record->area->name ?? '' }}</td>
                                    <td class="text-center">
                                        <a href="#" class="btn btn-sm btn-primary"
                                            onclick="editAccount(event,
                                                '{{ $record->id }}',
                                                '{{ $record->customer_code }}',
                                                '{{ $record->customer_account }}',
                                                '{{ $record->contact_person }}',
                                                '{{ $record->contact_1 }}',
                                                '{{ $record->contact_2 }}',
                                                '{{ $record->email }}',
                                                '{{ $record->address }}',
                                                '{{ $record->category_id }}',
                                                '{{ $record->sales_rep_id }}',
                                                '{{ $record->age_analysis_id }}',
                                                '{{ $record->area_id }}',
                                                '{{ $record->vat }}',
                                                '{{ $record->tin }}',
                                                '{{ $record->city }}',
                                                '{{ $record->province }}',
                                                '{{ $record->is_foreign_currency }}',
                                                '{{ $record->foreign_currency_id }}',
                                                '{{ $record->terms }}'
                                            )">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{{ route('customer.accounts.delete', ['id' => $record->id]) }}" class="btn btn-sm btn-danger deleteBtn">
                                            <i class="fas fa-trash-alt"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Deletion</h5>
            </div>
            <div class="modal-body">Are you sure you want to delete this customer account?</div>
            <div class="modal-footer">
                <button id="cancelDeleteBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmDeleteBtn" type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Toggle foreign currency field
    document.getElementById('is_foreign_currency').addEventListener('change', function() {
        document.getElementById('foreignCurrencyField').style.display = 
            this.checked ? 'block' : 'none';
            
        if (!this.checked) {
            document.getElementById('foreign_currency_id').value = '';
        }
    });

    // Load terms when age analysis changes
    document.getElementById('age_analysis_id').addEventListener('change', function() {
        const ageAnalysisId = this.value;
        const termsSelect = document.getElementById('terms');
        
        // Clear previous options
        termsSelect.innerHTML = '<option value="">Select Terms</option>';
        
        if (ageAnalysisId) {
            // Fetch terms via AJAX
            fetch(`/get-ageing-terms/${ageAnalysisId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        data.terms.forEach(term => {
                            if (term) {
                                const option = document.createElement('option');
                                option.value = term;
                                option.textContent = term;
                                termsSelect.appendChild(option);
                            }
                        });
                    }
                })
                .catch(error => {
                    console.error('Error fetching terms:', error);
                });
        }
    });

    function editAccount(event, id, customerCode, customerAccount, contactPerson, contact1, contact2, email, address, categoryId, salesRepId, ageAnalysisId, areaId, vat, tin, city, province, isForeignCurrency, foreignCurrencyId, terms) {
        event.preventDefault();
        document.getElementById('accountId').value = id;
        document.getElementById('customer_code').value = customerCode;
        document.getElementById('customer_account').value = customerAccount;
        document.querySelector('[name="contact_person"]').value = contactPerson;
        document.querySelector('[name="contact_1"]').value = contact1;
        document.querySelector('[name="contact_2"]').value = contact2;
        document.querySelector('[name="email"]').value = email;
        document.querySelector('[name="address"]').value = address;
        document.querySelector('[name="category_id"]').value = categoryId;
        document.querySelector('[name="sales_rep_id"]').value = salesRepId;
        document.querySelector('[name="age_analysis_id"]').value = ageAnalysisId;
        document.querySelector('[name="area_id"]').value = areaId;
        document.querySelector('[name="terms"]').value = terms;
        
        // Load terms for the selected age analysis
        if (ageAnalysisId) {
            const termsSelect = document.getElementById('terms');
            // Clear previous options
            termsSelect.innerHTML = '<option value="">Select Terms</option>';
            
            // Fetch terms via AJAX
            fetch(`/get-ageing-terms/${ageAnalysisId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        data.terms.forEach(t => {
                            if (t) {
                                const option = document.createElement('option');
                                option.value = t;
                                option.textContent = t;
                                if (t === terms) {
                                    option.selected = true;
                                }
                                termsSelect.appendChild(option);
                            }
                        });
                    }
                })
                .catch(error => {
                    console.error('Error fetching terms:', error);
                });
        }
        
        // New fields
        document.querySelector('[name="vat"]').value = vat;
        document.querySelector('[name="tin"]').value = tin;
        document.querySelector('[name="city"]').value = city;
        document.querySelector('[name="province"]').value = province;
        
        // Foreign currency fields
        const isForeign = isForeignCurrency === '1';
        document.querySelector('[name="is_foreign_currency"]').checked = isForeign;
        document.getElementById('foreignCurrencyField').style.display = isForeign ? 'block' : 'none';
        document.querySelector('[name="foreign_currency_id"]').value = foreignCurrencyId;

        document.querySelector('.card-header h5').innerHTML = '<i class="fas fa-user me-2"></i> Edit Customer Account';
        document.getElementById('submitButton').value = 'Update';
        document.getElementById('customerAccountForm').action = '{{ route("customer.accounts.edit") }}';
        
        // Scroll to form
        document.getElementById('customerAccountForm').scrollIntoView({ behavior: 'smooth' });
    }

    function resetForm() {
        document.getElementById('accountId').value = '';
        document.getElementById('customer_code').value = '';
        document.getElementById('customer_account').value = '';
        document.querySelector('.card-header h5').innerHTML = '<i class="fas fa-user me-2"></i> Add Customer Account';
        document.getElementById('submitButton').value = 'SUBMIT';
        document.getElementById('customerAccountForm').action = '{{ route("customer.accounts.store") }}';
        document.getElementById('timeout').innerHTML = '';
        
        // Reset new fields
        document.querySelector('[name="vat"]').value = '';
        document.querySelector('[name="tin"]').value = '';
        document.querySelector('[name="city"]').value = '';
        document.querySelector('[name="province"]').value = '';
        
        // Reset foreign currency
        document.querySelector('[name="is_foreign_currency"]').checked = false;
        document.getElementById('foreignCurrencyField').style.display = 'none';
        document.querySelector('[name="foreign_currency_id"]').value = '';
        
        // Reset terms dropdown
        document.getElementById('terms').innerHTML = '<option value="">Select Terms</option>';
        
        // Clear validation classes
        const invalidInputs = document.querySelectorAll('.is-invalid');
        invalidInputs.forEach(input => {
            input.classList.remove('is-invalid');
        });
        
        const invalidFeedbacks = document.querySelectorAll('.invalid-feedback');
        invalidFeedbacks.forEach(feedback => {
            feedback.remove();
        });
    }

    document.addEventListener('DOMContentLoaded', function(){
        let deleteUrl = null;
        const modalEl = document.getElementById('deleteConfirmModal');
        const bsModal = new bootstrap.Modal(modalEl);

        document.querySelectorAll('.deleteBtn').forEach(btn => {
            btn.addEventListener('click', function(e){
                e.preventDefault();
                deleteUrl = this.getAttribute('href');
                bsModal.show();
            });
        });

        document.getElementById('confirmDeleteBtn').addEventListener('click', function(){
            bsModal.hide();
            window.location.href = deleteUrl;
        });

        document.getElementById('cancelDeleteBtn').addEventListener('click', function(){
            bsModal.hide();
        });
        
        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
    });
</script>

<style>
.btn-back {
    text-decoration: none;
    color: #1AB9D9;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-back:hover {
    background-color: rgba(26, 185, 217, 0.1);
    text-decoration: none;
}
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 12px 20px;
}
.table th {
    background-color: #f8f9fa;
}
</style>
@endsection