@extends('app')
@section('content')
    <div class="page-title"><a href="{{ URL::previous() }}"><i class="icon-custom-right"></i></a>
        <h3>طلب التغيير - <span class="semi-bold">تحرير </span></h3>
    </div>
    <div class="pull-left">


    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="grid simple">
                <div class="grid-title c-page-title">
                    <span>طلب التغيير </span>
                </div>
                <div class="grid-body">
                    @if ($majlis->status == 'pending')
                        <a href="javascript:void(0)" class="btn btn-primary btn-cons" id="save_majlisEditRequest">حفظ</a>
                    @endif
                    <form method="POST" action="{{ route('admin.majlis.updateRequest', $majlis->id) }}" id="form_majlis"
                        enctype="multipart/form-data">
                        @csrf

                        <input type="hidden" name="save_now" id="save_now" value="false" />
                        <input type="hidden" name="screen" value="edit_request" />
                        <input type="hidden" name="majlis_id" id="majlis_id" value="{{ $majlis?->majlis_id }}">
                        <input type="hidden" name="majlisRequest_id" id="majlisRequest_id" value="{{ $majlis?->id }}">
                        <input type="hidden" name="owner_member_id" class="owner_member_id"
                            value="{{ $majlis?->majlisOwner?->id }}">
                        <input type="hidden" name="manager_member_id" class="manager_member_id"
                            value="{{ $majlis?->majlisManager?->id }}">
                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">

                                <span>
                                    {{ $majlis->request_id }}
                                </span>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label style="font-weight:bold;">
                                    رقم الاستمارة
                                </label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">

                                <span>
                                    {{-- {{ $majlis->majlisPerson() }} --}}
                                    {!! $majlis->majlisPerson ? $majlis->majlisPerson->full_name_w_i() : '' !!}
                                </span>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label style="font-weight:bold;">
                                    المرسل
                                </label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                <div class="radio-group" style="display:flex; gap:20px; align-items:center;">
                                    <div class="radio">
                                        <input type="radio" value="majlis" name="event_type" id="event_majlis"
                                            {{ $majlis->type == 'majlis' ? 'checked' : '' }}>
                                        <label for="event_majlis" class="f-s-15">مجلس</label>
                                    </div>

                                    <div class="radio">
                                        <input type="radio" value="munasaba" name="event_type" id="event_mansab"
                                            {{ $majlis->type == 'munasaba' ? 'checked' : '' }}>
                                        <label for="event_mansab" class="f-s-15">مناسبة</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label class="form-label">تحديد نوع المجلس</label>
                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                <input type="text" name="title" id="title_field" class="form-control f-s-15" required
                                    value="{{ old('title', $majlis->title ?? '') }}">
                                <span class="help">
                                    <span id="char_count_title">100</span> الحروف المتبقية
                                </span>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label style="font-weight:bold;">
                                    عنوان المجلس <span style="color:red">*</span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-10 col-md-offset-1">
                                <div class="padding-20">
                                    <h3 class="text-center semi-bold">صاحب المجلس</h3>
                                </div>

                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                <div style="background-color:#e5e9ec;height:30px;width:487px;">
                                    <label class="owner-name" style="padding:5px;text-align: right;">
                                        {!! $majlis->majlisOwner ? $majlis->majlisOwner->full_name_w_i() : '' !!}
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label" style="font-weight: bold;">إضافة مالك المنزل / المجلس <span
                                        style="color:red">*</span></label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                <button type="button" id="owner_add"
                                    class="btn btn-primary btn-lg open-model-btn btn-cons">إختيار
                                    الشخصية</button>
                                <button id="owner_name_hide" style="display:none" type="button"
                                    class="btn btn-warning btn-lg btn-cons">مسح</button>
                            </div>
                            <div class="col-md-2"></div>
                        </div>

                        <div class="col-md-6 col-md-offset-3 col-sm-12" style="margin-bottom: 20px">
                            <!-- Label -->
                            <label class="form-label">هل يرغب صاحب المجلس من ادارة مجلسه؟ <span
                                    style="color:red">*</span></label>

                            <!-- Explanatory text -->
                            <div class="text-right mb-2">
                                <p class="mb-0" style="font-size:14px;padding-left;10px">في حال الجواب بنعم سوف تتمكن من
                                    ادارة المجلس
                                    عبر التطبيق. وفي
                                    حال الجواب بلا يمكنك اختيار الشخص المسؤول عن المجلس وسوف يتمكن من ادارته من خلال
                                    التطبيق، وفي حال لم
                                    يتم اضافة شخص مسؤول عن المجلس سوف يتم التحكم من المجلس من ادارة التطبيق فقط</p>
                            </div>

                            <!-- Radio buttons -->

                            <div class="radio-group" style="display:flex; gap:20px; align-items:center;">
                                <div class="radio">
                                    <input type="radio" value="yes" name="owner_manage_majlis" id="manage_yes"
                                        {{ $majlis->owner == $majlis->manager ? 'checked' : '' }}>
                                    <label for="manage_yes" class="f-s-15">نعم</label>
                                </div>

                                <div class="radio">
                                    <input type="radio" value="no" name="owner_manage_majlis" id="manage_no"
                                        {{ $majlis->owner != $majlis->manager ? 'checked' : '' }}>
                                    <label for="manage_no" class="f-s-15">لا</label>
                                </div>
                            </div>

                        </div>


                        <div class="form-group row" id="manager_container">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                <div style="background-color:#e5e9ec;height:30px;width:487px;">
                                    <label class="manager-name" style="padding:5px;text-align: right;">
                                        {!! $majlis->majlisManager ? $majlis->majlisManager->full_name_w_i() : '' !!}
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label" style="font-weight: bold;">إضافة الشخص المسؤول </label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                <button type="button" id="manager_add" style="display:none"
                                    class="btn btn-primary btn-lg open-model-btn btn-cons">إختيار
                                    الشخصية</button>
                                <button id="manager_name_hide" style="display:none" type="button"
                                    class="btn btn-warning btn-lg btn-cons">مسح</button>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                        <div class="form-group row">
                            <!-- Mobile Number -->
                            <div class="right col-md-5 col-md-offset-4 col-sm-12">
                                <input type="text" name="mobile" value="{{ $majlis?->phone_number }}"
                                    class="form-control  number-only" placeholder="9665XXXXXXXX" maxlength="15"
                                    pattern="[0-9]{1,}" required title="Mobile number can only contain numbers">
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label" style="font-weight: bold;">الهاتف المتحرك <span
                                        style="color:red">*</span></label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <!-- Mobile Number -->
                            <div class="right col-md-5 col-md-offset-4 col-sm-12">
                                <input type="text" name="whatsapp" value="{{ $majlis?->whatsapp }}"
                                    class="form-control  number-only" placeholder="9665XXXXXXXX" maxlength="15"
                                    pattern="[0-9]{1,}" title="Whatsapp number can only contain numbers">
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label" style="font-weight: bold;">واتس اب</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-10 col-md-offset-1">
                                <div class="padding-20">
                                    <h3 class="text-center semi-bold"> معلومات موقع المجلس</h3>
                                </div>

                            </div>
                        </div>


                        <div class="form-group row">
                            <!-- Mobile Number -->
                            <div class="right col-md-5 col-md-offset-4 col-sm-12">
                                <select name="country" class="form-control" id="country_select">
                                    <option value="">Select country</option>
                                    @foreach ($countries as $key => $country)
                                        <option value="{{ $key }}"
                                            {{ $majlis && $majlis->country == $key ? 'selected' : '' }}>
                                            {{ $country }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label style="font-weight:bold;">البلد<span style="color:red">*</span></label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <!-- Mobile Number -->
                            <div class="right col-md-5 col-md-offset-4 col-sm-12">
                                <select name="city" class="form-control" id="city_select">
                                    <option value="">Select city</option>
                                </select>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label style="font-weight:bold;">المدينة<span style="color:red">*</span></label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <!-- Mobile Number -->
                            <div class="right col-md-5 col-md-offset-4 col-sm-12">
                                <input type="text" name="address" id="address_field" class="form-control f-s-15"
                                    required value="{{ old('address', $majlis->address ?? '') }}">
                                <span class="help">
                                    <span id="char_count_address">100</span> الحروف المتبقية
                                </span>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label for="address_field" style="font-weight:bold;">
                                    الحيّ <span style="color:red">*</span>
                                </label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="row  p-b-0 map-container" style="padding-top: 0;" id="map">
                                    <div class="col-md-12 col-sm-12 text-right" style="padding-right:30px ">
                                        <p>الرجاء تحديد مكان الموقع المذكور في الخريطة ومن ثم التأكيد</p>
                                    </div>
                                    <div class="col-md-12 map-box">
                                        <input type="hidden" id="lat_input" name="lat"
                                            value="{{ $majlis->lat ?? '' }}">
                                        <input type="hidden" id="lng_input" name="lng"
                                            value="{{ $majlis->long ?? '' }}">

                                        <input id="pac-input" class="controls pac-input" type="text"
                                            placeholder="Search Box" style="width: 200px;">
                                        <div class="form-group" id="location_map" style="width: 100%;height: 300px;">
                                        </div>
                                        <div class="row">
                                            <div class="text-right col-md-12 col-sm-12">
                                                <a href="javascript:void(0)" class="btn btn-success"
                                                    id="clear_marker">مسح علامة الموقع</a>
                                                <a href="javascript:void(0)" class="btn btn-success"
                                                    onclick="copyMapLink()">نسخ رابط
                                                    الموقع</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- Bottom Actions --}}
                        <div class="form-actions" style="margin-left:-13px;margin-right:-13px;padding-bottom:13px;">
                            <div class="pull-left">

                                <a href="{{ url('/admin/majlis/' . request('type') . '?screen=edit_request') }}"
                                    class="btn btn-info btn-cons">إلغاء</a>


                            </div>

                            <div class="pull-right">
                                <button type="button" id="del" class="btn btn-danger request-action-link"
                                    data-type="delete"
                                    data-url="{{ route('admin.majlis.deleteEditRequest', ['id' => $majlis->id, 'screen' => 'edit_request']) }}"
                                    data-message="هل أنت متأكد من الحذف؟">حذف</button>
                                @if ($majlis->status == 'pending')
                                    <button type="button" id="edit_request_reject"
                                        class="btn btn-primary request-action-link" data-type="reject"
                                        data-url="{{ route('admin.majlis.rejectEditRequest', ['id' => $majlis->id, 'screen' => 'edit_request']) }}"
                                        data-message="هل أنت متأكد من رفض طلب التغيير؟">رفض
                                        الطلب</button>
                                    <button type="button" id="edit_request_accept"
                                        class="btn btn-primary request-action-link" data-type="accept"
                                        data-message=" هل أنت متأكد من قبول طلب التعديل؟ سيتم نسخ جميع التغييرات إلى المجلس المطلوب، ولا يمكن التراجع عن هذا الإجراء بعد التنفيذ.">قبول
                                        الطلب</button>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include('admin.majlis.addPersonPopup', ['family_peoples' => $family_peoples])
    @include('admin.majlis.confirmationPopup')
@endsection
@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        $('#save_majlisEditRequest').click(function(e) {
            $('#save_now').val('true');
            $('#progressbar').show();
            $('#form_majlis').trigger('submit');
        });


        let owner_is_manager = "true";
        let ownerNodeId = $(".owner_member_id").val();
        let managerNodeId = $(".manager_member_id").val();
        if (ownerNodeId != managerNodeId) {
            owner_is_manager = "false";
        }
        $(document).ready(function() {
            $('#owner_name_hide').show();
            $('.number-only').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, ''); // only digits
            });
        });
        $('.open-model-btn').click(function() {
            $('#myModal').modal('show');
        });
        let currentPersonButtonClicked;

        $("#manager_add").click(function() {
            currentPersonButtonClicked = "manager";
        });
        $("#owner_add").click(function() {
            currentPersonButtonClicked = "owner";
        });

        function getTreeId(id, alive) {
            if (alive == 'No') {
                var ret = confirm('Are you sure you want to add a dead person?');
                if (!ret) {
                    return ret;
                }
            }

            $('#progressbar').show();
            $('#myModal').modal('hide');

            if (id != 0) {
                $.get("/admin/worthy/" + id + "/selectAsWorthy", {}, function(result) {
                    var result = JSON.parse(result);
                    $('#progressbar').hide();
                    $('#filter').val('');
                    $('#filter').trigger('keyup');
                    console.log("result == ", result);
                    if (currentPersonButtonClicked == "owner") {
                        if (managerNodeId == result.id && owner_is_manager == "false") {
                            alert("ليمكن إضافة المدير كمالك.");
                            return;
                        }
                        ownerNodeId = result.id;
                        $('#owner_name_hide').show();
                        $('.owner-name').html(result.name);
                        if (owner_is_manager == "true") {
                            $('.manager-name').html(result.name);
                        }
                        $('.owner_member_id').val(result.id);
                    } else {

                        if (ownerNodeId == result.id && owner_is_manager == "false") {
                            alert("لا يمكن إضافة المالك كمدير");
                            return;
                        }
                        managerNodeId = result.id;
                        $('#manager_name_hide').show();
                        $('.manager-name').html(result.name);
                        $('.manager_member_id').val(result.id);
                    }
                });
            }

        }

        $('#filter').val('');
        $(document).ready(function() {
            let typingTimer;
            const doneTypingInterval = 150; // delay in milliseconds

            $('#filter').on('keyup', function() {
                clearTimeout(typingTimer);

                typingTimer = setTimeout(function() {
                    var filter = $('#filter').val().toLowerCase().trim();

                    $('#myModal ul li').each(function() {
                        var nodeId = $(this).data('nodeid').toLowerCase();
                        var name = $(this).data('name').toLowerCase();

                        if (nodeId.includes(filter) || name.includes(filter)) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });

                }, doneTypingInterval);
            });

            // clear filter on click
            $('.input-group-addon, .close').on('click', function() {
                $('#filter').val('');
                $('#myModal ul li').show();
            });
        });


        $('#manager_name_hide').click(function() {
            $('.manager-name').text('');
            $('#manager_name_hide').hide();
        });
        $('#owner_name_hide').click(function() {
            $('.owner-name').text('');
            $('#owner_name_hide').hide();
        });

        $(document).ready(function() {
            // Get the selected radio for "owner_manage_majlis"
            let selectedRadio = $('input[name="owner_manage_majlis"]:checked').val();

            // Example: do something based on selection
            if (selectedRadio === 'yes') {
                // Do something if "yes" is selected
                $("#manager_add").hide();
                $("#manager_container").hide();
                $('#owner_name_hide').show();
            } else {
                // Do something if "no" is selected
                $("#manager_add").show();
                $("#manager_container").show();
                $('#manager_name_hide').show();
            }
        });

        $('input[name="owner_manage_majlis"]').change(function() {
            let selectedValue = $(this).val(); // 'yes' or 'no'

            if (selectedValue === 'yes') {
                let ownerName = $('.owner-name').text(); // get text inside owner-name label
                $('.manager-name').text(ownerName); // set it in manager-name label
                $("#manager_add").hide();

                $("#manager_container").hide();
                $("#manager_name_hide").hide();
            } else {
                $('.manager-name').text(''); // clear manager-name label
                $("#manager_add").show();
                $("#manager_container").show();

                owner_is_manager = "false";
            }
        });

        function initAutocomplete() {

            var map = new google.maps.Map(document.getElementById('location_map'), {
                center: {
                    lat: 23.885942,
                    lng: 45.079162
                },
                zoom: 12,
                mapTypeId: 'roadmap'
            });
            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function() {
                searchBox.setBounds(map.getBounds());
            });
            var markers = [];

            // Add markers on page load/reload if there is already a place selected
            var lat = $('#lat_input').val();
            var lng = $('#lng_input').val();

            if (lat != '' && lng != '') {
                var lat = $('#lat_input').val();
                var lng = $('#lng_input').val();
                // Create a marker for each place.
                var latLang = new google.maps.LatLng(lat, lng);
                var bounds = new google.maps.LatLngBounds();
                markers.push(new google.maps.Marker({
                    map: map,
                    // icon: icon,
                    title: input.value,
                    position: latLang
                }));
                map.panTo(latLang);

            }
            google.maps.event.addListener(map, 'click', function(event) {

                // Clear out the old markers.
                markers.forEach(function(marker) {
                    marker.setMap(null);
                });
                markers = [];
                // add a new marker
                markers.push(new google.maps.Marker({
                    map: map,
                    position: event.latLng
                }));
                $('#lat_input').val(event.latLng.lat());
                $('#lng_input').val(event.latLng.lng());
            });
            $('#clear_marker').click(function(e) {
                // Clear out the old markers.
                markers.forEach(function(marker) {
                    marker.setMap(null);
                });
                markers = [];
                $('#lat_input').val('');
                $('#lng_input').val('');
            });
            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener('places_changed', function() {
                var places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }

                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {


                    if (place.geometry.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                });
                map.fitBounds(bounds);
            });
        }

        function copyMapLink() {
            var url = 'https://www.google.com/maps/?q=loc:' + $('#lat_input').val() + '+' + $('#lng_input').val();
            window.prompt("Copy to clipboard: Ctrl+C, Enter", url);
        };

        $("#country_select").select2({
            dir: "rtl",
            placeholder: "اضغط"
        }).on("change", function(e) {
            // mostly used event, fired to the original element when the value changes
            getCities();
            const countrySelected = $(this).val(); // get selected country
            if (countrySelected) {
                // make city required
                $("#city_select").prop('required', true);
            } else {
                // remove required if no country
                $("#city_select").prop('required', false);
                $("#city_select").val(null).trigger('change'); // reset city select
            }
        });
        // On page reload fetch previously selected city
        getCities();
        $('#city_select').select2({
            dir: "rtl",
            placeholder: "اضغط"
        }).val('').trigger('change');

        function getCities() {
            var country = $("#country_select").val();
            if (country != '') {
                $.ajax({
                    type: "GET",
                    cache: false,
                    url: "/admin/familymembers/getlocalcities/" + encodeURIComponent(country),
                    success: function(response) {
                        var options = '';
                        var city_id = '';
                        options += "<option value=''>Select City</option>";
                        $.each(response, function(city, id) {
                            options += "<option value='" + id + "'>" + city + "</option>";
                            if (city == '{{ $majlis->city }}') {
                                city_id = id;
                            };
                        });
                        $('#city_select').html(options);
                        var is_present = "{{ !empty($majlis->city) ? $majlis->city : '' }}";
                        if (is_present == '') {
                            is_present = city_id;
                        };
                        $('#city_select').select2({
                            dir: "rtl",
                            placeholder: "اضغط"
                        }).val(is_present).trigger('change');

                    }
                });
            };
        }
    </script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB76VxEnpYBvgpXP2rIt8WJzgbRMtUGR3c&libraries=places&callback=initAutocomplete"
        async defer></script>
@endsection