@extends('layout')

@section('h4-page', __('setting'))

@section('contents')
    <div class="row layout-top-spacing">
        <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
            <div class="mb-3">
                <div class="card">
                    <div class="card-body min-vh-100">
                        @foreach (@$main as $key => $item)
                            <div class="mb-3">
                                <label class="form-label">{{ $item->type }}</label>
                                <button class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#exampleModal">Setup</button>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content bg-white">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Service</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <ul class="list-group" id="modalDiv">
                            <li class="list-group-item border-0 px-0">
                                <div class="form-group ps-0">
                                    <x-flag-contry></x-flag-contry>
                                </div>
                            </li>
                            @foreach ($config_lang as $key => $item)
                                <li
                                    class="list-group-item border-0 px-0 datalange datalange_{{ $item }} @if ($key != 0) d-none @endif">
                                    <div class="form-group ps-0">
                                        <label for="name" class="form-label">Description [{{ $item }}]</label>
                                        <textarea type="text" class="form-control" name="datalange[{{ $item }}][desc]" placeholder="Description"></textarea>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary saveModel" id="updateModel"
                            data-id="">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            var langs = @json($config_lang);
            var statusModel = "create";
            var idModel = 0;
            $('#modalForm').submit(function(e) {
                e.preventDefault();

            });
            $(".createModel").on("click", function() {
                var img = document.getElementById("selectedAvatar");
                var img_horizontal = document.getElementById("selectedAvatar2");
                var inputFileImage = document.getElementById("customFile2");
                var inputFileImageHorizontal = document.getElementById("img_horizontal");
                inputFileImage.value = null;
                inputFileImageHorizontal = null;
                img.src = "{{ asset('img/placeholder-avatar.png') }}";
                img_horizontal.src = "{{ asset('img/placeholder-avatar.png') }}";
                langs.forEach((element, index) => {
                    const inputname = document.getElementsByName(
                        `datalange[${element}][name]`)[0];
                    const desc = document.getElementsByName(
                        `datalange[${element}][desc]`)[0];

                    inputname.value = null;
                    desc.value = null;
                });
                idModel = 0;
                statusModel = "create";
            })
            $('.editModel').on("click", function() {
                var url_edit = "{{ route('service.edit', ':id') }}";
                $.ajax({
                    type: "GET",
                    url: url_edit.replace(":id", $(this).data("id")),
                    success: async function(response) {
                        var data = response;
                        langs.forEach((element, index) => {
                            const inputname = document.getElementsByName(
                                `datalange[${element}][name]`)[0];
                            const desc = document.getElementsByName(
                                `datalange[${element}][desc]`)[0];

                            inputname.value = data.name[element] ?? null;
                            desc.value = data.desc[element] ?? null;
                        });
                        var image = document.getElementById("selectedAvatar");
                        var image_horizontal = document.getElementById("selectedAvatar2");
                        image_horizontal.src = data.img_horizontal;
                        image.src = data.img;
                        idModel = data.id;
                        statusModel = "update";
                        $('#exampleModal').modal("show");
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        Swal.fire({
                            title: 'Error!!!',
                            text: "Cannot edit value.",
                            icon: 'error',
                        });
                    },
                });

            });
            $("#updateModel").on("click", function() {
                if (statusModel == "create") {
                    var url = "{{ route('service.store') }}";
                    var formData = new FormData();
                    // Select the div containing input elements
                    var inputs = document.querySelectorAll('#modalDiv input[type=text]');
                    var textAreas = document.querySelectorAll('#modalDiv textarea');

                    // Loop through each input element and append it to the FormData object
                    inputs.forEach(function(input) {
                        formData.append(input.name, input.value);
                    });
                    textAreas.forEach(function(input) {
                        formData.append(input.name, input.value);
                    });
                    formData.append('img', $('#customFile2')[0].files[0]);
                    formData.append('img_horizontal', $('#img_horizontal')[0].files[0]);
                    formData.append('_token', "{{ csrf_token() }}");
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: formData,
                        processData: false, // Prevent jQuery from processing the FormData
                        contentType: false, // Prevent jQuery from setting contentType
                        success: function(response) {
                            console.log(response);
                            Swal.fire({
                                title: 'Success',
                                text: "Save value success.",
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(request, status, error) {
                            Swal.fire({
                                title: 'Error!!!',
                                text: "Cannot save value.",
                                icon: 'error',
                            });
                        },
                    });
                } else {
                    var url = "{{ route('service.update', ':id') }}";
                    var formData = new FormData();
                    // Select the div containing input elements
                    var inputs = document.querySelectorAll('#modalDiv input[type=text]');
                    var textAreas = document.querySelectorAll('#modalDiv textarea');
                    // Loop through each input element and append it to the FormData object
                    inputs.forEach(function(input) {
                        formData.append(input.name, input.value);
                    });
                    textAreas.forEach(function(input) {
                        formData.append(input.name, input.value);
                    });
                    formData.append('img', $('input[type=file]')[0].files[0]);
                    formData.append('img_horizontal', $('#img_horizontal')[0].files[0]);
                    formData.append('_token', "{{ csrf_token() }}");
                    formData.append('_method', "PUT");
                    $.ajax({
                        type: "POST",
                        url: url.replace(":id", idModel),
                        data: formData,
                        processData: false, // Prevent jQuery from processing the FormData
                        contentType: false, // Prevent jQuery from setting contentType
                        success: function(response) {
                            Swal.fire({
                                title: 'Success',
                                text: "Save value success.",
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(request, status, error) {
                            Swal.fire({
                                title: 'Error!!!',
                                text: "Cannot save value.",
                                icon: 'error',
                            });
                        },
                    });
                }
            });
        });
    </script>
@endsection