@extends('superadmin.layouts.app')
@section('content')
<section class="diocase-edit-page">
    <a href="{{route('superadmin.diocese.list')}}" class="parish-heading hstack items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 19.9201L8.47997 13.4001C7.70997 12.6301 7.70997 11.3701 8.47997 10.6001L15 4.08008" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>Diocese list
    </a>
    <div class="border-box h-full">
        <div class="bg-box h-full">
            <form class="h-full" action="{{route('superadmin.dioceses.update')}}" method="post" name="frm_dioceses" id="frm_dioceses" enctype="multipart/form-data">
                @csrf
                <div class="diocese-user-edit-data h-full row">
                    <input type="hidden" name="uuid" id="uuid" value="{{$dioceses->uuid}}">
                    <div class="col col-12 col-2xl-9 hstack">
                        <div class="profile-photo-select">
                            <h6>Profile Photo</h6>
                            <label for="fileInput" class="file-label profile-photo">
                                <svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M28.5 18.5239C26.3078 18.5239 24.1648 19.174 22.3421 20.3919C20.5193 21.6098 19.0987 23.3409 18.2597 25.3663C17.4208 27.3916 17.2013 29.6202 17.629 31.7703C18.0567 33.9204 19.1123 35.8954 20.6624 37.4455C22.2126 38.9956 24.1876 40.0513 26.3376 40.479C28.4877 40.9066 30.7163 40.6871 32.7417 39.8482C34.767 39.0093 36.4981 37.5886 37.716 35.7659C38.934 33.9431 39.584 31.8001 39.584 29.6079C39.584 26.6683 38.4162 23.849 36.3376 21.7704C34.2589 19.6917 31.4397 18.5239 28.5 18.5239ZM28.5 38.4751C26.7463 38.4751 25.0319 37.9551 23.5737 36.9807C22.1155 36.0064 20.9789 34.6215 20.3078 33.0013C19.6367 31.381 19.4611 29.5981 19.8032 27.878C20.1453 26.158 20.9899 24.578 22.23 23.3379C23.4701 22.0978 25.05 21.2532 26.7701 20.9111C28.4902 20.569 30.2731 20.7446 31.8934 21.4157C33.5136 22.0868 34.8985 23.2234 35.8728 24.6816C36.8472 26.1398 37.3672 27.8542 37.3672 29.6079C37.3672 31.9597 36.433 34.2151 34.7701 35.878C33.1072 37.5409 30.8517 38.4751 28.5 38.4751Z" fill="#6A6E83"></path>
                                    <path d="M42.9092 14.0908H38.0544L37.1345 12.2509C36.7128 11.4968 36.1057 10.8629 35.3706 10.409C34.6355 9.95512 33.7967 9.69636 32.9336 9.65723H24.0664C23.2034 9.69636 22.3646 9.95512 21.6295 10.409C20.8944 10.8629 20.2872 11.4968 19.8656 12.2509L18.9456 14.0908H14.0908C12.0331 14.0908 10.0596 14.9083 8.60453 16.3633C7.14947 17.8184 6.33203 19.7919 6.33203 21.8496V39.584C6.33203 41.6418 7.14947 43.6153 8.60453 45.0703C10.0596 46.5254 12.0331 47.3428 14.0908 47.3428H42.9092C44.967 47.3428 46.9405 46.5254 48.3955 45.0703C49.8506 43.6153 50.668 41.6418 50.668 39.584V21.8496C50.668 19.7919 49.8506 17.8184 48.3955 16.3633C46.9405 14.9083 44.967 14.0908 42.9092 14.0908ZM48.4512 39.584C48.4512 41.0539 47.8673 42.4635 46.828 43.5028C45.7887 44.5421 44.3791 45.126 42.9092 45.126H14.0908C12.621 45.126 11.2114 44.5421 10.172 43.5028C9.13272 42.4635 8.54883 41.0539 8.54883 39.584V21.8496C8.54883 20.3798 9.13272 18.9702 10.172 17.9308C11.2114 16.8915 12.621 16.3076 14.0908 16.3076H19.6328C19.8375 16.307 20.038 16.2497 20.2122 16.1421C20.3863 16.0345 20.5272 15.8808 20.6193 15.698L21.8496 13.2484C22.0823 12.8588 22.405 12.5306 22.7907 12.2914C23.1765 12.0523 23.6139 11.9091 24.0664 11.874H32.9336C33.3861 11.9091 33.8236 12.0523 34.2093 12.2914C34.595 12.5306 34.9178 12.8588 35.1504 13.2484L36.3808 15.698C36.4729 15.8808 36.6138 16.0345 36.7879 16.1421C36.962 16.2497 37.1625 16.307 37.3672 16.3076H42.9092C44.3791 16.3076 45.7887 16.8915 46.828 17.9308C47.8673 18.9702 48.4512 20.3798 48.4512 21.8496V39.584Z" fill="#6A6E83"></path>
                                </svg>
                                @if($dioceses->profile_pic!=null)
                                <img src="{{$dioceses->profile_pic}}" alt="{{$dioceses->name}}" class="preview-image">
                                @endif
                                <input type="file" id="fileInput-profile" name="profile_pic" class="file-input fileInput-cover" accept="image/*">
                            </label>
                        </div>
                        <div class="user-input-data">
                            <div>
                                <label>Name</label>
                                <input type="text" minlength="2" value="{{$dioceses->name}}" name="name" id="name" placeholder="Please enter name" required>
                            </div>
                            <div>
                                <label>Address</label>
                                <!-- <input type="text" placeholder="Please enter address"> -->
                                <input type="text" class="form-control" placeholder="Enter Address" value="{{ isset($dioceses) ? $dioceses->address['address_line_1'] : '' }}" name="address_line_1" id="address_line_1">
                                <input type="hidden" class="form-control" placeholder="Enter Address" value="{{ isset($dioceses) ? $dioceses->address['address_line_2'] : '' }}" name="address_line_2" id="address_line_2">
                                <input type="hidden" class="form-control" placeholder="Enter City" value="{{ isset($dioceses) ? $dioceses->address['city'] : '' }}" name="city" id="city">
                                <input type="hidden" class="form-control" placeholder="Enter State" value="{{ isset($dioceses) ? $dioceses->address['state'] : '' }}" name="state" id="state">
                                <input type="hidden" class="form-control" name="state_code" value="{{ isset($dioceses) ? $dioceses->address['state_code'] : '' }}" id="state_code">
                                <input type="hidden" class="form-control" name="country" id="country" value="{{ isset($dioceses) ? $dioceses->address['country'] : '' }}">
                                <input type="hidden" class="form-control" name="dioceses_lat" id="dioceses_lat" value="{{ isset($dioceses) ? $dioceses->address['latitude'] : '' }}">
                                <input type="hidden" class="form-control" name="dioceses_long" id="dioceses_long" value="{{ isset($dioceses) ? $dioceses->address['longitude'] : '' }}">
                                <input type="hidden" class="form-control" name="zipcode" id="zipcode" value="{{ isset($dioceses) ? $dioceses->address['zipcode'] : '' }}">
                                <input type="hidden" class="form-control" name="country_code" id="country_code" value="{{ isset($dioceses) ? $dioceses->address['country_code'] : '' }}">
                            </div>
                            <div>
                                <label>Website</label>
                                <input type="url" value="{{$dioceses->website}}" name="website" id="website" placeholder="Enter your website">
                            </div>
                            <div>
                                <label>Status</label>
                                <select name="is_active" id="is_active">
                                    <option value="1" {{($dioceses->is_active == 1 ? 'selected':'')}}>Active</option>
                                    <option value="0" {{($dioceses->is_active == 0 ? 'selected':'')}}>Inactive</option>
                                </select>
                            </div>
                            <div>
                                <button type="Submit" class="parish-btn">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script defer>
    let autocomplete;
    let address1Field;

    function initAutocomplete() {
        address1Field = document.querySelector("#address_line_1");
        autocomplete = new google.maps.places.Autocomplete(address1Field, {
            fields: ["address_components", "geometry"]
            , types: ["address"]
        , });
        autocomplete.addListener("place_changed", fillInAddress);
    }

    function fillInAddress() {
        const place = autocomplete.getPlace();
        if (place.geometry) {
            document.getElementById("dioceses_lat").value = place.geometry.location.lat();
            document.getElementById("dioceses_long").value = place.geometry.location.lng();
        }
        let address1 = "";
        let area = "";
        for (const component of place.address_components) {
            const componentType = component.types[0];
            console.log(place.address_components);
            switch (componentType) {
                case "street_number":
                    address1 = `${component.long_name} ${address1}`;
                    break;
                case "route":
                    address1 += component.long_name;
                    document.querySelector("#address_line_2").value = component.short_name;
                    break;
                case "sublocality_level_2":
                     address1 += ' '+component.long_name;
                     break;
                case "sublocality_level_1":
                     address1 += ' '+component.long_name;
                break;
                case "postal_code":
                    document.querySelector("#zipcode").value = component.long_name;
                    break;
                case "locality":
                    document.querySelector("#city").value = component.long_name;
                    break;
                case "administrative_area_level_1":
                    document.querySelector("#state").value = component.long_name;
                    document.querySelector("#state_code").value = component.short_name;
                    break;
                case "country":
                    document.querySelector("#country").value = component.long_name;
                    document.querySelector("#country_code").value = component.short_name;
                    break;
            }
        }
        address1Field.value = address1.trim();
    }
    document.addEventListener("DOMContentLoaded", function() {
        const form = document.getElementById("frm_dioceses");

        form.addEventListener("keydown", function(event) {
            if (event.key === "Enter") {
                event.preventDefault(); // Prevent default form submission behavior
                //   submitForm();
            }
        });
        // function submitForm() {
        //   // Perform form submission logic here
        //   // You can use AJAX to submit the form data asynchronously if needed
        // }
    });
    $(document).ready(function() {
        $('#fileInput-cover').on('change', function(e) {
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = function() {
                $('.cover-photo').find('svg').remove();
                $('.cover-photo').find('.preview-image').remove();
                $('.cover-photo').prepend('<img src="' + reader.result + '" class="preview-image">');
            }
            reader.readAsDataURL(file);
        });
        $('#fileInput-profile').on('change', function(e) {
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = function() {
                $('.profile-photo').find('svg').remove();
                $('.profile-photo').find('.preview-image').remove();
                $('.profile-photo').prepend('<img src="' + reader.result + '" class="preview-image">');
            }
            reader.readAsDataURL(file);
        });
        $('.time-input-container').each(function() {
            var $container = $(this);
            toggleRemoveButtonVisibility($container);
        });
    });
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIU5S9NHlL5_3rXucRXK04gfW-_aOagFk&loading=async&libraries=places&callback=initAutocomplete">
</script>
@endsection