@extends('layouts.app')
@section('title', 'Dimensions')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Dimensions</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Dimensions</h1>
        <p class="page-subtitle">Configure up to 7 analysis dimensions — cost centres, projects, branches, etc.</p>
    </div>
</div>

<div class="row g-4">
    {{-- Config Card --}}
    <div class="col-12 col-xl-5">
        <div class="card h-100">
            <div class="card-header fw-semibold">
                <i class="bi bi-sliders me-2 text-primary"></i>Configure Dimension Names
            </div>
            <div class="card-body">
                <div class="alert alert-info py-2 mb-4" style="font-size:13px">
                    <i class="bi bi-lightbulb me-1"></i>
                    Enable only what you need. Name them to match your business — Cost Centre, Project, Branch, Department…
                </div>

                <form method="POST" action="{{ route('dimensions.update-slots') }}" id="slotsForm">
                @csrf @method('PUT')

                @for($i = 1; $i <= 7; $i++)
                @php $dim = $slots[$i] ?? null; @endphp
                <div class="d-flex align-items-center gap-3 p-3 mb-2 rounded-2 border"
                     style="background:{{ $dim?->is_active ? '#f0f7ff' : '#f8f9fa' }}">
                    <div class="rounded-2 d-flex align-items-center justify-content-center fw-bold flex-shrink-0"
                         style="width:32px;height:32px;font-size:13px;background:{{ $dim?->is_active ? 'var(--primary)' : '#dee2e6' }};color:{{ $dim?->is_active ? '#fff' : '#6c757d' }}">
                        D{{ $i }}
                    </div>
                    <div class="flex-fill">
                        <input type="text" name="slots[{{ $i }}][name]"
                               class="form-control form-control-sm"
                               value="{{ old("slots.{$i}.name", $dim?->name ?? "Dimension {$i}") }}"
                               placeholder="Dimension {{ $i }} name" required>
                    </div>
                    <div class="form-check form-switch mb-0 flex-shrink-0">
                        <input class="form-check-input" type="checkbox"
                               name="slots[{{ $i }}][is_active]" value="1"
                               id="d{{ $i }}a" {{ old("slots.{$i}.is_active", $dim?->is_active) ? 'checked':'' }}>
                        <label class="form-check-label" for="d{{ $i }}a" style="font-size:12px">On</label>
                    </div>
                    @if($dim?->is_active)
                    <a href="{{ route('dimensions.values', $dim) }}"
                       class="btn btn-outline-primary btn-sm flex-shrink-0" title="Manage Values">
                        <i class="bi bi-list-ul"></i>
                    </a>
                    @endif
                </div>
                @endfor

                <button type="submit" class="btn btn-primary w-100 mt-3" id="saveBtn">
                    <i class="bi bi-check-circle me-1"></i>Save Dimension Settings
                </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Summary + Info --}}
    <div class="col-12 col-xl-7">
        <div class="card mb-4">
            <div class="card-header fw-semibold">
                <i class="bi bi-diagram-3 me-2 text-primary"></i>Active Dimensions
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:60px">Slot</th>
                                <th>Name</th>
                                <th class="text-center d-none d-sm-table-cell" style="width:80px">Values</th>
                                <th style="width:90px">Status</th>
                                <th style="width:130px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for($i = 1; $i <= 7; $i++)
                            @php $dim = $slots[$i] ?? null; @endphp
                            <tr>
                                <td>
                                    <span class="badge rounded-pill"
                                          style="background:{{ $dim?->is_active ? 'var(--primary)' : '#e9ecef' }};color:{{ $dim?->is_active ? '#fff' : '#6c757d' }}">
                                        D{{ $i }}
                                    </span>
                                </td>
                                <td class="fw-semibold" style="font-size:13.5px">{{ $dim?->name ?? "Dimension {$i}" }}</td>
                                <td class="text-center d-none d-sm-table-cell">
                                    @if($dim)
                                        <span class="badge bg-light text-dark border">{{ $dim->values()->count() }}</span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if($dim?->is_active)
                                        <span class="badge" style="background:#d1e7dd;color:#0a3622;font-size:11px">Active</span>
                                    @else
                                        <span class="badge" style="background:#e9ecef;color:#495057;font-size:11px">Inactive</span>
                                    @endif
                                </td>
                                <td>
                                    @if($dim?->is_active)
                                    <a href="{{ route('dimensions.values', $dim) }}"
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-list-ul me-1"></i>Values
                                    </a>
                                    @else
                                    <span class="text-muted" style="font-size:12px">Enable to manage</span>
                                    @endif
                                </td>
                            </tr>
                            @endfor
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header fw-semibold">
                <i class="bi bi-info-circle me-2 text-primary"></i>How Dimensions Work
            </div>
            <div class="card-body">
                <div class="row g-3">
                    @foreach([
                        ['check-circle text-success','Fully Custom','Name them anything — Cost Centre, Project, Branch, Department, Region…'],
                        ['diagram-3 text-primary','Tree Structure','Each dimension supports unlimited parent-child hierarchy levels.'],
                        ['receipt text-warning','Used in Transactions','Select dimension values on each voucher line for detailed P&L analysis.'],
                        ['bar-chart text-info','Dimension Reports','P&L and other reports can be filtered and grouped by dimension.'],
                    ] as [$icon,$title,$desc])
                    <div class="col-12 col-sm-6">
                        <div class="d-flex gap-2">
                            <i class="bi bi-{{ $icon }} fs-5 flex-shrink-0 mt-1"></i>
                            <div>
                                <strong style="font-size:13.5px">{{ $title }}</strong>
                                <div class="text-muted" style="font-size:12.5px">{{ $desc }}</div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('slotsForm').addEventListener('submit', function() {
    const b = document.getElementById('saveBtn');
    b.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
    b.disabled = true;
});
</script>
@endpush