@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="{{ route('orders.index') }}">Orders</a>
  <span> > </span>
  <a href="javascript:void(0)">{{$title}}</a>
</div>
@if(isset($order))
@php $order_id=$order->id;
$readonly='readonly'; @endphp
@else
@php $order_id=0;
$readonly=''; @endphp
@endif

<form id="order-form" action="{{ route('orders.process-order') }}" method="POST">
  @csrf
  <input type="hidden" name="order_id" value="{{$order_id}}" />
  <div class="row mb-5">
    @if ($errors->any())
    <div class="alert alert-danger">
      <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
    @endif
    <div class="col-xxl-12 col-lg-12 col-12 mb-3">
      <div class="card-main mb-3">
        <h2 class="iheading-man">{{ __($title) }}</h2>
        <div class="row">
          <div class="col-md-12 col-12 ">
            <div class="row">
              <div class="col-md-6 col-12 mb-3">
                <label>Select Customer <small class="red">* </small></label>
                @if(isset($order))
                @php $user_id=$order->userId; @endphp
                @else
                @php $user_id=0; @endphp
                @endif
                <select id="customer-id" class="form-control" name="customer" data-bs-toggle="tooltip" data-bs-original-title="Select customer you to place order for." {{$readonly}}>
                  <option value="">Select</option>
                  @foreach ($customers as $customer)
                  <option value="{{ $customer->id }}" {!! ($user_id==$customer->id) ? 'selected' : '' !!}>{{ $customer->accountId }} &nbsp;&nbsp; {{ $customer->firstName }} {{ $customer->lastName }}</option>
                  @endforeach
                </select>
                @error('customer')
                <span class="error">{{ $message }}</span>
                @enderror
              </div>
              <div id="customer-details">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-xl-4 col-12 main-detail">
      <div class="card-main mb-3">
        <div class="row">
          <div class="col-md-12 col-xl-12 col-12">
            <div id="select-package-div">
              <div class="col-md-12 col-12 mb-3">
                <label>Select Package <small class="red">* </small></label>
                @if(isset($order))
                @php $package_id=$order->packageId; @endphp
                @else
                @php $package_id=0; @endphp
                @endif
                <select id="package-id" class="form-control w-100" name="package" data-bs-toggle="tooltip" data-bs-original-title="Place package you want to order." {{$readonly}}>
                  @if(!isset($order))
                  <option>Not Selected</option>
                  @endif
                  @if(!isset($order))
                  <option>Not Selected</option>
                  @endif
                  @foreach ($packages as $package)
                  @php $html= $package->title.' ('.$package->pkgType->title .') '; @endphp
                  @if($package->package_days && $package->pkgType->alias!='trial')
                  @php $html.= ' - ('.substr(ucfirst($package->from_day),0,3).' - '.substr(ucfirst($package->to_day),0,3).')'; @endphp
                  @endif
                  @foreach($package->package_days as $days)
                  @if($days->qty > 1)
                  @switch ($days->day_id)
                  @case(1)
                  @php $day='Mon'; @endphp
                  @break
                  @case(2)
                  @php $day='Tue'; @endphp
                  @break
                  @case(3)
                  @php $day='Wed'; @endphp
                  @break
                  @case(4)
                  @php $day='Thu'; @endphp
                  @break
                  @case(5)
                  @php $day='Fri'; @endphp
                  @break
                  @case(6)
                  @php $day='Sat'; @endphp
                  @break
                  @default
                  @php $day='Sun'; @endphp
                  @endswitch
                  @php $html= $html." (".$day." - ".$days->qty.")"; @endphp
                  @endif
                  @endforeach
                  <option value="{{ $package->id }}" {!! ($package_id==$package->id) ? 'selected' : '' !!}>{!! $html !!}</option>
                  @endforeach
                </select>
                @error('package')
                <span class="error">{{ $message }}</span>
                @enderror
              </div>
            </div>
          </div>

          <div id="pane-2" class="d-none">
            <div class="mb-3" >
              <label for="order-date">Order Date</label>
              @if(isset($order))
              @php $order_date=date('Y-m-d',strtotime($order->created_at)); @endphp
              @else
              @php $order_date=\Carbon\Carbon::now()->format('Y-m-d') ; @endphp
              @endif
              <input id="order-date" name="order_date" type="date" class="form-control" value="{{ $order_date }}">
            </div>

            <div class=" mb-3">
              @if(isset($order))
              @php $delivery_date=date('Y-m-d',strtotime($order->delivery_date)); @endphp
              @else
              @php $delivery_date=\Carbon\Carbon::tomorrow()->format('Y-m-d') ; @endphp
              @endif
              <label for="delivery-date">Delivery Date</label>
              <input id="delivery-date" name="delivery_date" type="date" class="form-control" value="{{ $delivery_date }}">
            </div>

            <div class=" mb-3">
              <label for="address-type">Address Type</label>
              @if(isset($order))
              @php $address_type=$order->address_type; @endphp
              @else
              @php $address_type='house' ; @endphp
              @endif
              <select id="address-type" class="form-select" name="address_type" data-bs-toggle="tooltip" data-bs-original-title="Select address type.">
                <option value="house" {!! ($address_type=='house' ) ? 'selected' : '' !!}>House</option>
                <option value="apartment" {!! ($address_type=='apartment' ) ? 'selected' : '' !!}>Apartment</option>
                <option value="business" {!! ($address_type=='business' ) ? 'selected' : '' !!}>Business</option>
              </select>
            </div>

            <div class="mb-3 businessDiv">
              @if(isset($order))
              @php $business_name=$order->business_name; @endphp
              @else
              @php $business_name=''; @endphp
              @endif
              <label for="business_name">Business Name</label>
              <input id="business_name" name="business_name" type="text" class="form-control" value="{{ $business_name }}">
            </div>

            <div class="mb-3 buzzerDiv">
              @if(isset($order))
              @php $buzzer_code=$order->buzzer_code; @endphp
              @else
              @php $buzzer_code=''; @endphp
              @endif
              <label for="buzzer_code">Buzzer Code</label>
              <input id="buzzer_code" name="buzzer_code" type="text" class="form-control" value="{{ $buzzer_code }}">
            </div>


            <div class="mb-3 unitDiv">
              @if(isset($order))
              @php $unit_number=$order->unit_number; @endphp
              @else
              @php $unit_number=''; @endphp
              @endif
              <label for="unit_number">Unit Number</label>
              <input id="unit_number" name="unit_number" type="text" class="form-control" value="{{ $unit_number }}">
            </div>

            <div class=" mb-3">
              <label>Delivery Instructions:</label>
              @if(isset($order))
              @php $delivery_instruction_id=$order->delivery_instruction_id; @endphp
              @else
              @php $delivery_instruction_id=0; @endphp
              @endif
              @foreach ($deliveryInstructions as $deliveryInstruction)
              <div class="form-check my-2" >
                <input id="ins{{ $deliveryInstruction->id }}" name="delivery_instruction_id" class="form-check-input input-primary cursor-p delivery-ins" type="radio" name="delivery-instructions" value="{{ $deliveryInstruction->id }}" {!! ($delivery_instruction_id==$deliveryInstruction->id) ? 'checked' : '' !!}>
                <label for="ins{{ $deliveryInstruction->id }}">{{ $deliveryInstruction->title }}</label>
              </div>
              @endforeach
            </div>

            <div class="mb-3">

              @if(isset($order))
              @php $delivery_instructions=$order->delivery_instructions; @endphp
              @else
              @php $delivery_instructions=''; @endphp
              @endif
              <textarea id="delivery-instructions" name="delivery_instructions" class="form-control" placeholder="Delivery instruction details - Optional" >{!! $delivery_instructions !!}</textarea>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-12 col-xl-4">
      <div id="package-details-container" class=" d-none">
        <div class="card-main mb-3">
          <div id="package-details" class="">
            {{-- Will be filled by JS --}}
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12 col-xl-4">
      <div id="payment-details-container" class="card shadow-lg border d-none">
        <div class="card-main mb-3">
          <div id="payment-details" class="">
            <div class="row">
              <div class="col-12">
                <div class="form-group mb-3">
                  <label for="payment-type">Payment Type</label>
                  @if(isset($order) && isset($order->payments[0]))
                  @php $payment_method=$order->payments[0]->payment_method; @endphp
                  @else
                  @php $payment_method=''; @endphp
                  @endif
                  <select id="payment-type" class="form-select" name="payment_type" data-bs-toggle="tooltip" data-bs-original-title="Select Payment type.">
                    @foreach($paymentMethods as $method)
                    <option value="{{$method->code}}" {!! ($payment_method==$method->code) ? 'selected' : '' !!}>{{$method->name}}</option>
                    @endforeach
                  </select>
                </div>

                <div class="form-group mb-3" data-bs-toggle="tooltip" data-bs-original-title="Select Payment date.">
                  <label for="payment-date">Payment Date</label>
                  @if(isset($order) && isset($order->payments[0]))
                  @php $payment_date=date('Y-m-d',strtotime($order->payments[0]->created_at)); @endphp
                  @else
                  @php $payment_date=\Carbon\Carbon::today()->format('Y-m-d'); @endphp
                  @endif
                  <input id="payment-date" name="payment_date" type="date" class="form-control" value="{{ $payment_date }}">
                </div>

                <div class="mb-3">
                  @if(isset($order) && isset($order->payments[0]))
                  @php $transaction_id=$order->payments[0]->transaction_id; @endphp
                  @endif
                  <label for="transaction-id">Transaction Id</label>
                  <input id="transaction-id" name="transaction_id" type="text" class="form-control" value="{{ $transaction_id }}">
                </div>

                <div class="mb-2 row">
                @if(isset($order) && isset($order->payments[0]))
                  @php $type=$order->payments[0]->type; @endphp
                  @else
                  @php $type=''; @endphp
                  @endif

                  <div class="col-md-6 col-12">
                    <div class="form-check">
                      <input class="form-check-input paymentType" type="radio" value="F" name="type" id="paymentType1" {!! ($type=='' || $type=='F') ? 'checked' : '' !!} >
                      <label class="form-check-label" for="paymentType1">
                        Full Payment
                      </label>
                    </div>

                  </div>
                  <div class="col-md-6 col-12">
                    <div class="form-check">
                      <input class="form-check-input paymentType" type="radio" value="P" name="type" id="partialPayment" {!! ($type=='P') ? 'checked' : '' !!}>
                      <label class="form-check-label" for="partialPayment">
                        Partial Payment
                      </label>
                    </div>

                  </div>
                </div>
                @if(isset($package))
                @php $price=$package->price @endphp
                @else
                @php $price=0 @endphp
                @endif

                @if(isset($order) && isset($order->payments[0]))
                  @php $price=$order->payments[0]->price; @endphp
                  @else
                  @php $price=0; @endphp
                  @endif
                <div id="payAmount" class="mb-1 {{ ($type=='P') ? '' : 'd-none' }}">
                  <label for="amount">Amount</label>
                  <input id="amount" name="amount" type="number" class="form-control" value="{{$price}}">
                </div>
                <div id="order-package-btn-span" class="row">
                  <div class="col-6">
                    <h5>Total Price :
                      $<span id="total-price-span">{{ number_format($price, 2) }}</span></h5>
                  </div>
                </div>
                <div class="my-3">
                  <label for="transaction-id">Payment Status</label><br />
                  @if(isset($order) && isset($order->payments[0]))
                  @php $payment_status=$order->payments[0]->status; @endphp
                  @else
                  @php $payment_status='P'; @endphp
                  @endif
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" name="payment_status" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="P" {!! ($payment_status=='P' ) ? 'checked' : '' !!}>
                    <label class="form-check-label" for="inlineRadio1">Pending</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" name="payment_status" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="C" {!! ($payment_status=='C' ) ? 'checked' : '' !!}>
                    <label class="form-check-label" for="inlineRadio2">Canceled</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" name="payment_status" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="S" {!! ($payment_status=='S' ) ? 'checked' : '' !!}>
                    <label class="form-check-label" for="inlineRadio3">Completed</label>
                  </div>
                </div>

                <div class="form-group mb-3">
                  <label for="payment-type">Account</label>
                  @if(isset($order) && isset($order->account))
                  @php $account_id=$order->account->id; @endphp
                  @else
                  @php $account_id=0; @endphp
                  @endif
                  <select id="account_id" class="form-select" name="account_id" data-bs-toggle="tooltip" data-bs-original-title="Select Payment type.">
                    @foreach($accounts as $account)
                    <option value="{{$account->id}}" {!! ($account_id==$account->id) ? 'selected' : '' !!}>{{ $account->name.' (Acc No. '.$account->account_no.')' }}</option>
                    @endforeach
                  </select>
                </div>

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

          <div class="row">
            <div class="col-md-12 pt-3 text-center">
              @if(isset($package))
              @php $price=$package->price @endphp
              @else
              @php $price=0 @endphp
              @endif
              <input id="total-price" type="hidden" name="total_price" value="{{ $price }}">

              <input id="order-package-btn" type="submit" class="btn rounded-0 form-control" data-bs-toggle="tooltip" data-bs-original-title="Place your order." {!! ($action=='View' ) ? 'disabled' : '' !!} value="Place Order" />
              <!-- <button id="order-package-btn" type="submit" class="btn rounded-0 form-control" data-bs-toggle="tooltip" data-bs-original-title="Place your order." {!! ($action=='View' ) ? 'disabled' : '' !!}> -->
              <!-- <span id="order-package-btn-span">
                  Continue &nbsp;$<span id="total-price-span">{{ number_format($price, 2) }}</span>
                </span> -->
              <!-- </button> -->
            </div>
          </div>

        </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
          <a type="button" class="btn btn-light me-2 float-end save-draft" href="{{ route('orders.index') }}"> {!! ($action!='View') ? 'Cancel' : 'Back' !!}</a>
        </div>
      </div>
    </div>
  </div>
</form>
@endsection
@push('scripts')
<script>
  var package_price = 0;
  var total_price = 0;
  var no_of_tiffins = 0;
  var appliedDiscount = 0;

  $('#coupon-select').select2();
  $('.main-detail').addClass('d-none');
  // select customers
  $("#customer-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 packages
  function packageSelect() {
    $("#package-id").select2({
      ajax: {
        url: "{{ route('getPackages') }}",
        type: "get",
        dataType: 'json',
        delay: 250,
        data: function(params) {
          return {
            searchTerm: params.term // search term

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

          };
        },
        cache: true
      }
    });
  }
  $(document).ready(function() {

    $("order-form").submit(function() {
      $('#order-package-btn').prop('disabled', true);
      $('#order-package-btn').text('Processing...');
    });

    

    $('.businessDiv').hide();
    $('.unitDiv').hide();
    $('.buzzerDiv').hide();


    if ($('#address-type').val() && $('#address-type').val() != null) {
      address = $('#address-type').val();
      $('.unitDiv').hide();
      $('.businessDiv').hide();
      $('.buzzerDiv').hide();
      if (address != "house") {
        $('.unitDiv').show();
        if (address == "business") {
          $('.businessDiv').show();
        } else if (address == 'apartment') {
          $('.buzzerDiv').show();
        }
      }
    }

    $(document).on('change', '#address-type', function() {
      address = $(this).val();
      $('.unitDiv').hide();
      $('.businessDiv').hide();
      $('.buzzerDiv').hide();
      if (address != "house") {
        $('.unitDiv').show();
        if (address == "business") {
          $('.businessDiv').show();
        } else if (address == 'apartment') {
          $('.buzzerDiv').show();
        }
      }
    })

    $(document).on('change', '#coupon-select', function() {
      let x = $(this).val();

      $('.coupon-tr').addClass('d-none');

      if (x == null) {
        $('#apply-coupon-btn').addClass('d-none')
      } else {
        $('#apply-coupon-btn').removeClass('d-none');
        $('.coupon-id-' + x).removeClass('d-none');
      }
      $('#apply-coupon-btn').prop('disabled', false);
    });

    if ($('#customer-id').val() && $('#customer-id').val() != null) {
      let x = $('#customer-id').val();
      fetchCustomer(x);
    }


    $('#customer-id').change(function() {
      let x = $(this).val();

      fetchCustomer(x);
    });


    if ($('#package-id').val() && $('#package-id').val() != null) {
      let x = $('#package-id').val();
      fetchPackge(x);
    }

    $('#package-id').change(function() {
      let x = $(this).val();

      fetchPackge(x);
    });
  });

  $(document).on('click', '.paymentType', function() {
    console.log($(this).val());
    if ($(this).val() == 'P') {
      $('#payAmount').removeClass('d-none');
      $('#amount').prop('required', true);
      $('#order-package-btn-span').addClass('d-none');
    } else {
      $('#amount').prop('required', false);
      $('#payAmount').addClass('d-none');

      $('#order-package-btn-span').removeClass('d-none');
    }
  });

  // Fetch selected customer record.
  function fetchCustomer(x) {
    var url = "{{ route('users.fetch-customer', ['user' => 'arg1']) }}";
    url = url.replace('arg1', x);

    $.ajax({
      type: 'POST',
      url: url,
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      success: function(data) {
        if (data.status == true) {
          $('.main-detail').removeClass('d-none');
          $('#customer-details').html(data.html);
          $('#select-package-div').removeClass('d-none');

          packageSelect();
        } else {
          $('.main-detail').addClass('d-none');
          $('#customer-details').html('');
          $('#select-package-div').addClass('d-none');
        }
      }
    });
  }


  // Fetch selected package record.
  function fetchPackge(x) {
    var url = "{{ route('packages.fetch-package', ['package' => 'arg1']) }}";
    url = url.replace('arg1', x);

    $.ajax({
      type: 'POST',
      url: url,
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      success: function(data) {
        if (data.status == true) {
          $('#package-details-container').removeClass('d-none');
          $('#pane-2').removeClass('d-none');
          $('#package-details').html(data.html);

          total_price = $('#package-price').text();
          no_of_tiffins = parseInt($('#no-of-tiffins').text());

          $('[data-bs-toggle="tooltip"]').each(function() {
            new bootstrap.Tooltip(this);
          });
          $('#total-price-span').html(data.price);
          $('#total-price').val(data.price);
          // $('#place-order-section .card').css('min-height', '70vh');

          fetchCoupons();

          $('#payment-details-container').removeClass('d-none');

          // $('#pane-2').removeClass('d-none');
          // $('#payment-details').html(data);
        } else {
          $('#package-details-container').addClass('d-none');
          $('#pane-2').addClass('d-none');
          $('#package-details').html('');
          $('#payment-details-container').addClass('d-none');
        }
      }
    });
  }

  // Fetch all coupons that are active, not expired, not already assigned to given customer.
  function fetchCoupons() {
    var url = "{{ route('orders.fetch-coupons', ['customer' => 'arg1']) }}";
    url = url.replace('arg1', $('#customer-id').val());

    $.ajax({
      type: 'POST',
      url: url,
      data: {
        order_id: "{{$order_id}}"
      },
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      success: function(data) {
        $('#coupon-container').html(data);
        $('#coupon-select').select2();
      }
    });
  }


  function applyCoupon() {
    let selectedOption = $('#coupon-select option:selected');
    let couponAmount = $(selectedOption).attr('data-amount');
    let discountType = $(selectedOption).attr('data-discount-type');
    let discount = 0;

    $('#coupon-id').val(0);

    if (couponAmount != undefined && discountType != undefined) {
      $('#coupon-select').prop('disabled', true);
      $('#apply-coupon-btn').addClass('d-none');
      $('#remove-coupon-btn').removeClass('d-none');
      $('#coupon-id').val($(selectedOption).val());

      if (discountType == 'flat') {
        discount = couponAmount;
      } else {
        let t = total_price;
        discount = t / 100 * couponAmount;
      }

      appliedDiscount = discount;
      total_price = total_price - discount;

      $('#total-price-span').text(total_price);
      $('#total-price').val(total_price);
    }
  }

  function removeCoupon() {
    $('#coupon-id').val(0);

    $('#coupon-select').prop('disabled', false);
    $('#coupon-select').val(0).trigger('change');

    $('#apply-coupon-btn').removeClass('d-none');
    $('#remove-coupon-btn').addClass('d-none');

    total_price = Number(total_price) + Number(appliedDiscount);
    appliedDiscount = 0;

    $('#total-price-span').text(total_price);
    $('#total-price').val(total_price);
    $('#apply-coupon-btn').prop('disabled', true);
  }

  // function submitForm() {
  //   $('#order-package-btn').prop('disabled', true);
  //   $('#order-package-btn-span').text('Processing...');
  //   $('#order-form').submit();
  // }
  // $(document).on('click','#order-package-btn',function(e){
  //   e.preventDefault();
  //   $(this).prop('disabled',true);
  //   $(this).text('Processing...');
  // })
</script>
@endpush