@extends('layouts.app')


@section('content')
    <div id="app">
        <allowed-jobs></allowed-jobs>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-12">
                        <div class="card-group">
                            <div class="card">
                                <div class="card-header">
                                    <div class="float-left">
                                        Allowed Jobs
                                    </div>
                                    <div class="float-right">
                                        <button class="btn btn-primary">Save</button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row m-1">
                                        <div class="col">
                                            {{-- header --}}
                                            <div class="row mb-2 p-2 text-bold bg-dark text-light fw-bold">
                                                <div class="col-11">
                                                    Services and Jobs
                                                </div>
                                                <div class="col-1">
                                                    Enabled
                                                </div>
                                            </div>
                                            {{-- services and jobs --}}
                                            @forelse ($availableServices as $as)
                                                <div class="row p-2">
                                                    <div class="col-11">
                                                        <a data-bs-toggle="collapse" href="#service-{{ $as->id }}"
                                                            aria-expanded="false"
                                                            aria-controls="service-{{ $as->id }}">{{ $as->service }}</a>
                                                    </div>
                                                    <div class="col-1">
                                                        0/{{ count($as->jobs) }}
                                                    </div>
                                                </div>
                                                <div class="collapse multi-collapse" id="service-{{ $as->id }}">
                                                    @forelse ($as->jobs as $aj)
                                                        <div class="row p-2">
                                                            <div
                                                                class="col ms-3 @if (in_array($aj->id, $allowedJobs)) fw-bold @endif">
                                                                {{ $aj->job }}
                                                            </div>
                                                            <div class="col-1">
                                                                <input type="checkbox" id="job-cb-{{ $aj->id }}"
                                                                    name="job-cb-{{ $aj->id }}"
                                                                    @if (in_array($aj->id, $allowedJobs)) checked @endif>
                                                            </div>
                                                        </div>
                                                    @empty
                                                        <div class="row p-2">
                                                            <div class="col ms-3">
                                                                No data available
                                                            </div>
                                                        </div>
                                                    @endforelse
                                                </div>
                                            @empty
                                                <div class="row p-2">
                                                    <div class="col">
                                                        No data available
                                                    </div>
                                                </div>
                                            @endforelse

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection