@extends('layouts.app')

@section('title')
@endsection


@push('prepend-style')
@endpush
@push('addon-style')
@endpush

@section('content')
<div class="main-content app-content mt-0">
    <div class="side-app">

        <!-- CONTAINER -->
        <div class="main-container container-fluid">

            <!-- PAGE-HEADER -->
            <div class="page-header">
                <h1 class="page-title">Peserta Seminar</h1>
                <div>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Seminar</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $seminar->nama_seminar }}</li>
                    </ol>
                </div>
            </div>
            <!-- PAGE-HEADER END -->

            <!-- ROW-1 OPEN -->
            <div class="row">
                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="text-center chat-image mb-2">
                                <img src="{{ asset('assets/images/email.svg') }}" alt="Meeting Pic" height="170" />
                                <div class="main-chat-msg-name">
                                    <a href="profile.html">
                                        <h5 class="mb-1 text-dark fw-semibold">{{ $seminar->nama_seminar }}</h5>
                                    </a>
                                    <p class="text-muted mt-0 mb-0 pt-0 fs-13">{{ $seminar->kota->name }}</p>
                                    @if ($seminar->status == 'Aktif')
                                        <span class="badge rounded-pill bg-primary badge-sm me-1 mb-1 mt-1">Status - {{ $seminar->status }}</span>
                                    @else
                                        <span class="badge rounded-pill bg-danger badge-sm me-1 mb-1 mt-1">Status - {{ $seminar->status }}</span>
                                    @endif

                                </div>
                            </div>
                            <ul class="list-group no-margin">
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-watch"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">{{ $seminar->tanggal }}</a>
                                </li>
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-map-pin"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">{{ $seminar->alamat }}</a>
                                </li>
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-aperture"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">{{ $seminar->keterangan }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title fw-semibold">Total Peserta</h4>
                        </div>
                        <div class="card-body pb-0">
                            <ul class="task-list">
                                <li class="d-sm-flex">
                                    <div>
                                        <i class="task-icon bg-primary"></i>
                                        <h6 class="fw-semibold">Total Peserta
                                        </h6>
                                        <p class="text-muted fs-12">Seminar<a href="javascript:void(0)"
                                                class="fw-semibold"> </a></p>
                                    </div>
                                    <div class="ms-auto d-md-flex">
                                        <h5>{{ $total }}</h5>
                                    </div>
                                </li>
                                <li class="d-sm-flex">
                                    <div>
                                        <i class="task-icon bg-secondary"></i>
                                        <h6 class="fw-semibold">Laki-Laki
                                        </h6>
                                         <p class="text-muted fs-12">Seminar<a href="javascript:void(0)"
                                                class="fw-semibold"> </a></p>
                                    </div>
                                    <div class="ms-auto d-md-flex">
                                        <h5>{{ $laki }}</h5>
                                    </div>
                                </li>
                                <li class="d-sm-flex">
                                    <div>
                                        <i class="task-icon bg-success"></i>
                                        <h6 class="fw-semibold">Perempuan
                                        </h6>
                                        <p class="text-muted fs-12">Seminar<a href="javascript:void(0)"
                                                class="fw-semibold"> </a></p>
                                    </div>
                                    <div class="ms-auto d-md-flex">
                                        <h5>{{ $perempuan }}</h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title fw-semibold">Total Peserta Hadir</h4>
                        </div>
                        <div class="card-body pb-0">
                            <ul class="task-list">
                                <li class="d-sm-flex">
                                    <div>
                                        <i class="task-icon bg-primary"></i>
                                        <h6 class="fw-semibold">Total Peserta
                                        </h6>
                                        <p class="text-muted fs-12">Seminar<a href="javascript:void(0)"
                                                class="fw-semibold"></a></p>
                                    </div>
                                    <div class="ms-auto d-md-flex">
                                        <h5> {{ $total }}</h5>
                                    </div>
                                </li>
                                <li class="d-sm-flex">
                                    <div>
                                        <i class="task-icon bg-success"></i>
                                        <h6 class="fw-semibold">Datang
                                        </h6>
                                         <p class="text-muted fs-12">Seminar<a href="javascript:void(0)"
                                                class="fw-semibold"> </a></p>
                                    </div>
                                    <div class="ms-auto d-md-flex">
                                        <h5>{{ $datang }}</h5>
                                    </div>
                                </li>
                                <li class="d-sm-flex">
                                    <div>
                                        <i class="task-icon bg-danger"></i>
                                        <h6 class="fw-semibold">Belum Datang
                                        </h6>
                                        <p class="text-muted fs-12">Seminar<a href="javascript:void(0)"
                                                class="fw-semibold"> </a></p>
                                    </div>
                                    <div class="ms-auto d-md-flex">
                                        <h5>{{ $belum }}</h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ROW-1 CLOSED -->



            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Data Peserta</h3>
                            <div class="btn-profile">
                                <a href="{{ route('tambah-peserta', $seminar->slug) }}" class="btn btn-primary mt-1 mb-1"> <i class="fa fa-plus"></i> <span>Tambah Data</span></a>
                            </div>
                        </div>
                       <div class="card-body">
                            <div class="table-responsive">
                                <table id="file-datatable" class="table table-bordered text-nowrap key-buttons border-bottom">
                                    <thead>
                                        <tr>
                                            <th class="border-bottom-0">Nama Lengkap</th>
                                            <th class="border-bottom-0">Email</th>
                                            <th class="border-bottom-0">Telepon</th>
                                            <th class="border-bottom-0">Alamat</th>
                                            <th class="border-bottom-0">Usia</th>
                                            <th class="border-bottom-0">JK</th>
                                            <th class="border-bottom-0">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ( $peserta as $peserta )
                                        <tr>
                                            <td>{{ $peserta->nama_peserta }}</td>
                                            <td>
                                               {{ $peserta->email }}
                                            </td>
                                            <td>{{ $peserta->telepon }}</td>
                                            <td>{{ $peserta->alamat }}</td>
                                            <td>{{ $peserta->usia }}</td>
                                            <td>
                                                @if ($peserta->jk == 'Laki-Laki')
                                                    <span class="badge rounded-pill bg-info badge-sm me-1 mb-1 mt-1"> {{ $peserta->jk }}</span>
                                                @else
                                                    <span class="badge rounded-pill bg-danger badge-sm me-1 mb-1 mt-1"> {{ $peserta->jk }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('tiket', $peserta->slug) }}" type="button" class="btn btn-icon btn-facebook" data-bs-placement="top" data-bs-toggle="tooltip" title="Lihat Tiket">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                <a href="{{ route('edit-peserta', $peserta->slug) }}" class="btn btn-icon btn-twitter" data-bs-placement="top" data-bs-toggle="tooltip" title="Edit Data">
                                                    <i class="fa fa-pencil-square-o"></i>
                                                </a>
                                                <a href="{{ route('hapus-peserta', $peserta->slug) }}" type="button" class="btn btn-icon btn-youtube" data-bs-placement="top" data-bs-toggle="tooltip" title="Hapus Data">
                                                    <i class="fa fa-trash-o"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!--CONTAINER CLOSED -->

    </div>
</div>
@endsection