@extends('layouts.admin', ['title' => 'Participant Details'])

<meta name="csrf-token" content="{{ csrf_token() }}">
{{--<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />--}}
<link rel="stylesheet" href="{{asset('assets/css/lightbox.min.css')}}">

@push('stylesheets')

@endpush

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="profile-foreground position-relative mx-n4 mt-n4">
                <div class="profile-wid-bg">
                    <img src="assets/images/profile-bg.jpg" alt="" class="profile-wid-img" />
                </div>
            </div>
            <div class="pt-4 mb-4 mb-lg-3 pb-lg-4 profile-wrapper">
                <div class="row">
                    <div class="col-12">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{url('/view-participants')}}">Participants</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{$participant->participant_code}}</li>
                            </ol>
                        </nav>
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col">
                        <div class="p-2">
                            <h3 class="text-white mb-1">{{$participant->first_name}} {{$participant->last_name}}</h3>
                            <a href="/edit-participant/{{$participant->participant_code}}" class="btn btn-info"><span class="ri ri-pencil-line"></span> Edit</a>
                        </div>
                    </div>
                </div>
                <!--end row-->
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div>
                        <div class="d-flex profile-wrapper">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills animation-nav profile-nav gap-2 gap-lg-3 flex-grow-1" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link fs-14 active" data-bs-toggle="tab" href="#overview-tab" role="tab">
                                        <i class="ri-airplay-fill d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Overview</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content pt-4 text-muted">
                            <div class="tab-pane active" id="overview-tab" role="tabpanel">
                                <div>
                                    <div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="card">
                                                    <div class="card-body" style="margin: 50px;">

                                                        <div class="row">
                                                            <div class="col-12">
                                                                <h4>Basic Information</h4>
                                                                <dl class="row">
                                                                    <dt class="col-sm-3">Name</dt>
                                                                    <dd class="col-sm-9">{{$participant->first_name}} {{$participant->last_name}}</dd>
                                                                    <dt class="col-sm-3">Contact</dt>
                                                                    <dd class="col-sm-9">{{$participant->participant_contact}}</dd>
                                                                    <dt class="col-sm-3">Gender</dt>
                                                                    <dd class="col-sm-9">{{$participant->gender}}</dd>
                                                                    <dt class="col-sm-3">Farmer Group</dt>
                                                                    <dd class="col-sm-9">{{$participant->farmer_group}}</dd>
                                                                    <dt class="col-sm-3">Participant Code</dt>
                                                                    <dd class="col-sm-9">{{$participant->participant_code}}</dd>
                                                                    <dt class="col-sm-3">Participant Type</dt>
                                                                    <dd class="col-sm-9">{{$participant->participant_type}}</dd>
                                                                    <dt class="col-sm-3">Date created</dt>
                                                                    <dd class="col-sm-9">{{$participant->created_at}}</dd>
                                                                    <dt class="col-sm-3">Date last updated</dt>
                                                                    <dd class="col-sm-9">{{$participant->updated_at}}</dd>
                                                                    <dt class="col-sm-3">Approval Status</dt>
                                                                    <dd class="col-sm-9">{{$participant->status}} {{($participant->status!='approved')?'('.$participant->approval_note.')':''}}</dd>
                                                                    <dt class="col-sm-3">Creator</dt>
                                                                    <dd class="col-sm-9">{{($participant->createdBy != null)? $participant->createdBy->name : '*deleted user'}}</dd>
                                                                    <dt class="col-sm-3">Active Status</dt>
                                                                    <dd class="col-sm-9"><span class="badge rounded-pill text-bg-primary">{{$participant->active_status}}</span></dd>
                                                                </dl>
                                                            </div>

                                                            <div class="col-6">
                                                                <h4>Household Information</h4>
                                                                <dl class="row">
                                                                    <dt class="col-sm-5">Is household head?</dt>
                                                                    <dd class="col-sm-7">{{$participant->is_house_hold_head?'Yes':'No'}}</dd>
                                                                    <dt class="col-sm-5">Household head</dt>
                                                                    <dd class="col-sm-7">{{$participant->household_head_first_name}} {{$participant->household_head_last_name}}</dd>
                                                                    <dt class="col-sm-5">Household size</dt>
                                                                    <dd class="col-sm-7">{{$participant->household_size}}</dd>
                                                                    <dt class="col-sm-5">Household head relationship</dt>
                                                                    <dd class="col-sm-7">{{$participant->household_head_relationship}}</dd>
                                                                    <dt class="col-sm-5">Household head year of birth</dt>
                                                                    <dd class="col-sm-7">{{$participant->household_head_year_of_birth}}</dd>
                                                                    <dt class="col-sm-5">Household head occupation</dt>
                                                                    <dd class="col-sm-7">{{$participant->household_head_occupation}}</dd>
                                                                    <dt class="col-sm-5">Number of children</dt>
                                                                    <dd class="col-sm-7">{{($participant->number_of_children)}}</dd>
                                                                    <dt class="col-sm-5">Children live with you?</dt>
                                                                    <dd class="col-sm-7">{{($participant->children_live_with_you)?'Yes':'No'}}</dd>
                                                                    <dt class="col-sm-5">Household details</dt>
                                                                    <dd class="col-sm-7">{{($participant->household_details)}}</dd>
                                                                </dl>
                                                            </div>

                                                            <div class="col-6">
                                                                <h4>Financial Information</h4>
                                                                <dl class="row">
                                                                    <dt class="col-sm-4">Employment Status</dt>
                                                                    <dd class="col-sm-6">{{$participant->employment_status}}</dd>
                                                                    <dt class="col-sm-4">Enterprise</dt>
                                                                    <dd class="col-sm-6">{{$participant->enterprise}}</dd>
                                                                    <dt class="col-sm-4">Main Economic activity</dt>
                                                                    <dd class="col-sm-6">{{$participant->main_economic_activity}}</dd>
                                                                    <dt class="col-sm-4">Estimated minimum income</dt>
                                                                    <dd class="col-sm-6">{{$participant->min_income_range}}</dd>
                                                                    <dt class="col-sm-4">Estimated maximum income</dt>
                                                                    <dd class="col-sm-6">{{$participant->max_income_range}}</dd>
                                                                    <dt class="col-sm-4">Has bank account?</dt>
                                                                    <dd class="col-sm-6">{{$participant->participant_bank_account?'Yes':'No'}}</dd>
                                                                    <dt class="col-sm-4">Bank Account Name</dt>
                                                                    <dd class="col-sm-6">{{$participant->account_name}}</dd>
                                                                    <dt class="col-sm-4">Bank Account Number</dt>
                                                                    <dd class="col-sm-6">{{$participant->account_number}}</dd>
                                                                    <dt class="col-sm-4">Financial Institution</dt>
                                                                    <dd class="col-sm-6">{{$participant->financial_institution}}</dd>
                                                                </dl>
                                                            </div>

                                                            <div class="col-6">
                                                                <h4>Location Information</h4>
                                                                <dl class="row">
                                                                    <dt class="col-sm-4">Village</dt>
                                                                    <dd class="col-sm-6">{{$participant->village}}</dd>
                                                                    <dt class="col-sm-4">Parish</dt>
                                                                    <dd class="col-sm-6">{{$participant->parish}}</dd>
                                                                    <dt class="col-sm-4">Subcounty</dt>
                                                                    <dd class="col-sm-6">{{$participant->sub_county}}</dd>
                                                                    <dt class="col-sm-4">District</dt>
                                                                    <dd class="col-sm-6">{{$participant->district}}</dd>
                                                                    <dt class="col-sm-4">GPS coordinates</dt>
                                                                    <dd class="col-sm-6">{{$participant->gps_latitude}},{{$participant->gps_longitude}}</dd>
                                                                </dl>
                                                            </div>

                                                            <div class="col-12">
                                                                <h4>Consent forms</h4>
                                                                <dl class="row">
                                                                    <dt class="col-sm-4">Signed consent forms?</dt>
                                                                    <dd class="col-sm-6">{{$participant->has_consent_form?'Yes':'No'}}</dd>
                                                                </dl>
                                                                <ul class="list-inline">
                                                                    @foreach($participant->media as $form)
                                                                        <li class="list-inline-item">
                                                                            <a data-lightbox="attendance_list_image" href="{{$form->original_url}}"><img src="{{$form->original_url}}" alt="consent_form" height="80"></a>
                                                                        </li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>

                                                        </div> {{--/. row /--}}

                                                    </div><!-- end card body -->
                                                </div><!-- end card -->
                                            </div><!-- end col -->
                                        </div><!-- end row -->
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end row-->
                            </div>
                            <!--end tab-content-->
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </div><!-- container-fluid -->
    </div><!-- End Page-content -->
</div>


@endsection

@push('scripts')

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{asset('assets/js/lightbox.min.js')}}"></script>

<script>

$(document).ready(function () {



});


</script>


@endpush