@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="{ basic: true, disclosures: false, com_support: false, evidence: false }">
                <div class="px-3 py-3 mb-4 mr-4 bg-white rounded-lg shadow-md w-full ">
                    <div class="p-3">
                        <ul class="flex flex-wrap items-end -mb-px text-sm font-medium">
                            <li class="flex items-end text-end mr-2">
                                <a @click="loadViewBasic"
                                    x-bind:class="{
                                        'inline-block cursor-pointer px-4 py-2 rounded-t hover:text-gray-600 hover:bg-slate-100 text-slate-500 border border-b-0 border-gray-300': basic,
                                        'inline-block cursor-pointer px-4 py-2 rounded-t border-b-2  hover:text-gray-600 hover:bg-slate-100 text-slate-500':
                                            !basic
                                    }">
                                    Basic Information</a>
                            </li>
                            <li class="flex items-end text-end mr-2">
                                <a @click="loadViewDisclosures"
                                    x-bind:class="{
                                        'inline-block cursor-pointer px-4 py-2 rounded-t hover:text-gray-600 hover:bg-slate-100 text-slate-500 border border-b-0 border-gray-300': disclosures,
                                        'inline-block cursor-pointer px-4 py-2 rounded-t border-b-2  hover:text-gray-600 hover:bg-slate-100 text-slate-500':
                                            !disclosures
                                    }">
                                    Disclosures</a>
                            </li>
                            <li class="flex items-end text-end mr-2">
                                <a @click="loadViewComsupport"
                                    x-bind:class="{
                                        'inline-block cursor-pointer px-4 py-2 rounded-t hover:text-gray-600 hover:bg-slate-100 text-slate-500 border border-b-0 border-gray-300': com_support,
                                        'inline-block cursor-pointer px-4 py-2 rounded-t border-b-2  hover:text-gray-600 hover:bg-slate-100 text-slate-500':
                                            !com_support
                                    }">
                                    Commercial Support</a>
                            </li>
                            <li class="flex items-end text-end mr-2">
                                <a @click="loadViewEvidence"
                                    x-bind:class="{
                                        'inline-block cursor-pointer px-4 py-2 rounded-t hover:text-gray-600 hover:bg-slate-100 text-slate-500 border border-b-0 border-gray-300': evidence,
                                        'inline-block cursor-pointer px-4 py-2 rounded-t border-b-2  hover:text-gray-600 hover:bg-slate-100 text-slate-500':
                                            !evidence
                                    }">
                                    Evidence</a>
                            </li>
                        </ul>
                        <div x-show="basic">
                            @include('backend.project.items.show-basic-info')
                        </div>
                        <div x-show="disclosures">
                            @include('backend.project.items.show-disclosures')
                        </div>
                        <div x-show="com_support">
                            @include('backend.project.items.show-commercial')
                        </div>
                        <div x-show="evidence">
                            @include('backend.project.items.show-evidence')
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:w-2/6">
                @include('backend.project.items.show-message')

                @include('backend.project.items.show-change-status')

                @include('backend.project.items.show-force-status')
            </div>
        </div>
    @endsection