@extends('template.main')
@section('title', 'Reports')
@section('content')


<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">@yield('title')</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/">@yield('title')</a></li>

                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="FirstName">Report Filters</label>
                        <div class="input-group">
                            <select type="text" class="form-control"
                                    placeholder="Search using attendees name or cellphone"
                                    aria-label="Recipient's username" aria-describedby="basic-addon2">
                                <option value="">Please select year</option>
                                <option value="Monthly">2024</option>
                                <option value="Quarterly">2023</option>
                                <option value="Annually">2022</option>
                                <option value="Annually">2021</option>
                                <option value="Annually">2020</option>
                            </select>
                            <select type="text" class="form-control"
                                    placeholder="Search using attendees name or cellphone"
                                    aria-label="Recipient's username" aria-describedby="basic-addon2">
                                <option value="">Please select report type</option>
                                <option value="Monthly">Monthly</option>
                                <option value="Quarterly">Quarterly</option>
                                <option value="Annually">Annually/Yearly</option>
                            </select>
                            <div class="custom-file">
                                <select type="text" class="form-control"
                                        placeholder="Search using attendees name or cellphone"
                                        aria-label="Recipient's username" aria-describedby="basic-addon2">
                                    <option value="">Please select report type</option>
                                    <option value="Monthly">January</option>
                                    <option value="Quarterly">February</option>
                                    <option value="Annually">March</option>
                                </select>
                            </div>
                            <div class="custom-file">
                                <select type="text" class="form-control"
                                        placeholder="Search using attendees name or cellphone"
                                        aria-label="Recipient's username" aria-describedby="basic-addon2">
                                    <option value="">Please select report type</option>
                                    <option value="Monthly">Quarter 1</option>
                                    <option value="Quarterly">Quarter 2</option>
                                    <option value="Annually">Quarter 3</option>
                                </select>
                            </div>
                            <div class="input-group-append">
                                <button class="btn btn-success" type="button"><i class="fa-solid fa-eye"></i>View Report</button>
                                <button class="btn btn-info" type="button"><i class="fa-solid fa-download"></i>Download Report</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>5</h3>
                            <p>Total Members</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person"></i>
                        </div>
                        <a href="/user" class="small-box-footer">More info <i
                                class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>53<sup style="font-size: 20px">%</sup></h3>

                            <p>New BEC Members</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="#" class="small-box-footer">More info <i
                                class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>44</h3>

                            <p>Members Registered</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <a href="#" class="small-box-footer">More info <i
                                class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>65</h3>

                            <p>Trips</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-pie-graph"></i>
                        </div>
                        <a href="#" class="small-box-footer">More info <i
                                class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->

    <section class="content">
        <!-- /.card-header -->
        <div class="card card-danger">
            <div class="card-body">
                <div class="row">
                    <!-- /.col -->
                    <div class="col-md-4">
                        <p class="text-center">
                            <strong>Members</strong>
                        </p>

                        <div class="progress-group">
                            Registered
                            <span class="float-right"><b>160</b>/200</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" style="width: 80%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->

                        <div class="progress-group">
                            Awaiting Approval
                            <span class="float-right"><b>310</b>/400</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-danger" style="width: 75%"></div>
                            </div>
                        </div>


                        <!-- /.progress-group -->
                        <div class="progress-group">
                            Ex-Officios
                            <span class="float-right"><b>250</b>/500</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-warning" style="width: 50%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->

                        <!-- /.progress-group -->
                        <div class="progress-group">
                            <span class="progress-text">Approved</span>
                            <span class="float-right"><b>480</b>/800</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-success" style="width: 60%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <p class="text-center">
                            <strong>Meetings</strong>
                        </p>

                        <div class="progress-group">
                            Created
                            <span class="float-right"><b>160</b>/200</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" style="width: 80%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->

                        <div class="progress-group">
                            Outstanding
                            <span class="float-right"><b>310</b>/400</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-danger" style="width: 75%"></div>
                            </div>
                        </div>

                        <!-- /.progress-group -->
                        <div class="progress-group">
                            Not yet Due
                            <span class="float-right"><b>250</b>/500</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-warning" style="width: 50%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->
                        <div class="progress-group">
                            <span class="progress-text">Concluded</span>
                            <span class="float-right"><b>480</b>/800</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-success" style="width: 60%"></div>
                            </div>
                        </div>

                        <!-- /.progress-group -->
                    </div>
                    <div class="col-md-4">
                        <p class="text-center">
                            <strong>Trips</strong>
                        </p>

                        <div class="progress-group">
                            Created
                            <span class="float-right"><b>160</b>/200</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" style="width: 80%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->

                        <div class="progress-group">
                            Unsuccessful / Cancelled
                            <span class="float-right"><b>310</b>/400</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-danger" style="width: 75%"></div>
                            </div>
                        </div>
                        <div class="progress-group">
                            Successful
                            <span class="float-right"><b>250</b>/500</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-warning" style="width: 50%"></div>
                            </div>
                        </div>
                        <!-- /.progress-group -->
                        <!-- /.progress-group -->
                        <div class="progress-group">
                            <span class="progress-text">Future Trips</span>
                            <span class="float-right"><b>480</b>/800</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-success" style="width: 60%"></div>
                            </div>
                        </div>

                        <!-- /.progress-group -->

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
                <hr>
                <div class="row">
                    <!-- PIE CHART -->
                    <div class="col-md-6">
                    <div class="card card-danger">
                        <div class="card-body">
                            <canvas id="pieChart"
                                    style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                    </div>
                    <!-- BAR CHART -->
                    <div class="col-md-6">
                    <div class="card card-success">
<!--                        <div class="card-header">-->
<!--                            <h3 class="card-title">Bar Chart</h3>-->
<!---->
<!--                            <div class="card-tools">-->
<!--                                <button type="button" class="btn btn-tool" data-card-widget="collapse">-->
<!--                                    <i class="fas fa-minus"></i>-->
<!--                                </button>-->
<!--                                <button type="button" class="btn btn-tool" data-card-widget="remove">-->
<!--                                    <i class="fas fa-times"></i>-->
<!--                                </button>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="barChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>
@endsection