@extends('layouts.app')
@section('urlContent')
    @php
        // GERI DONULECEK IDYI AL
        $offices = request()->segment(3);
        $branch = request()->segment(5);
    @endphp
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Firmalar' => '/root/offices',
            'Firma Bilgileri ve Şubeler' => '/root/offices/' . $offices . '#section_2',
            'Şube Bilgileri' => '/root/offices/' . $offices . '/branch/' . $branch,
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app relative">
        <div class="absolute top-0 left-1/2 right-1/2 flex justify-center gap-2 my-4">
            <button id="editButton" class="border-gray-300 text-gray-300 font-semibold px-2"
                onclick="changeFragment('section_1')">Düzenle</button>
            <button id="departButton" class="border-gray-300 text-gray-300 font-semibold px-2"
                onclick="changeFragment('section_2')">Departmanlar</button>
        </div>
        <div class="py-4">
            <div id="editArea">
                <div class="relative p-4 sm:p-8 shadow bg-theme_secondary_black sm:rounded-lg">
                    <div class="absolute top-3 right-3 flex gap-2">
                        @if ($branchOffice->approval_status == '1' || $branchOffice->approval_status == null)
                            @if ($branchOffice->status == '1')
                                <form method="POST" action="{{ route('root.deactiveBranchOffice', $branchOffice->id) }}"
                                    onsubmit="showLoading()">
                                    @csrf
                                    <button class="bg-red-500 button-3 text-sm">
                                        <i class="fa-solid fa-user-minus"></i>
                                        Pasife Al
                                    </button>
                                </form>
                            @elseif ($branchOffice->status == '0')
                                <form method="POST" action="{{ route('root.deactiveBranchOffice', $branchOffice->id) }}"
                                    onsubmit="showLoading()">
                                    @csrf
                                    <button class="bg-green-500 button-3 text-sm">
                                        <i class="fa-solid fa-user-plus"></i>
                                        Aktife Al
                                    </button>
                                </form>
                            @endif
                        @endif
                        @if ($branchOffice->approval_status == '2')
                            <button id="rejectButton" class="button-3 bg-red-700">
                                <i class="fa-solid fa-xmark"></i>
                                Reddet
                            </button>
                        @endif
                        <button id="serviceButton" class="button-3 text-sm">
                            <i class="fa-solid fa-gear"></i>
                            Hizmet Fiyatlandırması
                        </button>
                    </div>

                    <div>
                        <form method="post" action="{{ route('root.editBranch', [$branchOffice->id]) }}" class="space-y-6"
                            onsubmit="showLoading()">
                            @csrf
                            <div class="flex lg:flex-row flex-col gap-6">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Genel Merkez Seç</span>
                                    <select id="headOfficeSelect" class="block w-full input-1" name="head_office_id">
                                        <option selected disabled>Genel Merkez Seçiniz</option>
                                    </select>
                                </div>
                                <div class="py-2 flex flex-col justify-end lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Şube İsmi</span>
                                    <input type="text" class="input-1" id="size" name="branch_name"
                                        value="{{ $branchOffice->branch_name }}" />
                                </div>
                            </div>

                            <div class="flex lg:flex-row flex-col gap-6">
                                <div class="py-2 flex flex-col md:w-1/2">
                                    <span class="mb-2 text-md text-theme_white">Şubenin İli</span>
                                    <select id="city" name="branch_city" class="input-1">
                                        <option selected disabled>İl Seçin</option>
                                    </select>
                                </div>
                                <div class="py-2 flex flex-col md:w-1/2">
                                    <span class="mb-2 text-md text-theme_white">Şubenin İlçesi</span>
                                    <select id="district" name="branch_district" class="input-1">
                                        <option selected disabled>İlçe Seçin</option>
                                    </select>
                                </div>
                            </div>

                            <div class="flex lg:flex-row flex-col gap-6">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Şube Yetkilisi</span>
                                    <input type="text" class="input-1" id="size" name="branch_authorized_person"
                                        value="{{ $branchOffice->branch_authorized_person }}" />
                                </div>
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Şube Yetkili Ünvanı</span>
                                    <input type="text" class="input-1" id="kilo"
                                        name="branch_authorized_person_title"
                                        value="{{ $branchOffice->branch_authorized_person_title }}" />
                                </div>
                            </div>

                            <div class="flex md:flex-row flex-col gap-6">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Şube Yetkilisinin Emaili</span>
                                    <input type="text" class="input-1" name="email"
                                        value="{{ $branchOffice->email }}" />
                                </div>
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Şifre</span>
                                    <input type="text" class="input-1 password" name="password">
                                </div>
                            </div>

                            <div class="flex lg:flex-row flex-col gap-6">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Şube Yetkilisi Telefon Numarası</span>
                                    <input type="tel" class="input-1" name="branch_phone"
                                        value="{{ $branchOffice->branch_phone }}" />
                                </div>
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Güvenlik Mail Adresi</span>
                                    <input type="email" class="input-1" name="security_mail"
                                        value="{{ $branchOffice->security_mail }}" />
                                </div>
                            </div>

                            <div class="flex lg:flex-row flex-col gap-6">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <div class="relative flex gap-2 mb-2 text-lg text-theme_white">
                                        <span>
                                            Adres İçin Bağlantı
                                        </span>
                                        <div class="w-max" data-popover-target-second="124">
                                            <i class="cursor-pointer fa-solid fa-circle-info"></i>
                                        </div>
                                        <div popover-target-content="124" role="tooltip"
                                            class="absolute left-[200px] -top-20 z-20 invisible inline-block w-44 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0">
                                            <div class="px-3 py-2 font-semibold">
                                                <p>
                                                    1- Google Haritalardan adresinizi seçin
                                                </p>
                                                <p>
                                                    2- Paylaş butonuna tıklayıp <span class="underline">bağlantı
                                                        göndermeyi</span> seçin
                                                </p>
                                                <p>
                                                    3- Bağlantıyı kopyalayın ve bu alana yapıştırın
                                                </p>
                                            </div>
                                            <div data-popper-arrow></div>
                                        </div>
                                    </div>
                                    <input type="text" name="address_link" class="input-1"
                                        value="{{ $branchOffice->address_link }}">
                                </div>
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Genel Merkez Onayı</span>
                                    <select class="block w-full input-1" name="confirmation_check">
                                        <option @if ($branchOffice->confirmation_check === 1) selected @endif value="1">Gerekli
                                        </option>
                                        <option @if ($branchOffice->confirmation_check === 0) selected @endif value="0">Gerekli
                                            Değil
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="flex lg:flex-row flex-col gap-6">
                                <div class="py-2 flex flex-col md:w-1/2">
                                    <span class="mb-2 text-md text-theme_white">sicil numarasi</span>
                                    <select id="registiration_number" name="registiration_number" class="input-1">
                                        <option selected disabled value="{{ $branchOffice->registiration_id }}">Sicil No
                                            Seçin
                                            @foreach ($registirationNumbers as $number)
                                        <option {{ $branchOffice->registiration_id == $number->id ? 'selected' : '' }}
                                            value="{{ $number->id }}">{{ $number->registration_number }}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                            <div class="py-2 flex justify-between text-white md:w-1/2">
                                <span id="sicil_no">Sicil No:
                                    {{ $branchOffice->registiration?->registration_number }}</span>
                                <span id="sicil_desc">Açıklama: {{ $branchOffice->registiration?->description }}</span>
                                <span id="sicil_date">Tarih: {{ $branchOffice->registiration?->registiration_date }}</span>
                            </div>
                            <div class="flex lg:flex-row flex-col gap-6">
                                <div class="py-2 flex flex-col lg:w-1/2">
                                    <span class="mb-2 text-lg text-theme_white">Operasyoncu Seç</span>
                                    <select id="operationSelect" class="block w-full input-1" name="operation_user_id">
                                    </select>
                                </div>
                                <div class="py-2 flex flex-col lg:w-1/2">
                                </div>
                            </div>
                            @include('components.root.branchServicesEdit')
                            <div class="flex justify-end">
                                <button class="button-2">
                                    Kaydet
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div id="depart">
                <ol class="departList text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
                    <div class="flex justify-between">
                        {{-- filter --}}
                        <div>
                            <button
                                class="inline-flex items-center justify-between text-gray-600 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 font-medium rounded-lg text-sm px-3 py-1.5"
                                type="button" id="filterButton">
                                <svg class="w-3 h-3 text-gray-500 mr-2.5" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z" />
                                </svg>
                                Filtreler
                                <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 1 4 4 4-4" />
                                </svg>
                            </button>
                            <!-- filter dropdown -->
                            <div id="filterDropDown"
                                class="z-10 hidden w-48 bg-theme_secondary_white divide-y divide-gray-100 rounded-lg shadow absolute mt-2">
                                <ul class="p-3 space-y-1 text-sm text-gray-600">
                                    <li>
                                        <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                            <button
                                                class="filter-links inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                                data-status="2">
                                                Tümü
                                            </button>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                            <button
                                                class="filter-links inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                                data-status="1">
                                                Aktif
                                            </button>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                            <button
                                                class="filter-links inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                                data-status="0">
                                                Pasif
                                            </button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        {{-- search input --}}
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <svg class="w-5 h-5 text-gray-400" aria-hidden="true" fill="currentColor"
                                    viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <input type="text" id="search_departs"
                                class="block p-2 pl-10 text-sm text-gray-400 border border-gray-300 focus:outline-none rounded-lg w-80 bg-gray-50"
                                placeholder="Departman ara...">
                        </div>
                    </div>
                    <div class="overflow-y-auto h-[calc(100vh-240px)]">
                        @foreach ($departments as $department)
                            <li class="departRow relative flex space-x-6 py-6 bg-theme_secondary_black rounded-3xl p-8 mt-4"
                                style="">
                                @if ($department->customer_role == 'Company')
                                    <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                                        src="{{ getCdnFile($department->customer_user->headOffice->office_logo) }}">
                                @else
                                    <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                                        src="{{ getCdnFile($department->customer_user->branch->headOffice->office_logo) }}">
                                @endif
                                <a href="{{ route('root.editDepartmentIndex', ['department' => $department->id]) }}"
                                    class="w-full">
                                    <div class="flex-auto">
                                        <h3 class="pr-10 font-semibold xl:pr-0 text-gray-300 capitalize userFullName">
                                            {{ $department->name }}
                                        </h3>
                                        <dl class="mt-2 flex flex-col text-gray-400 xl:flex-row">
                                            <div class="mt-2 flex items-center space-x-3 xl:mt-0">
                                                <dt class="h-5 w-5 fill-gray-400 flex items-center justify-center">
                                                    <i class="fa-solid fa-phone"></i>
                                                </dt>
                                                <p class="text-gray-300 capitalize">
                                                    {{ $department->phone }}
                                                </p>
                                            </div>
                                            <div
                                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                                <dt class="h-5 w-5 fill-gray-400 flex items-center justify-center">
                                                    <i class="fa-solid fa-envelope"></i>
                                                </dt>
                                                <p class="text-gray-300">
                                                    {{ Str::limit($department->email, 25) }}
                                                </p>
                                            </div>
                                            <div
                                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                                <dt class="h-5 w-5 fill-gray-400 flex items-center justify-center">
                                                    <i class="fa-solid fa-user"></i>
                                                </dt>
                                                <p class="text-gray-300 capitalize">
                                                    {{ Str::limit($department->user->full_name, 25) }}
                                                </p>
                                            </div>
                                            <div
                                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                                <dt class="h-5 w-5 fill-gray-400 flex items-center justify-center">
                                                    <i class="fa-solid fa-money-bill-1"></i>
                                                </dt>
                                                <p class="text-gray-300">
                                                    @php
                                                        $payment_type = $department->payment_type;
                                                        if ($payment_type == 'hourly') {
                                                            $payText = 'Saatlik';
                                                        } elseif ($payment_type == 'daily') {
                                                            $payText = 'Günlük';
                                                        } elseif ($payment_type == 'monthly') {
                                                            $payText = 'Aylık';
                                                        }
                                                    @endphp
                                                    {{ $payText }}
                                                </p>
                                            </div>
                                            <div
                                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                                <dt class="h-5 w-5 fill-gray-400 flex items-center justify-center">
                                                    <i class="fa-solid fa-clock"></i>
                                                </dt>
                                                <p class="text-gray-300 capitalize">
                                                    @if ($department->customer_role == 'Company')
                                                        {{ $department->customer_user->headOffice->min_work_hour }}
                                                    @else
                                                        {{ $department->customer_user->branch->headOffice->min_work_hour }}
                                                    @endif
                                                </p>
                                            </div>
                                        </dl>
                                    </div>
                                </a>
                                <div class="flex gap-6 items-center text-gray-300">
                                    {{-- @php
                                    if ($branch->approval_status == '1' || $branch->approval_status == null) {
                                        if ($branch->status == '1') {
                                            $status = 'Aktif';
                                            $color = 'bg-green-500';
                                        } else {
                                            $status = 'Pasif';
                                            $color = 'bg-red-500';
                                        }
                                    } else {
                                        if ($branch->approval_status == '2') {
                                            $status = 'Onay Bekleniyor';
                                            $color = 'bg-orange-500';
                                        } elseif ($branch->approval_status == '1') {
                                            $status = 'Onaylandı';
                                            $color = 'bg-green-500';
                                        } else {
                                            $status = 'Reddedildi';
                                            $color = 'bg-red-500';
                                        }
                                    }
                                @endphp
                                <div class="relative flex items-center">
                                    <span class="pl-4 whitespace-nowrap">{{ $status }}</span>
                                    <span
                                        class="left-0 absolute inline-flex w-2 h-2 {{ $color }} animate-ping border-1 border-white rounded-full"></span>
                                    <span
                                        class="left-0 absolute inline-flex w-2 h-2 {{ $color }}  border-white rounded-full"></span>
                                </div>
                                @if ($branch->iframe)
                                    @include('components.iframe')
                                    <form action="{{ route('root.getMapsForBranches', [$branch->id]) }}#section_2"
                                        method="POST">
                                        @csrf
                                        <button
                                            class="inline-flex items-center px-2 py-1 rounded gap-2 font-medium text-white bg-blue-600">
                                            <i class="fa-solid fa-map-location-dot"></i>
                                            Harita
                                        </button>
                                    </form>
                                @endif
                                @if ($branch->user)
                                    <form action="{{ route('root.generateQr', [$branch->user->id]) }}" method="POST">
                                        @csrf
                                        <button
                                            class="inline-flex items-center px-2 py-1 rounded gap-2 font-medium text-white bg-blue-600">
                                            <i class="fa-solid fa-qrcode"></i>
                                            QR
                                        </button>
                                    </form>
                                @endif --}}
                                    {{-- <form method="POST" action="{{ route('root.deleteBranch', [$branch->id]) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button
                                        class="inline-flex items-center px-2 py-1 rounded gap-2 font-medium text-white bg-red-600">
                                        <i class="fa-solid fa-trash"></i>
                                        Sil
                                    </button>
                                </form> --}}
                                </div>
                            </li>
                        @endforeach
                        @if (count($departments) <= 0)
                            <x-noData>
                                <x-slot name="message">
                                    Hiç Veri Bulunamadı
                                </x-slot>
                            </x-noData>
                        @endif
                    </div>
                    <x-counter-div>
                        <x-slot name="countedData">
                            <span id="countedDatas">{{ count($departments) }}</span>
                        </x-slot>
                    </x-counter-div>
                </ol>
            </div>

        </div>
    </div>
    @include('components.root.rejectBranch')
    @include('components.root.makePasswordModal')
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $('.makePass').click(function() {
            $('.officeId').val($(this).val());
            var div = $(this).closest('div');
            var name = div.find('input').val();
            $('.name').text(name);
            $('.passwordModal').fadeIn();
        });

        $('.generatePass').click(function(e) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: "/root/password-generator",
                success: function(response) {
                    $('.password').val(response);
                }
            });
        });

        $('.save').click(function(e) {
            var branchId = $('.officeId').val();
            var password = $('.password').val();
            var csrfToken = $('meta[name="csrf-token"]').attr('content')
            $.ajax({
                type: "POST",
                url: "/root/saveBranchOfficePassword/" + branchId,
                data: {
                    password: password,
                    _token: csrfToken,
                },
                success: function(response) {
                    $('.success').text(response.message);
                    setTimeout(function() {
                        $('.passwordModal').fadeOut('slow');
                    }, 2000);
                }
            });
        });

        $(document).ready(function() {
            var cityData = @json($branchOffice->branch_city);
            var districtData = @json($branchOffice->branch_district);
            var operationId = @json($branchOffice->operation_user_id);
            var users = @json($users);
            var headOfficeId = @json($branchOffice->head_office_id);
            var headOffices = @json($headOffices);
            var headOfficeSelect = $('#headOfficeSelect');
            var operationSelect = $('#operationSelect');
            $.ajax({
                url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces',
                method: 'GET',
                success: function(response) {
                    var select = $('#city');
                    response.data.forEach(function(item) {
                        var option = $('<option>', {
                            value: item.name,
                            text: item.name
                        });

                        select.append(option);

                        $.map(option, function(cityDataOption, indexOrKey) {
                            if (cityDataOption.value === cityData) {
                                cityDataOption.selected = true;
                            }
                        });
                    });
                },
                error: function(error) {
                    console.log(error);
                }
            });
            $.ajax({
                url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces?name=' +
                    cityData,
                method: 'GET',
                success: function(response) {
                    var d_select = $('#district');

                    for (var i = 0; i < response.data[0].districts
                        .length; i++) {
                        var d_option = $('<option>', {
                            value: response.data[0].districts[i]
                                .name,
                            text: response.data[0].districts[i]
                                .name
                        });
                        d_select.append(d_option);
                        $.map(d_option, function(districtDataOption, indexOrKey) {
                            if (districtDataOption.value === districtData) {
                                districtDataOption.selected = true;
                            }
                        });
                    };
                },
                error: function(response) {
                    console.log('error', response);
                }
            });

            users.forEach(function(item) {
                var operationOption = $('<option>', {
                    value: item.id,
                    text: item.name
                });

                operationSelect.append(operationOption);
            });
            operationSelect.val(operationId)

            headOffices.forEach(function(item) {
                var headOfficeOption = $('<option>', {
                    value: item.id,
                    text: item.office_name
                });

                headOfficeSelect.append(headOfficeOption);
            });
            headOfficeSelect.val(headOfficeId)
        });

        $('#city').on('change', function() {
            updateDistricts();
        });

        function updateDistricts() {
            var selectedCity = $('#city').val();
            $('#district').empty();

            $.ajax({
                url: 'https://turkiyeapi.herokuapp.com/api/v1/provinces?name=' + selectedCity,
                method: 'GET',
                success: function(response) {
                    for (var i = 0; i < response.data[0].districts.length; i++) {
                        var d_option = $('<option>', {
                            value: response.data[0].districts[i].name,
                            text: response.data[0].districts[i].name
                        });
                        $('#district').append(d_option);
                    }
                },
                error: function(response) {
                    console.log('error', response);
                }
            });
        }

        $('#editButton').click(function() {
            $(this).addClass('border-b');
            $('#departButton').removeClass('border-b');
            $('#depart').slideUp();
            $('#editArea').slideDown();
        });

        $('#departButton').click(function() {
            $(this).addClass('border-b');
            $('#editButton').removeClass('border-b');
            $('#editArea').slideUp();
            $('#depart').slideDown();
        });

        $(document).ready(function() {
            var currentFragment = window.location.hash;
            if (currentFragment === '#section_1') {
                $('#depart').hide();
                $('#editArea').show();
                $('#editButton').addClass('border-b');
            } else if (currentFragment === '#section_2') {
                $('#editArea').hide();
                $('#depart').show();
                $('#departButton').addClass('border-b');
            }
        });

        function changeFragment(fragment) {
            window.location.hash = fragment;
        }

        $('#serviceButton').click(function() {
            $('#servicePopup').fadeIn();
        })

        $('.close-sevice-popup').click(function() {
            $('#servicePopup').fadeOut();
        })

        $('#rejectButton').click(function() {
            $('#rejectPopup').fadeIn();
        });

        $('.closeRejectPopup').click(function() {
            $('#rejectPopup').fadeOut();
        });

        // filtre
        document.getElementById('search_departs').addEventListener('input', function() {
            var searchText = this.value.toLowerCase();
            var departRows = document.querySelectorAll('.departRow');
            var countedData = document.getElementById('countedDatas');
            departRows.forEach(function(row) {
                var rowData = row.querySelector('.userFullName').textContent.toLowerCase();

                if (rowData.includes(searchText)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
            var visibleRows = document.querySelectorAll('.departRow[style=""]');
            countedData.textContent = visibleRows.length;
        });
        $('#registiration_number').change(function() {
            var id = $(this).val();
            $('#sicil_no').text('');
            $('#sicil_desc').text('');
            $('#sicil_date').text('');
            var registirationNumbers = @json($registirationNumbers);
            var selected = registirationNumbers.find(x => x.id == id);
            $('#sicil_no').text('Sicil No: ' + selected.registration_number);
            $('#sicil_desc').text('Açıklama: ' + selected.description);
            $('#sicil_date').text('Tarih: ' + selected.registiration_date);
        });
    </script>
@endsection