@extends('admin.layout.layout')
@section('title', 'Add Product')

@section('content')
    <!-- Content -->

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-6 d-flex justify-content-between mt-2 mb-2">
                <h4 class="fw-bold "><span class="text-muted fw-light"></span>Add Product</h4>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                @livewire('admin.product-form')
            </div>
        </div>
        
    </div>

@endsection
@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        console.log("livewire init");

        Livewire.on('productAddError', () => {
            console.log("in error");
            toastr.error('Something went wrong');
        });
        Livewire.on("clearFileInput", function () {
            console.log("clearing");
            document.getElementById("fileInput").value = null;
            $(".imageLoader").css('display', 'none');
        });

        $(document).ready(function() {
            $(".numberField").on('input', function() {
                let value = $(this).val();

                // Remove invalid characters (anything that's not a number or decimal)
                value = value.replace(/[^0-9.]/g, '');

                // Allow only one decimal point and up to two digits after it
                value = value.replace(/^(\d*\.?\d{0,2}).*$/, '$1');

                // Ensure it doesn't start with a decimal (e.g., ".123" becomes "0.123")
                if (value.startsWith('.')) {
                    value = '0' + value;
                }
                $(this).val(value);
            });
        });

        $("#fileInput").on('change', function(){
            $(".imageLoader").css('display', 'block');
        })
    });
</script>
@endsection