@extends('backend.layouts.main')

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

@section('content')
    <div class="container px-6 mx-auto grid">
        @include('backend.share.title', ['title' => 'Manage Activity'])
        <div class="md:flex flex-none">
            <div class="lg:w-4/6" x-data="{ show: false, id: '', status: '', title: '', }">
                <div class="px-3 py-3 mb-4 mr-4 bg-white rounded-lg shadow-md w-full ">
                    <div class="p-3">
                        @include('backend.project.items.edit-header', ['active' => 'review'])
                        <h3 class="font-semibold text-slate-500 border-b border-t border-gray-200 pt-3 pb-3 mb-2">Review
                            Attachments
                        </h3>
                        @include('backend.project.items.activity-basic-info')
                        @foreach ($attachments as $key => $attachment_type)
                            <h5 class="font-normal text-slate-500 border-b border-gray-200 pt-2 pb-2 mb-2">
                                {{ Str::ucfirst($key) }}
                            </h5>
                            <div class="relative overflow-x-auto">
                                <table class="w-full text-sm text-left text-slate-500">
                                    <tbody>
                                        @if (isset($attachment_type))
                                            @forelse ($attachment_type as $attachment)
                                                <tr class="bg-white text-slate-500">
                                                    <th scope="row" class="py-4 whitespace-nowrap">
                                                        <div class="mt-2 flex">
                                                            <a target="_blank"
                                                                href="{{ asset('storage/file/' . $attachment->file) }}"
                                                                class="text-blue-400 underline text-center text-sm">
                                                                {{ $attachment->file }}</a>
                                                            <span
                                                                class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-600">{{ $attachment->status }}</span>
                                                        </div>
                                                    </th>
                                                    <td class=" py-4">
                                                        <b>Last Comment:
                                                        </b>{{ $attachment->comment ? $attachment->comment : 'N/A' }}
                                                    </td>
                                                    <td class=" py-4 flex justify-end">
                                                        <button @click="reviewModalOpen($event)"
                                                            att_file="{{ $attachment->id }}"
                                                            att_status="{{ $attachment->status }}"
                                                            att_name="{{ $attachment->type }}"
                                                            att_update="{{ $key }}"
                                                            class="px-2 py-1 text-xs text-white bg-primary-500 rounded"
                                                            type="button">Review now!</button>
                                                    </td>
                                                </tr>
                                            @empty
                                            @endforelse
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        @endforeach
                    </div>

                    <form action="{{ route('admin.project.reviewfile.update', $project) }}" method="POST"
                        class="form-inline">
                        @csrf
                        @method('PATCH')
                        <div x-show="show" x-transition:enter="transition ease-out duration-150"
                            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                            x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            class="overflow-y-auto overflow-x-hidden overflow-scroll fixed inset-0 z-50 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center md:inset-0 h-modal lg:h-full lg:w-full">

                            <div @click.away="show = false" class="w-1/3 p-6 bg-white">
                                <div class="flex items-center justify-between">
                                    <h3 class="text-slate-500 text-lg" x-text="'Review: ' +title"></h3>
                                    <svg @click="show=false" xmlns="http://www.w3.org/2000/svg"
                                        class="w-6 h-6 cursor-pointer text-slate-500" fill="none" viewBox="0 0 24 24"
                                        stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <div class=" border-b border-gray-200 pt-3 pb-3 mb-2"></div>
                                <div class="mt-4">
                                    <div class="block text-sm">
                                        <div class="flex justify-start">
                                            <div class="form-check form-check-inline mr-10">
                                                <input type="radio" value="not-reviewed"
                                                    x-bind:checked="status == 'not-reviewed' ? true : false"
                                                    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"
                                                    name="status" id="status1">

                                                <label class="form-check-label inline-block text-sm text-slate-500"
                                                    for="status1">
                                                    Not Reviewed</label>
                                            </div>
                                            <div class="form-check form-check-inline mr-10">
                                                <input type="radio" value="need-modification"
                                                    x-bind:checked="status == 'need-modification' ? true : false"
                                                    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"
                                                    name="status" id="status2">

                                                <label class="form-check-label inline-block text-sm text-slate-500"
                                                    for="status2">
                                                    Need Modification</label>
                                            </div>
                                            <div class="form-check form-check-inline mr-3">
                                                <input type="radio" value="confirmed"
                                                    x-bind:checked="status == 'confirmed' ? true : false"
                                                    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"
                                                    name="status" id="status3">

                                                <label class="form-check-label inline-block text-sm text-slate-500"
                                                    for="status3">Confirmed</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="block text-sm mt-5">
                                        <h3 class="font-semibold text-slate-500 mb-2">Comment</h3>
                                        <div class="block text-sm mt-1">
                                            <textarea name="comment"
                                                class="mt-1 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"></textarea>
                                        </div>
                                    </div>
                                    <input type="hidden" name="file_no" :value="id" />
                                    <div class=" border-b border-gray-200 pt-3 pb-3 mb-2"></div>
                                    <a @click="show=false"
                                        class="px-2 py-2 cursor-pointer text-sm text-slate-500 bg-gray-300 rounded">Cancel</a>
                                    <button
                                        class="px-2 py-2 text-white text-sm cursor-pointer bg-primary-500 rounded">Update</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="lg:w-2/6">
                @include('backend.project.items.edit-sidebar')
            </div>
        </div>
    </div>
@endsection