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

@section('content')

    <section>

        <div class="top-fixed">

            <div class="inventory-details page-head-title mb-3 d-flex flex-row justify-content-between">
                <a href="{{ route('backend.template.manage-inventory.index') }}" class="d-inline-block">
                    <h2 class="text-title fw-semibold mb-0 inventory-text"><i class=" ri-arrow-left-s-line"></i> [Product
                        Name] Details
                    </h2>
                </a>

                <div class=" inventory-details2 d-flex flex-row gap-3 align-items-center  stock-btn-wrapper ">
                    <buton type="button" data-bs-toggle="modal" data-bs-target="#UpdateWastageModal"
                        class="button-orange p-2 px-3">
                        <img src="{{ asset('backend/template/images/svg/waste.svg') }}" alt="">
                        Update Wastage
                    </buton>

                    <button type="button" class="button-green p-2 px-3" data-bs-target="#UpdateStockModal"
                        data-bs-toggle="modal">
                        <img src="{{ asset('backend/template/images/svg/edit.svg') }}" alt="">
                        Update Stock
                    </button>

                </div>
            </div>

            <div class="card bg-color-lightGreen2 shadow-light rounded-4 p-3 p-md-4">

                <div class="row align-items-center">
                    <div class="col-md-8 col-12">
                        <div class="admin-card d-flex flex-row align-items-center gap-2">
                            <div>
                                <div class="d-flex gap-2 align-items-center ">
                                    <h5 class="box-title mb-2">Pdt Name - Lorem Ipsum (<span class="fw-400">லோரம்
                                            இப்சம்</span>)</h5>
                                    <span class="badge rounded-pill bg-green-light color-green ">In Stock</span>
                                </div>
                                <p class="mb-0 secondary-text fs-12">
                                    PID001 | Group Under: Fruits | Last Updated On: 00/00/0000
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-12">
                        <div class="d-flex flex-column align-items-end gap-2">
                            <p class="mb-0 secondary-text">Available Stock</p>
                            <h3 class="mb-0 fw-semibold status-green">000</h3>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-12 col-md-4 ">

                <div class="card-border">

                    <h4 class="table-text p-3 pb-1">Stock Info</h4>

                    <hr>
                    <div class="p-3 mt-3 pt-2 stock-info">
                        <div class="d-flex flex-row align-items-center justify-content-between">
                            <p class="secondary-text mb-0">Available Stock</p>
                            <span class="text-title ">123</span>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-between mt-3">
                            <p class="secondary-text mb-0">Low Stock Threshold</p>
                            <span class="text-title ">12</span>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-between mt-3">
                            <p class="secondary-text mb-0">Stock Status</p>
                            <span class="color-green ">In Stock</span>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-between mt-3 border-top pt-3">
                            <p class="text-sub-heading fs-16 mb-0">Current Stock Value</p>
                            <span class="text-title fw-600 fs-16">₹000</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-12 col-md-8">

                <div class="card-border">

                    <div class="d-flex flex-row align-items-center justify-content-between  p-3 pb-1">
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <h4 class="table-text mb-0">Inventory Logs</h4>
                            <div class="cz-date-input me-3">
                                <input type="text" placeholder="Date Range" data-provider="flatpickr"
                                    data-date-format="d M, Y" data-range-date="true" class="cz-date-field">

                                <span class="cz-date-icon">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                                        <rect x="3" y="5" width="18" height="16" rx="3" stroke="#6b7280"
                                            stroke-width="1.5" />
                                        <path d="M3 9H21" stroke="#6b7280" stroke-width="1.5" />
                                        <path d="M8 3V7" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round" />
                                        <path d="M16 3V7" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round" />
                                    </svg>
                                </span>
                            </div>
                        </div>

                        <div class="d-flex flex-row gap-3 align-items-center invetory-detail">
                            <p class="mb-0 color-blue">Total Stock In <span>1234</span></p>
                            <div class="dot"></div>
                            <p class="mb-0 color-orange">Total Wastage <span>1234</span></p>
                            <button type="button" class="button-none">
                                <img src="{{ asset('backend/template/images/svg/download.svg') }}" alt="">
                            </button>
                        </div>
                    </div>

                    <hr>

                    <div class="p-3 mt-3 pt-2">
                        <div class="table-responsive inventory-log-table">

                            <table class="table table-nowrap align-middle">
                                <thead class="all-table-head">
                                    <tr class="text-capitalize">
                                        <th class="p-3 table-head-content">Date & Time</th>
                                        <th class="p-3 table-head-content">Action Type</th>
                                        <th class="p-3 table-head-content">Action Type</th>
                                        <th class="p-3 table-head-content">Action By</th>
                                    </tr>
                                </thead>
                                <tbody class="list form-check-all sortable-table">
                                    <tr class="" data-id="1">
                                        <td class="p-3">
                                            <div class="d-flex flex-xl-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="table-body-content p-3">In Stock Update</td>
                                        <td class="table-body-content p-3 status-green fw-600">+00</td>
                                        <td class="table-body-content p-3">User X</td>
                                    </tr>
                                    <tr class="" data-id="1">
                                        <td class="p-3">
                                            <div class="d-flex flex-xl-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="d-flex flex-xl-column gap-1">
                                                <p class="mb-0">Wastage Update</p>
                                                <p class="mb-0 fs-13 secondary-text">Damaged</p>
                                            </div>
                                        </td>
                                        <td class="table-body-content p-3 color-orange fw-600">-00</td>
                                        <td class="table-body-content p-3">User X</td>
                                    </tr>
                                </tbody>
                            </table>

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

            </div>

        </div>

    </section>

    {{-- Update Stock Modal --}}
    <div class="modal fade" id="UpdateStockModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content border-0 rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green">Update Stock</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body p-4 update-stock-modal">
                    <div class="d-flex flex-column gap-3 card-border p-3 bg-color-lignGray">
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <p class="secondary-text mb-0">Product Name</p>
                            <p class="text-title mb-0">Lorem Ipsum (லோரம் இப்சம்)</p>
                        </div>
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <p class="secondary-text mb-0">Product ID</p>
                            <p class="text-title mb-0">PID001</p>
                        </div>
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <p class="secondary-text mb-0">Current Stock Quantity</p>
                            <p class="text-title fw-700 mb-0">123</p>
                        </div>
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <p class="secondary-text mb-0">Stock Status</p>
                            <p class="status-green mb-0">In -Stock</p>
                        </div>
                    </div>

                    <h5 class="mt-4 mb-3">Update Stock</h5>

                    <div class="row g-4">
                        {{-- <div class="col-md-6">
                            <label for="currStockStatus" class="form-label-modal">
                                Current Stock Status <span class="color-red">*</span>
                            </label>
                            <div class="drop-contain" id="currStockStatus">
                                <select class="js-example-basic-single" name="state">
                                    <option value="[Current Stock Status]" selected>[Current Stock Status]</option>
                                    <option value="In Stock">In Stock</option>
                                    <option value="Out of Stock">Out of Stock</option>
                                    <option value="Low Stock">Low Stock</option>
                                </select>
                            </div>
                        </div> --}}

                        <div class="col-md-6">
                            <label for=" Low_stock_threshold" class="form-label-modal">
                                Low stock threshold
                            </label>
                            <input type="text" id="Low_stock_threshold" class="form-control" placeholder="10">
                        </div>

                        <div class="col-md-6">
                            <label for="updateQty" class="form-label-modal">
                                Update Qantity <span class="color-red">*</span>
                            </label>
                            <input type="text" id="updateQty" class="form-control" placeholder="0">
                        </div>

                        {{--  --}}

                        {{-- <div class="col-md-6">
                            <label for="stockStatus" class="form-label-modal">
                                Stock Status <span class="color-red">*</span>
                            </label>
                            <div class="drop-contain" id="stockStatus">
                                <select class="js-example-basic-single" name="state">
                                    <option value="Low Stock/ Out of Stock" selected>Low Stock/ Out of Stock</option>
                                    <option value="In Stock">In Stock</option>
                                    <option value="Out of Stock">Out of Stock</option>
                                    <option value="Low Stock">Low Stock</option>
                                </select>
                            </div>
                        </div> --}}

                    </div>

                    <p class="mb-0 info-text-blue mt-4">
                        <img loading="lazy" src="{{ asset('backend/template/images/svg/info.svg') }}" alt="info">
                        Updating stock will immediately reflect in inventory and order availability.
                    </p>
                </div>

                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-green">Update Stock</button>
                </div>

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

    {{-- Update Wastage Modal --}}
    <div class="modal fade" id="UpdateWastageModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content border-0 rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightOrange border-0">
                    <h3 class="mb-0 modal-title color-orange">Update Wastage</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body p-4 update-stock-modal">
                    <div class="d-flex flex-column gap-3 card-border p-3 bg-color-lignGray">
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <p class="secondary-text mb-0">Product Name</p>
                            <p class="text-title mb-0">Lorem Ipsum (லோரம் இப்சம்)</p>
                        </div>
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <p class="secondary-text mb-0">Product ID</p>
                            <p class="text-title mb-0">PID001</p>
                        </div>
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <p class="secondary-text mb-0">Current Stock Quantity</p>
                            <p class="text-title fw-700 mb-0">123</p>
                        </div>
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <p class="secondary-text mb-0">Stock Status</p>
                            <p class="status-green mb-0">In -Stock</p>
                        </div>
                    </div>

                    <h5 class="mt-4 mb-3">Update Stock</h5>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <label for="reasonWastage" class="form-label-modal">
                                Reason for Wastage <span class="color-red">*</span>
                            </label>
                            <div class="drop-contain" id="reasonWastage">
                                <select class="js-example-basic-single" name="state">
                                    <option value="Select">Select</option>
                                    <option value="Damaged">Damaged</option>
                                    <option value="Expired">Expired</option>
                                    <option value="Lost">Lost</option>
                                    <option value="Handling Issue">Handling Issue</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label for="wastageQty" class="form-label-modal">
                                Wastage Quantity <span class="color-red">*</span>
                            </label>
                            <input type="text" id="wastageQty" class="form-control"
                                placeholder="Enter wastage quantity">
                        </div>


                    </div>

                    <p class="mb-0 info-text mt-4">
                        <img loading="lazy" src="{{ asset('backend/template/images/svg/info.svg') }}" alt="info">
                        This action will reduce the available stock permanently.
                    </p>

                    <div class="mb-0 info-text-orange mt-4">
                        <img src="{{ asset('backend/template/images/svg/cannot.svg') }}" alt="">
                        <div>
                            <span>Stock will reach low level</span>
                            <p class=" mb-0">Reducing this quantity will bring the stock down to a low level 123 → 12.
                                Consider reviewing
                                inventory or restocking soon.</p>
                        </div>
                    </div>

                    <div class="mb-0 info-text-red mt-4">
                        <img src="{{ asset('backend/template/images/svg/cannot.svg') }}" alt="">
                        <div>
                            <span>Stock will become Out of Stock</span>
                            <p class=" mb-0">Reducing this quantity will make this product unavailable for orders 123 → 0.
                            </p>
                        </div>

                    </div>
                </div>

                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-orange">Confirm Wastage</button>
                </div>

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

@endsection


@section('scripts')

    {{-- Date Picker logic --}}
    <script>
        $(function() {
            $('#datepicker').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true
            });

            $('.calendar-icon').click(function() {
                $('#datepicker').datepicker('show');
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            document.querySelectorAll('[data-provider="flatpickr"]').forEach(function(el) {

                flatpickr(el, {
                    mode: el.dataset.rangeDate ? "range" : "single",
                    dateFormat: "d M, Y",
                });

            });

        });
    </script>
@endsection