{{>header}}
<style>
    .is-invalid {
        border: 2px solid red;
    }
</style>
<title>Product Request</title>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline mt-3">
                    <div class="card-header" style="background-color: white; color:Black;">
                        <h4><b style="background-color: white; color:#4B0F77;">Product Request Details</b></h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header p-2">
                        {{!-- {{#unless (or (eql singleOrder.status "Cancelled") (or (eql singleOrder.status "Declined") (eql singleOrder.status "Rejected")))}}
                        <div class="form-group float-right d-flex align-items-center">
                            <a href="javascript:void(0);" data-bs-toggle="modal" data-id="{{singleOrder._id}}"
                                data-bs-target="#deleteModal" class="btn btn-md btn-danger m-1">
                                Cancel Order
                            </a>
                        </div>
                        {{/unless}} --}}
                        <ul class="nav nav-pills">
                            <li class="nav-item"><a class="nav-link active" href="#details"
                                    data-toggle="tab">Details</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="details">
                                <div id="privacy-policy-three" class="privacy-policy">
                                    <form method="post" action="/admin/addproduct" enctype="multipart/form-data">
                                        <div class="row">
                                            <h4><b>User Details</b></h4>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">First Name
                                                    </label>
                                                    <input type="text" class="form-control" name="productName"
                                                        value="{{singleRequest.user.firstName}}" pattern="^\S(.*\S)?$" readonly
                                                        title="Product name should not have leading or trailing spaces"
                                                        minlength="1" maxlength="100" placeholder="Product Name">
                                                </div>
                                                <p id="nameP" style="color: red !important;"></p>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">Last Name
                                                    </label>
                                                    <input type="text" class="form-control" readonly
                                                        value="{{singleRequest.user.lastName}}" name="productName"
                                                        pattern="^\S(.*\S)?$"
                                                        title="Product name should not have leading or trailing spaces"
                                                        minlength="1" maxlength="100" placeholder="Product Name">
                                                </div>
                                                <p id="nameP" style="color: red !important;"></p>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="col-form-label">Email</label>
                                                <input type="text" class="form-control" name="email"
                                                    placeholder="Enter Email Adress" value="{{singleRequest.user.email}}"
                                                    oninput="validateEmail(this)" readonly placeholder="N/A"
                                                    onblur="this.value = this.value.trim();">
                                                <small id="update-emailError" style="color: red; display: none;">
                                                    Please enter a valid email address (e.g.,
                                                    example@domain.com).
                                                </small>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="col-form-label">Mobile Number</label>
                                                <input type="number" class="form-control" name="phone" readonly
                                                    placeholder="Enter Mobile Number" value="{{singleRequest.user.phone}}"
                                                    pattern="^[6-9]\d{9}$"
                                                    title="Phone number must be exactly 10 digits and start with 6, 7, 8, or 9.">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <h4><b>Request Details</b></h4>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">Request Id
                                                    </label>
                                                    <textarea class="form-control description" name="description"
                                                        readonly minlength="10"
                                                        rows="1">{{singleRequest.requestId}}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">Request Date
                                                    </label>
                                                    <textarea class="form-control description" name="description"
                                                        readonly minlength="10"
                                                        rows="1">{{singleRequest.createdAt}}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">Requested Quantity
                                                    </label>
                                                    <textarea class="form-control description" name="description"
                                                        readonly minlength="10"
                                                        rows="1">{{singleRequest.quantity}}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">Note</label>
                                                    <input type="text" class="form-control" name="stock" min="1"
                                                        max="999" readonly value="{{singleRequest.note}}"
                                                        placeholder="Note">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">Expected Delivery Date</label>
                                                    {{!-- <input type="datetime-local" min="1" max="999" class="form-control"
                                                        name="stockAlert" readonly
                                                        value="{{singleRequest.deliveryDate}}" placeholder="Enter Stock Alert"> --}}
                                                        <textarea class="form-control description" name="description"
                                                        readonly minlength="10" placeholder="Expected Delivery Date"
                                                        rows="1">{{singleRequest.deliveryDate}}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">Expected Delivery Time</label>
                                                    <input type="text" min="1" max="999" class="form-control"
                                                        name="stockAlert" readonly
                                                        value="{{singleRequest.deliveryTime}}" placeholder="Expected Delivery Time">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="col-form-label">Status</label>
                                                    <input type="text" min="1" max="999" class="form-control"
                                                        name="stockAlert" readonly
                                                        value="{{singleRequest.status}}" placeholder="Enter Stock Alert">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <h4><b>Community Details</b></h4>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Community Name</label>
                                                    <input type="text" class="form-control" readonly
                                                        value="{{singleRequest.community.communityName}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Vendor Name</label>
                                                    <input type="text" class="form-control" placeholder="N/A" readonly
                                                        value="{{singleRequest.community.vendorName}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Vendor Phone</label>
                                                    <input type="number" class="form-control" readonly placeholder="N/A"
                                                        value="{{singleRequest.community.phone}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Vendor Email</label>
                                                    <input type="email" class="form-control" placeholder="N/A" readonly
                                                        value="{{singleRequest.community.email}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <h4><b>Product Details</b></h4>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="brand" class="form-label">Product Name</label>
                                                    <input type="text" class="form-control" id="brand" name="brand"
                                                        readonly placeholder="N/A" pattern="^\S(.*\S)?$"
                                                        value="{{singleRequest.product.productName}}"
                                                        title="Product name should not have leading or trailing spaces">
                                                </div>
                                            </div>
                                             <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Product Id
                                                    </label>
                                                    <input type="text" class="form-control" readonly
                                                        value="{{singleRequest.product.productId}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Product Price
                                                    </label>
                                                    <input type="text" class="form-control" readonly
                                                        value="{{singleRequest.product.price}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Product Discount</label>
                                                    <input type="text" class="form-control" readonly
                                                        value="{{singleRequest.product.discount}}">
                                                </div>
                                            </div>
                                        </div>
                                        {{!-- <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Coupon Percentage</label>
                                                    <input type="text" class="form-control" readonly placeholder="N/A"
                                                        value="{{singleOrder.coupounPercentage}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Coupon Price Range</label>
                                                    <input type="text" class="form-control" placeholder="N/A" readonly
                                                        value="{{singleOrder.coupounPriceRange}}">
                                                </div>
                                            </div>
                                        </div> --}}
                                        {{!-- <div class="row">
                                            <h4><b>Other Details</b></h4>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Amount</label>
                                                    <input type="text" class="form-control" readonly
                                                        value="{{singleOrder.amount}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Invoice Id</label>
                                                    <input type="text" class="form-control" placeholder="N/A" readonly
                                                        value="{{singleOrder.invoiceId}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Order Id</label>
                                                    <input type="text" class="form-control" readonly
                                                        value="{{singleOrder.orderId}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Status</label>
                                                    <input type="text" class="form-control" placeholder="N/A" readonly
                                                        value="{{singleOrder.status}}">
                                                </div>
                                            </div>
                                        </div> --}}
                                        {{!-- <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Payment Type</label>
                                                    <input type="text" class="form-control" placeholder="N/A" readonly
                                                        value="{{singleOrder.paymentType}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Delivery Charge</label>
                                                    <input type="text" class="form-control" placeholder="N/A" readonly
                                                        value="{{singleOrder.deliveryCharge}}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Platform Fee</label>
                                                    <input type="text" class="form-control" placeholder="N/A" readonly
                                                        value="{{singleOrder.platformFee}}">
                                                </div>
                                            </div>
                                        </div> --}}
                                </div>
                                {{!-- <div class="form-group d-flex justify-content-center">
                                    <button class="btn btn-lg btn-info" type="submit">Submit</button>
                                </div> --}}
                                </form>
                            </div>
                            <div class="tab-pane" id="products">
                                <div class="row">
                                    <div class="col-sm-12 table-responsive">
                                        <table id="example4" class="table table-striped table-bordered"
                                            aria-describedby="example1_info">
                                            <thead>
                                                <tr>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">S.No</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Product Id</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Product
                                                        Name</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Category
                                                        Name</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Category
                                                        Type</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Price</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Discount
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Discounted
                                                        Price</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">SGST</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">CGST</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Quantity
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Unit Type
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Organic
                                                        Label</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{#each singleOrder.orderedProductsDetails}}
                                                <tr class="odd">
                                                    <td>{{inc @index}}</td>
                                                    <td>{{this.productId}}</td>
                                                    <td>{{this.productName}}</td>
                                                    <td>{{this.categoryName}}</td>
                                                    <td>{{this.categoryType}}</td>
                                                    <td>{{this.price}}</td>
                                                    <td>{{this.discount}}</td>
                                                    <td>{{this.discountedPrice}}</td>
                                                    <td>{{this.sgst}}</td>
                                                    <td>{{this.cgst}}</td>
                                                    <td>{{this.quantity}}</td>
                                                    <td>{{this.unitType}}</td>
                                                    <td>{{this.organicLabel}}</td>
                                                </tr>
                                                {{/each}}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{!-- cancel order --}}
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Header -->
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel" style="color: black; font-weight: 500;">
          Are you sure you want to cancel this order?
        </h5>
      </div>

      <!-- Form -->
      <form id="cancelOrderForm" method="POST">
        <div class="modal-body">
          <div class="form-group">
            <label for="penality" class="col-form-label" style="color: black; font-weight: 500;">Penalty</label>
            <input 
              type="number" 
              min="0" 
              max="9999999" 
              class="form-control" 
              id="penality" 
              name="penality"
              value="0" 
              placeholder="Enter penalty amount">
          </div>
        </div>

        <!-- Footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
          <button type="submit" class="btn btn-danger">Yes</button>
        </div>
      </form>

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


<script>
  $(document).ready(function () {
    $('#deleteModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var orderId = button.data('id'); // correct variable name
      var form = $('#cancelOrderForm');
      form.attr('action', '/admin/v1/updateorder/' + orderId); // dynamically set form action
    });
  });
</script>
{{>footer}}