@extends('master')
@section('icerik')
    <div class="row">
        @isset($request->rid)
        <div class="col-lg-12">
            <div class="alert-info alert">Lütfen filtreledikten sonra istediğiniz tarihi seçerek, randevuyu taşıyınız.</div>
        </div>
        @endisset
        <div class="col-lg-3">
            <div class="card">
                <div class="card-header"><i class="bx bx-filter"></i> Filtrele</div>
                <div class="card-body">

                    <form>
                        <input type="hidden" name="rid" value="{{ $request->rid }}">
                        <div class="row">
                            <div class="col-lg-12">
                                Lütfen Bölüm Seçiniz
                                <select name="bolum" id="bolum" class="form-select mb-2">
                                    <option value="">Bölümlerimiz</option>
                                    @foreach($bolumler as $item)
                                        <option @if($item->bolumid==$request->bolum) selected @endif value="{{ $item->bolumid }}">{{ $item->bolumismi }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-12">
                                Lütfen Doktor Seçiniz
                                <select name="calisan" id="calisan" class="form-select mb-2">
                                    <option value="">Doktor Seçiniz</option>
                                    @foreach($calisanlar as $item)
                                        <option value="{{$item->uid}}" @if($item->uid==$request->calisan) selected @endif data-bolumid="{{ $item->bolumid }}">{{ $item->isim }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-12">
                                İstediğiniz bir tarih varsa seçerek o günün randevularını görebilirsiniz

                                <input type="date" name="gun" class="form-control mb-2" value="{{ $request->gun }}" id="gun" onfocus="this.picker()">
                            </div>
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary form-control"><i class="bx bx-search"></i> Randevu Ara</button>
                            </div>
                        </div>
                    </form>

                </div>
                <script>


                    var bolumSelect = document.getElementById("bolum");
                    var calisanSelect = document.getElementById("calisan");

                    bolumSelect.addEventListener("change", function () {
                        $('#randevular').html('');
                        var selectedBolumId = bolumSelect.value;
                        var options = calisanSelect.getElementsByTagName("option");

                        for (var i = 0; i < options.length; i++) {
                            var option = options[i];
                            var bolumId = option.getAttribute("data-bolumid");

                            if (bolumId === selectedBolumId) {
                                option.style.display = "block";
                            } else {
                                option.style.display = "none";
                            }
                        }

                        var visibleOptions = calisanSelect.querySelectorAll("option[data-bolumid]:not([style*='none'])");
                        if (visibleOptions.length === 0) {
                            var noDoctorOption = document.createElement("option");
                            noDoctorOption.text = "Seçiniz";
                            noDoctorOption.value = -1;
                            calisanSelect.appendChild(noDoctorOption);
                        } else {
                            var existingNoDoctorOption = calisanSelect.querySelector("option[value='-1']");
                            if (existingNoDoctorOption) {
                                calisanSelect.removeChild(existingNoDoctorOption);
                            }
                        }

                        // Seçili elemanı "Seçiniz" olarak güncelle
                        calisanSelect.value = -1;
                        calisanSelect.selectedIndex = 0; // İlk seçeneği seçili hale getir
                    });




                </script>

                @isset($request->bolum)
                    <script>
                        function changeBolum(bolumid) {
                            $('#randevular').html('');
                            var selectedBolumId = bolumid;
                            var options = calisanSelect.getElementsByTagName("option");

                            for (var i = 0; i < options.length; i++) {
                                var option = options[i];
                                var bolumId = option.getAttribute("data-bolumid");

                                if (bolumId === selectedBolumId) {
                                    option.style.display = "block";
                                } else {
                                    option.style.display = "none";
                                }
                            }

                            var visibleOptions = calisanSelect.querySelectorAll("option[data-bolumid]:not([style*='none'])");
                            if (visibleOptions.length === 0) {
                                var noDoctorOption = document.createElement("option");
                                noDoctorOption.text = "Seçiniz";
                                noDoctorOption.value = -1;
                                calisanSelect.appendChild(noDoctorOption);
                            } else {
                                var existingNoDoctorOption = calisanSelect.querySelector("option[value='-1']");
                                if (existingNoDoctorOption) {
                                    calisanSelect.removeChild(existingNoDoctorOption);
                                }
                            }

                            // Seçili elemanı "Seçiniz" olarak güncelle
                            calisanSelect.value = -1;
                            calisanSelect.selectedIndex = 0; // İlk seçeneği seçili hale getir
                        }

                        // Kullanım örneği
                        bolumSelect.addEventListener("change", function () {
                            var selectedBolumId = bolumSelect.value;
                            changeBolum(selectedBolumId);
                        });

                        changeBolum('{{ $request->bolum }}');

                        $('#calisan').val('{{ $request->calisan }}');
                    </script>
                @endisset
            </div>
        </div>
        <div class="col-lg-9">
            <div class="card">
                <div class="card-header"><i class="bx bx-pin"></i> Boş Slotlar</div>
                <div class="card-body">
                    <div class="row">
                        @if(count($randevular)==0)
                            <div class="col-lg-12">
                                <div class="alert-warning alert"> Uygun randevu bulunamadı</div>
                            </div>

                        @endif
                    @foreach($randevular as $item)
                        <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12">
                            <div class="card slot">
                                <div class="card-header"> <i class="bx bx-id-card"></i> {{ $item->isim }}</div>
                                <div class="card-body">
                                  <i class="bx bx-calendar"></i>  {{ \Illuminate\Support\Carbon::createFromDate($item->tarih)->format('d/m/Y H:i') }}

                                </div>
                                <div class="card-footer">
                                    <div onclick="tasi('/admin/tasiok?rid={{ $request->rid }}&mid={{ $doktorubul->mid }}&yenirid={{ $item->rid }}')" class="btn btn-primary form-control"> <i class="bx bx-calendar-check"></i> Buraya Taşı</div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .slot {
            transition: transform 0.3s ease; /* Geçiş süresi ve animasyon türü */
        }

        .slot:hover {
            transform: scale(1.1); /* 1.2 zoom yapma */
        }

    </style>

@endsection
@section('title','Randevu Taşı')