@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h2 class="mb-4">{{ $editUser ? 'Edit' : 'Create' }} Company</h2>

    <!-- Stepper Navigation -->
    <div class="d-flex justify-content-center mb-5">
        <nav class="nav nav-pills stepper-nav" id="stepperNav">
            <a href="#" class="nav-link active" data-step="1">Company Details</a>
            <a href="#" class="nav-link" data-step="2">Contact Details</a>
            <a href="#" class="nav-link" data-step="3">Bank Details</a>
            <a href="#" class="nav-link" data-step="4">Currency</a>
        </nav>
    </div>

    <form method="POST" action="{{ route('companies.save') }}" enctype="multipart/form-data" id="companyForm">
        @csrf
        <input type="hidden" name="recordid" value="{{ $editUser->id ?? '' }}" />

        <!-- Step 1: Company Details -->
        <div class="step-content" data-step="1">
            <div class="mb-3">
                <label class="form-label required">Company Name</label>
                <input type="text" class="form-control form-control-solid" name="name" value="{{ old('name', $editUser->name ?? '') }}" required>
                <div class="invalid-feedback d-block"></div>
            </div>

            <div class="mb-3">
                <label class="form-label">Logo</label>
                <input type="file" class="form-control form-control-solid" name="logo" id="logoInput">
                @if(!empty($editUser->logo))
                    <img src="{{ asset('storage/company_logo/' . $editUser->logo) }}" id="logoPreview" class="img-fluid mt-2" style="max-height: 120px;">
                    <div id="logoFilename" class="text-muted small">{{ $editUser->logo }}</div>
                @else
                    <img id="logoPreview" class="img-fluid mt-2" style="max-height: 120px; display:none;">
                    <div id="logoFilename" class="text-muted small"></div>
                @endif
            </div>

            <div class="mb-3">
                <label class="form-label required">CEO Name</label>
                <input type="text" class="form-control form-control-solid" name="ceo_name" value="{{ old('ceo_name', $editUser->ceo_name ?? '') }}" required>
                <div class="invalid-feedback d-block"></div>
            </div>

            <div class="mb-3">
                <label class="form-label required">Country</label>
                <select class="form-select form-select-solid" name="country_id" required>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}" {{ (old('country_id', $editUser->country_id ?? '') == $country->id) ? 'selected' : '' }}>
                            {{ $country->name }}
                        </option>
                    @endforeach
                </select>
                <div class="invalid-feedback d-block"></div>
            </div>

            <div class="mb-3">
                <label class="form-label">Tax Number</label>
                <input type="text" class="form-control form-control-solid" name="tax_number" value="{{ old('tax_number', $editUser->tax_number ?? '') }}">
            </div>
            <div class="mb-3">
                <label class="form-label">Markup Percentage</label>
                <input type="text" class="form-control form-control-solid" name="markup" value="{{ old('markup', $editUser->markup ?? '') }}">
            </div>
            <div class="mb-3">
                <label class="form-label">Address</label>
                <textarea class="form-control form-control-solid" name="address" rows="3">{{ old('address', $editUser->address ?? '') }}</textarea>
            </div>
        </div>

        <!-- Step 2: Contact Details -->
        <div class="step-content d-none" data-step="2">
            <div class="mb-3">
                <label class="form-label">Mobile Number</label>
                <input type="text" class="form-control form-control-solid" name="mobile_number" value="{{ old('mobile_number', $editUser->mobile_number ?? '') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">Phone Number</label>
                <input type="text" class="form-control form-control-solid" name="phone_number" value="{{ old('phone_number', $editUser->phone_number ?? '') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">WhatsApp Number</label>
                <input type="text" class="form-control form-control-solid" name="whatsapp_number" value="{{ old('whatsapp_number', $editUser->whatsapp_number ?? '') }}">
            </div>

            <div class="mb-3">
                <label class="form-label required">Email</label>
                <input type="email" class="form-control form-control-solid" name="email" value="{{ old('email', $editUser->email ?? '') }}" required>
                <div class="invalid-feedback d-block"></div>
            </div>
        </div>

        <!-- Step 3: Bank Details -->
        <div class="step-content d-none" data-step="3">
            <div class="mb-3">
                <label class="form-label">Bank Name</label>
                <input type="text" class="form-control form-control-solid" name="bank_name" value="{{ old('bank_name', $editUser->bank_name ?? '') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">Bank A/C Number</label>
                <input type="text" class="form-control form-control-solid" name="bank_account_no" value="{{ old('bank_account_no', $editUser->bank_account_no ?? '') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">Account Holder Name</label>
                <input type="text" class="form-control form-control-solid" name="account_holder_name" value="{{ old('account_holder_name', $editUser->account_holder_name ?? '') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">IFSC / SWIFT / IPIN Code</label>
                <input type="text" class="form-control form-control-solid" name="bank_code" value="{{ old('bank_code', $editUser->bank_code ?? '') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">Bank Address</label>
                <textarea class="form-control form-control-solid" name="bank_address" rows="2">{{ old('bank_address', $editUser->bank_address ?? '') }}</textarea>
            </div>
        </div>

        <!-- Step 4: Currency -->
        <div class="step-content d-none" data-step="4">
            <div class="mb-3">
                <label class="form-label required">Currency</label>
                <select name="currency_id" class="form-select form-select-solid" required>
                    <option value="">Select Currency</option>
                    @foreach($currencys as $currency)
                        <option value="{{ $currency->id }}" {{ (old('currency_id', $editUser->currency_id ?? '') == $currency->id) ? 'selected' : '' }}>
                            {{ $currency->currency_name }} ({{ $currency->c_shortname }})
                        </option>
                    @endforeach
                </select>
                <div class="invalid-feedback d-block"></div>
            </div>

            <div class="mb-3">
                <label class="form-label required">VAT</label>
                <select name="vat_id" class="form-select form-select-solid" required>
                    <option value="">Select VAT</option>
                    @foreach($vat as $val)
                        <option value="{{ $val->id }}" {{ (old('vat_id', $editUser->vat_id ?? '') == $val->id) ? 'selected' : '' }}>
                            {{ $val->vat_name }} {{ $val->vat_percentage }}
                        </option>
                    @endforeach
                </select>
                <div class="invalid-feedback d-block"></div>
            </div>
        </div>

        <!-- Navigation Buttons -->
        <div class="d-flex justify-content-between mt-4">
            <button type="button" class="btn btn-secondary" id="prevBtn" disabled>Back</button>
            <button type="button" class="btn btn-primary" id="nextBtn">Next</button>
            <button type="submit" class="btn btn-success d-none" id="submitBtn">Submit</button>
        </div>
    </form>
</div>



{{-- ✅ CSS --}}
<style>
.container.py-5 {
    max-width: 900px;
    margin: 0 auto;
}
.stepper-nav {
    gap: 1rem;
}
.stepper-nav .nav-link {
    cursor: pointer;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid transparent;
    min-width: 140px;
    text-align: center;
}
.stepper-nav .nav-link.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}
.is-invalid {
    border-color: red !important;
    background-color: #ffe6e6 !important;
}
.invalid-feedback {
    color: red;
    font-size: 0.875rem;
}

</style>

{{-- ✅ SCRIPT --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const steps = document.querySelectorAll('.step-content');
    const navLinks = document.querySelectorAll('#stepperNav .nav-link');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const submitBtn = document.getElementById('submitBtn');
    let currentStep = 1;

    function showStep(step) {
        steps.forEach(s => s.classList.add('d-none'));
        navLinks.forEach(n => n.classList.remove('active'));
        document.querySelector(`.step-content[data-step="${step}"]`).classList.remove('d-none');
        document.querySelector(`#stepperNav .nav-link[data-step="${step}"]`).classList.add('active');

        currentStep = step;
        prevBtn.disabled = (step === 1);
        nextBtn.classList.toggle('d-none', step === steps.length);
        submitBtn.classList.toggle('d-none', step !== steps.length);
    }

    function validateCurrentStep() {
        const currentStepContent = document.querySelector(`.step-content[data-step="${currentStep}"]`);
        const requiredFields = currentStepContent.querySelectorAll('[required]');
        let isValid = true;

        requiredFields.forEach(field => {
            const isVisible = field.offsetParent !== null;
            const value = field.value.trim();
            const feedbackEl = field.nextElementSibling;

            if (isVisible && (value === '' || value === null)) {
                isValid = false;
                field.classList.add('is-invalid');
                if (feedbackEl && feedbackEl.classList.contains('invalid-feedback')) {
                    const label = field.closest('.mb-3').querySelector('.form-label');
                    const labelText = label ? label.textContent.replace('*', '').trim() : 'This field';
                    feedbackEl.textContent = `${labelText} is required.`;
                }
            } else {
                field.classList.remove('is-invalid');
                if (feedbackEl && feedbackEl.classList.contains('invalid-feedback')) {
                    feedbackEl.textContent = '';
                }
            }
        });

        return isValid;
    }

    navLinks.forEach(link => {
        link.addEventListener('click', e => {
            e.preventDefault();
            const step = parseInt(link.getAttribute('data-step'));
            if (step <= currentStep || validateCurrentStep()) {
                showStep(step);
            }
        });
    });

    nextBtn.addEventListener('click', () => {
        if (validateCurrentStep()) {
            showStep(currentStep + 1);
        }
    });

    prevBtn.addEventListener('click', () => {
        showStep(currentStep - 1);
    });

    document.querySelectorAll('input, select, textarea').forEach(input => {
        input.addEventListener('input', () => {
            if (input.value.trim()) {
                input.classList.remove('is-invalid');
                const feedback = input.nextElementSibling;
                if (feedback && feedback.classList.contains('invalid-feedback')) {
                    feedback.textContent = '';
                }
            }
        });
    });

    // Logo Preview
    const logoInput = document.getElementById('logoInput');
    const logoPreview = document.getElementById('logoPreview');
    const logoFilename = document.getElementById('logoFilename');
    logoInput.addEventListener('change', () => {
        const file = logoInput.files[0];
        if (file) {
            logoFilename.textContent = file.name;
            const reader = new FileReader();
            reader.onload = e => {
                logoPreview.src = e.target.result;
                logoPreview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            logoPreview.style.display = 'none';
            logoFilename.textContent = '';
        }
    });

    showStep(currentStep);
});
</script>
@endsection