@extends('layouts.admin')

@section('content')
@php $readonly=''; @endphp
@if($action=='View')
@php $readonly='readonly'; @endphp
@endif
<div class="page-links">
  <a href="{{ route('dashboard') }}">Dashboard</a>
  <span> > </span>
  <a href="jaquery:void(0)">Tiffin</a>

  <span> > </span>
  <a href="javascript:void(0)">{{$title}}</a>
</div>
<div class="row">
  <div class="col-xxl-4 col-lg-6 col-12 mb-5">
    @if ($message = Session::get('message'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>{{ $message }}</strong>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif
    <div class="card-main">

      <h2 class="iheading-man">{{ __($title) }}</h2>
      <form class="form-data" method="POST" id="add_form" action="{{ route('store-delivered-tiffins') }}" enctype="multipart/form-data">

        @csrf
        <div class="row">
          <div class="col-md-12 col-12 ">
            <div class="row">
              <div class="col-md-12 col-12 mb-3">
                <label>Name <small class="red">* </small></label>
                @if(isset($record))
                @php $name=$record->name; @endphp
                @elseif(old('title'))
                @php $name=old('name'); @endphp
                @else
                @php $name=''; @endphp
                @endif
                <select id="user_id" name="customer_id" class="form-control">

                </select>
                @error('customer_id')
                <span class="error">{{ $message }}</span>
                @enderror
              </div>



              <div class="col-md-12 col-12 mb-3 ">
                <label class="form-label">Order</label>
                <select id="order_id" name="order_id" class="form-control">

                </select>
                <div class="row orderDetail mt-2"></div>
              </div>

              <div class="col-md-12 col-12 mb-3">
                <label>Till Date</label>
                <input type="date" name="end_date" class="form-control" value="{{ date('Y-m-d') }}" />
              </div>

            </div>
          </div>

          <!-- new-card -->
          <div class="fix-button-main">
            <div class="save-fix">
              <div class="float-end">
                @if($action!='View')
                <button type="submit" class="btn save-b me-3" type="button">
                  Save
                </button>
                @endif

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

      </form>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script>
  $(document).ready(function() {
    // select user
    $("#user_id").select2({
      ajax: {
        url: "{{ route('getUsers') }}",
        type: "get",
        dataType: 'json',
        delay: 250,
        data: function(params) {
          return {
            searchTerm: params.term // search term

          };
        },
        processResults: function(response) {
          return {
            results: response

          };
        },
        cache: true
      }
    });

    // select order
    $("#order_id").select2({
      ajax: {
        url: "{{ route('getOrders') }}",
        type: "get",
        dataType: 'json',
        delay: 250,
        data: function(params) {
          user_id = $("#user_id").val();
          return {
            searchTerm: params.term, // search term
            user_id: user_id
          };
        },
        processResults: function(response) {
          return {
            results: response

          };
        },
        cache: true
      }
    });
  });
  $(document).on('change', '#user_id', function() {
    // $("#order_id").each(function () { //added a each loop here
        $("#order_id").val(null).trigger("change");
        $('.orderDetail').html("");
    // });
  });
    $(document).on('change', '#order_id', function() {
    id = $(this).val();
    if (id) {
      $.ajax({
        url: "{{ route('getOrderDetail') }}",
        type: 'GET',
        data: {
          "id": id
        },
        success: function(res) {
          if (res.status == true) {
            html = "<div class='col-6'><h6>Total Tiffins: " + res.total + "</h6></div><div class='col-6 text-end'><h6> Remaining Tiffins:" + res.remaining + "</h6></div>";
            $('.orderDetail').html(html);
          }
        }
      });
    }
  })
</script>
@endpush