@extends('dashboard.layouts.app')

@section('content')
    <style>
        .cost-centers-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-centers-card .card-header {
            background: var(--white);
        }

        .cost-centers-table-wrap {
            margin: 1rem;
            border: 1px solid var(--neutral-200);
            border-radius: 8px;
            background: var(--white);
            overflow-x: auto !important;
            overflow-y: hidden !important;
        }

        .cost-centers-table {
            width: 100%;
            min-width: 1650px !important;
            table-layout: fixed;
        }

        .cost-centers-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: var(--neutral-50);
            color: #475569;
            font-size: .76rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: .035em;
            white-space: nowrap;
        }

        .cost-centers-table tbody td {
            vertical-align: middle;
            color: #334155;
            font-size: .88rem;
            font-weight: 650;
            overflow: hidden;
        }

        .cost-centers-table tbody tr:hover td {
            background: #f8fafc;
        }

        .cost-centers-table th:nth-child(1),
        .cost-centers-table td:nth-child(1) {
            width: 150px;
        }

        .cost-centers-table th:nth-child(2),
        .cost-centers-table td:nth-child(2) {
            width: 300px;
        }

        .cost-centers-table th:nth-child(3),
        .cost-centers-table td:nth-child(3) {
            width: 260px;
        }

        .cost-centers-table th:nth-child(4),
        .cost-centers-table td:nth-child(4),
        .cost-centers-table th:nth-child(5),
        .cost-centers-table td:nth-child(5) {
            width: 230px;
        }

        .cost-centers-table th:nth-child(6),
        .cost-centers-table td:nth-child(6) {
            width: 120px;
        }

        .cost-centers-table th:nth-child(7),
        .cost-centers-table td:nth-child(7) {
            width: 170px;
        }

        .cost-centers-table th:nth-child(8),
        .cost-centers-table td:nth-child(8) {
            width: 190px;
        }

        .cost-center-code {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 850;
            color: var(--primary-600, #2563eb);
        }

        .cost-center-tree-line {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            min-width: 0;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .cost-center-title,
        .cost-center-account-title,
        .cost-center-parent-label,
        .cost-center-user-cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cost-center-title {
            display: inline-block;
            min-width: 0;
            max-width: 100%;
            color: #111827;
            font-weight: 850;
        }

        .cost-center-parent-label {
            display: block;
            max-width: 100%;
            color: #334155;
            font-weight: 750;
        }

        .cost-center-account {
            display: inline-flex;
            flex-direction: column;
            gap: .12rem;
            max-width: 100%;
            min-width: 0;
            line-height: 1.25;
        }

        .cost-center-account-title {
            display: block;
            max-width: 100%;
            color: #111827;
            font-weight: 800;
        }

        .cost-center-account-code {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #64748b;
            font-size: .75rem;
            font-weight: 750;
        }

        .cost-center-user-cell {
            max-width: 100%;
        }

        .cost-center-actions {
            min-width: 190px;
        }

        .cost-center-actions .d-flex {
            flex-wrap: nowrap;
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="cost-centers-card h-100">
                    <div class="card-header border-bottom py-3 px-5 d-flex align-items-center flex-wrap justify-content-between gap-3">
                        <x-table-controls 
                            :action="route('cost_centers.index')"
                            :filters="[
                                'status' => ['Active' => 'Active', 'Inactive' => 'Inactive'],
                            ]"
                        />
                        <x-table-action
                            type="create"
                            :url="route('cost_centers.create')"
                            class="d-flex align-items-center gap-2"
                        />
                    </div>

                    <x-table
                        :headers="['Code', 'Title', 'Parent', 'Revenue Account', 'Expense Account', 'Status', 'Created By', 'Actions']"
                        :paginator="$costCenters"
                        wrapper-class="cost-centers-table-wrap"
                        table-class="cost-centers-table table-hover align-middle"
                        table-style="min-width: 1650px;"
                        empty-message="No cost centers found."
                    >
                        @forelse ($costCenters as $center)
                            <tr>
                                <td class="text-center">
                                    <span class="cost-center-code" title="{{ $center->code }}">{{ $center->code }}</span>
                                </td>
                                <td>
                                    <span class="cost-center-tree-line" style="padding-inline-start: {{ max(0, ((int) $center->tree_level - 1) * 22) }}px;">
                                        @if ((int) $center->tree_level > 1)
                                            <span class="text-secondary">--</span>
                                        @endif
                                        <span class="cost-center-title" title="{{ $center->title }}">{{ $center->title }}</span>
                                    </span>
                                </td>
                                <td>
                                    @if ($center->parent)
                                        <span class="cost-center-parent-label" title="{{ $center->parent->code }} - {{ $center->parent->title }}">
                                            {{ $center->parent->code }} - {{ $center->parent->title }}
                                        </span>
                                    @else
                                        <span class="badge rounded-pill bg-light text-secondary border px-3">Root</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($center->revenueAccount)
                                        <span class="cost-center-account">
                                            <span class="cost-center-account-title">{{ $center->revenueAccount->title }}</span>
                                            <span class="cost-center-account-code">{{ $center->revenueAccount->code }}</span>
                                        </span>
                                    @else
                                        <span class="text-secondary">Not set</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($center->expenseAccount)
                                        <span class="cost-center-account">
                                            <span class="cost-center-account-title">{{ $center->expenseAccount->title }}</span>
                                            <span class="cost-center-account-code">{{ $center->expenseAccount->code }}</span>
                                        </span>
                                    @else
                                        <span class="text-secondary">Not set</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="badge {{ $center->status == 'Active' ? 'bg-success' : 'bg-secondary' }}">
                                        {{ $center->status }}
                                    </span>
                                </td>
                                <td class="cost-center-user-cell">{{ $center->creator ? $center->creator->full_name : 'System' }}</td>
                                <td class="text-center cost-center-actions">
                                    <div class="d-flex align-items-center justify-content-center gap-2">
                                        <!-- View Button -->
                                        <x-table-action type="view" :url="route('cost_centers.show', $center->id)" />
                                        <!-- Edit Button -->
                                        <x-table-action type="edit" :target="'#editCostCenterModal' . $center->id" />
                                        <!-- Delete Button -->
                                        <x-table-action type="delete" :target="'#deleteCostCenterModal' . $center->id" />
                                    </div>
                                </td>
                            </tr>

                            <!-- Delete Modal -->
                            <div class="modal fade" id="deleteCostCenterModal{{ $center->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <div class="modal-title">Delete Cost Center</div>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            Are you sure you want to delete this cost center ({{ $center->title }})?
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                                            <form action="{{ route('cost_centers.destroy', $center->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger">Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-3">No cost centers found.</td>
                            </tr>
                        @endforelse
                    </x-table>
                </div>
            </div>
        </div>
    </div>


    @foreach ($costCenters as $center)
        @php
            $isEditingThisCenter = (string) old('editing_cost_center_id') === (string) $center->id;
            $editParentEnabled = $isEditingThisCenter
                ? (old('parent_enabled') || $errors->has('parent_id'))
                : (bool) $center->parent_id;
        @endphp
        <!-- Edit Modal -->
        <div class="modal fade" id="editCostCenterModal{{ $center->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <form action="{{ route('cost_centers.update', $center->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="editing_cost_center_id" value="{{ $center->id }}">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="modal-title">Edit Cost Center</div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Code <span class="text-danger">*</span></label>
                                <input type="text" name="code" class="form-control {{ $isEditingThisCenter && $errors->has('code') ? 'is-invalid' : '' }}" value="{{ $isEditingThisCenter ? old('code') : $center->code }}" required>
                                @if ($isEditingThisCenter)
                                    @error('code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                @endif
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control {{ $isEditingThisCenter && $errors->has('title') ? 'is-invalid' : '' }}" value="{{ $isEditingThisCenter ? old('title') : $center->title }}" required>
                                @if ($isEditingThisCenter)
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                @endif
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input js-parent-enabled" type="checkbox" value="1" name="parent_enabled" id="edit_cost_center_parent_enabled_{{ $center->id }}" data-target="#edit_cost_center_parent_id_{{ $center->id }}" {{ $editParentEnabled ? 'checked' : '' }}>
                                    <label class="form-check-label" for="edit_cost_center_parent_enabled_{{ $center->id }}">
                                        Has Parent Cost Center
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Parent Cost Center</label>
                                <select name="parent_id" id="edit_cost_center_parent_id_{{ $center->id }}" class="form-control {{ $isEditingThisCenter && $errors->has('parent_id') ? 'is-invalid' : '' }}" {{ $editParentEnabled ? '' : 'disabled' }}>
                                    <option value="">No Parent (Root)</option>
                                    @foreach($parentOptions as $parentOption)
                                        @if ($parentOption->id !== $center->id)
                                            <option value="{{ $parentOption->id }}" {{ (string) ($isEditingThisCenter ? old('parent_id') : $center->parent_id) === (string) $parentOption->id ? 'selected' : '' }}>
                                                {{ $parentOption->code }} - {{ $parentOption->title }}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                                @if ($isEditingThisCenter)
                                    @error('parent_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                @endif
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Revenue Account (حساب الإيرادات) <span class="text-danger">*</span></label>
                                <select name="revenue_account_id" class="form-control {{ $isEditingThisCenter && $errors->has('revenue_account_id') ? 'is-invalid' : '' }}" required>
                                    <option value="">Select Revenue Account</option>
                                    @foreach($revenueAccountOptions as $account)
                                        <option value="{{ $account->id }}" {{ (string) ($isEditingThisCenter ? old('revenue_account_id') : $center->revenue_account_id) === (string) $account->id ? 'selected' : '' }}>
                                            {{ $account->code }} - {{ $account->title }}
                                        </option>
                                    @endforeach
                                </select>
                                @if ($isEditingThisCenter)
                                    @error('revenue_account_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                @endif
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Expense Account (حساب المصروفات) <span class="text-danger">*</span></label>
                                <select name="expense_account_id" class="form-control {{ $isEditingThisCenter && $errors->has('expense_account_id') ? 'is-invalid' : '' }}" required>
                                    <option value="">Select Expense Account</option>
                                    @foreach($expenseAccountOptions as $account)
                                        <option value="{{ $account->id }}" {{ (string) ($isEditingThisCenter ? old('expense_account_id') : $center->expense_account_id) === (string) $account->id ? 'selected' : '' }}>
                                            {{ $account->code }} - {{ $account->title }}
                                        </option>
                                    @endforeach
                                </select>
                                @if ($isEditingThisCenter)
                                    @error('expense_account_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                @endif
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select name="status" class="form-control {{ $isEditingThisCenter && $errors->has('status') ? 'is-invalid' : '' }}" required>
                                    <option value="Active" {{ ($isEditingThisCenter ? old('status') : $center->status) == 'Active' ? 'selected' : '' }}>Active</option>
                                    <option value="Inactive" {{ ($isEditingThisCenter ? old('status') : $center->status) == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                </select>
                                @if ($isEditingThisCenter)
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                @endif
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-outline-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    <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();
            });

            const editingCostCenterId = @json(old('editing_cost_center_id'));
            if (editingCostCenterId && @json($errors->any())) {
                const editModal = document.getElementById(`editCostCenterModal${editingCostCenterId}`);
                if (editModal && window.bootstrap?.Modal) {
                    bootstrap.Modal.getOrCreateInstance(editModal).show();
                }
            }
        });
    </script>
@endsection