{{--
|--------------------------------------------------------------------------
| BidNow is common Component (Can be shown in any screen)
|--------------------------------------------------------------------------
| you can show this component in any screen by referring to the following
| snippet:
|-----------
|
| @component('components.BidNow',[])
|
| @endcomponent
|
|-------------------------------------------------------------
|
--}}

<form  method="POST" action="" id="bid_form" class="col-lg-6 col-sm-12">
  <div class="row" >
    <div class="col-12">
    <input type="hidden" name="h_email" value="{{Auth::user()->email}}">
    <input type="hidden" name="hospitalName" value="{{Auth::user()->name}}">
    <input type="hidden" name="slug" value="{{Auth::user()->slug}}">
    <input type="hidden" name="h_country" value="{{Auth::user()->country_name}}">
    <input type="hidden" name="h_phone" value="{{Auth::user()->phone}}">
    <input type="hidden" name="p_email" value="">
    <input type="hidden" name="quote_id" value="">
    <input type="hidden" name="category_id" value="">
    <input type="hidden" name="country_id" value="">

    {{ csrf_field() }}

    <div class="form-group">
      <label for="total_cost">
          Total cost in INR
      </label>
    
      <input type="digits" class="form-control" name="total_cost" id="total_cost" placeholder="Total cost" required>
    </div>
    <div class="form-group shadow-textarea">
      <label for="exampleFormControlTextarea6">
        <i class="fas fa-pencil-alt prefix"></i>
          Note to the requester
      </label>
      <textarea class="form-control z-depth-1" name="desc" id="vidDesc" onkeyup="countNoCharacters()" rows="3" placeholder="Write here..."></textarea>
      <span hidden id="characterNoCount"></span>
      <span id="pagebreakNoCount"></span>
    </div>

    <div class="form-group">
        <label for="bid_file">
            Upload file (.pdf, .jpeg, .jpg, .png)
        </label><br/>
      <input type="file" class="" name="bidfile" id="bid_file" accept=".pdf, .jpeg, .jpg, .png">
    </div>
    
    </div>
  </div>
  <div class="d-inline row">
    <div class="col-12">
      <button type="button" class="btn btn-danger n-q-r-cancel-btn" id="bid_now_cancel">Cancel</button>
      <button type="button" class="btn btn-primary float-right bid-now-btn" id="bid_now_submit">Submit</button>
    </div>
  </div>
</form>
<script>
  function countNoCharacters() {
    const description = document.getElementById("vidDesc");
    const characterCount = document.getElementById("characterNoCount");
    const pagebreakCount = document.getElementById("pagebreakNoCount");

    // Replace "Enter" key press with two characters
    const descriptionValue = description.value.replace(/\n/g, "\r\n");

    const remainingCharacters = 512 - descriptionValue.length;
    characterCount.innerText = `${descriptionValue.length} / 512 characters. ${remainingCharacters} remaining.`;

    // Count the number of page breaks
    const pageCount = (description.value.match(/\n/g) || []).length;
    pagebreakCount.innerText = `${descriptionValue.length - pageCount} / 512 characters.`;
  }
</script>