@extends('layouts.app')

@section('title', 'Inventory - Quick OMS')

@section('content')
<div class="welcome">
    <div>
        <h3>Inventory</h3>
        <p>Manage stock levels with auto-decrement on sales</p>
    </div>
</div>

<div class="cards_4box">
    <!-- TOTAL PRODUCTS -->
    <div class="card blue">
        <div>
            <h4>Total Products</h4>
            <h2>{{ number_format($totalProducts) }}</h2>
            <p>All items in catalog</p>
        </div>
        <div class="icon blue">
            <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M35.9793 9.9794L19.3543 1.6669C19.2443 1.61205 19.1231 1.5835 19.0002 1.5835C18.8773 1.5835 18.7561 1.61205 18.6461 1.6669L2.0211 9.9794C1.88956 10.0451 1.77893 10.1462 1.7016 10.2713C1.62428 10.3964 1.58332 10.5405 1.58331 10.6875V27.3125C1.58328 27.4596 1.62418 27.6037 1.70144 27.7287C1.77869 27.8538 1.88924 27.9549 2.02071 28.0207L18.6457 36.3332C18.7557 36.3883 18.877 36.417 19 36.417C19.123 36.417 19.2443 36.3883 19.3543 36.3332L35.9793 28.0207C36.1107 27.9549 36.2213 27.8538 36.2985 27.7287C36.3758 27.6037 36.4167 27.4596 36.4166 27.3125V10.6875C36.4167 10.5405 36.3758 10.3964 36.2985 10.2714C36.2213 10.1463 36.1107 10.0452 35.9793 9.9794ZM19 3.26013L33.8548 10.6875L30.6771 12.2764L15.8226 4.84901L19 3.26013ZM24.3437 15.4431L9.4889 8.01567L14.0521 5.73409L28.9069 13.1615L24.3437 15.4431ZM24.9375 16.9164L29.6875 14.5414V20.4302L28.1683 19.3452C28.0828 19.2843 27.9861 19.241 27.8838 19.2177C27.7815 19.1944 27.6756 19.1916 27.5721 19.2094C27.4688 19.2276 27.3701 19.2661 27.2817 19.3226C27.1933 19.3791 27.117 19.4526 27.0572 19.5388L24.9375 22.6013V16.9164ZM7.71873 8.90076L22.5732 16.3282L19 18.115L4.14515 10.6875L7.71873 8.90076ZM3.16665 11.9685L18.2083 19.4893V34.3437L3.16665 26.8229V11.9685ZM19.7916 34.3441V19.4893L23.3541 17.708V25.1355C23.354 25.3043 23.4079 25.4687 23.5078 25.6047C23.6078 25.7408 23.7486 25.8413 23.9097 25.8917C24.0708 25.942 24.2438 25.9396 24.4034 25.8846C24.5631 25.8297 24.7009 25.7252 24.797 25.5863L27.9023 21.1011L30.0196 22.6132C30.1379 22.6981 30.2773 22.7486 30.4224 22.7593C30.5676 22.7699 30.7129 22.7403 30.8423 22.6737C30.9717 22.607 31.0802 22.5059 31.1558 22.3816C31.2314 22.2572 31.2712 22.1144 31.2708 21.9688V13.7497L34.8333 11.9685V26.8229L19.7916 34.3441Z" fill="#0D5DD6" />
            </svg>
        </div>
    </div>

    <!-- TOTAL STOCK -->
    <div class="card green">
        <div>
            <h4>Total Stock</h4>
            <h2>{{ number_format($totalStock) }}</h2>
            <p>Units in warehouse</p>
        </div>
        <div class="icon green">
            <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M35.6482 27.7836C35.5811 27.7168 35.512 27.652 35.441 27.5893V17.5221C35.441 16.8119 34.8632 16.2341 34.153 16.2341H28.3867C28.3894 16.2014 28.3912 16.1687 28.3912 16.1357V3.42447C28.3912 2.71427 27.8134 2.13647 27.1032 2.13647H14.3919C14.0883 2.13647 13.7923 2.24535 13.5564 2.44463L8.46734 6.78479L8.46883 6.7865C8.19155 7.02252 8.0149 7.37313 8.0149 7.76463V16.2341H7.34426C7.04101 16.2341 6.74428 16.3437 6.50663 16.5444L1.41753 20.8846L1.41827 20.8854C1.14143 21.1219 0.965088 21.4726 0.965088 21.8643V34.5756C0.965088 35.2858 1.54288 35.8636 2.25308 35.8636H14.9643C15.2194 35.8636 15.4568 35.7878 15.657 35.659C15.8638 35.7925 16.1047 35.8635 16.3508 35.8636H29.062C29.4926 35.8636 29.8736 35.6504 30.1075 35.3249C30.7765 35.6761 31.5247 35.8630 32.302 35.863C33.5662 35.863 34.7546 35.3703 35.6482 34.4757C36.5427 33.5821 37.0354 32.3937 37.0354 31.1295C37.0354 29.8653 36.5426 28.6766 35.6484 27.7835L35.6482 27.7836ZM32.3017 26.396C31.6171 26.396 30.9552 26.5417 30.3499 26.8161V21.8643C30.3498 21.7377 30.331 21.6118 30.2941 21.4906L34.2536 18.1153V26.8161C33.6483 26.5416 32.9864 26.396 32.3018 26.396H32.3017ZM14.9641 20.5763H9.30275C9.27611 20.5763 9.25057 20.5657 9.23173 20.5469C9.2129 20.528 9.2023 20.5025 9.20226 20.4759V7.76463C9.20226 7.71127 9.24827 7.66622 9.30275 7.66622H13.6845V10.4407C13.6845 10.5981 13.7471 10.7492 13.8585 10.8605C13.9698 10.9719 14.1208 11.0344 14.2783 11.0344H17.4761C17.6336 11.0344 17.7846 10.9719 17.8959 10.8605C18.0073 10.7492 18.0698 10.5981 18.0698 10.4407V7.66622H22.0119C22.0664 7.66622 22.1124 7.71127 22.1124 7.76463V20.4759C22.1124 20.5313 22.0673 20.5763 22.0119 20.5763H14.9641ZM23.2448 7.39391L27.2036 4.01606V16.1358C27.2036 16.1519 27.1777 16.1986 27.1082 16.255L23.2999 19.5021V7.76463C23.2999 7.63571 23.2803 7.5114 23.2447 7.39391H23.2448ZM22.4124 6.54321C22.2831 6.50062 22.148 6.47885 22.0119 6.47872H19.0872L22.7861 3.32397H26.1854L22.4125 6.54321H22.4124ZM14.872 7.66622H16.8823V9.84691H14.872V7.66622ZM17.2573 6.47872H15.8889L19.5863 3.32397H20.9562L17.2573 6.47872ZM27.5699 17.4216H33.2367L29.4609 20.6404C29.3321 20.5981 29.1974 20.5765 29.0619 20.5763H23.8703L27.57 17.4216H27.5699ZM14.325 3.3498C14.3364 3.34015 14.3604 3.3239 14.3919 3.3239H17.7568L14.0594 6.47864H10.6562L14.325 3.3498ZM7.27494 17.4497C7.29016 17.4368 7.3145 17.4215 7.34419 17.4215H8.01483V20.4758C8.01483 20.5097 8.01735 20.543 8.01995 20.5763H3.60883L7.27494 17.4497ZM14.9642 34.6761H2.25286C2.19927 34.6761 2.15237 34.6291 2.15237 34.5756V21.8643C2.15237 21.8089 2.19742 21.7638 2.25286 21.7638H14.9641C15.0174 21.7638 15.0625 21.8099 15.0625 21.8643V34.5756C15.0625 34.6291 15.0166 34.6761 14.9642 34.6761ZM29.0618 34.6761H16.3506C16.2979 34.6761 16.2501 34.6281 16.2501 34.5756V21.8643C16.2501 21.8108 16.297 21.7638 16.3506 21.7638H29.0618C29.1172 21.7638 29.1623 21.8089 29.1623 21.8643V27.5892C29.0915 27.6518 29.0226 27.7164 28.9557 27.7831C28.0609 28.6767 27.5681 29.8651 27.5681 31.1296C27.5681 32.394 28.0609 33.5825 28.9551 34.4756C29.013 34.5335 29.0724 34.5899 29.1331 34.6447C29.1146 34.6638 29.089 34.6762 29.0617 34.6762L29.0618 34.6761ZM34.8085 33.6357L34.808 33.6363C34.1387 34.3064 33.2487 34.6755 32.3017 34.6755C31.3548 34.6755 30.4647 34.3064 29.7948 33.6358C29.1247 32.9665 28.7556 32.0765 28.7556 31.1295C28.7556 30.1826 29.1247 29.2925 29.7954 28.6227C30.4647 27.9526 31.3548 27.5835 32.3018 27.5835C33.2488 27.5835 34.1388 27.9526 34.8085 28.6232C35.4787 29.2924 35.8478 30.1826 35.8478 31.1295C35.8478 32.0765 35.4787 32.9665 34.8085 33.6358V33.6357ZM34.4931 29.5907C34.5471 29.647 34.5895 29.7133 34.6179 29.7859C34.6462 29.8586 34.66 29.9361 34.6584 30.014C34.6568 30.092 34.6399 30.1689 34.6085 30.2403C34.5772 30.3117 34.5322 30.3762 34.4759 30.4302L32.1259 32.6855C32.0155 32.7918 31.8681 32.8511 31.7148 32.8509C31.6369 32.851 31.5598 32.8357 31.4878 32.8059C31.4158 32.7761 31.3504 32.7324 31.2954 32.6773L30.1193 31.5034C30.0099 31.3918 29.949 31.2415 29.9497 31.0851C29.9504 30.9288 30.0127 30.7791 30.1232 30.6684C30.2336 30.5578 30.3832 30.4952 30.5395 30.4941C30.6959 30.4931 30.8463 30.5538 30.9581 30.663L31.723 31.4264L33.6537 29.5735C33.7673 29.4645 33.9196 29.4051 34.077 29.4083C34.2345 29.4115 34.3842 29.4772 34.4932 29.5908L34.4931 29.5907Z" fill="#00A63E" />
            </svg>
        </div>
    </div>

    <!-- DEALS -->
    <div class="card blue">
        <div>
            <h4>Promotions</h4>
            <h2>{{ number_format($dealsCount) }}</h2>
            <p>Active deals</p>
        </div>
        <div class="icon blue">
            <svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M37.2306 21.8672L32.9124 11.1984C32.78 10.8702 32.5324 10.6169 32.2043 10.4787C31.8761 10.3462 31.5133 10.352 31.1909 10.4959L27.8285 11.9929C27.2585 12.2347 26.9534 12.8566 27.0743 13.4496L26.1818 13.9505C25.8824 14.1232 25.5197 14.1866 25.1685 14.1405L18.9676 13.225C18.4315 13.1489 17.885 13.1954 17.3695 13.3609C16.8539 13.5265 16.3825 13.8068 15.9909 14.1808L15.5361 14.6184H12.093C11.9376 14.6184 11.7821 14.5608 11.667 14.4572L11.3618 14.1981C11.5749 13.6741 11.4309 13.0638 10.9703 12.7011L8.36789 10.6456C8.09153 10.4269 7.74608 10.329 7.39486 10.3808C7.04941 10.4269 6.73274 10.6169 6.52547 10.8932L0.255469 19.3914C-0.159077 19.9499 -0.0611981 20.7329 0.491529 21.1763L3.0882 23.2259C3.22489 23.3341 3.38213 23.4134 3.55039 23.4589C3.71865 23.5044 3.8944 23.5153 4.06698 23.4908C4.23872 23.4681 4.40397 23.4104 4.55252 23.3212C4.70107 23.2321 4.82975 23.1135 4.93062 22.9726L4.95365 22.9438L5.32789 23.2259C5.54668 23.3814 5.67335 23.6462 5.67335 23.9226V25.4714L4.70608 26.715C3.84244 27.8378 4.0382 29.4556 5.15517 30.3193C5.61001 30.6762 6.16274 30.8662 6.73274 30.8662C6.83638 30.8662 6.94577 30.8605 7.04941 30.849C7.16456 30.8317 7.27395 30.8029 7.38335 30.7741C7.38335 30.8087 7.37759 30.8375 7.37759 30.872C7.37759 31.609 7.71153 32.2999 8.28729 32.772C8.73638 33.129 9.27759 33.3075 9.81304 33.3075C10.147 33.3075 10.4809 33.2326 10.7918 33.1002V33.129C10.8724 33.7335 11.1891 34.269 11.6497 34.6087L11.7533 34.6893C12.2324 35.0448 12.8328 35.1959 13.423 35.1096C13.6706 35.075 13.8952 34.9887 14.114 34.8793C14.2349 35.4953 14.5861 36.025 15.11 36.359L15.1849 36.4108C15.4357 36.5769 15.7173 36.691 16.013 36.7464C16.3087 36.8018 16.6124 36.7973 16.9064 36.7332C17.5109 36.6066 18.0233 36.2496 18.363 35.7314L18.4609 35.5817C18.8697 35.8926 19.3591 36.0538 19.883 36.0538C20.4991 36.0538 21.1037 35.8005 21.5412 35.3687C21.7934 35.1164 21.9851 34.8102 22.1018 34.4731C22.2185 34.136 22.2572 33.7768 22.2149 33.4226C22.5664 33.4738 22.9251 33.4401 23.2609 33.3242C23.5968 33.2084 23.9 33.0138 24.1452 32.7567C24.3904 32.4997 24.5705 32.1876 24.6704 31.8467C24.7703 31.5058 24.7871 31.1459 24.7194 30.7972C25.4852 30.8432 26.2394 30.5381 26.7576 29.922C26.9939 29.6429 27.1651 29.3146 27.2587 28.9611C27.3524 28.6075 27.366 28.2376 27.2988 27.8781C27.9955 27.9529 28.7037 27.7111 29.2218 27.2044C29.7918 26.6344 30.0049 25.8284 29.8494 25.0684C29.8782 25.0626 29.907 25.0684 29.9358 25.0626L31.7897 24.8035C32.0258 25.0166 32.3424 25.1375 32.6591 25.1375C32.8376 25.1375 33.0161 25.1029 33.183 25.0223L36.557 23.5311C37.1903 23.2547 37.4897 22.5178 37.2306 21.8672ZM3.9288 22.512C3.88812 22.5181 3.84662 22.5156 3.80696 22.5047C3.7673 22.4938 3.73036 22.4747 3.6985 22.4487L1.11335 20.4047C1.0516 20.3555 1.01118 20.2844 1.00046 20.2061C0.989737 20.1278 1.00954 20.0485 1.05577 19.9844L7.32001 11.469C7.38335 11.3826 7.46971 11.3596 7.52153 11.3538H7.56183C7.61365 11.3538 7.68274 11.3653 7.74608 11.4172L10.3543 13.4726C10.4809 13.5705 10.504 13.7547 10.4118 13.8756L10.3312 13.985L10.314 14.0023L6.70971 18.8847L6.6982 18.8962L6.01304 19.829L4.44123 21.9593C4.43547 21.965 4.43547 21.9708 4.43547 21.9708L4.12456 22.3969C4.06698 22.4775 3.98638 22.5063 3.9288 22.512ZM6.93426 29.8644C6.72872 29.89 6.52016 29.8746 6.32056 29.8193C6.12097 29.764 5.93428 29.6697 5.77123 29.542C5.09183 29.0123 4.96517 28.0162 5.50062 27.3253L7.35456 24.9359C7.66547 24.5329 8.13183 24.3256 8.60395 24.3256C8.93789 24.3256 9.27759 24.435 9.56547 24.6538C9.95123 24.959 10.1758 25.4138 10.1758 25.9032C10.1758 26.2544 10.0606 26.5884 9.84183 26.8762L7.98789 29.2656C7.72304 29.5996 7.3488 29.8126 6.93426 29.8644ZM8.91486 32.0005C8.56941 31.7184 8.37365 31.3096 8.37365 30.872C8.37365 30.5553 8.48304 30.2444 8.69608 29.9738L10.5443 27.5902C10.7803 27.2793 11.1258 27.0893 11.5115 27.0432C11.5691 27.0317 11.6267 27.0317 11.6785 27.0317C12.0067 27.0317 12.3291 27.1469 12.6285 27.3887C13.2503 27.8896 13.3482 28.805 12.8473 29.4269L10.953 31.7875C10.7082 32.0818 10.3581 32.2688 9.97729 32.3086C9.59651 32.3484 9.21526 32.2378 8.91486 32.0005ZM13.2733 34.125C12.9394 34.1711 12.6112 34.0905 12.3752 33.9178L12.2773 33.8372C12.1419 33.7381 12.0281 33.6125 11.943 33.468C11.8578 33.3234 11.8031 33.163 11.7821 32.9966C11.7597 32.8276 11.7716 32.6559 11.8171 32.4917C11.8626 32.3274 11.9408 32.1741 12.047 32.0408L13.4518 30.302C13.5695 30.1557 13.7186 30.0379 13.888 29.9571C14.0575 29.8764 14.2429 29.8349 14.4306 29.8356C14.6897 29.8356 14.9546 29.9162 15.1733 30.0832C15.49 30.3193 15.6743 30.6878 15.6743 31.085C15.6743 31.3441 15.5994 31.5859 15.4555 31.7932C15.444 31.8047 15.4382 31.822 15.4267 31.8393C15.4209 31.845 15.4209 31.8508 15.4152 31.8508L15.3921 31.8853L14.0852 33.6356C13.9009 33.9062 13.6073 34.079 13.2733 34.125ZM18.1846 34.1653L17.5224 35.1959C17.3324 35.4896 17.0388 35.6911 16.6933 35.7659C16.3537 35.835 16.0082 35.7717 15.7261 35.5875L15.6512 35.5356C15.3461 35.3399 15.1446 35.0347 15.0812 34.6835C15.0179 34.3323 15.0927 33.9811 15.3058 33.6875C15.6512 33.2326 16.0427 32.7259 16.1982 32.5359C16.227 32.5072 16.2558 32.4726 16.2846 32.4496C16.2903 32.4496 16.2903 32.4438 16.2903 32.4438C16.2961 32.4381 16.3076 32.4323 16.3133 32.4266C16.3421 32.4035 16.3652 32.3805 16.4112 32.3517C16.843 32.0926 17.3843 32.0926 17.8046 32.3632C18.173 32.5993 18.3976 33.0138 18.3976 33.4629C18.3918 33.7162 18.3227 33.9581 18.1846 34.1653ZM28.5194 26.502C28.0473 26.9684 27.2815 27.0259 26.7518 26.6402L23.4412 24.1932L22.1515 23.2375C22.0449 23.1602 21.9123 23.1277 21.782 23.1471C21.6518 23.1665 21.5343 23.2361 21.4549 23.3411C21.2937 23.5599 21.3397 23.8708 21.5585 24.0378L23.8155 25.7075L25.727 27.1238C26.0609 27.3714 26.274 27.7341 26.3258 28.1487C26.3776 28.5632 26.2567 28.9662 25.9861 29.2887C25.7444 29.5721 25.4057 29.7551 25.0362 29.8019C24.6667 29.8488 24.293 29.7561 23.9882 29.542L20.0212 26.7035C19.9685 26.6651 19.9087 26.6376 19.8452 26.6226C19.7818 26.6075 19.7159 26.6053 19.6516 26.616C19.5873 26.6268 19.5257 26.6502 19.4705 26.685C19.4154 26.7198 19.3677 26.7652 19.3303 26.8187C19.1691 27.0432 19.2209 27.3541 19.4455 27.5096L23.2397 30.2214C23.5333 30.4344 23.7176 30.7626 23.7521 31.1196C23.7809 31.4823 23.6543 31.8335 23.3952 32.0926C22.9634 32.5302 22.2667 32.5705 21.7773 32.202L18.0349 29.2887C17.9835 29.2484 17.9247 29.2188 17.8619 29.2013C17.799 29.1839 17.7333 29.179 17.6686 29.1871C17.6038 29.1951 17.5413 29.2158 17.4846 29.2481C17.4279 29.2803 17.3782 29.3235 17.3382 29.375C17.1712 29.5881 17.2058 29.9047 17.4188 30.0717L20.6891 32.6281C21 32.8699 21.1958 33.2326 21.2188 33.6241C21.2476 34.0214 21.1037 34.3956 20.8215 34.6778C20.3609 35.1384 19.5837 35.1902 19.0655 34.8159C19.0655 34.8159 19.0367 34.7814 18.9964 34.7411L19.0079 34.7238C19.2497 34.3553 19.3764 33.9235 19.3764 33.4687C19.3764 32.6799 18.9849 31.9602 18.3285 31.5341C17.8276 31.2117 17.2288 31.1138 16.6588 31.2175C16.6588 31.1772 16.6646 31.1369 16.6646 31.0966C16.6646 30.3769 16.3364 29.7205 15.7664 29.2944C15.2712 28.9259 14.6782 28.7878 14.114 28.8684C14.2291 28.0393 13.924 27.1699 13.2043 26.5884C12.9523 26.3821 12.6612 26.2289 12.3486 26.1379C12.036 26.0469 11.7082 26.0199 11.3849 26.0587C11.2985 26.0702 11.2179 26.0932 11.1373 26.1105C11.143 26.0414 11.1546 25.9781 11.1546 25.909C11.1546 25.1087 10.7976 24.3717 10.1643 23.8766C9.21426 23.1396 7.90729 23.1799 6.99759 23.8938C6.99759 23.8881 6.99759 23.8881 7.00335 23.8823C6.99183 23.8938 6.98032 23.9053 6.9688 23.9111C6.91123 23.9572 6.85365 24.0147 6.80183 24.0666C6.75577 24.1126 6.70395 24.1529 6.65789 24.2047V23.9284C6.65789 23.3296 6.37577 22.7711 5.90941 22.4314L5.52941 22.1493L6.25486 21.1647L7.17032 19.9211L7.4582 19.5353C7.47547 19.5181 7.48698 19.5008 7.50426 19.4835L10.7918 15.0214L11.0049 15.1999C11.2985 15.459 11.6843 15.6029 12.0815 15.6029H14.4882L13.1064 16.9272C12.784 17.2381 12.6055 17.6584 12.6055 18.1075C12.6055 18.7523 12.9624 19.3223 13.544 19.5929C14.246 19.9274 15.0163 20.0937 15.7938 20.0787C16.5714 20.0637 17.3347 19.8678 18.0233 19.5066L18.6221 19.1956C19.1864 18.8962 19.8773 18.9653 20.3782 19.3684L26.2221 24.0493C26.5618 24.3141 26.9188 24.5329 27.2873 24.6941C27.4082 24.7459 27.5406 24.7978 27.6558 24.8381C27.7594 24.8784 27.8688 24.9129 27.9609 24.9359C28.0876 24.9762 28.2143 25.005 28.3237 25.0223C28.4733 25.0511 28.6173 25.0741 28.7382 25.0799C28.7958 25.0856 28.8476 25.0856 28.9052 25.0914L28.8418 25.1087C29.003 25.5866 28.8879 26.1335 28.5194 26.502ZM29.7976 24.0838C29.6076 24.1069 29.4003 24.1184 29.1643 24.1126C29.0664 24.1126 28.9743 24.1069 28.8418 24.0896C28.7267 24.0838 28.623 24.0608 28.4964 24.0378C28.4063 24.025 28.3176 24.0038 28.2315 23.9744C28.1509 23.9572 28.0761 23.9284 28.0012 23.8996C27.8976 23.865 27.7882 23.819 27.6903 23.7787C27.4024 23.652 27.1146 23.4793 26.844 23.2662L21.2994 18.8214L21 18.5853C20.5279 18.2053 19.9521 18.0096 19.3706 18.0096C18.9561 18.0096 18.5415 18.1075 18.1673 18.309L17.5685 18.6199C17.0174 18.9103 16.406 19.0678 15.7832 19.0798C15.1604 19.0918 14.5434 18.9579 13.9815 18.689C13.7109 18.5623 13.613 18.3032 13.613 18.1017C13.613 17.9808 13.6476 17.7966 13.8088 17.6411L16.6818 14.889C17.2461 14.3478 18.0464 14.0887 18.8237 14.2038L25.0303 15.1193C25.6003 15.1999 26.1876 15.0905 26.6712 14.8141L27.4312 14.3881L28.6518 17.405L31.2773 23.8766L29.7976 24.0838ZM36.154 22.6329L32.7743 24.1241C32.6418 24.1817 32.4806 24.1356 32.3827 23.9687L28.79 15.0962L28.3237 13.9562L28.0588 13.2999C27.9955 13.1502 28.0646 12.9775 28.22 12.9084L31.594 11.4114C31.6688 11.3769 31.7552 11.3769 31.83 11.4056C31.9049 11.4344 31.9624 11.492 31.9912 11.5726L36.3094 22.2472C36.367 22.3911 36.2979 22.5638 36.154 22.6329Z" fill="#FE7614" />
                <path d="M18.6625 11.8433C21.927 11.8433 24.5812 9.18909 24.5812 5.92455C24.5812 2.66 21.927 0 18.6625 0C15.3979 0 12.7379 2.65424 12.7379 5.92455C12.7437 9.18909 15.3979 11.8433 18.6625 11.8433ZM18.6625 0.996061C21.38 0.996061 23.5852 3.20697 23.5852 5.92455C23.5852 8.64212 21.3743 10.8473 18.6625 10.8473C15.9449 10.8473 13.734 8.63636 13.734 5.92455C13.734 3.20697 15.9449 0.996061 18.6625 0.996061Z" fill="#FE7614" />
                <path d="M17.4533 7.72675C17.5454 7.81887 17.6721 7.87069 17.8045 7.87069C17.937 7.87069 18.0636 7.81887 18.1557 7.72675L21.0518 4.83069C21.2476 4.63493 21.2476 4.32402 21.0518 4.12826C20.8561 3.93251 20.5451 3.93251 20.3494 4.12826L17.8045 6.67311L16.9812 5.84978C16.7854 5.65402 16.4745 5.65402 16.2788 5.84978C16.083 6.04554 16.083 6.35645 16.2788 6.5522L17.4533 7.72675Z" fill="#FE7614" />
            </svg>
        </div>
    </div>

    <!-- NEW ARRIVALS -->
    <div class="card blue">
        <div>
            <h4>New arrivals</h4>
            <h2>{{ number_format($newArrivalsCount) }}</h2>
            <p>New catalog items</p>
        </div>
        <div class="icon blue">
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.3674 13.0649H25.2577C26.7181 13.0649 27.9062 11.8768 27.9062 10.4163V7.40109C27.9062 5.94061 26.7181 4.75244 25.2576 4.75244H10.3674C8.90692 4.75244 7.71875 5.94061 7.71875 7.40109V10.4163C7.71875 11.8768 8.90692 13.0649 10.3674 13.0649ZM8.90625 7.40109C8.90625 6.59544 9.56168 5.93994 10.3674 5.93994H25.2577C26.0633 5.93994 26.7188 6.59544 26.7188 7.40109V10.4163C26.7188 11.2219 26.0633 11.8774 25.2576 11.8774H10.3674C9.56168 11.8774 8.90625 11.2219 8.90625 10.4163V7.40109ZM23.75 29.6899C23.5925 29.6899 23.4415 29.7525 23.3302 29.8638C23.2188 29.9752 23.1562 30.1262 23.1562 30.2837V32.6587C23.1562 32.8162 23.2188 32.9672 23.3302 33.0785C23.4415 33.1899 23.5925 33.2524 23.75 33.2524H26.125C26.2825 33.2524 26.4335 33.1899 26.5448 33.0785C26.6562 32.9672 26.7188 32.8162 26.7188 32.6587V30.2837C26.7188 30.1262 26.6562 29.9752 26.5448 29.8638C26.4335 29.7525 26.2825 29.6899 26.125 29.6899H23.75ZM25.5312 32.0649H24.3438V30.8774H25.5312V32.0649ZM9.5 30.8774H10.6875C10.845 30.8774 10.996 30.8149 11.1073 30.7035C11.2187 30.5922 11.2812 30.4412 11.2812 30.2837C11.2812 30.1262 11.2187 29.9752 11.1073 29.8638C10.996 29.7525 10.845 29.6899 10.6875 29.6899H9.5C9.34253 29.6899 9.1915 29.7525 9.08015 29.8638C8.96881 29.9752 8.90625 30.1262 8.90625 30.2837C8.90625 30.4412 8.96881 30.5922 9.08015 30.7035C9.1915 30.8149 9.34253 30.8774 9.5 30.8774ZM11.875 32.0649H9.5C9.34253 32.0649 9.1915 32.1275 9.08015 32.2388C8.96881 32.3502 8.90625 32.5012 8.90625 32.6587C8.90625 32.8162 8.96881 32.9672 9.08015 33.0785C9.1915 33.1899 9.34253 33.2524 9.5 33.2524H11.875C12.0325 33.2524 12.1835 33.1899 12.2948 33.0785C12.4062 32.9672 12.4688 32.8162 12.4688 32.6587C12.4688 32.5012 12.4062 32.3502 12.2948 32.2388C12.1835 32.1275 12.0325 32.0649 11.875 32.0649Z" fill="#6E1AC7" />
            </svg>
        </div>
    </div>
</div>

<div class="box_filtter">
    <div class="left">
        <select class="select" id="filter_category">
            <option value="">Select Categories</option>
            @foreach($categories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
            @endforeach
        </select>

        <select class="select" id="filter_subcategory">
            <option value="">Select Subcategories</option>
        </select>
    </div>

    <div class="right">
        <button class="btn green open-btn" onclick="alert('Import feature coming soon!')">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M5.83337 8.3335L10 12.5002L14.1667 8.3335" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M10 12.5V2.5" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            Import Inventory
        </button>

        <a href="{{ route('admin.inventory.create') }}" class="btn orange">
            + Create
        </a>
    </div>
</div>

<!-- TOP -->
<div class="top-bar">
    <div>
        Show
        <select id="length_change">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        entries
    </div>

    <div class="search">
        <input id="search_box" placeholder="Search product name or SKU...">
    </div>
</div>

<div class="table-responsive">
    <table id="inventoryTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Index</th>
                <th>Image</th>
                <th>Product Name</th>
                <th>SKU</th>
                <th>Category</th>
                <th>Brand</th>
                <th>Price</th>
                <th>Qty</th>
                <th>Order</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

@push('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<style>
    .table-responsive { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); margin-top: 20px; }
    #inventoryTable { border-collapse: separate; border-spacing: 0 10px; }
    #inventoryTable thead th { background: #f8faff; color: #444; font-weight: 600; padding: 15px; border: none; }
    #inventoryTable tbody tr { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.02); transition: transform 0.2s; }
    #inventoryTable tbody tr:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    #inventoryTable tbody td { padding: 15px; border: none; vertical-align: middle; }
    .action-buttons { display: flex; gap: 10px; }
    .action-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.3s; border: none; cursor: pointer; }
    .btn-edit { background: rgba(254, 118, 20, 0.1); color: #FE7614; }
    .btn-edit:hover { background: #FE7614; color: #fff; }
    .btn-delete { background: rgba(231, 0, 11, 0.1); color: #E7000B; }
    .btn-delete:hover { background: #E7000B; color: #fff; }
    
    /* Hide default DataTables elements we replaced */
    .dataTables_length, .dataTables_filter { display: none; }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    const table = $('#inventoryTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.inventory.data') }}",
            data: function (d) {
                d.category_id = $('#filter_category').val();
                d.subcategory_id = $('#filter_subcategory').val();
            }
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'image', name: 'image', orderable: false, searchable: false},
            {data: 'name', name: 'name'},
            {data: 'sku', name: 'sku'},
            {data: 'category', name: 'category'},
            {data: 'brand', name: 'brand'},
            {data: 'price', name: 'price'},
            {data: 'quantity', name: 'quantity'},
            {data: 'sort_order', name: 'sort_order'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        language: {
            processing: '<div class="spinner-border text-primary" role="status"></div>'
        },
        drawCallback: function() {
            // Re-bind delete events after each draw
            $('.delete-btn').on('click', function() {
                const id = $(this).data('id');
                const url = $(this).data('url');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'GET',
                            success: function(res) {
                                table.ajax.reload();
                                Swal.fire('Deleted!', 'Product has been deleted.', 'success');
                            }
                        });
                    }
                });
            });
        }
    });

    // Custom Length Change
    $('#length_change').on('change', function() {
        table.page.len(this.value).draw();
    });

    // Custom Search
    $('#search_box').on('keyup', function() {
        table.search(this.value).draw();
    });

    // Filters
    $('#filter_category').on('change', function() {
        const catId = this.value;
        $('#filter_subcategory').html('<option value="">Select Subcategories</option>');
        if (catId) {
            fetch(`{{ route('admin.inventory.get-subcategories') }}?category_id=${catId}`)
                .then(res => res.json())
                .then(data => {
                    data.forEach(sub => {
                        $('#filter_subcategory').append(new Option(sub.name, sub.id));
                    });
                });
        }
        table.ajax.reload();
    });

    $('#filter_subcategory').on('change', function() {
        table.ajax.reload();
    });

    // Inline Quantity Update
    $(document).on('click', '.update-quantity', function() {
        const id = $(this).data('id');
        const oldQty = $(this).data('quantity');
        Swal.fire({
            title: 'Update Quantity',
            input: 'number',
            inputValue: oldQty,
            showCancelButton: true,
            confirmButtonText: 'Update'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ route('admin.inventory.update-quantity') }}", {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    quantity: result.value
                }, function(res) {
                    table.ajax.reload();
                    Swal.fire('Success', 'Quantity updated!', 'success');
                });
            }
        });
    });

    // Inline Order Update
    $(document).on('click', '.update-order', function() {
        const id = $(this).data('id');
        const oldOrder = $(this).data('order');
        const subId = $(this).data('subcategory-id');
        Swal.fire({
            title: 'Update Sort Order',
            input: 'number',
            inputValue: oldOrder,
            showCancelButton: true,
            confirmButtonText: 'Update'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ route('admin.inventory.update-order') }}", {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    sort_order: result.value,
                    subcategory_id: subId
                }, function(res) {
                    table.ajax.reload();
                    Swal.fire('Success', 'Order updated!', 'success');
                }).fail(function(xhr) {
                    Swal.fire('Error', xhr.responseJSON.message || 'Something went wrong', 'error');
                });
            }
        });
    });
});
</script>
@endpush
@endsection