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

<form action="{{route('reminder.store')}}" id="form_data" method="POST">
@csrf

<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-5">
              
              <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="মহাজন">মহাজন</option>
                    <option value="ক্রেতা">ক্রেতা</option>
                    <option value="আমানত/হাওলাত">আমানত/হাওলাত</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 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();">
                    <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();">
                    <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="getMohajonOwnerByMohajonId();">
                    <option value="" selected>সিলেক্ট</option>
                </select>
              </div>

              <div class="md:col-span-2 mohajon">
                <label for="mohajon_owner_setup_id">মহাজনের মালিক :</label>
                <select name="mohajon_owner_setup_id" id="mohajon_owner_setup_id" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50">
                    <option value="" selected>সিলেক্ট</option>
                </select>
                @if($errors->has('mohajon_owner_setup_id'))
                <span class="text-sm text-red-600">{{ $errors->first('mohajon_owner_setup_id') }} </span>
                @endif
              </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();">
                    <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();">
                    <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">
                    <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 amanot_hawlat">
                <label for="amanot_address">ঠিকানা :</label>
                <select id="amanot_address" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" onchange="return getAmanotNameByAddress();">
                    <option value="" selected>সিলেক্ট</option>
                    @if($amanot_setup)
                    @foreach($amanot_setup as $v)
                    <option value="{{$v->address}}">{{$v->address}}</option>
                    @endforeach
                    @endif
                </select>
                @if($errors->has('amanot_address'))
                <span class="text-sm text-red-600">{{ $errors->first('amanot_address') }} </span>
                @endif
              </div>

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

              <div class="md:col-span-3">
                <label for="description">রিমাইন্ডারের বিবরন :</label>
                <textarea name="description" id="description" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50"  required></textarea>
                @if($errors->has('description'))
                <span class="text-sm text-red-600">{{ $errors->first('description') }} </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="submit" id="save" 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>

</form>


<div class="mb-4">

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">

<div class="xl:w-10/12 lg:w-11/12 w-full mx-auto p-4 relative overflow-x-auto shadow-lg sm:rounded-lg bg-white mb-6">
  <p class="text-lg text-gray-700 uppercase px-6 py-3 font-bold text-center barlow">এড কার্ট</p>
  <table id="" class="w-full text-sm text-left text-gray-500 dark:text-gray-400 data-table">
  <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
              <th>
                নং
              </th>
                <th scope="col" class="px-6 py-3">
                    ধরন
                </th>
                <th scope="col" class="px-6 py-3">
                    নাম
                </th>
                <th scope="col" class="px-6 py-3">
                    বিবরন
                </th>
                <th scope="col" class="px-6 py-3">
                    তারিখ শুরু
                </th>
                <th scope="col" class="px-6 py-3">
                    তারিখ শেষ
                </th>
                <th scope="col" class="px-6 py-3">
                    স্টেটাস
                </th>
            </tr>
        </thead>
        <tbody id="table_body">
           
        </tbody>
    </table>

</div>
</div>


<script type="text/javascript">

$(document).ready(function(){
    $('.amanot_hawlat').hide();
    $('.mohajon').hide();
    $('.kreta').hide();
  })
  $('#type').change(function(){
    var type = this.value;
    if(type === 'আমানত/হাওলাত'){
      $('.amanot_hawlat').show();
      $('.mohajon').hide();
      $('.kreta').hide();
    }
    else if(type === 'মহাজন')
    {
      $('.amanot_hawlat').hide();
      $('.mohajon').show();
      $('.kreta').hide();
    }
    else if(type === 'ক্রেতা')
    {
      $('.amanot_hawlat').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 getMohajonOwnerByMohajonId()
    {
        var mohajon_setup_id = $('#mohajon_setup_id').val();

        if(mohajon_setup_id != "")
        {
            $.ajax({
                type : 'POST',
                url : '{{url("getMohajonOwnerByMohajonId")}}',
                data : {
                  mohajon_setup_id : mohajon_setup_id,
                },
                beforeSend: function() {
                    $('#mohajon_owner_setup_id').html('<option value="">অপেক্ষা করুন</option>');
                },
                success:function(response)
                {
                    $('#mohajon_owner_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 getAmanotNameByAddress()
    {
        var address = $('#amanot_address').val();

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

            });
        }
    }

    function loadCurrentData()
    {
      $(function () {

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            "language": {
              "emptyTable": "ডাটা পাওয়া যায়নি",
              "search": "সার্চ করুন : ",
              "info":  "",
              "infoEmpty":   "",
              "infoFiltered":   "",
              "lengthMenu":     "_MENU_টি এন্ট্রি দেখুন",
              "loadingRecords": "লোড হচ্ছে...",
              "zeroRecords":    "রেকর্ড পাওয়া যায়নি",
              "paginate": {
                  "first":      "প্রথম",
                  "last":       "শেষ",
                  "next":       "পরবর্তি",
                  "previous":   "পুর্বে"
              },
            },
            ajax: "{{ route('reminder.index') }}",
            columns: [
                {data: 'sl', name: 'sl'},
                {data: 'type', name: 'type'},
                {data: 'name', name: 'name'},
                {data: 'description', name: 'description'},
                {data: 'date_from', name: 'date_from'},
                {data: 'date_to', name: 'date_to'},
                {data: 'status', name: 'status'},
            ]
        });

        });
    }

    loadCurrentData();

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

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

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

    function reminderStatusChange(id)
    {
      if(id > 0)
      {
        var message =@json(__ ('স্ট্যাটাস পরিবর্তন হয়েছে'));
        var  message_type = @json(__ ('সফল'));

        $.ajax({
          header : {
            'X-CSRF-TOKEN' : '{{ csrf_token() }}'
          },

          url : '{{url('reminderStatusChange')}}/'+id,
          type : 'GET',
          success:function(data)
          {
            toastr.success(message, message_type);
          }
        })
      }
    }

    $('#save').on('click',function(e){

      $('#save').text('অপেক্ষা করুন ...');

    });
    
  </script>
@endsection