@extends('layouts.app')

@section('title', 'Leave Rules')
@section('heading', 'Leaves')

@section('content')
@include('leaves.top-submenu')
    {{-- <div class="mb-4 border-b border-slate-200">
        <nav class="-mb-px flex gap-6 text-sm">
            <a href="{{ route('leaves.index') }}" class="border-b-2 px-1 pb-3 {{ request()->routeIs('leaves.*') ? 'border-slate-800 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700' }}">Logs</a>
            <a href="{{ route('leave-types.manage') }}" class="border-b-2 px-1 pb-3 {{ request()->routeIs('leave-types.manage') ? 'border-slate-800 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700' }}">Rules</a>
            <a href="#" class="pointer-events-none border-b-2 border-transparent px-1 pb-3 text-slate-300">Balance</a>
            <a href="#" class="pointer-events-none border-b-2 border-transparent px-1 pb-3 text-slate-300">Analytics</a>
            <a href="{{ route('settings.home') }}" class="border-b-2 px-1 pb-3 border-transparent text-slate-500 hover:text-slate-700">Settings</a>
        </nav>
    </div> --}}

    <div class="grid gap-5 lg:grid-cols-12">
        <div class="lg:col-span-4 xl:col-span-3">
            @include('leave-types.partials._sidebar', [
                'leaveTypes' => $leaveTypes,
                'selectedLeaveType' => $selectedLeaveType,
                'leaveTypeEmployeeCounts' => $leaveTypeEmployeeCounts,
            ])
        </div>

        <div class="lg:col-span-8 xl:col-span-9">
            @if($selectedLeaveType)
                <x-card>
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <h2 class="text-lg font-semibold text-slate-900">{{ $selectedLeaveType->name }}</h2>
                            <p class="mt-1 text-sm text-slate-500">
                                {{ $selectedLeaveType->description ?: '—' }}
                            </p>
                        </div>
                        <a href="{{ route('leave-types.create') }}" class="inline-flex items-center rounded-lg bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200"><i class="bi bi-plus-lg me-1"></i>New</a>
                    </div>

                    <div class="mt-5 border-b border-slate-200">
                        <nav class="-mb-px flex gap-6 text-sm">
                            @php($base = ['leave_type_id' => $selectedLeaveType->id])
                            <a href="{{ route('leave-types.manage', $base + ['tab' => 'general']) }}"
                               class="border-b-2 px-1 pb-3 {{ $tab === 'general' ? 'border-slate-800 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
                                General Settings
                            </a>
                            <a href="{{ route('leave-types.manage', $base + ['tab' => 'advanced']) }}"
                               class="border-b-2 px-1 pb-3 {{ $tab === 'advanced' ? 'border-slate-800 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
                                Advanced Settings
                            </a>
                            <a href="{{ route('leave-types.manage', $base + ['tab' => 'assign']) }}"
                               class="border-b-2 px-1 pb-3 {{ $tab === 'assign' ? 'border-slate-800 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
                                Assign
                            </a>
                        </nav>
                    </div>

                    <div class="mt-6">
                        @if($tab === 'advanced')
                            @include('leave-types.partials._advanced', ['leaveType' => $selectedLeaveType])
                        @elseif($tab === 'assign')
                            @include('leave-types.partials._assign', [
                                'leaveType' => $selectedLeaveType,
                                'departments' => $departments,
                                'roles' => $roles,
                                'users' => $users,
                            ])
                        @else
                            @include('leave-types.partials._general', ['leaveType' => $selectedLeaveType])
                        @endif
                    </div>
                </x-card>
            @else
                <x-card>
                    <p class="text-sm text-slate-600">No leave types yet. Create one to start configuring rules.</p>
                    <div class="mt-4">
                        <a href="{{ route('leave-types.create') }}" class="inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700"><i class="bi bi-plus-lg me-1"></i>Add Leave Type</a>
                    </div>
                </x-card>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('js/form-validation.js') }}"></script>
<script src="{{ asset('js/form-text-rules.js') }}"></script>
<script src="{{ asset('js/leave-type-form-validation.js') }}"></script>
@endpush