@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">E-invoicing Settings</h1>
                    <p class="text-muted mb-0">Configure LHDN e-invoicing compliance settings</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.settings', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to HR Settings
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ 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" role="alert">
            <strong>Please fix the following errors:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Settings Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">E-invoicing Configuration</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('companies.hr.settings.einvoicing.update', $company) }}">
                        @csrf
                        @method('PUT')

                        <!-- E-invoicing Function Toggle -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center p-3 border rounded">
                                    <div>
                                        <h6 class="fw-bold mb-1">E-invoicing function</h6>
                                        <small class="text-muted">Enable LHDN e-invoicing compliance for your company</small>
                                    </div>
                                    <div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch"
                                                   id="einvoicing_enabled" name="einvoicing_enabled"
                                                   {{ old('einvoicing_enabled', $settings->einvoicing_enabled) ? 'checked' : '' }}>
                                            <label class="form-check-label fw-bold" for="einvoicing_enabled">
                                                <span id="toggle-status">{{ $settings->einvoicing_enabled ? 'Enabled' : 'Disabled' }}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="einvoicing-fields" style="{{ old('einvoicing_enabled', $settings->einvoicing_enabled) ? '' : 'display: none;' }}">
                            <!-- Tax Identification Number -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <label class="form-label fw-bold">Tax Identification Number (TIN)</label>
                                    <input type="text" class="form-control @error('tax_identification_number') is-invalid @enderror"
                                           name="tax_identification_number"
                                           value="{{ old('tax_identification_number', $settings->tax_identification_number) }}"
                                           placeholder="IG;">
                                    <small class="text-muted">Enter your company's Tax Identification Number issued by LHDN</small>
                                    @error('tax_identification_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- MSIC Code -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <label class="form-label fw-bold">MSIC Code</label>
                                    <select class="form-select @error('msic_code') is-invalid @enderror"
                                            id="msic_code_select" name="msic_code">
                                        <option value="">Select MSIC Code</option>
                                        @if(old('msic_code', $settings->msic_code))
                                            <option value="{{ old('msic_code', $settings->msic_code) }}" selected>
                                                {{ old('msic_code', $settings->msic_code) }} - {{ old('msic_description', $settings->msic_description) }}
                                            </option>
                                        @endif
                                    </select>
                                    <small class="text-muted">Type at least 3 characters to search</small>
                                    @error('msic_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror

                                    <!-- Hidden field for MSIC description -->
                                    <input type="hidden" name="msic_description" id="msic_description"
                                           value="{{ old('msic_description', $settings->msic_description) }}">
                                </div>
                            </div>

                            <!-- Current MSIC Selection Display -->
                            @if($settings->msic_code && $settings->msic_description)
                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle me-2"></i>
                                        <strong>Current MSIC:</strong> {{ $settings->msic_code }} - {{ $settings->msic_description }}
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>

                        <!-- Save Button -->
                        <div class="d-flex justify-content-end pt-4 border-top">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> Save E-invoicing Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">About E-invoicing</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            <strong>LHDN Compliance:</strong> Required for Malaysian businesses
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-shield-check text-primary me-2"></i>
                            <strong>TIN:</strong> Tax Identification Number from LHDN
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-list-ul text-info me-2"></i>
                            <strong>MSIC:</strong> Malaysian Standard Industrial Classification
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-cloud-upload text-warning me-2"></i>
                            <strong>Digital Invoices:</strong> Electronic submission to LHDN
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-graph-up text-success me-2"></i>
                            <strong>Benefits:</strong> Faster processing, reduced errors
                        </li>
                    </ul>

                    <div class="mt-3 p-3 bg-light rounded">
                        <small class="text-muted">
                            <i class="bi bi-lightbulb me-1"></i>
                            <strong>Tip:</strong> Your MSIC code should match your primary business activity as registered with SSM.
                        </small>
                    </div>
                </div>
            </div>

            <!-- Current Status -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Current Status</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="small text-muted">E-invoicing</div>
                            <div class="fw-bold {{ $settings->einvoicing_enabled ? 'text-success' : 'text-muted' }}">
                                {{ $settings->einvoicing_enabled ? 'Enabled' : 'Disabled' }}
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">Setup</div>
                            <div class="fw-bold {{ ($settings->tax_identification_number && $settings->msic_code) ? 'text-success' : 'text-warning' }}">
                                {{ ($settings->tax_identification_number && $settings->msic_code) ? 'Complete' : 'Pending' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggle = document.getElementById('einvoicing_enabled');
    const fields = document.getElementById('einvoicing-fields');
    const status = document.getElementById('toggle-status');

    // Handle toggle state change
    toggle.addEventListener('change', function() {
        if (this.checked) {
            fields.style.display = 'block';
            status.textContent = 'Enabled';
        } else {
            fields.style.display = 'none';
            status.textContent = 'Disabled';
        }
    });

    // Initialize Select2 for MSIC code search
    $('#msic_code_select').select2({
        ajax: {
            url: '{{ route("companies.hr.settings.msic-search", $company) }}',
            dataType: 'json',
            delay: 300,
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: data.results || []
                };
            },
            cache: true
        },
        minimumInputLength: 3,
        placeholder: 'Type at least 3 characters to search MSIC codes',
        allowClear: true
    });

    // Handle MSIC code selection
    $('#msic_code_select').on('select2:select', function (e) {
        var data = e.params.data;
        document.getElementById('msic_description').value = data.description || '';
    });

    // Handle MSIC code clearing
    $('#msic_code_select').on('select2:clear', function (e) {
        document.getElementById('msic_description').value = '';
    });
});
</script>
@endpush

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
</style>
@endpush