@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Şubeler' => '/company/branches',
            'Şube Düzenle' => '/company/edit/branch/' . $branchOffice->id,
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <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('company.changeBranchStatus', $branchOffice->id) }}" onsubmit="showLoading()">
                                    @csrf
                                    <button
                                        class="bg-red-500 button-3 text-sm">
                                        Pasife Al
                                    </button>
                                </form>
                            @elseif ($branchOffice->status == '0')
                                <form method="POST" action="{{ route('company.changeBranchStatus', $branchOffice->id) }}" onsubmit="showLoading()">
                                    @csrf
                                    <button
                                        class="bg-green-500 button-3 text-sm">
                                        Aktife Al
                                    </button>
                                </form>
                            @endif
                        @endif
                    </div>
                    <form method="post" action="{{ route('company.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 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>

                        <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 Yetkili Ünvanı</span>
                                <input type="text" class="input-1" id="kilo" name="branch_authorized_person_title"
                                    value="{{ $branchOffice->branch_authorized_person_title }}" />
                            </div>
                            <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>

                        <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 Yetkilisi Telefon Numarası</span>
                                <input type="tel" class="input-1" name="branch_phone"
                                    value="{{ $branchOffice->branch_phone }}" />
                            </div>
                            <div class="relative 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">
                                <button type="button" data-popover-target="999"
                                    class="absolute bottom-[15px] right-2 generatePass">
                                    <i class="fa-solid fa-arrows-rotate"></i>
                                </button>
                                <div data-popover="999" role="tooltip"
                                    class="absolute right-[-80px] bottom-[60px] z-[500] 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>Güçlü bir şifre oluştur</p>
                                    </div>
                                    <div data-popper-arrow></div>
                                </div>
                            </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">Güvenlik Mail Adresi</span>
                                <input type="email" class="input-1" name="security_mail"
                                    value="{{ $branchOffice->security_mail }}" />
                            </div>
                            <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>

                        {{-- <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 İframe
                                    </span>
                                    <div class="w-max" data-popover-target-second="123">
                                        <i class="cursor-pointer fa-solid fa-circle-info"></i>
                                    </div>
                                    <div popover-target-content="123" role="tooltip"
                                        class="absolute left-[190px] -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">harita
                                                    yerleştirmeyi</span> seçin
                                            </p>
                                            <p>
                                                3- HTML'yi kopyalayın ve bu alana yapıştırın
                                            </p>
                                        </div>
                                        <div data-popper-arrow></div>
                                    </div>
                                </div>
                                <input type="text" name="iframe_address" class="input-1"
                                    value="{{ $branchOffice->iframe_address }}">
                            </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">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> --}}

                        <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 Onayı</span>
                                <select class="block w-full input-1" name="confirmation_check">
                                    {{-- <option selected disabled>Durum Seçiniz</option>
                                    <option value="1">Evet</option>
                                    <option value="0">Hayır</option> --}}
                                    @if ($branchOffice->confirmation_check == 1)
                                        <option selected value="1">Gerekli</option>
                                        <option value="0">Gerekli Değil</option>
                                    @else
                                        <option value="1">Gerekli</option>
                                        <option selected value="0">Gerekli Değil</option>
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="flex justify-end">
                            <button class="button-2">
                                Kaydet
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @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);

            $.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);
                }
            });
        });

        $('#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);
                }
            });
        }
    </script>
@endsection
{{-- // 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'); --}}
{{-- 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) --}}