@extends('admin.layouts.master')

@section('title', 'Manage Team')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3>Employee Form
                        <a href="{{ route('employees.index') }}" class="pull-right btn btn-success" style="float: right"> <i
                                class="fa fa-user"></i> All Employee</a>
                    </h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('employees.update', $employee->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        @include('admin.employee.form', ['button' => 'Save'])
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')

    <!-- Style -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <!-- Script -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        // In your Javascript (external.js resource or <script> tag)
        $(document).ready(function() {
            // $('#summernote').summernote()
            $('select').select2();
        });
    </script>

    <script>
        function getSelectedData() {

            return true;
            let selectedDivision = document.getElementById('divisionId');
            let selectedDivisionId = selectedDivision.options[selectedDivision.selectedIndex].value;
            let cities = document.getElementById('cityId');

            let child = cities.lastElementChild;

            $("#cityId").html("");

            let ajaxUrl = '/configuration/cities/' + selectedDivisionId;

            $.ajax({
                url: ajaxUrl,
                type: 'get',
                success: function(response) {
                    let option_html = '<option>Select City </option>';
                    $.each(response, function(index, res) {
                        option_html += `<option value="${res.id}" >${res.name}</option>`;
                    })
                    $("#cityId").append(option_html);
                }
            })
        }
    </script>

    <script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>



    {{-- image preview code --}}

    <script>
        $(function() {
            // Listen for the file input change event
            $('#image').on('change', function() {
                // Get the selected file
                var file = $(this).prop('files')[0];

                // Create a new FileReader instance
                var reader = new FileReader();

                // Set the callback function to be called when the file is loaded
                reader.onload = function(e) {
                    // Create a new image element with the loaded file as its source
                    var img = $('<img>').attr('src', e.target.result);

                    // Append the image element to the preview container
                    $('.preview-container').append(img);
                };

                // Read the selected file as a data URL
                reader.readAsDataURL(file);
            });
        });
    </script>

    <script>
        function getSelectedData() {
            $('#upazilaId').html('');
            let selectedDivision = document.getElementById('divisionId');
            let selectedDivisionId = selectedDivision.options[selectedDivision.selectedIndex].value;
            console.log(selectedDivisionId)
            let cities = document.getElementById('cityId');

            let child = cities.lastElementChild;

            while (child) {
                cities.removeChild(child);
                child = cities.lastElementChild;
            }

            let ajaxUrl = window.location.href + '?div=' + selectedDivisionId;
            console.log(ajaxUrl)

            $.ajax({
                url: ajaxUrl,
                method: 'get',
                success: function(res) {
                    $('#cityId').html(res.html_data);
                    let selectedOption = $('#cityId').val();
                    selectUpazila(selectedOption)
                }
            })
        }

        $('#cityId').on('change', function() {
            let selectedOption = $(this).val();
            selectUpazila(selectedOption)
        })

        async function selectUpazila(selectedOption) {
            let ajaxUrl = window.location.href + '?city=' + selectedOption;
            console.log(ajaxUrl)

            await $.ajax({
                url: ajaxUrl,
                method: 'get',
                success: function(res) {
                    $('#upazilaId').html(res.html_data);
                }
            })
        }
    </script>

@endsection