@php

@endphp
@extends('layouts.master')
@section('title', 'Activity view')

@section('style')
    <style>
        .btn1 {
            margin-top: 40px;
            display: flex;
            /* Add this line */
            justify-content: center;
            /* Center horizontally */
            align-items: center;
            /* Center vertically (optional) */
        }

        /* สไตล์ปุ่มเริ่มต้น */
        button {
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        /* สไตล์ปุ่ม OPEN */
        .open-button {
            height: 50px;
            width: 200px;
            display: inline-block;
            padding: .25em .4em;
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            color: #59bda1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25rem;
            background-color: #d0faee;
        }

        /* สไตล์ปุ่ม CLOSE */
        .close-button {
            height: 50px;
            width: 200px;
            display: inline-block;
            padding: .25em .4em;
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            color: #cf0303;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25rem;
            background-color: #fad2d2;
        }
    </style>
@endsection

@section('script')
    <script>
        const myButton = document.getElementById('myButton');

        myButton.addEventListener('click', function() {
            if (myButton.classList.contains('open-button')) {
                myButton.classList.remove('open-button');
                myButton.classList.add('close-button');
                myButton.textContent = 'CLOSE';

            } else {
                myButton.classList.remove('close-button');
                myButton.classList.add('open-button');
                myButton.textContent = 'OPEN';

            }
        });
    </script>
@endsection

@section('content')
    @include('layouts.header')
    <section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="{{ asset('/bg/bgg02.png') }}"
        style="background-image: url('{{ asset('/bg/bgg02.png') }}');">
        <div class="container pt-14 pt-md-16 pb-23 pb-md-15 text-center">
            <div class="row">
                <div class="row">
                    <div class="col-lg-8 col-xxl-7 mx-auto text-center" data-cues="slideInDown" data-group="page-title"
                        data-delay="600">
                        <h1 class="fs-58 mb-2 text-light">Activity Description</h1>
                        {{-- <h2 class="fs-16 text-uppercase ls-xl text-light mb-4">Hello! This is Sandbox</h2> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    @role('Admin')
        <div class="btn1">
            <form action="{{ url('/activity_status_view') }}" class="text-start mb-3" method="post"
                enctype="multipart/form-data"> @csrf
                <input type="text" name="status_view_open" id="myButton" value="close" hidden>
                <input type="text" name="activity_id" id="myButton" value="{{ $activity->activity_id }}" hidden>
                @if ($activity->activity_status == '1')
                    <input class="btn btn-red rounded-pill" type="submit" name="submit" value="CLOSE">
                @elseif($activity->activity_status == '2')
                    <input class="btn btn-green rounded-pill" type="submit" name="submit" value="OPEN">
                @endif
            </form>
        </div>
    @endrole

    <div class="container py-10 p-2 px-2">
        {{-- <div class="d-flex justify-content-between align-items-center"> --}}
        <div class="card">
            <br>
            <span class="text-dark fs-30" align="center">Activity Description</span>
            <div class="card-body flex">
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Code :</div>
                    <div class="col-md-6">{{ $activity->activity_code }}</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Academic Year :</div>
                    <div class="col-md-6">{{ $activity->academic_year }}</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Activity Name(Eng) :</div>
                    <div class="col-md-6">{{ $activity->activity_name_en }}</div>
                    {{-- <div class="col-md-6">SIIT Football Cup 22</div> --}}
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Activity Name(Thai) :</div>
                    <div class="col-md-6">{{ $activity->activity_name_th }}</div>
                    {{-- <div class="col-md-6">SIIT ฟุตบอลคัพ 2565</div> --}}
                </div>
                <br>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Type :</div>
                    <div class="col-md-6">{{ app('App\Http\Controllers\ActivityController')->activity_type1($activity->activity_id)}}</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">TU GREATS :</div>
                    <div class="col-md-6">{{ app('App\Http\Controllers\ActivityController')->tu_greats($activity->activity_id)}}</div>
                    {{-- <div class="col-md-6">{{ $activity->tugreats_name_en }}</div> --}}
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Organized/Coordinated by :</div>
                    <div class="col-md-6">{{ $activity->club_name }}</div>
                    {{-- <div class="col-md-6">Football Club</div> --}}
                </div>
                <br>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Date (begin) :</div>
                    <div class="col-md-6">{{ $activity->activity_date_begin }}</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Date (End) :</div>
                    <div class="col-md-6">{{ $activity->activity_date_end }}</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Start Time :</div>
                    <div class="col-md-6">{{ $activity->activity_time_start }} hrs.</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">End Time :</div>
                    <div class="col-md-6">{{ $activity->activity_time_end }} hrs.</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Place :</div>
                    <div class="col-md-6">{{ $activity->activity_place }}</div>
                </div>
                <br>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Detail (Eng) :</div>
                    <div class="col-md-6">{{ $activity->activity_detail_en }}</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Detail (Thai) :</div>
                    <div class="col-md-6">{{ $activity->activity_detail_th }}</div>
                </div>
                <div class="row">
                    <div class="font-weight col-md-3"></div>
                    <div class="font-weight col-md-3">Participants :</div>
                    <div class="col-md-6">
                        @if ($count == 0)
                            @role('Admin|Officer')
                            <a class="text-danger" href="{{ url('/participantslist', $activity->activity_id) }}">Pending</a>
                            @else
                            <div class="text-danger">Pending</div>
                            @endrole
                        @else
                            @role('Admin|Officer')
                                <a class="text-primary" href="{{ url('/participantslist', $activity->activity_id) }}">{{ $count }} Students</a>
                            @else
                                <a >{{ $count }} Students</a>
                            @endrole
                            
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footer')
@endsection