@include('layouts.admin_header')



@include('layouts.admin_slider')


<!--**********************************
            Content body start
        ***********************************-->
<div class="content-body">
    <!-- row -->
    <div class="container-fluid">
        <!--  -->

        <div class="row">

                    <!-- <div class="col-xl-12">
		                <div class="welcome-card rounded ps-5 pt-5 pb-4 mt-3 position-relative mb-5">
		                    <h4 class="text-warning">Welcome to Ali Sheikhani!</h4>
		                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
		                        the industry's standard dumm.</p>
		                    <a class="btn btn-warning btn-rounded" href="javascript:void(0);">Learn More <i
		                            class="las la-long-arrow-alt-right ms-sm-4 ms-2"></i></a>
		                    <a class="btn-link text-dark ms-3" href="javascript:void(0);">Remind Me Later</a>
		                
		                </div>
		            </div> -->

            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="media align-items-center">
                            <span class="me-4">
                                <svg class="primary-icon" width="50" height="53" viewBox="0 0 50 53" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect width="7.11688" height="52.1905" rx="3" transform="matrix(-1 0 0 1 49.8184 0)"
                                        fill="var(--primary)"></rect>
                                    <rect width="7.11688" height="37.9567" rx="3"
                                        transform="matrix(-1 0 0 1 35.585 14.2338)" fill="var(--primary)"></rect>
                                    <rect width="7.11688" height="16.6061" rx="3"
                                        transform="matrix(-1 0 0 1 21.3516 35.5844)" fill="var(--primary)"></rect>
                                    <rect width="8.0293" height="32.1172" rx="3"
                                        transform="matrix(-1 0 0 1 8.0293 20.0732)" fill="var(--primary)"></rect>
                                </svg>
                            </span>
                            <div class="media-body ms-1">
                                <p class="mb-1">Day Sale</p>
                                <h4 class="mb-0 text-black font-w600">$126,000</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="media align-items-center">
                            <span class="me-4">
                                <svg class="primary-icon" width="51" height="31" viewBox="0 0 51 31" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M49.3228 0.840214C50.7496 2.08096 50.9005 4.24349 49.6597 5.67035L34.6786 22.8987C32.284 25.6525 28.1505 26.0444 25.281 23.7898L18.1758 18.2072L5.77023 29.883C4.3933 31.1789 2.22651 31.1133 0.930578 29.7363C-0.365358 28.3594 -0.299697 26.1926 1.07723 24.8967L13.4828 13.2209C15.9494 10.8993 19.7428 10.7301 22.4063 12.8229L29.5115 18.4055L44.4926 1.1772C45.7334 -0.249661 47.8959 -0.400534 49.3228 0.840214Z"
                                        fill="var(--primary)"></path>
                                </svg>
                            </span>
                            <div class="media-body ms-1">
                                <p class="mb-1">Month Sale</p>
                                <h4 class="mb-0 text-black font-w600">$304,109,511</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="media align-items-center">
                            <span class="me-4">
                                <svg class="primary-icon" width="51" height="52" viewBox="0 0 51 52" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M25.5 43C34.8888 43 42.5 35.3888 42.5 26C42.5 16.6112 34.8888 9 25.5 9C16.1112 9 8.5 16.6112 8.5 26C8.5 35.3888 16.1112 43 25.5 43ZM25.5 51.5C39.5833 51.5 51 40.0833 51 26C51 11.9167 39.5833 0.5 25.5 0.5C11.4167 0.5 0 11.9167 0 26C0 40.0833 11.4167 51.5 25.5 51.5Z"
                                        fill="white" fill-opacity="0.18"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M33.9997 1.95836C31.2809 0.997147 28.4073 0.5 25.4997 0.5V8.86605C28.5687 8.86605 31.5815 9.6904 34.223 11.253C36.8645 12.8155 39.0379 15.0589 40.5159 17.7486C41.9939 20.4384 42.7223 23.4757 42.625 26.5433C42.5277 29.6108 41.6082 32.5959 39.9627 35.1866C38.3172 37.7772 36.006 39.8783 33.2707 41.2703C30.5355 42.6623 27.4766 43.294 24.4136 43.0995C21.3507 42.905 18.3963 41.8913 15.8591 40.1645C13.3219 38.4376 11.2952 36.061 9.99062 33.283L2.41797 36.8391C3.65388 39.4709 5.32535 41.8607 7.35106 43.9131C8.50759 45.0848 9.77958 46.1466 11.1519 47.0806C14.9279 49.6506 19.3249 51.1592 23.8834 51.4487C28.4418 51.7382 32.9943 50.798 37.0652 48.7264C41.136 46.6548 44.5756 43.5277 47.0246 39.6721C49.4736 35.8165 50.842 31.3739 50.9868 26.8085C51.1317 22.2432 50.0476 17.7228 47.8479 13.7197C45.6482 9.71663 42.4137 6.37787 38.4824 4.05236C37.0536 3.2072 35.5519 2.50715 33.9997 1.95836Z"
                                        fill="var(--primary)"></path>
                                </svg>
                            </span>
                            <div class="media-body ms-1">
                                <p class="mb-1">Inventory Price</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="mb-0 me-3 text-black font-w600">59%</h4>
                                    <svg width="29" height="15" viewBox="0 0 29 15" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0 15L14.5 -1.27353e-06L29 15" fill="var(--primary)"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="media align-items-center">
                            <span class="me-4">
                                <!-- <svg  class="primary-icon" width="51" height="52" viewBox="0 0 51 52" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5 43C34.8888 43 42.5 35.3888 42.5 26C42.5 16.6112 34.8888 9 25.5 9C16.1112 9 8.5 16.6112 8.5 26C8.5 35.3888 16.1112 43 25.5 43ZM25.5 51.5C39.5833 51.5 51 40.0833 51 26C51 11.9167 39.5833 0.5 25.5 0.5C11.4167 0.5 0 11.9167 0 26C0 40.0833 11.4167 51.5 25.5 51.5Z" fill="white" fill-opacity="0.18"></path>
													<path fill-rule="evenodd" clip-rule="evenodd" d="M33.9997 1.95836C31.2809 0.997147 28.4073 0.5 25.4997 0.5V8.86605C28.5687 8.86605 31.5815 9.6904 34.223 11.253C36.8645 12.8155 39.0379 15.0589 40.5159 17.7486C41.9939 20.4384 42.7223 23.4757 42.625 26.5433C42.5277 29.6108 41.6082 32.5959 39.9627 35.1866C38.3172 37.7772 36.006 39.8783 33.2707 41.2703C30.5355 42.6623 27.4766 43.294 24.4136 43.0995C21.3507 42.905 18.3963 41.8913 15.8591 40.1645C13.3219 38.4376 11.2952 36.061 9.99062 33.283L2.41797 36.8391C3.65388 39.4709 5.32535 41.8607 7.35106 43.9131C8.50759 45.0848 9.77958 46.1466 11.1519 47.0806C14.9279 49.6506 19.3249 51.1592 23.8834 51.4487C28.4418 51.7382 32.9943 50.798 37.0652 48.7264C41.136 46.6548 44.5756 43.5277 47.0246 39.6721C49.4736 35.8165 50.842 31.3739 50.9868 26.8085C51.1317 22.2432 50.0476 17.7228 47.8479 13.7197C45.6482 9.71663 42.4137 6.37787 38.4824 4.05236C37.0536 3.2072 35.5519 2.50715 33.9997 1.95836Z" fill="var(--primary)"></path>
												</svg> -->
                                <svg width="24" height="24" viewBox="0 0 14 25" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M6.07438 25H7.95454V22.6464C11.8595 22.302 14 19.6039 14 16.8197C14 12.7727 10.8471 11.9977 7.95454 11.3088V5.10907C9.34297 5.4535 10.1529 6.5155 10.2686 7.66361H13.7975C13.5372 4.42021 11.281 2.61194 7.95454 2.32492V0H6.07438V2.35362C2.4876 2.66935 0 4.87945 0 8.09415C0 12.1412 3.18182 12.9449 6.07438 13.6625V19.977C4.45455 19.69 3.64463 18.628 3.52893 17.1929H0C0 20.4363 2.54545 22.3594 6.07438 22.6751V25ZM10.6736 16.992C10.6736 18.4845 9.69008 19.69 7.95454 19.977V14.1504C9.51653 14.6383 10.6736 15.3559 10.6736 16.992ZM3.35537 7.92193C3.35537 6.17107 4.48347 5.22388 6.07438 5.02296V10.8209C4.5124 10.333 3.35537 9.58668 3.35537 7.92193Z"
                                        fill="var(--primary)"></path>
                                </svg>
                            </span>
                            <div class="media-body ms-1">
                                <p class="mb-1">Total Accounts Receivable</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="mb-0 me-3 text-black font-w600">$46,475,623</h4>
                                    <!-- <svg width="29" height="15" viewBox="0 0 29 15" fill="none" xmlns="http://www.w3.org/2000/svg"> -->
                                    <!-- <path d="M0 15L14.5 -1.27353e-06L29 15" fill="var(--primary)"></path> -->
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="media align-items-center">
                            <span class="me-4">
                                <svg class="primary-icon" width="50" height="53" viewBox="0 0 50 53" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect width="7.11688" height="52.1905" rx="3" transform="matrix(-1 0 0 1 49.8184 0)"
                                        fill="var(--primary)"></rect>
                                    <rect width="7.11688" height="37.9567" rx="3"
                                        transform="matrix(-1 0 0 1 35.585 14.2338)" fill="var(--primary)"></rect>
                                    <rect width="7.11688" height="16.6061" rx="3"
                                        transform="matrix(-1 0 0 1 21.3516 35.5844)" fill="var(--primary)"></rect>
                                    <rect width="8.0293" height="32.1172" rx="3"
                                        transform="matrix(-1 0 0 1 8.0293 20.0732)" fill="var(--primary)"></rect>
                                </svg>
                            </span>
                            <div class="media-body ms-1">
                                <p class="mb-1">Day Purchase</p>
                                <h4 class="mb-0 text-black font-w600">$126,000</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="media align-items-center">
                            <span class="me-4">
                                <svg class="primary-icon" width="51" height="31" viewBox="0 0 51 31" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M49.3228 0.840214C50.7496 2.08096 50.9005 4.24349 49.6597 5.67035L34.6786 22.8987C32.284 25.6525 28.1505 26.0444 25.281 23.7898L18.1758 18.2072L5.77023 29.883C4.3933 31.1789 2.22651 31.1133 0.930578 29.7363C-0.365358 28.3594 -0.299697 26.1926 1.07723 24.8967L13.4828 13.2209C15.9494 10.8993 19.7428 10.7301 22.4063 12.8229L29.5115 18.4055L44.4926 1.1772C45.7334 -0.249661 47.8959 -0.400534 49.3228 0.840214Z"
                                        fill="var(--primary)"></path>
                                </svg>
                            </span>
                            <div class="media-body ms-1">
                                <p class="mb-1">Month Purchase</p>
                                <h4 class="mb-0 text-black font-w600">$109,511</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="media align-items-center">
                            <span class="me-4">
                                <svg class="primary-icon" width="51" height="52" viewBox="0 0 51 52" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M25.5 43C34.8888 43 42.5 35.3888 42.5 26C42.5 16.6112 34.8888 9 25.5 9C16.1112 9 8.5 16.6112 8.5 26C8.5 35.3888 16.1112 43 25.5 43ZM25.5 51.5C39.5833 51.5 51 40.0833 51 26C51 11.9167 39.5833 0.5 25.5 0.5C11.4167 0.5 0 11.9167 0 26C0 40.0833 11.4167 51.5 25.5 51.5Z"
                                        fill="white" fill-opacity="0.18"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M33.9997 1.95836C31.2809 0.997147 28.4073 0.5 25.4997 0.5V8.86605C28.5687 8.86605 31.5815 9.6904 34.223 11.253C36.8645 12.8155 39.0379 15.0589 40.5159 17.7486C41.9939 20.4384 42.7223 23.4757 42.625 26.5433C42.5277 29.6108 41.6082 32.5959 39.9627 35.1866C38.3172 37.7772 36.006 39.8783 33.2707 41.2703C30.5355 42.6623 27.4766 43.294 24.4136 43.0995C21.3507 42.905 18.3963 41.8913 15.8591 40.1645C13.3219 38.4376 11.2952 36.061 9.99062 33.283L2.41797 36.8391C3.65388 39.4709 5.32535 41.8607 7.35106 43.9131C8.50759 45.0848 9.77958 46.1466 11.1519 47.0806C14.9279 49.6506 19.3249 51.1592 23.8834 51.4487C28.4418 51.7382 32.9943 50.798 37.0652 48.7264C41.136 46.6548 44.5756 43.5277 47.0246 39.6721C49.4736 35.8165 50.842 31.3739 50.9868 26.8085C51.1317 22.2432 50.0476 17.7228 47.8479 13.7197C45.6482 9.71663 42.4137 6.37787 38.4824 4.05236C37.0536 3.2072 35.5519 2.50715 33.9997 1.95836Z"
                                        fill="var(--primary)"></path>
                                </svg>
                            </span>
                            <div class="media-body ms-1">
                                <p class="mb-1">Inventory Cost</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="mb-0 me-3 text-black font-w600">$240,430</h4>
                                    <svg width="29" height="15" viewBox="0 0 29 15" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <!-- <path d="M0 15L14.5 -1.27353e-06L29 15" fill="var(--primary)"></path> -->
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="media align-items-center">
                            <span class="me-4">
                                <svg class="primary-icon" width="51" height="52" viewBox="0 0 51 52" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M25.5 43C34.8888 43 42.5 35.3888 42.5 26C42.5 16.6112 34.8888 9 25.5 9C16.1112 9 8.5 16.6112 8.5 26C8.5 35.3888 16.1112 43 25.5 43ZM25.5 51.5C39.5833 51.5 51 40.0833 51 26C51 11.9167 39.5833 0.5 25.5 0.5C11.4167 0.5 0 11.9167 0 26C0 40.0833 11.4167 51.5 25.5 51.5Z"
                                        fill="white" fill-opacity="0.18"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M33.9997 1.95836C31.2809 0.997147 28.4073 0.5 25.4997 0.5V8.86605C28.5687 8.86605 31.5815 9.6904 34.223 11.253C36.8645 12.8155 39.0379 15.0589 40.5159 17.7486C41.9939 20.4384 42.7223 23.4757 42.625 26.5433C42.5277 29.6108 41.6082 32.5959 39.9627 35.1866C38.3172 37.7772 36.006 39.8783 33.2707 41.2703C30.5355 42.6623 27.4766 43.294 24.4136 43.0995C21.3507 42.905 18.3963 41.8913 15.8591 40.1645C13.3219 38.4376 11.2952 36.061 9.99062 33.283L2.41797 36.8391C3.65388 39.4709 5.32535 41.8607 7.35106 43.9131C8.50759 45.0848 9.77958 46.1466 11.1519 47.0806C14.9279 49.6506 19.3249 51.1592 23.8834 51.4487C28.4418 51.7382 32.9943 50.798 37.0652 48.7264C41.136 46.6548 44.5756 43.5277 47.0246 39.6721C49.4736 35.8165 50.842 31.3739 50.9868 26.8085C51.1317 22.2432 50.0476 17.7228 47.8479 13.7197C45.6482 9.71663 42.4137 6.37787 38.4824 4.05236C37.0536 3.2072 35.5519 2.50715 33.9997 1.95836Z"
                                        fill="var(--primary)"></path>
                                </svg>
                            </span>
                            <div class="media-body ms-1">
                                <p class="mb-1">Total Accounts Payable</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="mb-0 me-3 text-black font-w600">$17,03,920</h4>
                                    <!-- <svg width="29" height="15" viewBox="0 0 29 15" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0 15L14.5 -1.27353e-06L29 15" fill="var(--primary)"></path>
                                    </svg> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


			

            <div class="col-xl-8 col-xxl-8 col-lg-12 col-sm-12">
                <div class="card">
                    <div class="card-header border-0 pb-0 d-sm-flex d-block">
                        <h4 class="card-title">Sales By Month</h4>
                    </div>

                    <div class="card-body">
                        <div class="tab-content">
                            <!-- <div id="chart22"></div> -->
                            <div class="" id="chart01" style="padding:10px 10px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-xxl-8 col-lg-12 col-sm-12">
                <div class="card">
                    <div class="card-header border-0 pb-0 d-sm-flex d-block">
                        <h4 class="card-title">Top Products</h4>
                    </div>

                    <div class="card-body">
                        <div class="tab-content">
                            <!-- <div id="chart22"></div> -->
                            <div class="" id="chart02" style="padding:10px 50px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            

            

        </div>

    </div>
</div>
<!--**********************************
            Content body end
        ***********************************-->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Event Title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="mb-3">
                            <label for="exampleFormControlInput1" class="form-label">Event Name</label>
                            <input type="text" class="form-control" id="exampleFormControlInput1"
                                placeholder="The Story Of Danau Toba">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

   <!-- apex chart cdn -->
   <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
    series: [{
        name: 'Net Profit',
        data: [40, 55, 57, 56, 61, 58, 63, 60, 66]
    }, {
        name: 'Revenue',
        data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
    }, {
        name: 'Free Cash Flow',
        data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
    }],
    chart: {
        type: 'bar',
        height: 350
    },
    plotOptions: {
        bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
        },
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
    },
    xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    },
    yaxis: {
        title: {
            text: '$ (thousands)'
        }
    },
    fill: {
        opacity: 1
    },
    tooltip: {
        y: {
            formatter: function(val) {
                return "$ " + val + " thousands"
            }
        }
    }
};

var chart = new ApexCharts(document.querySelector("#chart01"), options);
chart.render();
</script>

<script>
var options = {
    series: [44, 55, 13, 43, 22],
    chart: {
        width: 380,
        type: 'pie',
    },
    labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: 200
            },
            legend: {
                position: 'bottom'
            }
        }
    }]
};

var chart = new ApexCharts(document.querySelector("#chart02"), options);
chart.render();
</script>

<!--**********************************
            Footer start
        ***********************************-->

@include('layouts.admin_footer')