@use('App\General\Classes\PublicConstant')
@extends('layouts.app')
@section('title', 'Events')
@section('main')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Events</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body d-flex justify-content-between">
            <h2 class="h3">All Events</h2>
            <div>
                {{-- <input type="text" class="form-control"> --}}
            </div>
            <a href="{{route('Event.create')}}" class="btn btn-primary">
                <i class="bi bi-plus"></i>
                New
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-striped ">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th style="width:50%">Title</th>
                            <th>Active</th>
                            <th>Forms</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($Events as $Event)
                            <tr>
                                <td>{{$loop->index + 1}}</td>
                                <td>{{$Event->title}}</td>
                                <td>
                                    <form action="{{route('Event.UpdateStatus', $Event->id)}}" method="post">
                                        @csrf
                                        @method('PATCH')
                                        @if($Event->is_active)
                                            <button type="submit" class="btn btn-outline-success"><i
                                                    class="btn-lg bi bi-check"></i></button>
                                        @else
                                            <button type="submit" class="btn btn-outline-danger"><i
                                                    class="btn-lg bi bi-ban"></i></button>
                                        @endif
                                    </form>
                                </td>                              
                                <td>
                                    <button type="button" class="btn btn-outline-info dropdown-toggle"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="bi bi-globe"></i> Links
                                    </button>
                                    <ul class="dropdown-menu">
                                        @foreach(PublicConstant::MACHINE_FORMS as $form => $route)
                                            <li class="d-flex gap-2 px-2">                                                
                                                <button type="button" class="btn btn-outline-secondary"  data-bs-toggle="modal" data-bs-target="#qrModal"
                                                    onclick="showQr('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{route( $route , ['event_id'=>$Event->id])}}')">
                                                    <i class="bi bi-qr-code"></i>
                                                </button>
                                                <a class="dropdown-item text-primary" target="_blank"
                                                    href="{{route('form.simple', ['event_id'=>$Event->id])}}"><i
                                                        class="bi bi-link-45deg"></i> {{$form}}</a>
                                            </li>
                                        @endforeach                                        
                                    </ul>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-outline-primary dropdown-toggle"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="bi bi-gear"></i> Actions
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item text-primary" href="{{route('EventUser.EventUsers', $Event->id)}}"><i
                                                    class="bi bi-people"></i> Add Users</a></li>
                                        <li><a class="dropdown-item" href="{{route('Event.edit', $Event->id)}}"><i
                                                    class="bi bi-pencil-square text-secondary"></i> Edit</a></a></li>
                                        <li><a href="#" class="dropdown-item text-danger"
                                                onclick="DeleteFormId('frmDelete{{$Event->id}}');" data-bs-toggle="modal"
                                                data-bs-target="#deleteModal"><i class="bi bi-trash2-fill"></i>
                                                Delete</a>
                                            <form action="{{route('Event.destroy', $Event->id)}}" id="frmDelete{{$Event->id}}"
                                                method="post">
                                                @csrf
                                                @method('delete')
                                            </form>
                                        </li>
                                        {{-- <li>
                                            <hr class="dropdown-divider">
                                        </li> --}}
                                        {{-- <li>
                                            <a class="dropdown-item text-info"
                                                href="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="><i
                                                    class="bi bi-eye"></i> View Register</a>
                                        </li> --}}
                                    </ul>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                {{$Events->links()}}
            </div>
        </div>
    </div>
    <script>
        var DeleteFormId = "";
        function deleteRecord() {
            document.getElementById(DeleteFormId).submit();
        }
        function showQr(src) {
            document.getElementById('imgQr').src = src;
            var qrModel = new bootstrap.Modal(document.getElementById('qrModel'), {
                keyboard: false
            });
            qrModel.show();
        }
    </script>
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Delete</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure want to delete this record ?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" onclick="deleteRecord()"><i class="bi bi-trach"></i>
                        Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="qrModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">QR Code</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img src="{{ asset('assets/images/loading.gif') }}" alt="QR Code" id="imgQr">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" onclick="deleteRecord()"><i class="bi bi-trach"></i>
                        Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection