@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Leave settings')
@endsection

@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Leave settings</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Home</a></li>
                            <li class="breadcrumb-item">Settings</li>
                            <li class="breadcrumb-item active">Leave settings</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="content">
            <div class="container-fluid">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="row">
                    <div class="col-lg-6">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">Who can approve or reject?</h3>
                            </div>
                            <form action="{{ route('settings.leaves.approvers') }}" method="post">
                                @csrf
                                <div class="card-body">
                                    <p class="text-muted small">
                                        Selected users receive <strong>in-app and email</strong> notifications for new employee leave requests,
                                        and are the only admins who can approve or reject (unless the list is empty — then all active admin users can).
                                    </p>
                                    @if ($approverUsers->isNotEmpty())
                                        <div class="mb-3">
                                            <div class="font-weight-bold mb-1">Assigned approvers</div>
                                            <ul class="list-unstyled mb-0">
                                                @foreach ($approverUsers as $u)
                                                    <li class="mb-1">
                                                        <i class="fas fa-user-check text-primary mr-1"></i>
                                                        <strong>{{ $u->Name ?? '—' }}</strong>
                                                        <span class="text-muted">({{ $u->email }})</span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @else
                                        <p class="text-muted small mb-3">
                                            <strong>Assigned approvers:</strong> none — all active admin users may approve and receive notifications (unless you select people below).
                                        </p>
                                    @endif
                                    <div class="form-group">
                                        <label for="approver_user_ids">Choose admin users</label>
                                        <select name="approver_user_ids[]" id="approver_user_ids" class="form-control" multiple
                                            size="10" style="min-height: 12rem;">
                                            @foreach ($adminUsers as $u)
                                                <option value="{{ $u->idUser }}"
                                                    {{ in_array((int) $u->idUser, $approverIds, true) ? 'selected' : '' }}>
                                                    {{ $u->Name ?? $u->email }} — {{ $u->email }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="form-text text-muted">Hold Ctrl (Windows) or Command (Mac) to select multiple. Leave empty to allow all active admins.</small>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">Save approvers</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card card-outline card-secondary">
                            <div class="card-header">
                                <h3 class="card-title">Leave types &amp; accrual</h3>
                            </div>
                            @foreach ($leaveTypes as $lt)
                                <form id="delete-leave-type-{{ $lt->id }}" method="post"
                                    action="{{ route('settings.leaves.types.destroy', $lt) }}" class="d-none">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            @endforeach

                            <form id="leave-types-days-form" action="{{ route('settings.leaves.types.days') }}" method="post">
                                @csrf
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-striped mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th style="min-width: 8rem;">Accrual</th>
                                                    <th style="min-width: 6rem;">Days / year</th>
                                                    <th style="min-width: 6rem;">Days / month</th>
                                                    <th style="width: 5rem;"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($leaveTypes as $lt)
                                                    @php
                                                        $accrual = old('types.'.$lt->id.'.accrual_cycle', $lt->accrual_cycle ?? 'none');
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $lt->name }}</td>
                                                        <td>
                                                            <select class="form-control form-control-sm"
                                                                name="types[{{ $lt->id }}][accrual_cycle]"
                                                                title="How balance is topped up">
                                                                <option value="none" {{ $accrual === 'none' ? 'selected' : '' }}>None</option>
                                                                <option value="monthly" {{ $accrual === 'monthly' ? 'selected' : '' }}>Monthly (1st)</option>
                                                                <option value="yearly" {{ $accrual === 'yearly' ? 'selected' : '' }}>Yearly (join date)</option>
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control form-control-sm"
                                                                name="types[{{ $lt->id }}][days_per_year]"
                                                                value="{{ old('types.'.$lt->id.'.days_per_year', $lt->days_per_year) }}"
                                                                min="0" max="366" step="1"
                                                                title="Annual entitlement (yearly accrual)">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control form-control-sm"
                                                                name="types[{{ $lt->id }}][days_per_month]"
                                                                value="{{ old('types.'.$lt->id.'.days_per_month', $lt->days_per_month) }}"
                                                                min="0" max="366" step="1"
                                                                title="Granted each calendar month (monthly accrual)">
                                                        </td>
                                                        <td class="text-right">
                                                            <button type="submit" form="delete-leave-type-{{ $lt->id }}"
                                                                class="btn btn-sm btn-outline-danger"
                                                                onclick="return confirm('Remove this leave type? It must not be used on any existing record.');">
                                                                Remove
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                    <span class="text-muted small ml-2">
                                        <strong>Monthly</strong> adds on the 1st of each month.
                                        <strong>Yearly</strong> resets on each employee’s joining-date anniversary (set on the employee profile).
                                    </span>
                                </div>
                            </form>
                            <div class="card-body border-top">
                                <form action="{{ route('settings.leaves.types.store') }}" method="post" class="form-row align-items-end">
                                    @csrf
                                    <div class="form-group col-md-4 mb-2">
                                        <label for="new_leave_type_name">Add leave type</label>
                                        <input type="text" name="name" id="new_leave_type_name" class="form-control"
                                            placeholder="e.g. Maternity" value="{{ old('name') }}" maxlength="120" required>
                                    </div>
                                    <div class="form-group col-md-2 mb-2">
                                        <label for="new_accrual_cycle">Accrual</label>
                                        <select name="accrual_cycle" id="new_accrual_cycle" class="form-control">
                                            <option value="none" {{ old('accrual_cycle', 'none') === 'none' ? 'selected' : '' }}>None</option>
                                            <option value="monthly" {{ old('accrual_cycle') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                                            <option value="yearly" {{ old('accrual_cycle') === 'yearly' ? 'selected' : '' }}>Yearly</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2 mb-2">
                                        <label for="new_days_per_year">Days / year</label>
                                        <input type="number" name="days_per_year" id="new_days_per_year" class="form-control"
                                            value="{{ old('days_per_year') }}" min="0" max="366" placeholder="Optional">
                                    </div>
                                    <div class="form-group col-md-2 mb-2">
                                        <label for="new_days_per_month">Days / month</label>
                                        <input type="number" name="days_per_month" id="new_days_per_month" class="form-control"
                                            value="{{ old('days_per_month') }}" min="0" max="366" placeholder="Optional">
                                    </div>
                                    <div class="form-group col-md-2 mb-2">
                                        <button type="submit" class="btn btn-secondary btn-block">Add</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('script')
    <script src="{{ asset('plugins/bootstrap/js/bootstrap.bundle.js') }}"></script>
    <script src="{{ asset('dist/js/adminlte.min.js') }}"></script>
@endsection