@extends('layouts.app')

@section('content')
<link id="style" href="{{ asset('assets') }}/css/carosal.css" rel="stylesheet" >
<link id="style" href="{{ asset('assets') }}/css/carosal.css" rel="stylesheet" >
<div class="container-fluid">

        <style>
            .center-box {
                     /* optional */
                height: 80px; 

                display: flex;
                justify-content: center; /* horizontally */
                align-items: center;     /* vertically */
                text-align: center;
                cursor: pointer; 
            }

            p.center-box:hover{
                font-size: 15px;
            }

        .service-box {
            border: 1px dashed #d6d6d6;
            border-radius: 14px;
            padding: 14px;
            height: auto;              /* ↓ card height */
            transition: 0.25s;
            cursor: pointer;
            user-select: none;          /* text select band */
            outline: none !important; 
            background: #fff;
        }

        .service-box h5 {
            font-size: 14px;            /* ↓ text size */
            font-weight: 500;
            margin-bottom: 5px;
        }

        .service-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .img-box {
            width: 60px;                /* ↓ image box */
            height: 60px;
            border: 1px dashed #d6d6d6;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .img-box img {
            max-width: 60px;            /* ↓ image size */
            max-height: 70px;
            object-fit: contain;
        }

        .arrow {
            border: 1px solid #333;
            padding: 4px 12px;          /* ↓ arrow size */
            border-radius: 16px;
            font-size: 15px;
            line-height: 1;
        }

        .service-box:hover {
            border-color: #1e6bff;
            box-shadow: 0 6px 14px rgba(0,0,0,0.07);
        }


        </style>
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <h4 class="mb-0">Hi, {{ Auth::user()->name }}!</h4>
            @if (session('status'))
                <div class="alert alert-success" role="alert">
                    {{ session('status') }}
                </div>
            @endif
        </div>
        <div class="main-dashboard-header-right">

        </div>
    </div>
    <!-- End Page Header -->


    <!-- row opened -->
    <div class="row">
        <div class="col-md-12 col-lg-12 col-xl-8">

            <div class="d-flex justify-content-between">
                <h4 class="card-title mb-0 pb-2">Business Cards</h4>
            </div>
                    <div class="row">
                        <div class="col-xl-4 col-lg-6 col-md-6 col-xm-12">
                            <div class="card overflow-hidden sales-card bg-primary-gradient">
                                <div class="px-3 pt-3  pb-2 pt-0">
                                    <div >
                                        <h6 class="mb-3 fs-12 text-fixed-white">TODAY ORDERS</h6>
                                    </div>
                                    <div class="pb-0 mt-0">
                                        <div class="d-flex">
                                            <div >
                                                <h4 class="fs-20 fw-bold mb-1 text-fixed-white">₹5,74.12</h4>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="compositeline"></div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6 col-xm-12">
                            <div class="card overflow-hidden sales-card bg-danger-gradient">
                                <div class="px-3 pt-3  pb-2 pt-0">
                                    <div >
                                        <h6 class="mb-3 fs-12 text-fixed-white">TOTAL ORDERS</h6>
                                    </div>
                                    <div class="pb-0 mt-0">
                                        <div class="d-flex">
                                            <div >
                                                <h4 class="fs-20 fw-bold mb-1 text-fixed-white">₹1,230.17</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="compositeline2"></div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6 col-xm-12">
                            <div class="card overflow-hidden sales-card bg-success-gradient">
                                <div class="px-3 pt-3  pb-2 pt-0">
                                    <div >
                                        <h6 class="mb-3 fs-12 text-fixed-white">TOTAL EARNINGS</h6>
                                    </div>
                                    <div class="pb-0 mt-0">
                                        <div class="d-flex">
                                            <div >
                                                <h4 class="fs-20 fw-bold mb-1 text-fixed-white">₹7,125.70</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="compositeline3"></div>
                            </div>
                        </div>
                    </div>
            @if(\CommonHelper::hasNotRole(['admin','wlpartner']))
            <div class="row g-2">

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="service-box">
                        <h5>Bill Payment</h5>
                        <div class="service-inner">
                            <div class="img-box">
                                <img src="{{ asset('assets/images/services/electricity.png') }}" alt="Bill Payment">
                            </div>
                            <span class="arrow">→</span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="service-box">
                        <h5>Mobile Recharge</h5>
                        <div class="service-inner">
                            <div class="img-box">
                                <img src="{{ asset('assets/images/services/mobile.png') }}" alt="Mobile Recharge">
                            </div>
                            <span class="arrow">→</span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="service-box">
                        <h5>DTH Recharge</h5>
                        <div class="service-inner">
                            <div class="img-box">
                                <img src="{{ asset('assets/images/services/dth.png') }}" alt="DTH Recharge">
                            </div>
                            <span class="arrow">→</span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="service-box">
                        <h5>Money Transfer</h5>
                        <div class="service-inner">
                            <div class="img-box">
                                <img src="{{ asset('assets/images/services/fund.png') }}" alt="Money Transfer">
                            </div>
                            <span class="arrow">→</span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="service-box">
                        <h5>Collection Service</h5>
                        <div class="service-inner">
                            <div class="img-box">
                                <img src="{{ asset('assets/images/services/wallet.png') }}" alt="Money Transfer">
                            </div>
                            <span class="arrow">→</span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="service-box">
                        <h5>Travel Booking</h5>
                        <div class="service-inner">
                            <div class="img-box">
                                <img src="{{ asset('assets/images/services/flight.png') }}" alt="Money Transfer">
                            </div>
                            <span class="arrow">→</span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="service-box">
                        <h5>Account Opening</h5>
                        <div class="service-inner">
                            <div class="img-box">
                                <img src="{{ asset('assets/images/services/payout.png') }}" alt="Money Transfer">
                            </div>
                            <span class="arrow">→</span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="service-box">
                        <h5>Bank Settlement</h5>
                        <div class="service-inner">
                            <div class="img-box">
                                <img src="{{ asset('assets/images/services/payout.png') }}" alt="Money Transfer">
                            </div>
                            <span class="arrow">→</span>
                        </div>
                    </div>
                </div>
            </div>
            @endif

        </div>


        <div class="col-lg-12 col-xl-4">
            <div class="d-flex justify-content-between">
                <h4 class="card-title mb-0 pb-2">Service Highlights</h4>
            </div>

            <div class="card">
                <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">

                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"
                                class="active" aria-current="true" aria-label="Slide 1"></button>

                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                                aria-label="Slide 2"></button>

                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                    </div>

                    <div class="carousel-inner">
                       @if($mydata['companywisedatas']->dashboardbanner1)
                        <div class="carousel-item active" data-bs-interval="10000">
                            <img src="{{ asset('banner') }}/{{$mydata['companywisedatas']->dashboardbanner1}}"
                                 class="d-block w-100" alt="..." style="height:360px;">

                            <div class="carousel-caption d-none d-md-block">
                                
                            </div>
                        </div>
                        @endif

                       @if($mydata['companywisedatas']->dashboardbanner2)
                        <div class="carousel-item" data-bs-interval="20000">
                            <img src="{{ asset('banner') }}/{{$mydata['companywisedatas']->dashboardbanner2}}"
                                 class="d-block w-100" alt="..." style="height:360px;">

                            <div class="carousel-caption d-none d-md-block">
                               
                            </div>
                        </div>
                        @endif

                       @if($mydata['companywisedatas']->dashboardbanner3)
                        <div class="carousel-item">
                            <img src="{{ asset('banner') }}/{{$mydata['companywisedatas']->dashboardbanner3}}"
                                 class="d-block w-100" alt="..." style="height:360px;">

                            <div class="carousel-caption d-none d-md-block">
                               
                            </div>
                        </div>
                        @endif
                 </div>
                     <button class="carousel-control-prev" type="button"
                            data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>

                    <button class="carousel-control-next" type="button"
                            data-bs-target="#carouselExampleDark" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>

                </div>
            </div>
            
        </div>
    </div>
    <!-- row closed -->

    <!-- row opened -->
    <div class="row">

        <div class="col-md-12 col-lg-12 col-xl-12">
            <div class="card card-table">
                <div class=" card-header p-0 d-flex justify-content-between">
                    <h4 class="card-title mb-1">Last 10 Transactions</h4>
                </div>
                <span class="fs-12 text-muted mb-3"></span>
                <div class="table-responsive country-table">
                    <table class="table table-striped table-bordered mb-0 text-nowrap">
                        <thead>
                            <tr>
                                <th class="wd-lg-25p">Date</th>
                                <th class="wd-lg-25p">Name</th>
                                <th class="wd-lg-25p">Transaction Type</th>
                                <th class="wd-lg-25p">Amount</th>
                                <th class="wd-lg-25p">Status</th>
                                <th class="wd-lg-25p">Reference No.</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>27 Nov 2025</td>
                                <td>Rahul Sharma (RT82465648)</td>
                                <td>AEPS</td>
                                <td>₹1,500</td>
                                <td><span class="text-success">SUCCESS</span></td>
                                <td>25112700012345</td>
                            </tr>

                            <tr>
                                <td>26 Nov 2025</td>
                                <td>Pooja Verma (RT92348712)</td>
                                <td>Recharge</td>
                                <td>₹249</td>
                                <td><span class="text-danger">FAILED</span></td>
                                <td>25112600067890</td>
                            </tr>

                            <tr>
                                <td>25 Nov 2025</td>
                                <td>Amit Kumar (RT76234988)</td>
                                <td>DMT Transfer</td>
                                <td>₹5,000</td>
                                <td><span class="text-warning">PENDING</span></td>
                                <td>25112500987654</td>
                            </tr>

                            <tr>
                                <td>25 Nov 2025</td>
                                <td>Neha Singh (RT55671234)</td>
                                <td>Bill Payment</td>
                                <td>₹820</td>
                                <td><span class="text-success">SUCCESS</span></td>
                                <td>25112500111223</td>
                            </tr>

                            <tr>
                                <td>24 Nov 2025</td>
                                <td>Sunil Yadav (RT44892177)</td>
                                <td>Payout</td>
                                <td>₹2,200</td>
                                <td><span class="text-success">SUCCESS</span></td>
                                <td>25112400555321</td>
                            </tr>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- /row -->

    
</div>

@endsection