@extends('backend.layouts.app')

@section('title',__('label.update_sant_page_title').' | '.env('APP_NAME'))

@push('after-styles')
@endpush

@section('breadcrumb')
    <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-1">
                <!--begin::Page Heading-->
                <div class="d-flex align-items-baseline mr-5">
                    <!--begin::Page Title-->
                    <!--end::Page Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.dashboard') }}" class="text-muted">{{ __('breadcrumb.dashboard') }}</a>
                        </li>
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.sant.index') }}" class="text-muted">{{ __('breadcrumb.sants') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            {{ __('breadcrumb.edit_sant') }}
                        </li>
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page Heading-->
            </div>
            <!--end::Info-->
        </div>
    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-custom">
                    <div class="card-header">
                        <h3 class="card-title">
                            {{ __('label.update_sant_form_title') }}
                        </h3>
                        <div class="card-toolbar">
                            <div class="example-tools justify-content-center">
                                <span class="example-toggle" data-toggle="tooltip" title="View code"></span>
                                <span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
                            </div>
                        </div>
                    </div>
                    <!--begin::Form-->
                    {{ Form::model($sant,['route' => ['admin.sant.update', $sant->id],'method' => 'PATCH','id' => 'updateSantForm', 'files' => true]) }}
                        @include('backend.sant.partials._form')
                    {{ Form::close() }}
                    <!--end::Form-->
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after-scripts')
@component('backend.layouts.components.validation')@endcomponent
    <script>    
        var dharma_id = "{{ isset($sant) ? $sant->sampraday_id  : false}}";

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }
        });

        function getSampraday() {
            $.ajax({
                url: "{{ route('admin.dharma.sampradaies') }}",
                type: "POST",
                data: {
                    'dharma_id': $('#dharma').val(),
                },
                success: function (data) {
                    $('#sampradaies').empty();
                    console.log(data);
                    // var emptyOption = new Option('Select the sampraday name', '', false, false);
                    // $('#sampradaies').append(emptyOption);
                    $.each(data.sampradaies, function (index, sampraday) {
                        console.log(sampraday);
                        if (dharma_id == sampraday.id) {
                            var newOption = new Option(sampraday.name, sampraday.id, true, true);
                        } else {
                            var newOption = new Option(sampraday.name, sampraday.id, false, false);
                        }
                        $('#sampradaies').append(newOption);
                    });
                    $('#sampradaies').selectpicker('refresh');
                }
            })
        }

        var input = document.getElementById('honor'),
            // init Tagify script on the above inputs
            tagify = new Tagify(input, {
                whitelist: {!! collect($sant->honor) !!},
                duplicates :true
            })

        // "remove all honors" button event listener
        document.getElementById('honor_remove').addEventListener('click', tagify.removeAllTags.bind(tagify));

        // Chainable event listeners
        tagify.on('add', onAddTag)

        // tag added callback
        function onAddTag(e) {
            tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
        }

        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
        });

        if (dharma_id > 0) {
            getSampraday();
        }

        $(document).ready(function () {

            $(document).on('change', '#dharma', function (e) {
                getSampraday();
            });

            $(document).on('change', '#dharmaCheckbox', function (e) {
                var isChecked = $('#dharmaCheckbox').is(":checked");
                if (isChecked) {
                    $('#sampradayCheckbox').prop('checked', true);
                } else {
                    $('#sampradayCheckbox').prop('checked', false);
                }
            });
            
            $("#updateSantForm").validate({
                errorClass: 'is-invalid',
                normalizer: function(value) {
                    return $.trim(value);
                },
                rules: {
                    name: {
                        required: true,
                    }
                },
                onfocusout: function(element) {
                    // "eager" validation
                    // this.element(element);
                }
            });
        });

        var maxFileLimit = 5 * 1000000;
        $(document).on('change', '.avatar-image', function () {
            viewAvatarImage(this);
            $('.is_remove_avatar_image').val(1);
        });
        function viewAvatarImage(input) {
            if (input.files && input.files[0]) {
                var file = input.files[0];
                if (file.size < maxFileLimit) {
                    var fileType = file["type"];
                    var validImageTypes = ["image/jpg", "image/jpeg", "image/png"];
                    if ($.inArray(fileType, validImageTypes) > 0) {
                        // invalid file type code goes here.
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $('.avatar-image-preview').attr('src', e.target.result);
                            $('.avatar-image-preview-div').css('display', 'flex');
                        }
                        reader.readAsDataURL(input.files[0]);
                    } else {
                        $('.avatar-image').val('');
                        $('#avatar-custom-file-label').text('{{ __("label.choose_image") }}');
                        toastr.error('{{ __("label.image_type") }}');
                    }
                } else {
                    $('.avatar-image').val('');
                    $('#avatar-custom-file-label').text('{{ __("label.choose_image") }}');
                    toastr.error('{{ __("label.max_image_size") }}');
                }
            }
        }
        $(document).on('click', '#avatar-image-remove-button', function () {
            $('.is_remove_avatar_image').val(1);
            $('.avatar-image').val('');
            $('.avatar-image-preview-div').css('display', 'none');
            $('#avatar-custom-file-label').text('{{ __("label.choose_image") }}');
        });

    </script>
    <script src="{{ asset('public/js/pages/crud/forms/widgets/bootstrap-switch.js?v=7.2.8') }}"></script>

    {{-- Google Map script --}}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoZv-67UKDVz5Rp3fa3e2xcHunahFGKOc&libraries=places&callback=dummy"></script>
    <script>
        google.maps.event.addDomListener(window, 'load', initialize);
        function initialize() {
            var input = document.getElementById('diksha_place');
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
                $('#latitude_show').val(place.geometry['location'].lat());
                $('#longitude_show').val(place.geometry['location'].lng());
                $('#diksha_place_latitude').val(place.geometry['location'].lat());
                $('#diksha_place_longitude').val(place.geometry['location'].lng());
                $("#latitudeArea").removeAttr('hidden');
                $("#longtitudeArea").removeAttr('hidden');
            });
        }
    </script>
@endsection