@extends('layout.app')

@section('content')
    <div class="row">
        <div class="col-sm-4">
            <div class="card ticket-bx">
                <div class="card-body">
                    <div class="d-sm-flex d-block pb-sm-3 align-items-end">
                        <div class="me-auto pe-3 mb-2 mb-sm-0">
                            <span class="text-white fs-20 font-w200 d-block mb-sm-3 mb-2">Tickets Sold</span>
                            <h3 class="fs-40 text-white mb-0">{{ $totalTickets }}<span class="fs-18 ms-2">tickets</span></h3>
                        </div>
                        <div class="d-flex flex-wrap">
                            <svg width="87" height="58" viewBox="0 0 87 58" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18.4571 37.6458C11.9375 44.6715 4.81049 52.3964 2 55.7162H68.8125C77.6491 55.7162 84.8125 48.5528 84.8125 39.7162V2L61.531 31.9333C56.8486 37.9536 48.5677 39.832 41.746 36.4211L37.3481 34.2222C30.9901 31.0432 23.2924 32.4352 18.4571 37.6458Z" fill="url(#paint0_linear)"/>
                                <path d="M2 55.7162C4.81049 52.3964 11.9375 44.6715 18.4571 37.6458C23.2924 32.4352 30.9901 31.0432 37.3481 34.2222L41.746 36.4211C48.5677 39.832 56.8486 37.9536 61.531 31.9333L84.8125 2" stroke="white" stroke-width="4" stroke-linecap="round"/>
                                <defs>
                                    <linearGradient id="paint0_linear" x1="43.4062" y1="8.71453" x2="46.7635" y2="55.7162" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="white" offset="0"/>
                                        <stop offset="1" stop-color="white" stop-opacity="0"/>
                                    </linearGradient>
                                </defs>
                            </svg>
                        </div>
                    </div>
                    <div class="progress mt-3 mb-5" style="height:15px;">
                        <div class="progress-bar-striped progress-bar-animated" style="width: 86%; height:15px;" role="progressbar">
                            <span class="sr-only">86% Complete</span>
                        </div>
                    </div>
                    {{--                            <p class="fs-12 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini</p>--}}
                    <a href="javascript:void(0);" class="text-white">View detail<i class="las la-long-arrow-alt-right scale5 ms-3"></i></a>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="card">
                <div class="card-header align-items-start pb-0 border-0">

                </div>
                <div class="card-body pt-2">
                    {{ $ticketTypesChart->container() }}
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card ticket-bx">
                <div class="card-body">
                    <div class="d-sm-flex d-block pb-sm-3 align-items-end">
                        <div class="me-auto pe-3 mb-2 mb-sm-0 text-center">
                            <span class="text-white fs-20 font-w200 d-block mb-sm-3 mb-2">Total Revenue</span>
                            <div class="text-center text-white">
                            </div>
                            <h5 class="fs-20 text-white mb-0 py-3">Ghc</h5>
                            <span class="text-white fs-15">{{ $totalRevenue }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-xxl-12">
            <div class="card">
                <div class="card-header border-0 pb-0 d-sm-flex d-block">
                    <div>
                        <h4 class="mb-0 fs-20">Sales Traffic</h4>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-sm-0">
                        <div class="round weekly" id="dzOldSeries">
                            <div>
                                <input type="checkbox" id="checkbox1" name="radio" value="weekly" />
                                <label for="checkbox1" class="checkmark"></label>
                            </div>
                            <div>
                                <span class="fs-14">Total Sales (Website)</span>
                                <h4 class="fs-5 font-w600 mb-0">{{ $totalweb }}</h4>
                            </div>
                        </div>
                        <div class="round " id="dzNewSeries">
                            <div>
                                <input type="checkbox" id="checkbox" name="radio" value="monthly" />
                                <label for="checkbox" class="checkmark"></label>
                            </div>
                            <div>
                                <span class="fs-14">Total Sales (USSD)</span>
                                <h4 class="fs-5 font-w600 mb-0">{{ $totalussd }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                {{ $ticketSourceChart->container() }}
            </div>
        </div>
    </div>
@endsection
@section('pagescript')
    <script src="{{ $ticketTypesChart->cdn() }}"></script>
    {{ $ticketTypesChart->script() }}
    <script src="{{ $ticketSourceChart->cdn() }}"></script>
    {{ $ticketSourceChart->script() }}
@endsection