@extends('includes/layout')
@section('main-page-content')
<style>
    .hidden {
        display: none;
    }
</style>
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="border-bottom p-3">
                        <div class="h4 pb-0 mb-0 ">Meeting Portal</div>
                    </div>
                    <div class="card-body pt-3">
                        <form action="{{url("meeting/portal")}}" method="GET" id="meeting_portal_filters ">
                            {{-- @csrf --}}
                            <div class="row px-3 pe-3">
                                <div class="col-lg-3 col-sm-4 mb-3">
                                    <select class="form-select" name="site_id" id="siteid" aria-label="Default select example">
                                        <option selected value="">--Select Site--</option>
                                        @foreach ($sites as $site)
                                            <option value="{{ $site->id }}" @if(isset(request()->site_id) && (request()->site_id == $site->id)) selected @endif>{{ $site->title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3 col-sm-4 mb-3">
                                    <select class="form-select" name="meeting_id" id="meeting_id" aria-label="Default select example">
                                        <option selected value="">--Select Meeting--</option>
                                        @foreach ($meetings as $meeting)
                                            <option value="{{ $meeting->id }}" @if(isset(request()->meeting_id) && (request()->meeting_id == $meeting->id)) selected @endif>{{ $meeting->agenda }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3 col-sm-4">
                                    <div class="d-md-flex align-items-center">
                                        <label class="me-2 text_size">From</label>
                                        <input type="date" class="form-control" id="fromDate" name="from" @if(isset(request()->from)) value="{{request()->from}}" @else value="{{$start_date}}" @endif>

                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-4 mb-3">
                                    <div class="time-portal d-md-flex align-items-center">
                                        <label class="me-2 text_size">To</label>
                                        <input type="date" class="form-control" id="toDate" name="to" @if(isset(request()->to)) value="{{request()->to}}" @else value="{{$end_date}}" @endif>
                                    </div>
                                </div>
                            </div>
                            <div class="row pe-3 pb-3">
                                <div class="col-12">
                                    <div class="d-flex justify-content-end">
                                        <a href="{{url('meeting/portal')}}" class="btn btn-outline-light text-dark me-2 waves-effect">Clear</a>
                                        <button class="btn btn-success">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <div class="border-bottom"></div>
                        <div class="row p-3 total-emp">
                            <div class="col-lg-4 col-sm-12 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between h-px-75">
                                            <h5 class="card-title total_emp">{{$total_meetings}}</h5>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>Total Meetings</div>
                                            <div>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                                                    viewBox="0 0 25 25" fill="none">
                                                    <rect width="25" height="25" rx="2" fill="#FFB400" />
                                                    <g transform="scale(0.8)">
                                                        <circle cx="15.625" cy="15.625" r="8" stroke="white"
                                                            stroke-width="1.5" />
                                                        <path d="M15.625 15.625V10.625" stroke="white"
                                                            stroke-linecap="round" />
                                                        <path d="M15.625 15.625H18.75" stroke="white"
                                                            stroke-linecap="round" />
                                                    </g>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-12 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between h-px-75">
                                            <h5 class="card-title total_r_h">{{$joined}}</h5>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>Joined Employees</div>
                                            <div>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                                                    viewBox="0 0 25 25" fill="none">
                                                    <rect width="25" height="25" rx="2" fill="#15A7F5" />
                                                    <path
                                                        d="M18.182 19.318V17.9132C18.182 17.168 17.886 16.4534 17.3591 15.9264C16.8322 15.3995 16.1175 15.1035 15.3723 15.1035H9.75302C9.00785 15.1035 8.2932 15.3995 7.76629 15.9264C7.23938 16.4534 6.94336 17.168 6.94336 17.9132V19.318"
                                                        stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                                                    <path
                                                        d="M12.5616 12.2931C14.1133 12.2931 15.3713 11.0352 15.3713 9.48349C15.3713 7.93176 14.1133 6.67383 12.5616 6.67383C11.0099 6.67383 9.75195 7.93176 9.75195 9.48349C9.75195 11.0352 11.0099 12.2931 12.5616 12.2931Z"
                                                        stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-12 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between h-px-75">
                                            <h5 class="card-title total_r_h">{{$guest_users}}</h5>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>Total Guest</div>
                                            <div>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                                                    viewBox="0 0 25 25" fill="none">
                                                    <rect width="25" height="25" rx="2" fill="#FF4C51" />
                                                    <path
                                                        d="M18.182 19.318V17.9132C18.182 17.168 17.886 16.4534 17.3591 15.9264C16.8322 15.3995 16.1175 15.1035 15.3723 15.1035H9.75302C9.00785 15.1035 8.2932 15.3995 7.76629 15.9264C7.23938 16.4534 6.94336 17.168 6.94336 17.9132V19.318"
                                                        stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                                                    <path
                                                        d="M12.5616 12.2931C14.1133 12.2931 15.3713 11.0352 15.3713 9.48349C15.3713 7.93176 14.1133 6.67383 12.5616 6.67383C11.0099 6.67383 9.75195 7.93176 9.75195 9.48349C9.75195 11.0352 11.0099 12.2931 12.5616 12.2931Z"
                                                        stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body pt-0">
                        <div class="p-3 d-flex justify-content-between align-items-center">
                            <div class="me-auto">
                                <div class="h4 pb-0 mb-0" id="selectedTitle">Meeting Attendance Details</div>
                            </div>
                        </div>
                        <div>
                            <div class="table-responsive text-nowrap border-bottom">
                                <table class="table" >
                                    <thead class="table-head-color bg-primary">
                                        <tr class="bg-primary">
                                            <th>Employee</th>
                                            <th>Agenda</th>
                                            <th>Site Name</th>
                                            <th>Date</th>
                                            <th>Check-in</th>
                                            <th>Check-out</th>
                                            <th class="text-center">View Document</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-border-bottom-0 table-body">
                                        @foreach ($meeting_users as $user)
                                            <tr>
                                                <td>
                                                    @if (file_exists(asset($user->image)))
                                                        <img src="{{asset($user->image)}}" alt="" width="25" height="25">
                                                    @else
                                                        <img src="{{asset('assets/img/default.png')}}" alt="" width="25" height="25">
                                                    @endif
                                                    {{$user->first_name}} {{$user->last_name}}
                                                </td>
                                                <td>{{$user->agenda}}</td>
                                                <td>{{$user->site_name}}</td>
                                                <td>
                                                    {{formatDate($user->date)}}
                                                </td>
                                                <td>
                                                    {{formatTime($user->check_in)}}
                                                </td>
                                                <td>
                                                    {{formatTime($user->check_out)}}
                                                </td>
                                                {{-- <td>
                                                    @if ($user->document_signed)
                                                        <span class="badge rounded-pill bg-label-success me-1">Signed</span>
                                                    @else
                                                        <span class="badge rounded-pill bg-label-danger me-1">Un-signed</span>
                                                    @endif
                                                </td> --}}
                                                <td class="text-center">
                                                    <a href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#show_document_details_{{$user->id}}">
                                                        <span class="mdi mdi-eye text-primary"></span>
                                                    </a>
                                                </td>
                                            </tr>


                                            <div class="modal fade" id="show_document_details_{{$user->id}}" tabindex="-1" aria-labelledby="deletePreLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header bg-primary border-bottom">
                                                            <h5 class="modal-title text-white pb-2" id="deletePreLabel">Document Details / {{$user->first_name}} {{$user->last_name}}</h5>
                                                            <button type="button" class="btn-close border mb-2 bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="col-12">
                                                                @if (count($user->documents))
                                                                    @foreach ($user->documents as $document)
                                                                        <div class="d-flex mb-3 mt-3 border">
                                                                            <div class="p-2 mx-5">
                                                                                <a href="{{ asset($document->document) }}" target="_blank">
                                                                                    <span class="mdi mdi-folder-open folder_color"></span>
                                                                                </a>
                                                                            </div>
                                                                            <div class="p-2 mx-5">
                                                                                <a href="{{ asset($document->document) }}" target="_blank">
                                                                                    {{ $document->title }}
                                                                                </a>
                                                                            </div>
                                                                            <div class="p-2 mx-5">
                                                                                @if ($document->signed)
                                                                                    <span class="badge rounded-pill bg-label-success me-1">Signed</span>
                                                                                @else
                                                                                    <span class="badge rounded-pill bg-label-danger me-1">Un-signed</span>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                @else
                                                                    <div class="card h-100 p-3 card-border">
                                                                        There are no signed documents.
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach

                                    </tbody>
                                </table>
                            </div>

                            <nav aria-label="Page navigation" class="mt-3">
                                <ul class="pagination justify-content-center justify-content-md-end pe-5">
                                    <!-- First page button -->
                                    <li class="page-item p-btn {{ $page == 1 ? 'disabled' : '' }}">
                                        <a class="page-link waves-effect" href="{{ $page > 1 ? url('meeting/portal?page=1&'.$link) : '#' }}">
                                            <<
                                        </a>
                                    </li>
                            
                                    <!-- Previous page button -->
                                    <li class="page-item p-btn {{ $page == 1 ? 'disabled' : '' }}">
                                        <a class="page-link waves-effect" href="{{ $page > 1 ? url('meeting/portal?page='.($page - 1).'&'.$link) : '#' }}">
                                            <
                                        </a>
                                    </li>
                            
                                    <!-- Pagination numbers -->
                                    @for ($i = 1; $i <= $totalPages; $i++)
                                        @if (
                                            ($i >= $page - 3 && $i <= $page + 3)
                                        )
                                            <li class="page-item p-btn {{ $page == $i ? 'active' : '' }}">
                                                <a class="page-link waves-effect" href="{{ url('meeting/portal?page='.$i.'&'.$link) }}">
                                                    {{ $i }}
                                                </a>
                                            </li>
                                        @endif
                                    @endfor
                            
                                    <!-- Next page button -->
                                    <li class="page-item p-btn {{ $page == $totalPages ? 'disabled' : '' }}">
                                        <a class="page-link waves-effect" href="{{ $page < $totalPages ? url('meeting/portal?page='.($page + 1).'&'.$link) : '#' }}">
                                            >
                                        </a>
                                    </li>
                            
                                    <!-- Last page button -->
                                    <li class="page-item p-btn {{ $page == $totalPages ? 'disabled' : '' }}">
                                        <a class="page-link waves-effect" href="{{ $page < $totalPages ? url('meeting/portal?page='.$totalPages.'&'.$link) : '#' }}">
                                            >>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection
@section('css-js')
    <script>
        function clearForm(){
            $('#meeting_portal_filters').trigger("reset");
        }
    </script>

    <style>
        @media only screen and (min-width: 280px) and (max-width: 540px){
            .time-portal{
                margin-top: 14px;
            }
        }
    </style>
@endsection