@extends('dashboard.layouts.app')

@section('content')
    <style>
        .cost-center-form-card {
            border: 1px solid var(--neutral-200);
            border-radius: 10px;
            background: var(--white);
            box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
            overflow: hidden;
        }

        .cost-center-form-section {
            padding: 1.25rem;
            border: 1px solid var(--neutral-200);
            border-radius: 8px;
            background: var(--neutral-50);
        }

        .cost-center-form-section + .cost-center-form-section {
            margin-top: 1rem;
        }

        .cost-center-form-section-title {
            margin-bottom: 1rem;
            color: #111827;
            font-weight: 800;
        }

        .cost-center-parent-toggle {
            min-height: 38px;
            display: flex;
            align-items: center;
            padding: .375rem 0;
        }

        .cost-center-form-footer {
            margin-top: 1.25rem;
            padding-top: 1rem;
            border-top: 1px solid var(--neutral-200);
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="cost-center-form-card">
                    <div class="card-header border-bottom py-3 px-5 d-flex align-items-center justify-content-between gap-3">
                        <div class="fw-bold">Add New Cost Center</div>
                        <a href="{{ route('cost_centers.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
                    </div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('cost_centers.store') }}" method="POST">
                            @csrf
                            <div class="cost-center-form-section">
                                <div class="cost-center-form-section-title">Basic Information</div>
                                <div class="row">
                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <label class="form-label">Code <span class="text-danger">*</span></label>
                                        <input type="text" name="code" class="form-control @error('code') is-invalid @enderror" value="{{ old('code') }}" required>
                                        @error('code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <label class="form-label">Title <span class="text-danger">*</span></label>
                                        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" required>
                                        @error('title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <label class="form-label">Status <span class="text-danger">*</span></label>
                                        <select name="status" class="form-control @error('status') is-invalid @enderror" required>
                                            <option value="Active" {{ old('status', 'Active') === 'Active' ? 'selected' : '' }}>Active</option>
                                            <option value="Inactive" {{ old('status') === 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="cost-center-form-section">
                                <div class="cost-center-form-section-title">Tree Settings</div>
                                <div class="row align-items-end">
                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <div class="form-check cost-center-parent-toggle">
                                            <input
                                                class="form-check-input js-parent-enabled"
                                                type="checkbox"
                                                value="1"
                                                name="parent_enabled"
                                                id="create_cost_center_parent_enabled"
                                                data-target="#create_cost_center_parent_id"
                                                {{ old('parent_enabled') || $errors->has('parent_id') ? 'checked' : '' }}
                                            >
                                            <label class="form-check-label ms-2" for="create_cost_center_parent_enabled">
                                                Has Parent Cost Center
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-6 mb-3">
                                        <label class="form-label">Parent Cost Center</label>
                                        <select name="parent_id" id="create_cost_center_parent_id" class="form-control @error('parent_id') is-invalid @enderror" {{ old('parent_enabled') || $errors->has('parent_id') ? '' : 'disabled' }}>
                                            <option value="">No Parent (Root)</option>
                                            @foreach($parentOptions as $parentOption)
                                                <option value="{{ $parentOption->id }}" {{ (string) old('parent_id') === (string) $parentOption->id ? 'selected' : '' }}>
                                                    {{ $parentOption->code }} - {{ $parentOption->title }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('parent_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="cost-center-form-section">
                                <div class="cost-center-form-section-title">Linked Accounts</div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Revenue Account <span class="text-danger">*</span></label>
                                        <select name="revenue_account_id" class="form-control @error('revenue_account_id') is-invalid @enderror" required>
                                            <option value="">Select Revenue Account</option>
                                            @foreach($revenueAccountOptions as $account)
                                                <option value="{{ $account->id }}" {{ (string) old('revenue_account_id') === (string) $account->id ? 'selected' : '' }}>
                                                    {{ $account->code }} - {{ $account->title }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('revenue_account_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Expense Account <span class="text-danger">*</span></label>
                                        <select name="expense_account_id" class="form-control @error('expense_account_id') is-invalid @enderror" required>
                                            <option value="">Select Expense Account</option>
                                            @foreach($expenseAccountOptions as $account)
                                                <option value="{{ $account->id }}" {{ (string) old('expense_account_id') === (string) $account->id ? 'selected' : '' }}>
                                                    {{ $account->code }} - {{ $account->title }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('expense_account_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="cost-center-form-footer d-flex justify-content-end gap-2">
                                <a href="{{ route('cost_centers.index') }}" class="btn btn-outline-secondary">Cancel</a>
                                <button type="submit" class="btn btn-outline-primary">Create</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.js-parent-enabled').forEach(checkbox => {
                const target = document.querySelector(checkbox.dataset.target);

                const syncParentState = () => {
                    if (!target) return;

                    target.disabled = !checkbox.checked;
                    if (!checkbox.checked) {
                        target.value = '';
                    }
                };

                checkbox.addEventListener('change', syncParentState);
                syncParentState();
            });
        });
    </script>
@endsection