@extends('layouts.admin')

@section('title', 'Item Report')
@section('content-header', 'Item Report')

@section('content')

    <div class="card">
        <div class="card-body">
            <h3>{{$title}}</h3>
            <form action="{{ route('item_reports.store') }}" target="_blank" method="POST" enctype="multipart/form-data">
                @csrf

                @php
                $reportType = ($value == 'ALL') ? 'Item_Report' : 'Void_Report';
                @endphp

                <input type="hidden" name="report_type" value="{{ $reportType }}">


                <div class="form-group" id="outletSelection">
                  <label>Select Outlet:</label>
                  <small style="color:red; margin:4px;">*Pick The Branch First!</small>
                  <br>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="selection_type[]" id="branch_ALL" value="ALL">
                    <label class="form-check-label" for="branch_ALL">
                      ALL Outlet
                    </label>
                  </div>
                  <div class="row">
                    @php
                      $count = 1;
                    @endphp
                    @foreach ($branches as $key => $value)
                      <div class="col-md-4">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" name="selection_type[]" id="branch_{{ $value->BID }}" value="{{ $value->BID }}">
                          <label class="form-check-label" for="branch_{{ $value->BID }}">
                          {{ $value->Description }} ({{ $value->BID }})
                          </label>
                        </div>
                      </div>
                      @if ($count % 3 == 0 || $count == count($branches))
                        </div><div class="row">
                      @endif
                      @php
                        $count++;
                      @endphp
                    @endforeach
                  </div>
                </div>


               @if (isset($items))
                <div class="form-group" id="itemSelection">
                  <label for="item">Item</label>
                  <small style="color:red; margin:4px;">*Only One Specified can pick Item!</small>
                  <select name="item" class="form-control @error('item') is-invalid @enderror" id="item" disabled>                   
                    <option data-outlet="ALL" value="ALL">ALL</option>
                    <!-- Add all the items here with the relevant data-outlet attribute -->
                    @foreach ($items as $item)
                    <option data-outlet="{{ $item->BID }}" value="{{ $item->SKUID }}">{{ $item->Sdesc }}</option>
                    @endforeach
                    <!-- Add more items as needed -->
                  </select>
                </div>
                @endif



                <div class="form-group">
                  <label >Register</label>
                  <select name="register" id="reg"  class="form-control @error('report_type') is-invalid @enderror">
                    @foreach ($reg as $key)
                    <option value="{{$key}}">{{$key}}</option>
                    @endforeach
                  </select>
                </div>

                @if (isset($sub) && $sub)
                <div class="form-group">
                  <label >Report Type</label><br>
                  <input type="radio"  name="report_method" value="N" checked onchange="toggleMethodSection(this)" selected>
                  <label >Normal</label>
                  <input type="radio"  name="report_method" value="M" onchange="toggleMethodSection(this)">
                  <label >Order Service</label>
                  <input type="radio"  name="report_method" value="S" onchange="toggleMethodSection(this)">
                  <label >Sub-Delivery</label>
                </div>
                @endif

                <!-- method section -->
                <div class="form-group" id="methodSection" style="display: none; border: 1px solid #ccc; padding: 10px;">
                  <label>Order Service</label>
                  <br>
                  <div class="form-check">
                  </div>
                  <div class="row">
                  @php
                    $count = ['DI', 'DL', 'TA'];
                  @endphp

                  @foreach ($count as $key => $value)
                    @php
                      if ($value == 'DI') {
                        $name = 'Dine-In';
                      } elseif ($value == 'DL') {
                        $name = 'Delivery';
                      } else {
                        $name = 'Take-Away';
                      }
                    @endphp

                    <div class="col-md-2">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="method_type[]" id="method_{{ $value }}" value="{{ $value }}">
                        <label class="form-check-label" for="method_{{ $value }}">
                          {{ $name }}
                        </label>
                      </div>
                    </div>
                  @endforeach

                  </div>
                </div>

                @if (isset($sub) && $sub)
                <!-- sub section -->
                <div class="form-group" id="subSection" style="display: none; border: 1px solid #ccc; padding: 10px;">
                    <label>Sub-Delivery</label>
                    <br>
                    <div class="form-check">
                        <!-- Rest of the code -->
                    </div>
                    <div class="row">
                        @foreach ($sub as $key)
                            <div class="col-md-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="sub_delivery[]" id="{{ $key }}" value="{{ $key }}">
                                    <label class="form-check-label" for="{{ $key }}">
                                        {{ $key }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endif
              


                <div class="form-group">
                    <label for="start_date">Start Date</label>
                    <input type="date" name="start_date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" value="{{ old('start_date') }}"  max="{{ date('Y-m-d') }}">
                    @error('start_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group">
                    <label >End Date</label><small style="color:red; margin:4px;">*Optional</small>
                    <input type="date" name="end_date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" value="{{ old('end_date') }}"  max="{{ date('Y-m-d') }}">
                    @error('start_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>



          
                <button type="submit" name="reportType" value="excel" class="btn btn-primary float-right" style="margin-left: 10px;">Generate EXCEL Report</button>
                <button type="submit" name="reportType" value="pdf" class="btn btn-primary float-right">Generate PDF Report</button>
            

            </form>
        </div>
    </div>
@endsection

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function () {
    // When any checkbox in the first div is clicked
    $("#outletSelection input[type=checkbox]").click(function () {
      // Get all selected outlet values as an array
      const selectedOutlets = $("#outletSelection input[type=checkbox]:checked")
        .map(function () {
          return $(this).val();
        })
        .get();

      // Enable the item selection dropdown
      $("#itemSelection #item").prop("disabled", false);

      // Hide all items in the second div and clear previous selection
      $("#itemSelection #item option").hide().prop("selected", false);

      // Show items based on the selected outlet
      if (selectedOutlets.includes("ALL") || selectedOutlets.length > 1) {
        $("#itemSelection #item option[data-outlet='ALL']").show();
      }

      // Show options for specific outlets (when only one checkbox is selected)
      if (selectedOutlets.length === 1) {
        const selectedOutlet = selectedOutlets[0];
        $("#itemSelection #item option[data-outlet='" + selectedOutlet + "']").show();
        // If there's only one specific outlet selected, make it the selected option
        $("#itemSelection #item option[data-outlet='" + selectedOutlet + "']").prop("selected", true);

        // Show the "ALL" option as well
        $("#itemSelection #item option[data-outlet='ALL']").show();
        $("#itemSelection #item option[data-outlet='ALL']").prop("selected", true);
      }
    });
  });



    // Method and Sub-Delivery section toggle
    $('input[name="method_type[]"]').click(function() {
      if ($(this).val() == 'ALL') {
        $('input[name="method_type[]"]').not(this).prop('disabled', this.checked);
      } else {
        $('input[name="method_type[]"][value="ALL"]').prop('disabled', $('input[name="method_type[]"]:checked').length > 0);
      }
    });

    $('input[name="selection_type[]"]').click(function() {
      if ($(this).val() == 'ALL') {
        $('input[name="selection_type[]"]').not(this).prop('disabled', this.checked);
      } else {
        $('input[name="selection_type[]"][value="ALL"]').prop('disabled', $('input[name="selection_type[]"]:checked').length > 0);
      }
    });

  function toggleMethodSection(selectedRadio) {
    var methodSection = document.getElementById('methodSection');
    var subSection = document.getElementById('subSection');
    if (selectedRadio.value === 'M') {
      methodSection.style.display = 'block';
      subSection.style.display = 'none';
    } else if(selectedRadio.value === 'S') {
      methodSection.style.display = 'none';
      subSection.style.display = 'block';
    } else {
      methodSection.style.display = 'none';
      subSection.style.display = 'none';
    }
  }
</script>


@endsection