@extends('website.layouts.index')
@section('content')
<!-- Sidebar -->
@include('professional.layouts.menu')
<!-- /Sidebar -->

<div class="content container-fluid">
    
    <!-- Page Header -->
    <div class="page-header">
        <div class="row">
            <div class="col-md-4">
                <div class="provider-subtitle">
                    <h6>Provider Dashboard</h6>
                </div>
            </div>
        </div>
    </div>
    <!-- /Page Header -->
    
    <div class="row">
        <div class="col-xl-3 col-sm-6 d-flex">
            <div class="dash-card flex-fill">
                <div class="dash-header">
                    <div class="dash-widget-header">
                        <div class="d-flex align-items-center">
                            <span class="dash-widget-icon">
                                <img src="{{asset('assets/img/icons/pro-icon-04.svg')}}" alt="img">
                            </span>
                            <div class="dash-widget-info">
                                <h6>Spendings</h6>
                                <h5>$50000</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12 d-flex">
            <div class="dash-card flex-fill">
                <div class="dash-header">
                    <div class="dash-widget-header">
                        <div class="d-flex align-items-center">
                            <span class="dash-widget-icon">
                                <img src="{{asset('assets/img/icons/pro-icon-03.svg')}}" alt="img">
                            </span>
                            <div class="dash-widget-info">
                                <h6>Bookings</h6>
                                <h5>102</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12 d-flex">
            <div class="dash-card flex-fill">
                <div class="dash-header">
                    <div class="dash-widget-header">
                        <div class="d-flex align-items-center">
                            <span class="dash-widget-icon">
                                <img src="{{asset('assets/img/icons/pro-icon-02.svg')}}" alt="img">
                            </span>
                            <div class="dash-widget-info">
                                <h6>Services</h6>
                                <h5>12</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12 d-flex">
            <div class="dash-card flex-fill">
                <div class="dash-header">
                    <div class="dash-widget-header">
                        <div class="d-flex align-items-center">
                            <span class="dash-widget-icon">
                                <img src="{{asset('assets/img/icons/pro-icon-01.svg')}}" alt="img">
                            </span>
                            <div class="dash-widget-info">
                                <h6>Balance</h6>
                                <h5>$200</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h6 class="subhead-title">Recent Booking</h6>
            
            <!-- Booking List -->
            <div class="booking-list">
                <div class="booking-widget">
                    <div class="booking-img">
                        <a href="service-details.html">
                            <img src="{{asset('assets/img/services/service.jpg')}}" alt="User Image">
                        </a>
                        <div class="fav-item">
                            <a href="javascript:void(0)" class="fav-icon">
                                <i class="feather-heart"></i>
                            </a>
                        </div>
                    </div>
                    <div class="booking-det-info">
                        <h3>
                            <a href="service-details.html">Computer Services  </a><span class="badge badge-danger">Cancelled</span>
                        </h3>
                        <ul class="booking-details">
                            <li>
                                <span class="book-item">Booking Date</span> : 27 Sep 2022, 17:00-18:00
                            </li>
                            <li>
                                <span class="book-item">Amount</span> : $100.00 <span class="badge-grey">COD</span>
                            </li>
                            <li>
                                <span class="book-item">Location</span> : Newyork, USA
                            </li>
                            <li>
                                <span class="book-item">Customer</span> : 
                                <div class="user-book">
                                    <div class="avatar avatar-xs">
                                        <img class="avatar-img rounded-circle" alt="User Image" src="assets/img/profiles/avatar-02.jpg">
                                    </div>
                                     John Doe
                                </div>
                                <p><a href="https://html.truelysell.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177e797178577d787f797378723974787a">[email&#160;protected]</a></p>
                                <p>+1 888 888 8888</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="booking-action">
                    <a href="booking.html" class="btn btn-secondary">Reschedule</a>
                </div>
            </div>
            <!-- /Booking List -->
            
            <!-- /Booking List -->

            <div class="view-history">
                <a href="provider-booking.html" class="btn btn-primary">View All History</a>
            </div>
            
        </div>
        
        
    </div> 
</div>

@endsection