{{-- Welcome {{ __(Auth::user()->name) }} --}}
@extends('user.layouts.app')

@section('content')
@section('title', 'Dashboard')
    <!-- notification popup  -->
    <!-- Modal:begin -->
    <div class="modal modal-sm notify-box fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- <div class="modal-header">
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div> -->
                <div class="modal-body">
                    <ul>
                        <li>
                            <a href="#">
                                <button class="btn" type="button" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasRightView" aria-controls="offcanvasRightView">
                                    <div class="points">
                                        <div class="points-list"></div>

                                        <div class="points-text">
                                            <div class="d-between mb-2">
                                                <h3>Branch 01</h3>
                                                <span>34min.</span>
                                            </div>
                                            <p>
                                                Lorem Ipsum is simply dummy text of the printing
                                                and typesetting industry.
                                            </p>
                                        </div>
                                    </div>
                                </button>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <button class="btn" type="button" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasRightView" aria-controls="offcanvasRightView">
                                    <div class="points">
                                        <div class="points-list"></div>

                                        <div class="points-text">
                                            <div class="d-between mb-2">
                                                <h3>Branch 02</h3>
                                                <span>45min ago</span>
                                            </div>
                                            <p>
                                                Lorem Ipsum is simply dummy text of the printing
                                                and typesetting industry.
                                            </p>
                                        </div>
                                    </div>
                                </button>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <button class="btn" type="button" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasRightView" aria-controls="offcanvasRightView">
                                    <div class="points">
                                        <div class="points-list"></div>
                                        <div class="points-text">
                                            <div class="d-between mb-2">
                                                <h3>Branch 03</h3>
                                                <span>1 hours Ago</span>
                                            </div>
                                            <p>
                                                Lorem Ipsum is simply dummy text of the printing
                                                and typesetting industry.
                                            </p>
                                        </div>
                                    </div>
                                </button>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="text-center mt-3">
                    <a href="{{route('user.notification')}}">
                        <button type="button" class="btn view-more">View more</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal:end  -->
    <!-- notification popup /-- -->
    <!-- Dashboard inner section:begin -->
    <div class="dashboard">
        <div class="dashboard_inner mb-3">
            <div class="dashboard_head">
                <h4>{{__('Welcome user')}}</h4>

                <div class="filter-branch">
                    <span class="text">Filter by</span>
                    <div class="dropdown">
                        <button class="btn dropdown-toggle" type="button" id="dropdownMenuBranch" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            {{__('All Branch')}}
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuBranch1">
                            @foreach($branch as $branch_data)
                            <li value="{{$branch_data['branch_id']}}"><a class="dropdown-item" href="#">{{$branch_data['branch_name']}}</a></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- dashboard overview start -->
        <div class="row mb-3">
            <div class="col-12 col-md-12 col-lg-7 col-xl-8">
                <div class="dashboard-overview dashboard_box mb-3 mb-lg-0">
                    <div class="dashboard-overview_wrapper">
                        <div class="overview">
                            <h5>{{__('Overview')}}</h5>
                            <p class="mb-3">{{__('Summary')}}</p>
                        </div>
                        <div class="dropdown">
                            <a class="btn dropdown-toggle" href="#" role="button" id="dropdownPeriodLink"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Weekly
                            </a>

                            <ul class="dropdown-menu" aria-labelledby="dropdownPeriodLink">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li>
                                    <a class="dropdown-item" href="#">Another action</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="dashboard-overview_summary">
                        <div class="row">
                            <div class="col-md-4 col-lg-6 col-xl-4">
                                <div class="invoice-box invoice-pink mb-lg-3 mb-xl-0">
                                    <img src="{{ asset('user/images/invoice-total.svg') }}" alt="Total Invoice"
                                        class="img-fluid" />
                                    <h2>€ 24,05,567</h2>
                                    <h6>Total invoice</h6>
                                    <span class="invoice-progress">
                                        <a href="#">+8% from last week</a></span>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-6 col-xl-4">
                                <div class="invoice-box invoice-pitch mb-lg-3 mb-xl-0">
                                    <img src="{{ asset('user/images/stock-value.svg') }}" alt="Total Invoice"
                                        class="img-fluid" />
                                    <h2>€ 30,05,000</h2>
                                    <h6>daily stock value</h6>
                                    <span class="invoice-progress">
                                        <a href="#">+4% from last week</a></span>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-6 col-xl-4">
                                <div class="invoice-box invoice-green mb-lg-3 mb-xl-0">
                                    <img src="{{ asset('user/images/order-value.svg') }}" alt="Total Invoice"
                                        class="img-fluid" />
                                    <h2>€ 40,45,167</h2>
                                    <h6>Average order value</h6>
                                    <span class="invoice-progress">
                                        <a href="#">+10% from last week</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-5 col-xl-4">
                <div class="dashboard-table dashboard_box mb-3 mb-lg-0">
                    <div class="dashboard-table_wrapper">
                        <h2>{{__('Best selling products')}}</h2>

                        <div class="dropdown">
                            <a class="btn dropdown-toggle" href="#" role="button" id="dropdownPeriodLink"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Weekly
                            </a>

                            <ul class="dropdown-menu" aria-labelledby="dropdownPeriodLink">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li>
                                    <a class="dropdown-item" href="#">Another action</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="table-scroll">
                        <table class="table table-sm table-hover table-responsive">
                            <thead>
                                <tr>
                                    <th scope="col" class="pe-3">#</th>
                                    <th scope="col" class="pe-3">{{__('Name')}}</th>
                                    <th scope="col" class="pe-3">{{__('ID')}}</th>
                                    <th scope="col" class="pe-3 text-center">{{__('Quantity')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="td-blue">1</td>
                                    <td>Product name 01</td>
                                    <td class="td-blue">ID09911S1</td>
                                    <td class="text-center">
                                        <span class="text quant--blue">50</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td-blue">2</td>
                                    <td>Product name 02</td>
                                    <td class="td-blue">ID09911S1</td>
                                    <td class="text-center">
                                        <span class="text quant--grn">100</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td-blue">3</td>
                                    <td>Product name 03</td>
                                    <td class="td-blue">ID09911S1</td>
                                    <td class="text-center">
                                        <span class="text quant--purple">150</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td-blue">4</td>
                                    <td>Product name 04</td>
                                    <td class="td-blue">ID09911S1</td>
                                    <td class="text-center">
                                        <span class="text quant--yellow">200</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- dashboard overview end  -->
        <!-- dashboard graph start  -->

        <div class="row mb-3">
            <div class="col-12 col-md-12 col-lg-7 col-xl-8">
                <div class="dashboard-graph dashboard_box mb-3 mb-lg-0">
                    <nav class="graph-tab">
                        <div class="nav nav-tabs mb-4 justify-content-start justify-content-sm-center justify-content-md-end"
                            id="nav-tab" role="tablist">
                            <button class="nav-link active mb-3 mb-sm-0" id="nav-home-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home"
                                aria-selected="true">
                                Total Invoice
                            </button>
                            <button class="nav-link mb-3 mb-sm-0" id="nav-profile-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile"
                                aria-selected="false">
                                Stock value
                            </button>
                            <button class="nav-link mb-3 mb-sm-0" id="nav-contact-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact"
                                aria-selected="false">
                                Order value
                            </button>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade active show" id="nav-home" role="tabpanel"
                            aria-labelledby="nav-home-tab">
                            <div class="graph-tab__content">
                                <h3>Total invoice</h3>
                                <div class="dashboard-graph_chart">
                                    <div>
                                        <canvas id="myChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <div class="dashboard-graph dashboard_box">
                                <h3>Stock value</h3>

                                <div class="dashboard-graph_chart">
                                    <div>
                                        <canvas id="myChart2"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                            <div class="dashboard-graph dashboard_box">
                                <h3>Order value</h3>

                                <div class="dashboard-graph_chart">
                                    <div>
                                        <canvas id="myChart3"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-5 col-xl-4">
                <div class="dashboard-table dashboard_box dashboard-table--invoice mb-3 mb-lg-0">
                    <div class="dashboard-table_wrapper">
                        <h2>Invoices Details</h2>

                        <a href="{{route('user.invoice')}}">
                            <button type="button" class="btn btn-view">View All</button>
                        </a>
                    </div>
                    <div class="table-scroll">
                        <table class="table table-sm table-hover table-responsive">
                            <tbody>
                                <tr>
                                    <td>
                                        <p>March, 11, 2023</p>
                                        <p>#ID-415646</p>
                                    </td>
                                    <td valign="middle">€ 180</td>
                                    <td class="text-end">
                                        <a href="#">
                                            <img src="{{asset('user/images/pdf.svg')}}" alt="excel" class="img-fluid" />
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>March, 11, 2023</p>
                                        <p>#ID-415646</p>
                                    </td>
                                    <td valign="middle">€ 180</td>
                                    <td class="text-end">
                                        <a href="#">
                                            <img src="{{asset('user/images/pdf.svg')}}" alt="excel" class="img-fluid" />
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>March, 11, 2023</p>
                                        <p>#ID-415646</p>
                                    </td>
                                    <td valign="middle">€ 180</td>
                                    <td class="text-end">
                                        <a href="#">
                                            <img src="{{asset('user/images/pdf.svg')}}" alt="excel" class="img-fluid" />
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>March, 11, 2023</p>
                                        <p>#ID-415646</p>
                                    </td>
                                    <td valign="middle">€ 180</td>
                                    <td class="text-end">
                                        <a href="#">
                                            <img src="{{asset('user/images/pdf.svg')}}" alt="excel" class="img-fluid" />
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>March, 11, 2023</p>
                                        <p>#ID-415646</p>
                                    </td>
                                    <td valign="middle">€ 180</td>
                                    <td class="text-end">
                                        <a href="#">
                                            <img src="{{asset('user/images/pdf.svg')}}" alt="excel" class="img-fluid" />
                                        </a>
                                    </td>
                                </tr>
                               
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- dashboard graph end  -->
    </div>
    <!-- view notifications offcanvas:begin  -->

    <div class="offcanvas offcanvas-end offcanvas-notify" tabindex="-1" id="offcanvasRightView"
        aria-labelledby="offcanvasRightViewLabel">
        <div class="offcanvas-header">
            <h5 id="offcanvasRightViewLabel">Notification details</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-branch">
            <div class="d-between">
                <div class="d-flex align-items-center gap-4">
                    <span class="list-notify_imgBox">
                        <img src="{{asset('user/icons/notify-orange.svg')}}" alt="latest notification" class="img-fluid" />
                    </span>

                    <h5>Branch 01</h5>
                </div>
                <span class="time-notif"> 13 july, 2023, 10:30 pm</span>
            </div>
        </div>
        <div class="offcanvas-body">
            <ul class="list-notify">
                <li>
                    <a href="#">
                        <p class="mb-4 pb-2">
                            It is a long established fact that a reader will be
                            distracted by the readable content of a page when looking at
                            its layout. The point of using Lorem
                        </p>
                        <p>
                            It is a long established fact that a reader will be All the
                            Lorem Ipsum generators on the Internet tend to repeat
                            predefined chunks as necessary, making this the first true
                            generator on the Internet. It uses a dictionary of over 200
                            Latin words, combined with a handful of model sentence
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- view notifications offcanvas:end  -->

    <!-- Dashboard inner section:end -->
@endsection