<form>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="jumbotron">
                    <h5>
                        FILTRELEME
                    </h5>
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group ">
                                <label class="control-label " for="mtipi">
                                    Müşteri Tipi
                                </label>
                                <select class="select form-control" id="mtipi" name="mtipi">
                                    <option value="ADAY MÜŞTERİ">
                                        ADAY MÜŞTERİ
                                    </option>
                                    <option value="ATIL MÜŞTERİ">
                                        ATIL MÜŞTERİ
                                    </option>
                                    <option value="ASIL MUSTERI">
                                      ASIL MÜŞTERİ
                                    </option>
                                    <option value="PASIF MÜŞTERİ">
                                        PASİF MÜŞTERİ
                                    </option>
                                    <option selected="selected" value="">
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="profileCompany">Sorumlu Kişi *</label>
                                <select class="select form-control" id="sorumlu" name="sorumlu">
                                    <option></option>
                                    @foreach($tbluser as $kul)
                                    <option value="{{$kul->adsoyad}}">{{$kul->adsoyad}}</option>
                                    @endforeach:
                                </select>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group ">
                                <label class="control-label " for="min">
                                    Baş. Tarih
                                </label>
                                <input class="form-control" id="min" name="min" type="date" placeholder="MM.DD.YYYY"
                                    value="01.01.2000" />
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group ">
                                <label class="control-label " for="max">
                                    Bit.Tarihi
                                </label>
                                <input class="form-control" id="max" name="max" type="date" placeholder="MM.DD.YYYY"
                                    type="text" value="01.01.2023" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4">
                            <div class="form-group">
                                <label for="profileCompany">Kaynak</label>
                                <select class="form-control form-control-sm" id="kaynaka" name="kaynaka">
                                    <option value=""></option>
                                    @foreach($referans_ust as $refx)
                                    <option value="{{$refx->adi}}">{{$refx->adi}}</option>
                                    @endforeach:
                                </select>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label for="profileCompany">Kaynak Detay *</label>
                                <select class="form-control form-control-sm" id="kaynak" name="kaynak" required>
                                    <option></option>
                                    @foreach($referans as $refx)
                                    <option value="{{$refx->adi}}" data-tip="{{$refx->tipid}}">{{$refx->adi}}</option>
                                    @endforeach:
                                </select>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label for="profileCompany">Kaynak Alt Detay</label>
                                <input class="form-control form-control-sm" id="kaynakalt" name="kaynakalt" />
                            </div>
                        </div>
                    </div>
                    <!-- <div class="form-group">
      <div>
       <button class="btn btn-primary btn-block" name="submit" type="submSearchit">
        Search
       </button>
      </div> -->
</form>
</div>
</div>
</div>
</div>
<table id="example" class="table table-bordered table-hover table-striped mb-4">
    <thead>
        <th>#</th>
        <th style="width: 10px; ">Ünvan</th>
        <th>Müşteri Türü</th>
        <th>Şirket</th>
        <th>Sorumlu</th>
        <th>Baş.Tarihi</th>
        <th>Bit.Tarihi</th>
        <th>Şehir</th>
        <th>Kaynak</th>
        <th>Kaynak Türü</th>
        <th>Alt Kaynak</th>
        </tr>
    </thead>
</table>
<!-- partial -->
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
    var dataTable = $('#example').DataTable({
      
        "ajax": {
            "url": "//safehome.arzen.net/Api/MusteriList.php",
            "data": function(d) {
                // Add the start and end dates as URL parameters
                d.start_date = $('#min').val();
                d.end_date = $('#max').val();
            }
        },
        "columns": [{
                "data": "id",
                "render": function(data, type, row, meta) {
                    return '<a href="//safehome.arzen.net/Musteri/MusteriDetay/' + data + '">' +
                        data + '</a>';
                }
            },
            {
                "data": "name"
            },
            {
                "data": "kategori"
            },
            {
                "data": "sube"
            },
            {
                "data": "sorumlu"
            },
            {
                "data": "eklemetarihi"
            },
            {
                "data": "eklemetarihi"
            },
            {
                "data": "sehir"
            },
            {
                "data": "kaynak"
            },
            {
                "data": "kaynaka"
            },
            {
                "data": "kaynakalt"
            }
        ],
        "pageLength": 10,
        "scrollX": true,
    });
    
});
// Sayfa yüklendiğinde
$(document).ready(function() {
    // DataTable'ı oluştur
    var table = $('#example').DataTable();
    // "mtipi" ve "sorumlu" select elemanları değiştiğinde
    $('#mtipi, #sorumlu,#kaynak,#kaynaka,#kaynakalt').on('change', function() {
        var mtipi = $('#mtipi').val();
        var sorumlu = $('#sorumlu').val();
        var min = $('#min').val();
        var max = $('#max').val();
        var kaynak = $('#kaynak').val();
        var kaynaka = $('#kaynaka').val();
        var kaynakalt = $('#kaynakalt').val();
        // Tablodaki "mtipi" ve "sorumlu" sütunlarına filtre uygula
        table.columns([2, 4, 5, 6, 8, 9, 10]).search('').draw();
        if (mtipi != '') {
            table.column(2).search(mtipi).draw();
        }
        if (sorumlu != '') {
            table.column(4).search(sorumlu).draw();
        }
        // if (min != '') {
        //   table.column(5).search(min).draw();
        // }
        if (kaynak != '') {
            table.column(7).search(kaynak).draw();
        }
        if (kaynaka != '') {
            table.column(8).search(kaynaka).draw();
        }
        if (kaynakalt != '') {
            table.column(9).search(kaynakalt).draw();
        }
    });
});
 
</script>