@extends('user.layouts.main')
@push('title')
Menu Edit
@endpush
@section('content')
<section id="content-wrapper">
   <div class="container">
  <div class="row justify-content-center">
    <div class="col-xl-8 col-lg-8 col-md-10 col-sm-12 col-12">
      <div class="screen-form">
        <h2 class="form-heading">{{$my_screen_name}}</h2>
        <form method="POST" id="my_frm" action="/update_screen">
           @csrf
          <table>
            <tr>
              <th>Menu Name</th>
              <th>Menu Price</th>
            </tr>

            @php $count = max(count($menu_name), count($menu_price)); @endphp
            <input type="hidden" class="form-control" name="total_count" value="{{$count}}">
            <input type="hidden" class="form-control" name="sheet_id" value="{{$screen_name}}">
            <input type="hidden" class="form-control" name="sheet_name" value="{{$sheet_name}}">

            @for($i = 0; $i < $count; $i++)
            <tr>
              <td>{{ isset($menu_name[$i]) ? $menu_name[$i] : '' }}</td>
              <td>
              <div class="">
                <input type="hidden" name="price_id{{$i}}" value="{{$menu_price_id[$i]}}">
              </div>
              <div class="input-group cus-input-grp">
                $<input type="text" name="menu_price{{$i}}" class="form-control" maxlength="40" value="{{ isset($menu_price[$i]) ? $menu_price[$i] : '' }}"  id="menu_price{{$i}}">
              </div>
               <div class="form-check cus-frm-check">
                <input type="radio" class="form-check-input" name="option{{$i}}" value="N/A" onclick="handleRadio(this, 'menu_price{{$i}}')"><label class="form-check-label">N/A</label>
              </div>
                <div class="form-check">
                   <input type="radio" class="form-check-input" name="option{{$i}}" value="S/O" onclick="handleRadio(this, 'menu_price{{$i}}')"><label class="form-check-label">S/O</label>     
                </div>
              </td>
            </tr>
            @endfor

            <tr></tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
          <div class="row justify-content-center">
            <div class="col-lg-6">
              <button class="btn custom-btn" type="submit" id="validate_price" onclick="validate_price()">Update</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    function handleRadio(radio, inputId) {
      if (radio.checked) {
        document.getElementById(inputId).value = radio.value;
      } else {
        document.getElementById(inputId).value = '';
      }
    }

    $(document).ready(function() {
      $("#validate_price").click(function(event) {
        event.preventDefault();
        // var inputs = document.querySelectorAll("input[name^='menu_price']");
        // var regex = /^\d+(\.\d+)?$/; // Updated regex to accept decimal numbers

        // for (var i = 0; i < inputs.length; i++) {
        //   if (!regex.test(inputs[i].value)) {
        //     alert("Please enter valid numbers for Menu Price");
        //     return false;
        //   }
        // }

        $("#my_frm").submit();
        // Optional: Uncomment this line if you want to submit the form after validation
        // document.querySelector("form").submit();
      });
    });
  </script>
@endsection