@extends('user.layouts.app')
@section('breadcrumb-first', 'Dasbor')
@section('breadcrumb-second', website_config('main')->website_name)
@section('content')
@if (Auth::check() == true)
@php
if (website_config('template')->number == 'first-template') {
    $card_title_class = 'card-title';
} elseif (website_config('template')->number == 'second-template') {
    $card_title_class = 'header-title';
} elseif (website_config('template')->number == 'third-template') {
    $card_title_class = 'header-title';
} elseif (website_config('template')->number == 'custom-template') {
    $card_title_class = 'header-title';
} else {
    $card_title_class = 'card-title';
}
@endphp
<div class="row">
    <div class="col-lg-12">
        @php
        foreach (website_config('banner') as $key => $item) {
            if ($item <> null) $banner[] = $item;
        }
        @endphp
        @if (isset($banner) AND count($banner) > 0)
        <div id="banner" class="carousel slide mb-4" data-ride="carousel">
            <ol class="carousel-indicators">
                @foreach ($banner as $item)
                <li data-target="#banner" data-slide-to="{{ $loop->iteration - 1 }}" class="@if ($loop->iteration == '1') active @endif"></li>
                @endforeach
            </ol>
            <div class="carousel-inner">
                <div class="zoom-banner">
                    @foreach ($banner as $item)
                    @if ($item <> '')
                    <div class="carousel-item @if ($loop->first == true) active @endif">
                        <a href="{{ url('file/images/'.$item.'') }}" class="chocolat-image" title="Banner">
                            <div data-crop-image="auto">
                                <img alt="image" src="{{ url('file/images/'.$item.'') }}" class="d-block img-fluid mx-auto">
                            </div>
                        </a>
                    </div>
                    @endif
                    @endforeach
                </div>
            </div>
            <a class="carousel-control-prev" href="#banner" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#banner" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        @endif
    </div>
    <div class="col-lg-4">
        <div class="card stats-widget card m-b-30">
            <div class="card-body">
                <div class="float-left">
                    <span class="label label-warning mb-3">Saldo</span>
                    <h5 class=" mt-2">Rp {{ number_format(Auth::user()->balance,0,',','.') }}</h5>
                </div>
                <div class="float-right">
                    <div class="avatar-xs">
                        <span class="avatar-title rounded-circle bg-custom">
                            <i class="mdi mdi-account-cash-outline"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card stats-widget card m-b-30">
            <div class="card-body">
                <div class="float-left">
                    <span class="label label-warning mb-3">Pesanan</span>
                    <h5 class=" mt-2">Rp {{ number_format($orders['total'],0,',','.') }} ({{ number_format($orders['count'],0,',','.') }})</h5>
                </div>
                <div class="float-right">
                    <div class="avatar-xs">
                        <span class="avatar-title rounded-circle bg-custom">
                            <i class="mdi mdi-cart-outline"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card stats-widget card m-b-30">
            <div class="card-body">
                <div class="float-left">
                    <span class="label label-primary mb-3">Deposit</span>
                    <h5 class=" mt-2">Rp {{ number_format($deposits['total'],0,',','.') }} ({{ number_format($deposits['count'],0,',','.') }})</h5>
                </div>
                <div class="float-right">
                    <div class="avatar-xs">
                        <span class="avatar-title rounded-circle bg-custom">
                            <i class="mdi mdi-credit-card-outline"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card card-custom">
			<div class="card-body">
                <h4 class="header-title"><i class="fa fa-chart-area"></i> Grafik Pesanan & Deposit 7 Hari Terakhir</h4>
                <div id="chart" style="height: 280px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card card-custom">
			<div class="card-body">
                <h4 class="header-title mb-3"><i class="fa fa-info-circle"></i> 5 Informasi Terbaru</h4>
                @foreach($information as $value)
                <div class="alert alert-custom text-white" style="overflow-y: scroll; max-height: 500px;">
                    <div class="d-flex mb-3">
                        <div class="">
                            <button type="button" class="btn btn-light btn-icon btn-sm icon-left">
                                <i class="far fa-lightbulb"></i> {!! $value->category !!} - {{ \Carbon\Carbon::parse($value->created_at)->translatedFormat('d F Y - H:i') }}
                            </button>
                        </div>
                        <div class="ml-auto">
                            <button class="btn btn-light btn-icon btn-sm icon-left" data-toggle="modal" data-target="#information_detail_{{ $value->id }}">
                                <i class="fa fa-link"></i> Selengkapnya
                            </button>
                        </div>
                    </div>
                    <hr>
                    {!! ($value->content) !!}
                </div>
                @endforeach
                @if ($information->count() >= 5)
                <div class="button-items d-grid gap-2">
                    <a href="{{ url('page/information') }}" class="btn btn-custom btn btn-block waves-effect waves-light">Lihat semua...</a>
                </div>
                @endif 
            </div>
        </div>
    </div>
</div>
@php
$information = \App\Models\WebsiteInformation::orderBy('id', 'desc')->limit('5')->get();
@endphp
@foreach($information as $value)
<div class="modal fade" tabindex="-1" role="dialog" id="information_detail_{{ $value->id }}">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-info-circle fa-fw"></i> Detail Informasi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                	<span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-custom text-white">
					<div class="d-flex mb-3">
						<div class="">
							<button type="button" class="btn btn-light btn-icon btn-sm icon-left">
								<i class="far fa-lightbulb"></i> {!! $value->category !!} - {{ \Carbon\Carbon::parse($value->created_at)->translatedFormat('d F Y - H:i') }}
							</button>
						</div>
						<div class="ml-auto">
						</div>
					</div>
					<hr>
					{!! ($value->content) !!}
				</div>
            </div>
            <div class="modal-footer bg-whitesmoke br">
                <button type="button" class="btn btn-light" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endforeach
<script type="text/javascript">
    var chart_data = {{ Illuminate\Support\Js::from($chart) }};
    $(function() {
        new Morris.Area({
            element: 'chart',
            data: chart_data,
            xkey: 'date',
            ykeys: ['order', 'deposit'],
            labels: ['Pesanan', 'Deposit'],
            lineColors: ['#508aeb', '#fcc24c'],
            gridLineColor: '#eef0f2',
            pointSize:3,
            lineWidth:2,
            resize: true,
            barSizeRatio:.4,
            hideHover:"auto",
            parseTime: false,
        });
    });
</script> 
@else
<div class="row">
    <div class="col-lg-12">
        <div class="card text-center grid-margin">
            <div class="card-body">
                <i class="fa fa-question text-green" style="font-size: 30px; margin: 10px;"></i>
                <h5 class="text-uppercase">Tentang Kami?</h5>
                <p>{!! website_config('about_us') !!}</p>
                <a href="{{ url('auth/login') }}" class="btn btn-success"><i class="fa fa-sign-in-alt fa-fw"></i> Masuk</a> 
                <a href="{{ url('auth/register') }}" class="btn btn-warning"><i class="fa fa-user-plus fa-fw"></i> Daftar</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card card-body grid-margin">
            <center>
            <i class="fa fa-thumbs-up text-green" style="font-size: 40px; margin: 10px;"></i>
            <h5 class="text-uppercase">Layanan Terbaik</h5>
            Kami menyediakan berbagai layanan terbaik untuk kebutuhan sosial media & pulsa Anda.
            </center>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card card-body grid-margin">
            <center>
                <i class="fa fa-hands-helping text-green" style="font-size: 40px; margin: 10px;"></i>
                <h5 class="text-uppercase">Pelayanan Bantuan</h5>
                Kami selalu siap membantu jika Anda membutuhkan kami dalam penggunaan layanan kami.
            </center>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card card-body grid-margin">
            <center>
                <i class="fa fa-desktop" style="font-size: 40px; margin: 10px;"></i>
                <h5 class="text-uppercase">Desain Responsif</h5>
                Kami menggunakan desain website yang dapat diakses dari berbagai <i>device</i>, baik smartphone maupun PC.
            </center>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card card-body grid-margin">
            <center>
                <i class="fa fa-random text-green" style="font-size: 40px; margin: 10px;"></i>
                <h5 class="text-uppercase">Dukungan API</h5>
                Kami memiliki Dukungan API Untuk pemilik panel sehingga Anda dapat menjual kembali layanan kami dengan mudah.
            </center>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card card-body grid-margin">
            <center>
                <i class="fa fa-code text-green" style="font-size: 40px; margin: 10px;"></i>
                <h5 class="text-uppercase">Pembaruan</h5>
                Layanan Selalu Diperbarui Agar lebih ditingkatkan dan memberi Anda pengalaman terbaik.
            </center>
            <br />
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card card-body grid-margin">
            <center>
                <i class="fa fa-shopping-cart text-green" style="font-size: 40px; margin: 10px;"></i>
                <h5 class="text-uppercase">Resellers</h5>
                Anda dapat menjual kembali layanan kami dan menumbuhkan Profit Anda dengan mudah.
            </center>
            <br />
        </div>
    </div>
</div>
@endif
@endsection