<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.CreateTitle', __('Create New Cost Center')) }}
            </h2>
            <div>
                <a href="{{ route('accounting.cost-centers.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                    </svg>
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Cancel', __('Back')) }}
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <form action="{{ route('accounting.cost-centers.store') }}" method="POST">
                        @csrf

                        <div class="mb-6">
                            <x-input-label for="code" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Code', __('Cost Center Code'))" />
                            <x-text-input 
                                id="code" 
                                class="block mt-1 w-full bg-gray-100 cursor-not-allowed" 
                                type="text" 
                                value="{{ $nextCode }}" 
                                readonly 
                            />
                            <small class="text-gray-500 mt-1 block">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.AutoGeneratedCode', __('Auto-generated based on parent')) }}</small>
                            <x-input-error :messages="$errors->get('code')" class="mt-2" />
                        </div>

                        <div class="mb-6">
                            <x-input-label for="name" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.NameEnglish', __('Name (English)'))" />
                            <x-text-input 
                                id="name" 
                                class="block mt-1 w-full" 
                                type="text" 
                                name="name" 
                                :value="old('name')" 
                                required 
                                :placeholder="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.NamePlaceholder', __('Example: Main Project'))"
                            />
                            <x-input-error :messages="$errors->get('name')" class="mt-2" />
                        </div>

                        <div class="mb-6">
                            <x-input-label for="name_ar" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.NameArabic', __('Name (Arabic)'))" />
                            <x-text-input 
                                id="name_ar" 
                                class="block mt-1 w-full" 
                                type="text" 
                                name="name_ar" 
                                :value="old('name_ar')" 
                                required 
                                :placeholder="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.NameArabicPlaceholder', __('Example: Main Project (Arabic)'))"
                            />
                            <x-input-error :messages="$errors->get('name_ar')" class="mt-2" />
                        </div>

                        <div class="mb-6">
                            <x-input-label for="description" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.DescriptionField', __('Description'))" />
                            <textarea 
                                id="description" 
                                name="description" 
                                class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" 
                                rows="3"
                                placeholder="{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.DescriptionPlaceholder', __('Enter description')) }}"
                            >{{ old('description') }}</textarea>
                            <x-input-error :messages="$errors->get('description')" class="mt-2" />
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <x-input-label for="cost_center_type_id" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Type', __('Type'))" />
                                <select 
                                    id="cost_center_type_id" 
                                    name="cost_center_type_id" 
                                    class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                                >
                                    <option value="">-- {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Select', __('Select')) }} --</option>
                                    @foreach ($types as $type)
                                        <option 
                                            value="{{ $type->id }}" 
                                            {{ old('cost_center_type_id') == $type->id ? 'selected' : '' }}
                                        >
                                            {{ $type->name_ar }}
                                        </option>
                                    @endforeach
                                </select>
                                <x-input-error :messages="$errors->get('cost_center_type_id')" class="mt-2" />
                            </div>

                            <div>
                                <x-input-label for="cost_center_category_id" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Category', __('Category'))" />
                                <select 
                                    id="cost_center_category_id" 
                                    name="cost_center_category_id" 
                                    class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                                >
                                    <option value="">-- {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Select', __('Select')) }} --</option>
                                    @foreach ($categories as $category)
                                        <option 
                                            value="{{ $category->id }}" 
                                            {{ old('cost_center_category_id') == $category->id ? 'selected' : '' }}
                                        >
                                            {{ $category->name_ar }}
                                        </option>
                                    @endforeach
                                </select>
                                <x-input-error :messages="$errors->get('cost_center_category_id')" class="mt-2" />
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <x-input-label for="parent_id" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Parent', __('Parent Cost Center'))" />
                                <select 
                                    id="parent_id" 
                                    name="parent_id" 
                                    class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                                >
                                    <option value="">-- {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.NoParent', __('No parent (Root level)')) }} --</option>
                                    @foreach ($parents as $parent)
                                        <option 
                                            value="{{ $parent->id }}" 
                                            {{ old('parent_id') == $parent->id ? 'selected' : '' }}
                                        >
                                            {{ $parent->code }} - {{ $parent->name_ar }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-gray-500 mt-1 block">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.ParentSelectionHint', __('Only Parent type centers can be selected')) }}</small>
                                <x-input-error :messages="$errors->get('parent_id')" class="mt-2" />
                            </div>

                            <div>
                                <x-input-label for="center_type" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Type', __('Center Type'))" />
                                <select 
                                    id="center_type" 
                                    name="center_type" 
                                    class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" 
                                    required
                                >
                                    <option value="">-- {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Select', __('Select')) }} --</option>
                                    <option value="parent" {{ old('center_type') === 'parent' ? 'selected' : '' }}>
                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.TypeParent', __('Parent (Can have children)')) }}
                                    </option>
                                    <option value="leaf" {{ old('center_type') === 'leaf' ? 'selected' : '' }}>
                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.TypeLeaf', __('Leaf (Terminal node)')) }}
                                    </option>
                                </select>
                                <small class="text-gray-500 mt-1 block">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.TypeHint', __('Parent: Can add sub-centers, Leaf: Cannot add sub-centers')) }}</small>
                                <x-input-error :messages="$errors->get('center_type')" class="mt-2" />
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <x-input-label for="budget" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Budget', __('Budget Amount'))" />
                                <x-text-input 
                                    id="budget" 
                                    class="block mt-1 w-full" 
                                    type="number" 
                                    name="budget" 
                                    :value="old('budget')" 
                                    step="0.01" 
                                    min="0"
                                    placeholder="0.00"
                                />
                                <x-input-error :messages="$errors->get('budget')" class="mt-2" />
                            </div>

                            <div>
                                <x-input-label for="status" :value="\App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Status', __('Status'))" />
                                <select 
                                    id="status" 
                                    name="status" 
                                    class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" 
                                    required
                                >
                                    <option value="active" {{ old('status') === 'active' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Active', __('Active')) }}</option>
                                    <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Inactive', __('Inactive')) }}</option>
                                </select>
                                <x-input-error :messages="$errors->get('status')" class="mt-2" />
                            </div>
                        </div>

                        <div class="flex items-center justify-end gap-3 mt-8">
                            <a href="{{ route('accounting.cost-centers.index') }}" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
                                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Cancel', __('Cancel')) }}
                            </a>
                            <x-primary-button>
                                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Save', __('Save')) }}
                            </x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('parent_id').addEventListener('change', function() {
            const parentId = this.value;
            const companyId = {{ session('company_id') }};
            
            if (!parentId) {
                fetch(`{{ url('/api/cost-centers/next-code') }}?company_id=${companyId}`)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('code').value = data.code;
                    })
                    .catch(error => console.error('Error:', error));
            } else {
                fetch(`{{ url('/api/cost-centers/next-code') }}?company_id=${companyId}&parent_id=${parentId}`)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('code').value = data.code;
                    })
                    .catch(error => console.error('Error:', error));
            }
        });
    </script>
</x-app-layout>
