@extends('layouts.app')
@section('content')
    <div class="container">
        <h1 style="text-align: center;">Services</h1>
        <div class="d-flex align-items-start">
            <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <span style="text-align: center; color: var(--navy_blue); border-bottom: 1px solid lightgray; margin-bottom: 4px;">
                    Services
                </span>
                @foreach ($provider_svcs as $key => $svc)
                    <button class="nav-link @if ($key === 0) active @endif"
                        id="v-pills-{{ $svc->id }}-tab" data-bs-toggle="pill"
                        data-bs-target="#v-pills-{{ $svc->id }}" type="button" role="tab"
                        aria-controls="v-pills-{{ $svc->id }}" aria-selected="true">{{ $svc->service }}</button>
                @endforeach
            </div>
            {{-- tab content --}}
            <div class="tab-content" id="v-pills-tabContent" style="width: 100%;">
                @foreach ($provider_svcs as $key => $svc)
                    <div class="tab-pane fade @if ($key === 0) show active @endif "
                        id="v-pills-{{ $svc->id }}" role="tabpanel" aria-labelledby="v-pills-{{ $svc->id }}-tab">

                        <h2>{{ $svc->service }} @if (!$svc->provider_permissions) Application @endif </h2>
                        <hr>
                        @if ($svc->provider_permissions)
                            {{-- current service status --}}
                            {{-- {{ $svc->provider_permissions }} --}}
                            <h3>Approval: {{ $svc->provider_permissions->approval }}</h3>
                            <h3>Status: {{ $svc->provider_permissions->status }} </h3>
                            <h3>Applied On: {{ $svc->provider_permissions->created_at }} </h3>
                            <h3>Last updated On: {{ $svc->provider_permissions->updated_at }} </h3>
                        @else
                            {{-- Application process --}}
                            <h3 >Directions</h3>
                            <div>
                            {!! $svc->application_directions !!}
                            </div>
                            <div style="text-align: center; padding: 24px">
                                <a href="{{route('admin.provider.serviceapplication', [Auth::user()->id, 'service_id' => $svc->id])}}" type="submit" class="btn apply-btn knowmad_btn_blue knowmad_btn">Apply</a>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>

    </div>
@endsection

@push('footer_js')


@endpush