@extends('user.layout.master')
@section('body')

<div class=" p-6 bg-gray-100 flex ">
  <div class="container max-w-screen-lg mx-auto">
    <div>

      <div class="bg-white rounded shadow-lg p-4 px-4 md:p-8 mb-6">
        <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-3">
          <div class="text-gray-600 mb-2 text-center">
            <p class="font-medium text-lg">কমিশন রিপোর্ট</p>
          </div>

          
          <div class="lg:col-span-2">
            <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-6">
              
              <div class="md:col-span-1">
                <label for="type">ধরন :</label>
                <select name="type" id="type" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" required>
                    <option value="" selected>সিলেক্ট</option>
                    <option value="1">পন্য প্রতি</option>
                    <option value="2">মহাজন প্রতি</option>
                    <option value="3">ক্রেতা প্রতি</option>
                </select>
                @if($errors->has('type'))
                <span class="text-sm text-red-600">{{ $errors->first('type') }} </span>
                @endif
              </div>

              <div class="md:col-span-1 mohajon">
                <label for="mohajon_area">এরিয়া :</label>
                <select name="mohajon_area" id="mohajon_area" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" onchange="return getMohajonAddressByArea();" required>
                    <option value="" selected>সিলেক্ট</option>
                    @if($mohajon_setup)
                    @foreach($mohajon_setup as $b)
                    <option value="{{$b->area}}" >{{$b->area}}</option>
                    @endforeach
                    @endif
                </select>
              </div>

              <!-- mohajon -->
              
              <div class="md:col-span-2 mohajon">
                <label for="mohajon_address">ঠিকানা :</label>
                <select name="mohajon_address" id="mohajon_address" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" onchange="return getMohajonNameByAddress();" required>
                    <option value="" selected>সিলেক্ট</option>
                </select>
              </div>

              <div class="md:col-span-2 mohajon">
                <label for="mohajon_setup_id">মহাজনের নাম :</label>
                <select name="mohajon_setup_id" id="mohajon_setup_id" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" onchange=" getMarkaByMohajonId();" required>
                    <option value="" selected>সিলেক্ট</option>
                </select>
              </div>

              <!-- kreta -->

              <div class="md:col-span-1 kreta">
                <label for="kreta_area">এরিয়া :</label>
                <select id="kreta_area" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" onchange="getkretaAddressByArea();" required>
                    <option value="" selected>সিলেক্ট</option>
                    @if($kreta_setup)
                    @foreach($kreta_setup as $b)
                    <option value="{{$b->area}}">{{$b->area}}</option>
                    @endforeach
                    @endif
                </select>
              </div>
              
              <div class="md:col-span-2 kreta">
                <label for="kreta_address">ঠিকানা :</label>
                <select id="kreta_address" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" onchange="getKretaNameByAddress();" required>
                    <option value="" selected>সিলেক্ট</option>
                </select>
              </div>

              <div class="md:col-span-2 kreta">
                <label for="kreta_setup_id">ক্রেতার নাম :</label>
                <select name="kreta_setup_id" id="kreta_setup_id" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" required>
                    <option value="" selected>সিলেক্ট</option>
                </select>
                @if($errors->has('kreta_setup_id'))
                <span class="text-sm text-red-600">{{ $errors->first('kreta_setup_id') }} </span>
                @endif
              </div>

              <div class="md:col-span-2 ponno_div">
                <label for="ponno_setup_id">পন্যের নাম :</label>
                <select name="ponno_setup_id" id="ponno_setup_id" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" required>
                    <option value="0" selected>সকল</option>
                    @if($ponno_setup)
                    @foreach($ponno_setup as $b)
                    <option value="{{$b->id}}">{{$b->ponno_name}}</option>
                    @endforeach
                    @endif
                </select>
                @if($errors->has('ponno_setup_id'))
                <span class="text-sm text-red-600">{{ $errors->first('ponno_setup_id') }} </span>
                @endif
              </div>

              <div class="md:col-span-1">
                <label for="commission_type">ক্রেতা/মহাজন :</label>
                <select name="commission_type" id="commission_type" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" required>
                    <option value="0" selected>সকল</option>
                    <option value="1">ক্রেতা কমিশন</option>
                    <option value="2">মহাজন কমিশন</option>
                </select>
                @if($errors->has('type'))
                <span class="text-sm text-red-600">{{ $errors->first('type') }} </span>
                @endif
              </div>

              <div class="md:col-span-2">
                <label for="date_from">তারিখ শুরু :</label>
                <input datepicker datepicker-format="dd-mm-yyyy" type="text" name="date_from" id="date_from" class="h-10 border mt-1 rounded px-4 w-full bg-gray-100" value="" min="01-01-2020" readonly placeholder="তারিখ সিলেক্ট করুন" required/>
                @if($errors->has('date_from'))
                <span class="text-sm text-red-600">{{ $errors->first('date_from') }} </span>
                @endif
              </div>

              <div class="md:col-span-2">
                <label for="date_to">তারিখ শেষ :</label>
                <input datepicker datepicker-format="dd-mm-yyyy" type="text" name="date_to" id="date_to" class="h-10 border mt-1 rounded px-4 w-full bg-gray-100" value="" min="01-01-2020" readonly placeholder="তারিখ সিলেক্ট করুন" required/>
                @if($errors->has('date_to'))
                <span class="text-sm text-red-600">{{ $errors->first('date_to') }} </span>
                @endif
              </div>
      
              <div class="md:col-span-5 text-right">
                <div class="inline-flex items-end">
                  <button type="button" id="search" onclick="search();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">সার্চ</button>
                </div>
              </div>

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




<div class="mb-4">

</div>

<script>
  $(document).ready(function(){
    $('.ponno_div').hide();
    $('.mohajon').hide();
    $('.kreta').hide();
  })
  $('#type').change(function(){
    var type = this.value;
    if(type == 1){
      $('.ponno_div').show();
      $('.mohajon').hide();
      $('.kreta').hide();
    }
    else if(type == 2)
    {
      $('.ponno_div').hide();
      $('.mohajon').show();
      $('.kreta').hide();
    }
    else
    {
      $('.ponno_div').hide();
      $('.mohajon').hide();
      $('.kreta').show();

    }
  })


  function getMohajonAddressByArea()
    {
        var area = $('#mohajon_area').val();

        if(area != "")
        {
            $.ajax({
                type : 'POST',
                url : '{{url("getMohajonAddressByArea")}}',
                data : {
                    area : area,
                },
                success:function(response)
                {
                    $('#mohajon_address').html(response);
                }

            });
        }
    }

    function getMohajonNameByAddress()
    {
        var address = $('#mohajon_address').val();

        if(address != "")
        {
            $.ajax({
                type : 'POST',
                url : '{{url("getMohajonNameByAddress")}}',
                data : {
                    address : address,
                },
                success:function(response)
                {
                    $('#mohajon_setup_id').html(response);
                }

            });
        }
    }

    function getkretaAddressByArea()
    {
        var area = $('#kreta_area').val();

        if(area != "")
        {
            $.ajax({
                type : 'POST',
                url : '{{url("getkretaAddressByArea")}}',
                data : {
                    area : area,
                },
                success:function(response)
                {
                    $('#kreta_address').html(response);
                }

            });
        }
    }

    function getKretaNameByAddress()
    {
        var address = $('#kreta_address').val();

        if(address != "")
        {
            $.ajax({
                type : 'POST',
                url : '{{url("getKretaNameByAddress")}}',
                data : {
                    address : address,
                },
                success:function(response)
                {
                    $('#kreta_setup_id').html(response);
                }

            });
        }
    }

  function search()
  {
    var ponno_setup_id = $('#ponno_setup_id').val();
    var mohajon_setup_id = $('#mohajon_setup_id').val();
    var kreta_setup_id = $('#kreta_setup_id').val();
    var commission_type = $('#commission_type').val();
    var date_from = $('#date_from').val();
    var date_to = $('#date_to').val();
    var type = $('#type').val();
    if(date_from != "" && date_to != "" && type != "")
    {
      if(type == 1)
      {
        $.ajax({
      type : 'POST',
      url : '{{route("commission_report.search")}}',
      data :  {
        ponno_setup_id : ponno_setup_id,
        mohajon_setup_id : mohajon_setup_id,
        commission_type : commission_type,
        date_from : date_from,
        date_to : date_to,
        type : type
      },
      success : function(response)
      {
        var left = (screen.width - 800) / 2;
        var top = (screen.height - 700) / 4;

        var myWindow = window.open('','_blank',
        'resizable=yes, width=' + '800'
        + ', height=' + '700' + ', top='
        + top + ', left=' + left);
      
        myWindow.document.write(response.viewContent);

            
      },
      error: function(xhr, status, error) {
        console.error(error);
      }
      })
      }
      else if(type == 2)
      {
        $.ajax({
        type : 'POST',
        url : '{{route("commission_report.search")}}',
        data :  {
          ponno_setup_id : ponno_setup_id,
          mohajon_setup_id : mohajon_setup_id,
          commission_type : commission_type,
          date_from : date_from,
          date_to : date_to,
          type : type
        },
        success : function(response)
        {
          var left = (screen.width - 800) / 2;
          var top = (screen.height - 700) / 4;

          var myWindow = window.open('','_blank',
          'resizable=yes, width=' + '800'
          + ', height=' + '700' + ', top='
          + top + ', left=' + left);
        
          myWindow.document.write(response.viewContent);

              
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
        })
      }
      else if(type == 3)
      {
        $.ajax({
        type : 'POST',
        url : '{{route("commission_report.search")}}',
        data :  {
          ponno_setup_id : ponno_setup_id,
          kreta_setup_id : kreta_setup_id,
          commission_type : commission_type,
          date_from : date_from,
          date_to : date_to,
          type : type
        },
        success : function(response)
        {
          var left = (screen.width - 800) / 2;
          var top = (screen.height - 700) / 4;

          var myWindow = window.open('','_blank',
          'resizable=yes, width=' + '800'
          + ', height=' + '700' + ', top='
          + top + ', left=' + left);
        
          myWindow.document.write(response.viewContent);

              
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
        })
      }
      else
      {
        swal('ধরন সিলেক্ট করুন')
      }
      
    }
    else
    {
      swal('সঠিক তথ্য ইনপুট করুন')
    }
    
  }



  $( function() {
    $( "#date_from" ).datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      maxDate: new Date(),
    });

    $("#date_to").datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        maxDate: new Date(),
        onSelect: function() {
            var fromDate = $("#date_from").datepicker("getDate");
            var toDate = $(this).datepicker("getDate");

            if (fromDate !== null && toDate !== null && fromDate > toDate) {
                swal("সঠিক তারিখ ইনপুট করুন");
                $(this).val("");
            }
        }
    });
});
</script>


@endsection