@extends("admin.layout.master")
@section("title","Dashboard")
@section ("content")
<div class="d-flex flex-column flex-column-fluid">
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{url('/')}}" class="text-muted text-hover-primary">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-400 w-5px h-2px"></span>
                    </li>
                    <li class="breadcrumb-item text-muted">Event Manager</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-header border-0 pt-5 align-items-center">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3 mb-1">My Events</span>
                </h3>
                <div class="card-toolbar">
                </div>
            </div>
            <!--from here-->
            <div class="card-body pt-1" data-select2-id="select2-data-148-7q5x">

                <!--begin::Seprator-->
                <div class="separator separator-dashed my-5"></div>
                <!--end::Seprator-->

                <!--begin::Table-->
                <div id="kt_widget_table_3_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer">
                    <div id="" class="table-responsive">
                        <table id="kt_widget_table_3"
                            class="table table-row-dashed align-middle fs-6 gy-4 my-0 pb-3 dataTable"
                            data-kt-table-widget-3="all" style="width: 963.5px;">
                            <tbody>
                                @foreach ($events as $row)
                                <tr>
                                    <td class="min-w-155px">
                                        <div class="position-relative ps-6 pe-3 py-2">
                                            <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-info">
                                            </div>
                                            <a href="{{ route('registrations', $row->id) }}"
                                                class="mb-1 text-gray-900 text-hover-primary fw-bold">{{ $row ->name }}</a>
                                            <div class="fs-7 text-muted fw-bold">
                                                {{ \Carbon\Carbon::parse($row->EventDate)->format('d M y') }} -
                                                {{ \Carbon\Carbon::parse($row->EndDate)->format('d M y') }}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="fs-7 text-muted fw-bold"> 
                                            
                                            <div>
                                                <input type="text" readonly style="display: none;" class="form-control copyText" value="https://leap.indiangymnastics.live/live/{{$row->id}}" readonly>
                                                <button class="btn btn-sm btn-primary copyButton">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
                                                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
                                                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
                                                    </svg> Live Link
                                                </button>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="min-w-80px">
                                        <!--begin::Team members-->
                                        <div class="symbol-group symbol-hover mb-1">

                                            <!--begin::Member-->
                                            <div class="symbol symbol-circle symbol-25px">
                                                <div class="symbol-label bg-danger">
                                                    <span class="fs-7 text-inverse-danger">P</span>
                                                </div>
                                            </div>
                                            <!--end::Member-->

                                            <!--begin::More members-->
                                            <div class="symbol symbol-circle symbol-25px">
                                                <div class="symbol-label bg-dark">
                                                    <span
                                                        class="fs-8 text-inverse-dark">{{$row->gymnastevent->count()}}</span>
                                                </div>
                                            </div>
                                            <!--end::More members-->
                                        </div>
                                        <!--end::Team members-->

                                        <div class="fs-7 fw-bold text-muted">Participants</div>
                                    </td>
                                    <td>
                                        <a href="eventsession-list/{{$row->id}}"
                                            class="btn btn-sm btn-primary">Sessions</a></td>
                                    <td><a href="eventsession/allocate/{{$row->id}}" class="btn  btn-sm btn-danger" title="Individual allocation after rotations are created">Assign Rotation</a></td>
                                    <td><a href="grouplist/{{$row->id}}" class="btn  btn-sm btn-info">Show Rotations</a></td>

                                    <td><a href="teamadd/{{$row->id}}" class="btn btn-sm btn-warning">Teams</a></td>
                                </tr>
                                @endforeach

                            </tbody>
                            <!--end::Table-->
                            <tfoot></tfoot>
                        </table>
                    </div>
                    <div id="" class="row">
                        <div id=""
                            class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar">
                        </div>
                        <div id=""
                            class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                        </div>
                    </div>
                </div>
                <!--end::Table-->
            </div>
            <!--till here-->

        </div>
    </div>
</div>
@endsection
@push("js")
<script>
$(document).ready(function() {
    $("#ds_datatable_table").DataTable({
        info: 1,
        order: [],
        pageLength: 10,
        lengthChange: 1,
        columnDefs: [{
                orderable: !1,
                targets: 0,
            },
            {
                orderable: !1,
                targets: 8,
            },
        ],
    });
});

function delete_data(id) {
    Swal.fire({
        icon: "warning",
        title: "Are you sure want to delete?",
        showCancelButton: true,
        confirmButtonText: "Yes",
        cancelButtonText: `No`,
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = BASE_URL + "/gymnast_event/delete/" + id;
        }
    })
}


document.querySelectorAll('.copyButton').forEach(function(button, index) {
    button.addEventListener('click', function() {
        var copyText = document.querySelectorAll('.copyText')[index];

        // Use the modern Clipboard API to copy text
        navigator.clipboard.writeText(copyText.value).then(function() {
            alert("Copied the text: " + copyText.value); // Notify the user
        }).catch(function(error) {
            console.error('Failed to copy: ', error);
        });
    });
});

</script>
@endpush