@extends('backend.layouts.main')

@section('title', 'MLI ATS | Activity Participant')

@section('content')
    <div class="container px-6 mx-auto grid" x-data="{ selectedProject: null, activityProject: null }">
        @include('backend.share.title', ['title' => 'Activity Participant'])
        <div class="md:flex flex-none">
            <div class="px-3 py-3  mb-2 mr-3 bg-white rounded-lg shadow-md w-full">
                <h3 class="font-semibold pt-2 pb-2 text-slate-500 border-b border-gray-200 mb-2">Select an activity for
                    batch(es)
                </h3>
                <div class="lg:flex flex-none  space-x-5 mt-2">
                    <div class="lg:w-3/5 w-full ml-0 lg:mt-0">
                        <div class="block text-sm mb-2">
                            <span class="text-slate-500">Select Activity</span>
                            <select
                                class="px-3 py-2 placeholder-slate-300 text-slate-600 relative bg-white  rounded text-sm border border-slate-300 outline-none focus:outline-none focus:ring w-full mt-2"
                                x-model="selectedProject" @change="loadProject()">
                                <option value="">Please Select</option>
                                @foreach ($projects as $project)
                                    <option value="{{ $project->id }}">{{ $project->activity_id }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div x-show="activityProject && activityProject?.project">
            <div class="px-3 py-3 mt-2 mr-3 bg-white rounded-lg shadow-md w-full">
                <h3 class="font-semibold pt-2 pb-2 text-slate-500 border-b border-gray-200 mb-2">Activity Information</h3>
                <div class="lg:flex flex-none  space-x-5 mt-2">
                    <div class="text-base text-slate-500 mb-2">
                        <span x-text="activityProject?.project?.activity_title"></span>
                        <span
                            class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium
                        bg-green-100 text-green-800"
                            x-text="activityProject?.project?.status"></span>
                    </div>

                </div>

                <div class="flex text-slate-500 text-sm mt-5 mb-4">
                    <div class="lg:w-3/5 w-full ml-1 lg:mt-0 flex">
                        <dl class="grid grid-cols-2">
                            <dt class="text-right">Activity ID:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.activity_id"></dd>
                            <dt class="text-right">Project ID:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.project_code"></dd>
                            <dt class="text-right">Provider:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.provider"></dd>
                            <dt class="text-right">Activity Type:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.activity_type"></dd>
                            <dt class="text-right">Activity Overview:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.providership"></dd>
                            <dt class="text-right">Commercial Support Received:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.has_commercial_support"></dd>
                        </dl>
                    </div>

                    <div class="lg:w-2/5 w-full ml-1 lg:mt-0 flex">
                        <dl class="grid grid-cols-2">
                            <dt class="text-right">Start Date:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.start_date">
                            </dd>
                            <dt class="text-right">Expiration Date:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.expiration_date">
                            </dd>
                            <dt class="text-right">Last Updated:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.updated">
                            </dd>
                            <dt class="text-right">Created:</dt>
                            <dd class="pl-4" x-text="activityProject?.project?.created">
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="px-3 py-3 mt-3 mr-3 bg-white rounded-lg shadow-md w-full">
                <h3 class="font-semibold pt-2 pb-2 text-slate-500 border-b border-gray-200 mb-2">Batch Information</h3>
                <div class="flex text-slate-500 text-sm mb-4">
                    <div class="lg:w-3/5 w-full ml-1 lg:mt-0 flex" x-show="activityProject?.outcomes?.length > 0 ">
                        <template x-for="outcome in activityProject?.outcomes">
                            <label>Batch: <span x-text="outcome.batch"></span> Updated at:
                                <span x-text="outcome?.updated_at"></span>&nbsp;</label>
                        </template>
                    </div>
                </div>
            </div>

            <div class="px-3 py-3 mb-4 mt-3 mr-3 bg-white rounded-lg shadow-md w-full">
                <h3 class="font-semibold pt-2 pb-2 text-slate-500 border-b border-gray-200 mb-2">Upload Activity Participant
                    Report</h3>
                <div class="flex text-slate-500  mb-4">
                    <div class=" w-full">
                        <span class="text-sm text-slate-500">Choose One:</span>
                        <form action="{{ route('admin.activity.participant.import') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="lg:flex flex-none  space-x-5">
                                <div class="w-full ml-0 lg:mt-0">
                                    <div class="flex justify-start">
                                        <div class="form-check form-check-inline mr-3">
                                            <input type="radio"
                                                class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
                                                id="remove" name="batch_status" value="remove" checked>
                                            <input type="hidden" :value="activityProject?.project_id" name="project_id">
                                            <label class="form-check-label text-slate-500 inline-block  text-sm"
                                                for="remove">
                                                Remove previous batch(es)</label>
                                        </div>
                                        <div class="form-check form-check-inline mr-3">
                                            <input type="radio"
                                                class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
                                                id="merge" name="batch_status" value="merge">
                                            <label class="form-check-label inline-block text-slate-500 text-sm"
                                                for="merge">
                                                Merge with previous batch(es) </label>
                                        </div>
                                    </div>
                                    <div class="flex mt-8">
                                        <h3 class="font-normal text-slate-500 mt-2">Activity Participant Report CSV:</h3>
                                        <input
                                            class="p-1 text-sm border border-gray-300 rounded cursor-pointer bg-gray-50 placeholder-slate-500  focus:outline-none ml-3"
                                            type="file" name="csv_file" required>
                                        <button
                                            class="ml-8 px-8 py-2 cursor-pointer border border-red-300 duration-150 focus:outline-none hover:bg-red-400 hover:text-white inline-flex outline-none rounded text-red-400 text-sm"
                                            type="submit"> Import </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection