@extends('layouts.admin')

@section('title', 'Transaction Summary Report')
@section('content-header', 'Transaction Summary Report')

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

                <div class="form-group">
              <label>Select Outlet:</label>
              <br>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="selection_type[]" id="ALL" value="ALL">
                <label class="form-check-label" for="ALL">
                  ALL Outlet
                </label>
              </div>
              <div class="row">
                @php
                  $count = 1;
                @endphp
                @foreach ($branches as $key)
                  <div class="col-md-4">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="selection_type[]" id="{{ $key->BID }}" value="{{ $key->BID }}">
                      <label class="form-check-label" for="{{ $key->BID }}">
                        {{ $key->BID }} || {{ $key->Description }}
                      </label>
                    </div>
                  </div>
                  @if ($count % 3 == 0 || $count == count($branches))
                    </div><div class="row">
                  @endif
                  @php
                    $count++;
                  @endphp
                @endforeach
              </div>
            </div>

            <div class="form-group">
                <label for="format">STATUS</label><br>
                <input type="radio" id="summary" name="format" value="succ" checked>
                <label for="revenue">SUCCESS</label>
                <input type="radio" id="detailed" name="format" value="cann">
                <label for="tax">CANCELLED</label>
                <input type="radio" id="detailed" name="format" value="all">
                <label for="tax">ALL</label>
            </div>

            <div class="form-group">
                <label for="selection_type">Select Payment Method:</label>
                <select class="form-control" id="payment" name="payment">
                        <option value="ALL">ALL</option>
                    @foreach ($media as $key)
                        <option value="{{ $key->media_type }}">{{ $key->media_type }}</option>
                    @endforeach
                </select>
            </div>

                <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 for="end_date">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 class="btn btn-primary float-right" type="submit">Generate Report</button>
            </form>
        </div>
    </div>
@endsection
@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(document).ready(function(){
    $('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);
        }
    });
});
  </script>


@endsection