@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">Organization Structure Settings</h1>
                    <p class="text-muted mb-0">Manage company locations and subsidiaries</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.settings', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Settings
                    </a>
                </div>
            </div>
        </div>
    </div>

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

                        <!-- Company Locations Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold mb-3" style="color: #2c3e50;">Company Locations</h6>
                                <p class="text-muted small mb-3">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Define the physical locations where your company operates. These will be available when adding employees.
                                </p>
                            </div>
                        </div>

                        <div id="locations-container" class="mb-4">
                            @if(!empty($settings->company_locations))
                                @foreach($settings->company_locations as $key => $location)
                                <div class="row mb-2 location-row">
                                    <div class="col-10">
                                        <input type="text" class="form-control" name="company_locations[]" 
                                               value="{{ $location }}" placeholder="Enter location name">
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-outline-danger remove-location">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                @endforeach
                            @else
                                <div class="row mb-2 location-row">
                                    <div class="col-10">
                                        <input type="text" class="form-control" name="company_locations[]" 
                                               value="Kuala Lumpur" placeholder="Enter location name">
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-outline-danger remove-location">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <button type="button" id="add-location" class="btn btn-outline-primary">
                                    <i class="bi bi-plus-circle"></i> Add Location
                                </button>
                            </div>
                        </div>

                        <!-- Company Subsidiaries Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold mb-3" style="color: #2c3e50;">Company Subsidiaries</h6>
                                <p class="text-muted small mb-3">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Define your company's subsidiaries or divisions. These help organize employees by business units.
                                </p>
                            </div>
                        </div>

                        <div id="subsidiaries-container" class="mb-4">
                            @if(!empty($settings->company_subsidiaries))
                                @foreach($settings->company_subsidiaries as $key => $subsidiary)
                                <div class="row mb-2 subsidiary-row">
                                    <div class="col-10">
                                        <input type="text" class="form-control" name="company_subsidiaries[]" 
                                               value="{{ $subsidiary }}" placeholder="Enter subsidiary name">
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-outline-danger remove-subsidiary">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                @endforeach
                            @else
                                <div class="row mb-2 subsidiary-row">
                                    <div class="col-10">
                                        <input type="text" class="form-control" name="company_subsidiaries[]" 
                                               value="Main Office" placeholder="Enter subsidiary name">
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-outline-danger remove-subsidiary">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <button type="button" id="add-subsidiary" class="btn btn-outline-primary">
                                    <i class="bi bi-plus-circle"></i> Add Subsidiary
                                </button>
                            </div>
                        </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 Organization 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">Quick Tips</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="bi bi-geo-alt text-primary me-2"></i>
                            <strong>Locations:</strong> Physical offices, branches, or work sites
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-building text-info me-2"></i>
                            <strong>Subsidiaries:</strong> Business units, divisions, or legal entities
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-people text-success me-2"></i>
                            These options will appear when adding new employees
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-arrow-repeat text-warning me-2"></i>
                            You can update these settings anytime
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-shield-check text-secondary me-2"></i>
                            Existing employee records won't be affected
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Current Summary -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Current Setup</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="small text-muted">Locations</div>
                            <div class="fw-bold">{{ count($settings->company_locations ?? []) }}</div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">Subsidiaries</div>
                            <div class="fw-bold">{{ count($settings->company_subsidiaries ?? []) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add Location functionality
    document.getElementById('add-location').addEventListener('click', function() {
        const container = document.getElementById('locations-container');
        const newRow = document.createElement('div');
        newRow.className = 'row mb-2 location-row';
        newRow.innerHTML = `
            <div class="col-10">
                <input type="text" class="form-control" name="company_locations[]" 
                       placeholder="Enter location name">
            </div>
            <div class="col-2">
                <button type="button" class="btn btn-outline-danger remove-location">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;
        container.appendChild(newRow);
        
        // Focus on the new input
        newRow.querySelector('input').focus();
    });

    // Add Subsidiary functionality
    document.getElementById('add-subsidiary').addEventListener('click', function() {
        const container = document.getElementById('subsidiaries-container');
        const newRow = document.createElement('div');
        newRow.className = 'row mb-2 subsidiary-row';
        newRow.innerHTML = `
            <div class="col-10">
                <input type="text" class="form-control" name="company_subsidiaries[]" 
                       placeholder="Enter subsidiary name">
            </div>
            <div class="col-2">
                <button type="button" class="btn btn-outline-danger remove-subsidiary">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;
        container.appendChild(newRow);
        
        // Focus on the new input
        newRow.querySelector('input').focus();
    });

    // Remove Location functionality
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-location')) {
            const row = e.target.closest('.location-row');
            const container = document.getElementById('locations-container');
            
            // Don't allow removing the last location
            if (container.children.length > 1) {
                row.remove();
            } else {
                alert('You must have at least one location defined.');
            }
        }
    });

    // Remove Subsidiary functionality
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-subsidiary')) {
            const row = e.target.closest('.subsidiary-row');
            const container = document.getElementById('subsidiaries-container');
            
            // Don't allow removing the last subsidiary
            if (container.children.length > 1) {
                row.remove();
            } else {
                alert('You must have at least one subsidiary defined.');
            }
        }
    });
});
</script>
@endpush