@extends('Admin.layout')

@section('content')


<div class="d-flex align-items-center justify-content-between mb-3 mt-3">
    <div>
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.inventory')  }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            View Inventory
        </h5>
    </div>
    <div>
        <a type="button"
            class="btn btn-primary" href="{{ route('admin.update_inventory') }}">

            <i class="fa-solid fa-boxes-stacked me-1"></i>
            Update Stock

        </a>
    </div>

</div>

<div class="card shadow-sm border-0 mb-4">

    <div class="card-body p-4">

        <h6 class="fw-bold mb-4">
            Product Overview
        </h6>


        <div class="row g-4 align-items-center">

            {{-- PRODUCT IMAGE --}}
            <div class="col-md-3 col-lg-2">

                <div class="border rounded-3 overflow-hidden">

                    <img src="{{ asset('assets/img/diamond_ring.png') }}"
                        alt="Diamond Halo Ring"
                        class="img-fluid w-100">

                </div>

            </div>


            {{-- PRODUCT DETAILS --}}
            <div class="col-md-9 col-lg-10">

                <div class="d-flex
                                flex-column flex-md-row
                                justify-content-between
                                align-items-md-start
                                gap-3">

                    <div>

                        <h5 class="fw-bold mb-2">
                            Diamond Halo Ring
                        </h5>

                        <div class="text-muted mb-2">
                            SKU:
                            <strong class="text-dark">
                                RING001
                            </strong>
                        </div>

                        <div class="text-muted">
                            Category:
                            <strong class="text-dark">
                                Rings
                            </strong>
                        </div>

                    </div>


                    <span class="badge bg-success px-3 py-2">
                        Active
                    </span>

                </div>

            </div>

        </div>

    </div>

</div>



<div class="row g-4 mb-4">

    {{-- CURRENT STOCK --}}
    <div class="col-md-4">

        <div class="card shadow-sm border-0 h-100">

            <div class="card-body p-4">

                <small class="text-muted d-block mb-2">
                    Current Stock
                </small>

                <div class="d-flex
                                align-items-center
                                justify-content-between">

                    <h4 class="fw-bold mb-0">
                        12
                    </h4>

                    <span class="text-muted">
                        Units
                    </span>

                </div>

            </div>

        </div>

    </div>


    {{-- STOCK STATUS --}}
    <div class="col-md-4">

        <div class="card shadow-sm border-0 h-100">

            <div class="card-body p-4">

                <small class="text-muted d-block mb-2">
                    Stock Status
                </small>

                <div>

                    <span class="badge bg-success px-3 py-2">
                        In Stock
                    </span>

                </div>

            </div>

        </div>

    </div>


    {{-- LOW STOCK THRESHOLD --}}
    <div class="col-md-4">

        <div class="card shadow-sm border-0 h-100">

            <div class="card-body p-4">

                <small class="text-muted d-block mb-2">
                    Low Stock Threshold
                </small>

                <div class="d-flex
                                align-items-center
                                justify-content-between">

                    <h4 class="fw-bold mb-0">
                        5
                    </h4>

                    <span class="text-muted">
                        Units
                    </span>

                </div>

            </div>

        </div>

    </div>

</div>

<div class="card shadow-sm border-0 mb-4">

    <div class="card-body p-4">

        <h6 class="fw-bold mb-4">
            Stock Information
        </h6>


        <div class="row g-4">

            {{-- CURRENT STOCK --}}
            <div class="col-md-4">

                <div class="border rounded-3 p-3">

                    <small class="text-muted d-block mb-1">
                        Current Stock
                    </small>

                    <h6 class="fw-bold mb-0">
                        12 Units
                    </h6>

                </div>

            </div>


            {{-- RESERVED STOCK --}}
            <div class="col-md-4">

                <div class="border rounded-3 p-3">

                    <small class="text-muted d-block mb-1">
                        Reserved Stock
                    </small>

                    <h6 class="fw-bold mb-0">
                        2 Units
                    </h6>

                </div>

            </div>


            {{-- AVAILABLE STOCK --}}
            <div class="col-md-4">

                <div class="border rounded-3 p-3">

                    <small class="text-muted d-block mb-1">
                        Available Stock
                    </small>

                    <h6 class="fw-bold mb-0">
                        10 Units
                    </h6>

                </div>

            </div>


            {{-- LOW STOCK LIMIT --}}
            <div class="col-md-4">

                <div class="border rounded-3 p-3">

                    <small class="text-muted d-block mb-1">
                        Low Stock Threshold
                    </small>

                    <h6 class="fw-bold mb-0">
                        5 Units
                    </h6>

                </div>

            </div>


            {{-- LAST UPDATED --}}
            <div class="col-md-4">

                <div class="border rounded-3 p-3">

                    <small class="text-muted d-block mb-1">
                        Last Updated
                    </small>

                    <h6 class="fw-bold mb-0">
                        17 Aug 2026
                    </h6>

                </div>

            </div>

        </div>

    </div>

</div>


<div class="card shadow-sm border-0 mb-4">

    <div class="card-body p-4">

        <div class="d-flex
                        flex-column flex-md-row
                        justify-content-between
                        align-items-md-center
                        gap-2 mb-4">

            <h6 class="fw-bold mb-0">
                Inventory History
            </h6>

            <small class="text-muted">
                Recent stock movements
            </small>

        </div>


        <div class="table-responsive">

            <table class="table table-hover align-middle mb-0">

                <thead>

                    <tr>

                        <th>SNO</th>
                        <th>DATE</th>
                        <th>TYPE</th>
                        <th>QUANTITY</th>
                        <th>REASON</th>
                        <th>REFERENCE</th>

                    </tr>

                </thead>


                <tbody>

                    {{-- ROW 1 --}}
                    <tr>

                        <td>
                            1
                        </td>

                        <td>
                            17 Aug 2026
                        </td>

                        <td>

                            <span class="badge bg-success">
                                Stock Added
                            </span>

                        </td>

                        <td>

                            <span class="text-success fw-semibold">
                                +10
                            </span>

                        </td>

                        <td>
                            New Stock Received
                        </td>

                        <td>
                            -
                        </td>

                    </tr>


                    {{-- ROW 2 --}}
                    <tr>

                        <td>
                            2
                        </td>

                        <td>
                            16 Aug 2026
                        </td>

                        <td>

                            <span class="badge bg-danger">
                                Stock Removed
                            </span>

                        </td>

                        <td>

                            <span class="text-danger fw-semibold">
                                -2
                            </span>

                        </td>

                        <td>
                            Customer Order
                        </td>

                        <td>
                            ORD1001
                        </td>

                    </tr>


                    {{-- ROW 3 --}}
                    <tr>

                        <td>
                            3
                        </td>

                        <td>
                            10 Aug 2026
                        </td>

                        <td>

                            <span class="badge bg-success">
                                Stock Added
                            </span>

                        </td>

                        <td>

                            <span class="text-success fw-semibold">
                                +5
                            </span>

                        </td>

                        <td>
                            New Stock Received
                        </td>

                        <td>
                            -
                        </td>

                    </tr>


                    {{-- ROW 4 --}}
                    <tr>

                        <td>
                            4
                        </td>

                        <td>
                            08 Aug 2026
                        </td>

                        <td>

                            <span class="badge bg-warning text-dark">
                                Adjustment
                            </span>

                        </td>

                        <td>

                            <span class="text-danger fw-semibold">
                                -1
                            </span>

                        </td>

                        <td>
                            Damaged Product
                        </td>

                        <td>
                            -
                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>


</div>







@endsection