@extends('backend.template.layouts.template-base')
@section('title', 'Manage Inventory - Index')

@section('content')

    <section>
        <div class="page-head-title mb-3 top-fixed pb-3">

            <div class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0">Inventory List Items
                </h2>
            </div>

        </div>

        <div class="cards-inventory">
            <div class=" box shadow-sm">
                <div class="d-flex flex-column gap-4">
                    <p>Total Products</p>
                    <div class="d-flex flex-row gap-1 align-items-end">
                        <h6>234</h6>
                        <span class="color-blue">↑8.2% from last month</span>
                    </div>
                </div>
                <div class="bg-blue-box">
                    <img src="{{ asset('backend/template/images/svg/total-box.svg') }}" alt="">
                </div>
            </div>
            <div class="box shadow-sm">
                <div class="d-flex flex-column gap-4">
                    <p>Out Of Stock</p>
                    <div class="d-flex flex-row gap-1 align-items-end">
                        <h6>03</h6>
                        <span class="color-red">↓8.2% from last month</span>
                    </div>
                </div>
                <div class="bg-red-box">
                    <img src="{{ asset('backend/template/images/svg/out-of-stock-box.svg') }}" alt="">
                </div>
            </div>
            <div class=" box shadow-sm">
                <div class="d-flex flex-column gap-4">
                    <p>Low Stock</p>
                    <div class="d-flex flex-row gap-1 align-items-end">
                        <h6>234</h6>
                        <span class="color-orange">↓8.2% from last month</span>
                    </div>
                </div>
                <div class="bg-orange-box">
                    <img src="{{ asset('backend/template/images/svg/low-stock-box.svg') }}" alt="">
                </div>
            </div>
            <div class=" box shadow-sm">
                <div class="d-flex flex-column gap-4">
                    <p>Avg. In Stock Value</p>
                    <div class="d-flex flex-row gap-1 align-items-end">
                        <h6>92%</h6>
                        <span class="color-green">↑8.2% from last month</span>
                    </div>
                </div>
                <div class="bg-green-box">
                    <img src="{{ asset('backend/template/images/svg/in-stock-box.svg') }}" alt="">
                </div>
            </div>
        </div>

        <div class="card-border mt-4">
            <div class="p-3">
                <div class="row g-0 align-items-center justify-content-between">
                    <div class="col-12 col-md-7 d-flex gap-3">
                        <div class="table-search-box w-100">
                            <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                alt="search2">
                            <input type="text" placeholder="Search by product ID or name or group name"
                                class="table-search-input" value="">
                        </div>
                        <div class=" drop d-flex flex-row gap-3 align-items-center">
                            <div class="col-12">
                                <div class="drop-contain">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Groups">All Groups</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="drop-contain">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Status">All Status</option>
                                        <option value="In Stock">In Stock</option>
                                        <option value="Low Stock">Low Stock</option>
                                        <option value="Out Of Stock">Out Of Stock</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-md-3 d-flex justify-content-md-end gap-2 align-items-center">

                        <span class="table-sort-content">Show</span>

                        <div class="dropdown">
                            <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                data-bs-toggle="dropdown">
                                10
                            </button>

                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                <li><a class="dropdown-item entry-value" href="#">40</a></li>
                            </ul>
                        </div>

                        <span class="table-sort-content">entries</span>
                    </div>
                </div>

                <div class="table-responsive mt-3">

                    <table class="table table-nowrap align-middle">
                        <thead class="all-table-head">
                            <tr class="text-capitalize">
                                <th class="p-3 table-head-content">Product ID</th>
                                <th class="p-3 table-head-content">Product Img</th>
                                <th class="p-3 table-head-content">Product Name</th>
                                <th class="p-3 table-head-content">Group Under</th>
                                <th class="p-3 table-head-content">Available Qty</th>
                                <th class="p-3 table-head-content">Stock Date</th>
                                <th class="p-3 table-head-content">Stock Status</th>
                                <th class="p-3 table-head-content">Action</th>
                            </tr>
                        </thead>
                        <tbody class="list form-check-all sortable-table">
                            <tr class="" data-id="1">
                                <td class="table-body-content p-3">PID001</td>
                                <td>
                                    <img class="td-product-img" src="{{ asset('backend/template/images/svg/img.svg') }}"
                                        alt="">
                                </td>
                                <td class="table-body-content p-3">Lorem Ipsum</td>
                                <td class="table-body-content p-3">Fruit</td>
                                {{-- use (color-red, color-orange) --}}
                                <td class="table-body-content p-3">76</td>
                                <td class="p-3">
                                    <div class="d-flex flex-column gap-1">
                                        <p class="mb-0">00/00/0000</p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                    </div>
                                </td>
                                <td class=" p-3">
                                    <div class="stockStatusInventory">
                                        {{-- If low stock use (color-orange, bg-orange-light) --}}
                                        {{-- If in stock use (color-blue, bg-blue-light) --}}
                                        {{-- If out of stock use (color-red, bg-red-light) --}}
                                        <button class="color-blue bg-blue-light rounded-pill" type="button"
                                            id="ManageInventorystockStatus" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            In Stock
                                            <img class="arrow-stockStatus"
                                                src="{{ asset('backend/template/images/svg/arrow-down.svg') }}"
                                                alt="">
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="ManageInventorystockStatus">
                                            {{-- If selected give active --}}
                                            <li><a class="dropdown-item in-stock-inventory active" href="#">In
                                                    Stock</a></li>
                                            <li><a class="dropdown-item low-stock-inventory" href="#">Low Stock</a>
                                            </li>
                                            <li><a class="dropdown-item out-of-stock-inventory" href="#">Out Of
                                                    Stock</a></li>
                                        </ul>
                                    </div>
                                </td>
                                <td class="p-3">
                                    <div class="actionInventory">
                                        <button class=" button-none" type="button" id="ManageInventoryAction"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <img src="{{ asset('backend/template/images/svg/dot.svg') }}" alt="">
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="ManageInventoryAction">
                                            <li><a class="dropdown-item"
                                                    href="{{ route('backend.template.manage-inventory.manage-inventory-detail') }}">View
                                                    Details</a></li>
                                            {{-- (In Stock) to Low Update Stock , Use this id (InToLowUpdateStockModal) --}}
                                            {{-- (In Stock /Low) to Out of Update Stock , Use this id (InLowToOutUpdateStockModal) --}}
                                            {{-- (Low Stock /Out Of Stock) to In Update Stock , Use this id (LowOutToInUpdateStockModal) --}}
                                            <li><a class="dropdown-item" href="javascript:void(0);"
                                                    data-bs-toggle="modal" data-bs-target="#LowOutToInUpdateStockModal">
                                                    Update Stock</a></li>
                                        </ul>
                                    </div>

                                </td>
                            </tr>
                            {{-- If tr is out of stock use (red) --}}
                            {{-- If tr is low stock use (orange) --}}
                            <tr class="red" data-id="1">
                                <td class="table-body-content p-3">PID001</td>
                                <td>
                                    <img class="td-product-img" src="{{ asset('backend/template/images/svg/img.svg') }}"
                                        alt="">
                                </td>
                                <td class="table-body-content p-3">Lorem Ipsum</td>
                                <td class="table-body-content p-3">Fruit</td>
                                {{-- use (color-red fw-600, color-orange fw-600) --}}
                                <td class="table-body-content p-3 color-red fw-600">00</td>
                                <td class="p-3">
                                    <div class="d-flex flex-column gap-1">
                                        <p class="mb-0">00/00/0000</p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                    </div>
                                </td>
                                <td class=" p-3">
                                    <div class="stockStatusInventory">
                                        <button class="color-red bg-red-light rounded-pill" type="button"
                                            id="ManageInventorystockStatus" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            Out of Stock
                                            <img class="arrow-stockStatus"
                                                src="{{ asset('backend/template/images/svg/arrow-down.svg') }}"
                                                alt="">
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="ManageInventorystockStatus">
                                            {{-- If selected give active --}}
                                            <li><a class="dropdown-item in-stock-inventory" href="#">In Stock</a>
                                            </li>
                                            <li><a class="dropdown-item low-stock-inventory " href="#">Low Stock</a>
                                            </li>
                                            <li><a class="dropdown-item out-of-stock-inventory active" href="#">Out
                                                    Of Stock</a></li>
                                        </ul>
                                    </div>
                                </td>
                                <td class="p-3">
                                    <div class="actionInventory">
                                        <button class=" button-none" type="button" id="ManageInventoryAction"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <img src="{{ asset('backend/template/images/svg/dot.svg') }}" alt="">
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="ManageInventoryAction">
                                            <li><a class="dropdown-item"
                                                    href="{{ route('backend.template.manage-inventory.manage-inventory-detail') }}">View
                                                    Details</a></li>
                                            <li><a class="dropdown-item" href="#">Update Stock</a></li>
                                        </ul>
                                    </div>

                                </td>
                            </tr>
                            <tr class="orange" data-id="1">
                                <td class="table-body-content p-3">PID001</td>
                                <td>
                                    <img class="td-product-img" src="{{ asset('backend/template/images/svg/img.svg') }}"
                                        alt="">
                                </td>
                                <td class="table-body-content p-3">Lorem Ipsum</td>
                                <td class="table-body-content p-3">Fruit</td>
                                {{-- use (color-red fw-600, color-orange fw-600) --}}
                                <td class="table-body-content p-3 color-orange fw-600">00</td>
                                <td class="p-3">
                                    <div class="d-flex flex-column gap-1">
                                        <p class="mb-0">00/00/0000</p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                    </div>
                                </td>
                                <td class=" p-3">
                                    <div class="stockStatusInventory">

                                        <button class="color-orange bg-orange-light rounded-pill" type="button"
                                            id="ManageInventorystockStatus" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            Low Stock
                                            <img class="arrow-stockStatus"
                                                src="{{ asset('backend/template/images/svg/arrow-down.svg') }}"
                                                alt="">
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="ManageInventorystockStatus">
                                            {{-- If selected give active --}}
                                            <li><a class="dropdown-item in-stock-inventory" href="#">In Stock</a>
                                            </li>
                                            <li><a class="dropdown-item low-stock-inventory active" href="#">Low
                                                    Stock</a></li>
                                            <li><a class="dropdown-item out-of-stock-inventory " href="#">Out Of
                                                    Stock</a></li>
                                        </ul>
                                    </div>
                                </td>
                                <td class="p-3">
                                    <div class="actionInventory">
                                        <button class=" button-none" type="button" id="ManageInventoryAction"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <img src="{{ asset('backend/template/images/svg/dot.svg') }}" alt="">
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="ManageInventoryAction">
                                            <li><a class="dropdown-item"
                                                    href="{{ route('backend.template.manage-inventory.manage-inventory-detail') }}">View
                                                    Details</a></li>
                                            <li><a class="dropdown-item" href="#">Update Stock</a></li>
                                        </ul>
                                    </div>

                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>

                <div class=" pagination-wrap  d-flex flex-row gap-3 align-items-center justify-content-end">
                    <span class="bottom-content-table">1-2 of 2 results</span>
                    <div class="d-flex flex-row gap-3 align-items-center">
                        <div class="bottom-arrow-left-img-table">
                            <img class="bottom-table-arrow" src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}"
                                alt="right-arrow">
                        </div>
                        <span class="bottom-content-num-table">1</span>
                        <div class="bottom-arrow-right-img-table">
                            <img class="bottom-table-arrow" src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}"
                                alt="left-arrow">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>


    {{-- In Stock to Low Update Stock Status modal --}}
    <div class="modal fade" id="InToLowUpdateStockModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightGreen">
                    <h3 class="color-green modal-title mb-0">Update Stock Status</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body pb-0">
                    <p class="mb-0 text-title">Are you sure you want to change the stock status of<span
                            class="fw-semibold"> [Product Name]? </span></p>

                    <p class="mb-0 secondary-text mt-1">This will affect product visibility and ordering availability.</p>

                    <div class="mt-4 inToLow-modal">

                        <div class="d-flex flex-row gap-3 align-items-center justify-content-between">
                            <h6>In-Stock → <span class="color-orange ">Low Stock</span></h6>
                            <p>Available Qty : <span class="color-orange">00</span></p>
                        </div>

                        <ul class="color-orange bg-orange-light">
                            <li>Product will still be available</li>
                            <li>Users may see low stock indicators</li>
                            <li>Recommended when quantity is nearing limit</li>
                        </ul>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-green ">Update Status</button>
                </div>

            </div>
        </div>
    </div>

    {{-- (In Stock /Low) to Out of Update Stock Status modal --}}
    <div class="modal fade" id="InLowToOutUpdateStockModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightGreen">
                    <h3 class="color-green modal-title mb-0">Update Stock Status</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body pb-0">
                    <p class="mb-0 text-title">Are you sure you want to change the stock status of<span
                            class="fw-semibold"> [Product Name]? </span></p>

                    <p class="mb-0 secondary-text mt-1">This will affect product visibility and ordering availability.</p>

                    <div class="mt-4 inToLow-modal">

                        <div class="d-flex flex-row gap-3 align-items-center justify-content-between">
                            <h6>[In-Stock/Low Stock] → <span class="color-red ">Out of Stock</span></h6>
                            <p>Available Qty : <span class="color-red">00</span></p>
                        </div>

                        <ul class="color-red bg-red-light">
                            <li>Product will not be available for purchase</li>
                            <li>Existing orders will not be affected</li>
                            <li>Consider updating stock quantity before switching back</li>
                        </ul>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-green ">Update Status</button>
                </div>

            </div>
        </div>
    </div>

    {{-- (Low Stock /Out Of Stock) to In Update Stock Status modal --}}
    <div class="modal fade" id="LowOutToInUpdateStockModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightGreen">
                    <h3 class="color-green modal-title mb-0">Update Stock Status</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body pb-0">
                    <p class="mb-0 text-title">Are you sure you want to change the stock status of<span
                            class="fw-semibold"> [Product Name]? </span></p>

                    <p class="mb-0 secondary-text mt-1">This will affect product visibility and ordering availability.</p>

                    <div class="mt-4 inToLow-modal">

                        <div class="d-flex flex-row gap-3 align-items-center justify-content-between">
                            <h6>Low Stock/Out of Stock → <span class="color-blue ">Low Stock</span></h6>
                            <p>Available Qty : <span class="color-blue">00</span></p>
                        </div>

                        <ul class="color-blue bg-blue-light">
                            <li>Product will be available for purchase</li>
                            <li>Ensure sufficient quantity is maintained</li>
                        </ul>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-green ">Update Status</button>
                </div>

            </div>
        </div>
    </div>

@endsection