@include('./admin/util/header')
<link rel="stylesheet" href="{{ asset('assets/css/form-validation.css') }}">

<div class="row">
                            <div class="col-xl-12">
                                <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="card-title mb-0">
                    <i data-feather="package" class="icon-sm me-2"></i>Product Management
                </h4>
                                    </div>
                                    <div class="card-body">
                <form method="post" class="needs-validation" novalidate action="/admin/product-update-create?itemID={{$itemID}}">
                                        @csrf

                    <!-- Basic Information Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="info" class="icon-sm me-2"></i>Basic Information
                            </h5>
                        </div>
                        <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="itemName">
                                            <i data-feather="tag" class="icon-xs me-1"></i>Item name <span class="text-danger">*</span>
                                        </label>
                                                            <input type="text" class="form-control" name="itemName" id="itemName" maxlength="100" minlength="2" pattern="[A-Za-z0-9\s\-_\.]+" value="{{ $itemName }}" required placeholder="Enter item name (2-100 characters)">
                                        <div class="invalid-feedback">Please enter the item name.</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="itemNum">
                                            <i data-feather="hash" class="icon-xs me-1"></i>Item number <span class="text-danger">*</span>
                                        </label>
                                                            @if($itemID == 0)
                                            <input type="text" class="form-control" name="itemNum" id="itemNum" maxlength="50" minlength="1" pattern="[A-Za-z0-9\-_]+" value="{{ $itemNum }}" required placeholder="Enter item number">
                                                            @else
                                                                <div class="input-group">
                                                                    <input type="text" class="form-control" value="{{ $itemNum }}" readonly>
                                                                    <span class="input-group-text">
                                                    <i data-feather="lock" class="icon-xs"></i>
                                                                    </span>
                                                                </div>
                                            <small class="form-text text-muted">Item number cannot be changed after creation.</small>
                                                                <input type="hidden" name="itemNum" value="{{ $itemNum }}">
                                                            @endif
                                        <div class="invalid-feedback">Please enter the item number.</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label">
                                            <i data-feather="box" class="icon-xs me-1"></i>Item medium <span class="text-danger">*</span>
                                        </label>
                                                            <div class="form-check">
                                            <input class="form-check-input" type="radio" name="digitalMedium" id="digitalMedium1" value="1" {{ $digitalMedium === '1' ? 'checked' : '' }} required>
                                            <label class="form-check-label" for="digitalMedium1">
                                                <i data-feather="monitor" class="icon-xs me-1"></i>Digital product
                                                                </label>
                                                            </div>
                                                            <div class="form-check">
                                            <input class="form-check-input" type="radio" name="digitalMedium" id="digitalMedium0" value="0" {{ $digitalMedium === '0' ? 'checked' : '' }} required>
                                            <label class="form-check-label" for="digitalMedium0">
                                                <i data-feather="package" class="icon-xs me-1"></i>Physical product
                                                                </label>
                                                            </div>
                                        <div class="invalid-feedback">Please select an item medium.</div>
                                                    </div>
                                                </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="catID">
                                            <i data-feather="folder" class="icon-xs me-1"></i>Category <span class="text-danger">*</span>
                                        </label>
                                                            <select class="form-select" name="catID" id="catID" required>
                                                                <option value="">- Select a category</option>
                                                                @foreach($categories as $category)
                                                                    <option value="{{ $category->catID }}" @if($category->catID == $catID) selected @endif>
                                                                        {{ $category->categoryName }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                        <div class="invalid-feedback">Please select a category.</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="supplierID">
                                            <i data-feather="truck" class="icon-xs me-1"></i>Supplier
                                        </label>
                                                            <select class="form-select" name="supplierID" id="supplierID">
                                                                <option value="0">- Select a supplier</option>
                                                                @foreach($suppliers as $supplier)
                                                                    <option value="{{ $supplier->supplierID }}" @if($supplier->supplierID == $supplierID) selected @endif>
                                                                        {{ $supplier->supplierName }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                        <small class="form-text text-muted">
                                            <a href="javascript:openPopupWindow('popup_table_display.asp?tableName=suppliers',500,300);" class="text-decoration-none">
                                                <i data-feather="edit" class="icon-xs me-1"></i>Modify the supplier list
                                            </a>
                                        </small>
                                    </div>
                                </div>
                                                        </div>
                                                    </div>
                                                </div>

                    <!-- Pricing Information Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="dollar-sign" class="icon-sm me-2"></i>Pricing Information
                            </h5>
                        </div>
                        <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="itemRetailPrice">
                                            <i data-feather="tag" class="icon-xs me-1"></i>{{ getOrderType(1,"") }} price <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="itemRetailPrice" id="itemRetailPrice" value="{{ $itemRetailPrice ?: '' }}" required placeholder="0.00">
                                        </div>
                                        <div class="invalid-feedback">Please enter the full retail price.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="itemPrice2">
                                            <i data-feather="tag" class="icon-xs me-1"></i>{{ getOrderType(2,"") }} price <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="itemPrice2" id="itemPrice2" value="{{ $itemPrice2 ?: '' }}" required placeholder="0.00">
                                                            </div>
                                        <div class="invalid-feedback">Please enter the non-profit price.</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="itemPrice3">
                                            <i data-feather="tag" class="icon-xs me-1"></i>{{ getOrderType(3,"") }} price <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="itemPrice3" id="itemPrice3" value="{{ $itemPrice3 ?: '' }}" required placeholder="0.00">
                                                            </div>
                                        <div class="invalid-feedback">Please enter the government price.</div>
                                                        </div>
                                                    </div>
                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                        <label class="form-label" for="itemPrice4">
                                            <i data-feather="tag" class="icon-xs me-1"></i>CGU Student price <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="itemPrice4" id="itemPrice4" value="{{ $itemPrice4 ?: '' }}" required placeholder="0.00">
                                                                </div>
                                        <div class="invalid-feedback">Please enter the CGU student price.</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                        <label class="form-label" for="itemPrice5">
                                            <i data-feather="tag" class="icon-xs me-1"></i>Researcher price <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="itemPrice5" id="itemPrice5" value="{{ $itemPrice5 ?: '' }}" required placeholder="0.00">
                                                                </div>
                                        <div class="invalid-feedback">Please enter the researcher price.</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="itemPrice6">
                                            <i data-feather="tag" class="icon-xs me-1"></i>Non-CGU Students price <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="itemPrice6" id="itemPrice6" value="{{ $itemPrice6 ?: '' }}" required placeholder="0.00">
                                        </div>
                                        <div class="invalid-feedback">Please enter the non-CGU student price.</div>
                                                            </div>
                                                        </div>
                                                    </div>
                            <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="itemWholesaleCost">
                                            <i data-feather="dollar-sign" class="icon-xs me-1"></i>Wholesale price
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="itemWholesaleCost" id="itemWholesaleCost" value="{{ $itemWholesaleCost ?: '' }}" placeholder="0.00">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="clearancePrice">
                                            <i data-feather="percent" class="icon-xs me-1"></i>Sale price
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="clearancePrice" id="clearancePrice" value="{{ $clearancePrice ?: '' }}" placeholder="0.00">
                                                            </div>
                                                        </div>
                                                    </div>
                                                            </div>
                                                        </div>
                                                    </div>

                    <!-- Inventory & Shipping Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="shopping-cart" class="icon-sm me-2"></i>Inventory & Shipping
                            </h5>
                        </div>
                        <div class="card-body">
                            @if (config('app.stockSystem') != "noTrack")
                            <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="itemStock">
                                            <i data-feather="layers" class="icon-xs me-1"></i>Items in stock <span class="text-danger">*</span>
                                        </label>
                                        <input type="number" min="0" max="999999999" class="form-control" name="itemStock" id="itemStock" value="{{ $itemStock ?: '' }}" required placeholder="Enter stock quantity">
                                        <div class="invalid-feedback">Please enter the items in stock.</div>
                                                            </div>
                                                        </div>
                                                    </div>
                            @else
                            <input type="hidden" name="itemStock" value="1">
                            @endif

                                                    @if (config('app.shippingSystem') == "flatFee")
                            <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="shipCost">
                                            <i data-feather="truck" class="icon-xs me-1"></i>Shipping cost
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" step="0.01" min="0" max="999999.99" class="form-control" name="shipCost" id="shipCost" value="{{ $shipCost ?: '' }}" placeholder="0.00">
                                                            </div>
                                        <div class="invalid-feedback">Please enter a valid shipping cost.</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                        <label class="form-label" for="sortOrder">
                                            <i data-feather="arrow-up-down" class="icon-xs me-1"></i>Sort Order
                                        </label>
                                        <input type="number" min="0" max="999999" class="form-control" name="sortOrder" id="sortOrder" value="{{ $sortOrder ?: '' }}" placeholder="Enter sort order">
                                        <div class="invalid-feedback">Please enter a valid sort order number.</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" name="itemWeight" value="{{ $itemWeight }}">
                                                    <input type="hidden" name="itemWeightOzs" value="{{ $itemWeightOzs }}">
                                                    @endif

                                                    @if (config('app.shippingSystem') == "weight")
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                        <label class="form-label" for="itemWeight">
                                            <i data-feather="weight" class="icon-xs me-1"></i>Item weight (grams) <span class="text-danger">*</span>
                                        </label>
                                        <input type="number" min="0" max="999999" step="0.01" class="form-control" name="itemWeight" id="itemWeight" value="{{ $itemWeight ?: '' }}" required placeholder="Enter weight in grams">
                                        <div class="invalid-feedback">Please enter a valid weight in grams.</div>
                                        <small class="form-text text-muted">
                                            Convert: 
                                            <a href="javascript:poundsToGrams();" class="text-decoration-none">Lbs.:</a>
                                            <input type="text" class="form-control d-inline-block w-auto" size="5" name="itemWeightLbs" style="max-width: 80px;">
                                            <a href="javascript:ouncesToGrams();" class="text-decoration-none ms-2">Ounces:</a>
                                            <input type="text" class="form-control d-inline-block w-auto" size="5" name="itemWeightOz" style="max-width: 80px;">
                                        </small>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                        <label class="form-label" for="itemWeightOzs">
                                            <i data-feather="weight" class="icon-xs me-1"></i>Item weight (ounces) <span class="text-danger">*</span>
                                        </label>
                                        <input type="number" min="0" max="999999" step="0.01" class="form-control" name="itemWeightOzs" id="itemWeightOzs" value="{{ $itemWeightOzs ?: '' }}" required placeholder="Enter weight in ounces">
                                        <div class="invalid-feedback">Please enter a valid weight in ounces.</div>
                                        <small class="form-text text-muted">
                                            Convert: 
                                            <a href="javascript:poundsToOunces();" class="text-decoration-none">Lbs.:</a>
                                            <input type="text" class="form-control d-inline-block w-auto" size="5" name="itemWeightLbs2" style="max-width: 80px;">
                                            <a href="javascript:gramsToOunces();" class="text-decoration-none ms-2">Grams:</a>
                                            <input type="text" class="form-control d-inline-block w-auto" size="5" name="itemWeightGrams" style="max-width: 80px;">
                                        </small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" name="shipCost" value="{{ $shipCost }}">
                                                    @endif
                                                        </div>
                                                    </div>

                    <!-- Product Details Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="file-text" class="icon-sm me-2"></i>Product Details
                            </h5>
                        </div>
                        <div class="card-body">
                                                    <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="description">
                                            <i data-feather="align-left" class="icon-xs me-1"></i>Description
                                        </label>
                                        <textarea class="form-control" id="description" rows="5" maxlength="250" onKeyUp="textCounter(this.form.description,this.form.charCount1,250)" onKeyDown="textCounter(this.form.description,this.form.charCount1,250)" name="description" placeholder="Enter item description (max 250 characters)">{{ $description }}</textarea>
                                        <div class="invalid-feedback">Please enter a description (max 250 characters).</div>
                                        <small class="form-text text-muted">
                                            Characters left: 
                                            <input type="text" class="form-control d-inline-block w-auto char-counter" style="font-family: arial, helvetica; font-size: 12px; height: 19px; width: 40px; border: 1px solid; border-style: solid;" size="4" maxlength="4" readonly name="charCount1" value="250">
                                        </small>
                                                        </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="description2">
                                            <i data-feather="align-left" class="icon-xs me-1"></i>More details
                                        </label>
                                        <textarea class="form-control" id="description2" rows="5" maxlength="250" onKeyUp="textCounter(this.form.description2,this.form.charCount2,250)" onKeyDown="textCounter(this.form.description2,this.form.charCount2,250)" name="description2" placeholder="Enter additional details (max 250 characters)">{{ $description2 }}</textarea>
                                        <div class="invalid-feedback">Please enter additional details (max 250 characters).</div>
                                        <small class="form-text text-muted">
                                            Characters left: 
                                            <input type="text" class="form-control d-inline-block w-auto char-counter" style="font-family: arial, helvetica; font-size: 12px; height: 19px; width: 40px; border: 1px solid; border-style: solid;" size="4" maxlength="4" readonly name="charCount2" value="250">
                                        </small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                    </div>

                    <!-- Product Images Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="image" class="icon-sm me-2"></i>Product Images
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <h6 class="mb-3">
                                        <i data-feather="image" class="icon-xs me-2"></i>Main Image
                                    </h6>
                                    @if ($itemID != 0 && $imageName1 != "")
                                        <div class="mb-3">
                                            <label class="form-label">Current image:</label>
                                            <div class="border rounded p-2 image-preview-container">
                                                <img src="../{{ config('app.cartImagesFolder') }}/{{ $imageName1 }}" class="img-fluid" alt="Current product image" style="max-height: 200px;">
                                                        </div>
                                                    </div>
                                    @else
                                        <p class="text-muted">Add an image for this item by uploading below.</p>
                                                    @endif
                                    <div class="mb-3">
                                        <label class="form-label" for="newImage1">Upload new image</label>
                                                                    <input type="file" class="form-control" name="newImage1" id="newImage1" accept="image/jpeg,image/jpg,image/png,image/gif" data-max-size="2097152">
                                                                    <small class="form-text text-muted">Accepted formats: JPEG, PNG, JPG, GIF. Max size: 2MB</small>
                                                            </div>
                                                            @if ($itemID > 0)
                                    <button type="button" class="btn btn-danger btn-sm" name="db1" onClick="deleteImage({{ $itemID }});">
                                        <i data-feather="trash-2" class="icon-xs me-1"></i>Delete This Image
                                    </button>
                                                            @endif
                                                        </div>
                                <div class="col-md-6">
                                    <h6 class="mb-3">
                                        <i data-feather="image" class="icon-xs me-2"></i>Thumbnail Image
                                    </h6>
                                                    @if ($itemID != 0 && $imageName2 != "")
                                        <div class="mb-3">
                                            <label class="form-label">Current thumbnail:</label>
                                            <div class="border rounded p-2 image-preview-container">
                                                <img src="../{{ config('app.cartImagesFolder') }}/{{ $imageName2 }}" class="img-fluid" alt="Current thumbnail" style="max-height: 200px;">
                                                        </div>
                                                    </div>
                                                    @else
                                        <p class="text-muted">Add a thumbnail image for this item by uploading below.</p>
                                                    @endif
                                    <div class="mb-3">
                                        <label class="form-label" for="newImage2">Upload new thumbnail</label>
                                                                    <input type="file" class="form-control" name="newImage2" id="newImage2" accept="image/jpeg,image/jpg,image/png,image/gif" data-max-size="2097152">
                                                                    <small class="form-text text-muted">Accepted formats: JPEG, PNG, JPG, GIF. Max size: 2MB</small>
                                                                </div>
                                                            @if ($itemID > 0)
                                    <button type="button" class="btn btn-danger btn-sm" name="db2" onClick="deleteThumbnail({{ $itemID }});">
                                        <i data-feather="trash-2" class="icon-xs me-1"></i>Delete This Thumbnail
                                    </button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                        </div>
                                                    </div>

                    <!-- Settings & Options Section -->
                    <div class="card mb-4 shadow-sm form-section-card">
                        <div class="card-header form-section-header">
                            <h5 class="mb-0">
                                <i data-feather="settings" class="icon-sm me-2"></i>Settings & Options
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="activeRecord" id="activeRecord" value="1" {{ $activeRecord == 1 ? 'checked' : '' }} required>
                                        <label class="form-check-label" for="activeRecord">
                                            <strong>Active item:</strong> Yes, display this {{$pageSingle}} to customers <span class="text-danger">*</span>
                                        </label>
                                        <div class="invalid-feedback">Please specify if this item should be displayed to customers.</div>
                                    </div>
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="makeFiles" id="makeFiles" value="1" {{ $makeFiles ? 'checked' : '' }}>
                                        <label class="form-check-label" for="makeFiles">
                                            <strong>Create pages for store:</strong> Yes, update all store pages for this item when saved.
                                        </label>
                                    </div>
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="clearanceItem" id="clearanceItem" value="1" {{ $clearanceItem ? 'checked' : '' }}>
                                        <label class="form-check-label" for="clearanceItem">
                                            <strong>Item on sale</strong>
                                        </label>
                                                </div>
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="featuredItem" id="featuredItem" value="1" {{ $featuredItem ? 'checked' : '' }}>
                                        <label class="form-check-label" for="featuredItem">
                                            <strong>Featured item</strong>
                                        </label>
                                            </div>
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="dropShip" id="dropShip" value="1" {{ $dropShip ? 'checked' : '' }}>
                                        <label class="form-check-label" for="dropShip">
                                            <strong>Drop Ship item</strong>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between align-items-center mt-4 mb-3">
                        <a href="/admin/product" class="btn btn-secondary">
                            <i data-feather="x" class="icon-xs me-1"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i data-feather="save" class="icon-xs me-1"></i>Save Product
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

                            <script type="text/javascript">
    // Initialize Feather icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }

                                // Form validation
                                (function() {
                                    'use strict';
        var forms = document.querySelectorAll('.needs-validation');
        Array.prototype.slice.call(forms).forEach(function(form) {
                                            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                                                    event.preventDefault();
                                                    event.stopPropagation();
                                                }
                                                form.classList.add('was-validated');
                                            }, false);
                                        });
                                })();

    // Character counter for descriptions
    function textCounter(field, counter, max) {
        if (field.value.length > max) {
            field.value = field.value.substring(0, max);
        }
        var remaining = max - field.value.length;
        counter.value = remaining;
        
        // Check if dark mode is active
        var isDarkMode = document.body.getAttribute('data-layout-mode') === 'dark';
        
        if (remaining < 0) {
            counter.style.color = '#dc3545'; // Red
        } else if (remaining < 50) {
            counter.style.color = isDarkMode ? '#ffc107' : '#fd7e14'; // Orange/Yellow
        } else {
            counter.style.color = isDarkMode ? '#e9ecef' : '#495057'; // Light gray in dark mode, dark gray in light mode
        }
    }
                            </script>
 
@include('../util/footer')