@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">Manage 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-175px">
                                        <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">{{ $row->created_at->format('d M y') }}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="fs-7 text-muted fw-bold"> @foreach($row->eventcategory as $ec)
                                            <div class="mr-12 d-flex flex-column mb-1">
                                                <span class="font-weight-bolder mb-1">{{$ec->categoryname}}</span>
                                            </div>
                                            @endforeach
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-light-success">Live Now</span>
                                    </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 class="min-w-150px">
                                        <div class="mb-2 fw-bold">
                                            {{ \Carbon\Carbon::parse($row->EventDate)->format('d M y') }} -
                                            {{ \Carbon\Carbon::parse($row->EndDate)->format('d M y') }}</div>
                                        <div class="fs-7 fw-bold text-muted">Event Dates</div>
                                    </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;
        }
    })
}
</script>
@endpush