@extends('layout')

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

@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">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show " role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="d-flex justify-content-end">
                    <button type="button" class="btn btn-sm btn-info font-weight-bold text-xs" id="createModel"
                        data-bs-toggle="modal" data-bs-target="#exampleModal">
                        {{ __('create') }} +
                    </button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('Name') }}</th>
                            <th>{{ __('Status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse (@$main ?? [] as $key => $item)
                            <tr>
                                <td>{{ $main->currentPage() > 1 ? $main->perPage() * $main->currentPage() - $main->perPage() + $key + 1 : $key + 1 }}
                                </td>
                                <td>{{ $item->product?->name }}</td>
                                <td>
                                    <button class="btn btn-secondary editModel" data-id="{{ $item->id }}"
                                        data-bs-toggle="modal" data-bs-target="#exampleModal2">{{ __('edit') }}</button>
                                    <button class="btn btn-danger"
                                        onclick="deleteItem({{ $item->id }})">{{ __('Delete') }}</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center">{{ __('NoDataFound') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end pb-0">
                {{ @$main?->appends(request()->query())->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    <!-- Modal Create-->
    <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">{{ __('productService') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="list-group">
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="name" class="form-label">{{ __('ProductName') }}</label>
                                <select name="" id="createProduct" class="form-control">
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0 d-none">
                            <div class="form-group ps-0">
                                <label for="name" class="form-label">Group</label>
                                <select name="" id="createGroup" class="form-control">
                                    <option value="M" selected>Male</option>
                                    <option value="F">Female</option>
                                    <option value="G">General</option>
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0 d-none">
                            <div class="form-group ps-0">
                                <label for="name" class="form-label">Cloth type</label>
                                <select name="" id="createClothType" class="form-control">
                                    <option value="SILK" selected>SILK</option>
                                    <option value="LINEN">LINEN</option>
                                    <option value="UNKNOW">UNKNOW</option>
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="name" class="form-label">{{ __('price') }}</label>
                                <input type="text" class="form-control" id="createPrice">
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="name" class="form-label">{{ __('unit') }}</label>
                                <select name="" id="createUnit" class="form-control">
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="noti_check" class="form-label">{{ __('Use Noti') }}</label>
                                <select name="noti_check" id="createnoti_check" class="form-control">
                                    <option value="0">Not Use</option>
                                    <option value="1">Use</option>
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <div>
                                    <p>{{ __('Image Noti') }}</p>
                                    <div class="d-flex justify-content-center mb-4">
                                        <img id="selectedAvatar" src="{{ asset('img/placeholder-avatar.png') }}"
                                            class="" style="width: 200px; height: 200px; object-fit: contain;"
                                            alt="example placeholder" />
                                    </div>
                                    <div class="d-flex justify-content-center">
                                        <div data-mdb-ripple-init class="btn btn-primary btn-rounded">
                                            <label class="form-label text-white m-1"
                                                for="path_image_noti">{{ __('ChooseFile') }}</label>
                                            <input type="file" class="form-control d-none" id="path_image_noti"
                                                onchange="displaySelectedImage(event, 'selectedAvatar')" accept="image/*"
                                                name="img" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </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" id="saveModel">{{ __('save') }}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Edit-->
    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel2">{{ __('productService') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="list-group">
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="editProduct" class="form-label">{{ __('ProductName') }}</label>
                                <select name="" id="editProduct" class="form-control">
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0 d-none">
                            <div class="form-group ps-0">
                                <label for="editGroup" class="form-label">Group</label>
                                <select name="" id="editGroup" class="form-control">
                                    <option value="M" selected>Male</option>
                                    <option value="F">Female</option>
                                    <option value="G">General</option>
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0 d-none">
                            <div class="form-group ps-0">
                                <label for="editClothType" class="form-label">Cloth type</label>
                                <select name="" id="editClothType" class="form-control">
                                    <option value="SILK" selected>SILK</option>
                                    <option value="LINEN">LINEN</option>
                                    <option value="UNKNOW">UNKNOW</option>
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="editPrice" class="form-label">{{ __('price') }}</label>
                                <input type="text" class="form-control" id="editPrice">
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="editUnit" class="form-label">{{ __('price') }}</label>
                                <select name="" id="editUnit" class="form-control">
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="editnoti_check" class="form-label">{{ __('Use Noti') }}</label>
                                <select name="editnoti_check" id="editnoti_check" class="form-control">
                                    <option value="0">Not Use</option>
                                    <option value="1">Use</option>
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <div>
                                    <p>{{ __('Image Noti') }}</p>
                                    <div class="d-flex justify-content-center mb-4">
                                        <img id="selectedAvatar2" src="{{ asset('img/placeholder-avatar.png') }}"
                                            class="" style="width: 200px; height: 200px; object-fit: contain;"
                                            alt="example placeholder" />
                                    </div>
                                    <div class="d-flex justify-content-center">
                                        <div data-mdb-ripple-init class="btn btn-primary btn-rounded">
                                            <label class="form-label text-white m-1"
                                                for="path_image_noti2">{{ __('ChooseFile') }}</label>
                                            <input type="file" class="form-control d-none" id="path_image_noti2"
                                                onchange="displaySelectedImage(event, 'selectedAvatar2')" accept="image/*"
                                                name="img" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </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" id="updateModel"
                        data-id="">{{ __('save') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function setInputFilter(textbox, inputFilter, errMsg) {
            ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(
                function(event) {
                    textbox.addEventListener(event, function(e) {
                        if (inputFilter(this.value)) {
                            // Accepted value.
                            if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
                                this.classList.remove("input-error");
                                this.setCustomValidity("");
                            }

                            this.oldValue = this.value;
                            this.oldSelectionStart = this.selectionStart;
                            this.oldSelectionEnd = this.selectionEnd;
                        } else if (this.hasOwnProperty("oldValue")) {
                            // Rejected value: restore the previous one.
                            this.classList.add("input-error");
                            this.setCustomValidity(errMsg);
                            this.reportValidity();
                            this.value = this.oldValue;
                            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                        } else {
                            // Rejected value: nothing to restore.
                            this.value = "";
                        }
                    });
                });
        }
        setInputFilter(document.getElementById("createPrice"), function(value) {
            return /^-?\d*[.,]?\d{0,2}$/.test(value);
        }, "Must be a currency value");
        setInputFilter(document.getElementById("editPrice"), function(value) {
            return /^-?\d*[.,]?\d{0,2}$/.test(value);
        }, "Must be a currency value");
    </script>
    <script>
        function deleteItem(id) {
            Swal.fire({
                title: '{{ __('Delete') }}',
                text: "{{ __('You want delete value ?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    var is_url = "{{ route('mapServiceProduct.destroy', ':id') }}";
                    $.ajax({
                        url: is_url.replace(':id', id),
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}',
                            status: 0,
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{ __('Success') }}',
                                text: "{{ __('Delete value success.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot delete value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        }
                    });
                }
            })
        }
    </script>
    <script>
        function displaySelectedImage(event, elementId) {
            const selectedImage = document.getElementById(elementId);
            const fileInput = event.target;

            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    selectedImage.src = e.target.result;
                };

                reader.readAsDataURL(fileInput.files[0]);
            }
        }
    </script>
    {{-- custom --}}
    <script>
        var products = @json($products->toArray());
        var units = @json($units->toArray());
        // open model
        $(document).ready(function() {
            function templateProduct(product_id, products) {
                let html = '';
                products.forEach(element => {
                    if (product_id == element.id) {
                        html += `
                                <option value="${element.id}" selected>${element.name.en}</option>
                            `;
                    } else {
                        html += `
                                <option value="${element.id}">${element.name.en}</option>
                            `;
                    }
                });
                return html;
            }

            function templateGroup(value, products) {
                let html = '';
                if (value == "M") {
                    html += `
                                <option value="M" selected>Male</option>
                                    <option value="F">Female</option>
                                    <option value="G">General</option>
                            `;
                } else if (value == "F") {
                    html += `
                            <option value="M" >Male</option>
                                    <option value="F" selected>Female</option>
                                    <option value="G">General</option>
                        `
                } else {
                    html += `
                                <option value="M" >Male</option>
                                    <option value="F">Female</option>
                                    <option value="G" selected>General</option>
                            `;
                }
                return html;
            }

            function templateClothType(value, products) {
                let html = '';
                if (value == "SILK") {
                    html += `
                                <option value="SILK" selected>SILK</option>
                                    <option value="LINEN">LINEN</option>
                                    <option value="UNKNOW">UNKNOW</option>
                            `;
                } else if (value == "LINEN") {
                    html += `
                            <option value="SILK">SILK</option>
                                    <option value="LINEN" selected>LINEN</option>
                                    <option value="UNKNOW">UNKNOW</option>
                        `
                } else {
                    html += `
                                <option value="SILK">SILK</option>
                                    <option value="LINEN">LINEN</option>
                                    <option value="UNKNOW" selected>UNKNOW</option>
                            `;
                }
                return html;
            }

            function templateUnit(value, data) {
                let html = '';
                data.forEach(element => {
                    if (value == element.id) {
                        html += `
                                <option value="${element.id}" selected>${element.name.en}</option>
                            `;
                    } else {
                        html += `
                                <option value="${element.id}">${element.name.en}</option>
                            `;
                    }
                });
                return html;
            }
            $('#createModel').on("click", async function() {
                var createProduct = $('#exampleModal').find("#createProduct");
                var html = '';
                products.forEach(element => {
                    html += `
                    <option value="${element.id}">${element.name.en}</option>
                `;
                });
                var unit = $('#exampleModal').find("#createUnit");
                createProduct.html(html);
                unit.html(await templateUnit(0, units));
            });
            $("#saveModel").on("click", function() {
                var is_url = "{{ route('mapServiceProduct.store') }}";
                var formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('service_id', "{{ request()->input('id') }}");
                formData.append('product_id', $("#createProduct").val());
                formData.append('price', $("#createPrice").val());
                formData.append('unit_id', $("#createUnit").val());
                formData.append('img', document.getElementById("path_image_noti").files[0] ?? null);
                formData.append('noti_check', $("#createnoti_check").val());
                $.ajax({
                    type: "POST",
                    url: is_url,
                    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.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'success',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot save value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    }

                });
            });
            $('.editModel').on("click", function() {
                var url_edit = "{{ route('mapServiceProduct.edit', ':id') }}";
                $.ajax({
                    type: "GET",
                    url: url_edit.replace(":id", $(this).data("id")),
                    success: async function(response) {
                        var data = response;

                        console.log(data.data);
                        var createProduct = $('#exampleModal2').find("#editProduct");
                        var group = $('#exampleModal2').find("#editGroup");
                        var clothType = $('#exampleModal2').find("#editClothType");
                        var price = $('#exampleModal2').find("#editPrice");
                        var unit = $('#exampleModal2').find("#editUnit");
                        var updateNotiCheck = $('#exampleModal2').find("#editnoti_check");
                        var updateButton = $('#exampleModal2').find("#updateModel");
                        document.getElementById("selectedAvatar2").src = data.data
                            .path_image_noti;
                        createProduct.html(await templateProduct(data.data.product_id,
                            products));
                        group.html(await templateGroup(data.data.group));
                        clothType.html(await templateClothType(data.data.cloth_type));
                        price.val(data.data.price)
                        unit.html(await templateUnit(data.data.unit_id, units));
                        updateNotiCheck.val(data.data.noti_check);

                        updateButton.attr("data-id", data.data.id);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot edit value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    },
                });

            });
            $("#updateModel").on("click", function() {
                var is_url = "{{ route('mapServiceProduct.update', ':id') }}";
                var formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('_method', 'PUT');
                formData.append('product_id', $("#editProduct").val());
                formData.append('price', $("#editPrice").val());
                formData.append('unit_id', $("#editUnit").val());
                formData.append('img', document.getElementById("path_image_noti2").files[0] ?? null);
                formData.append('noti_check', $("#editnoti_check").val());
                $.ajax({
                    type: "POST",
                    url: is_url.replace(":id", $(this).data("id")),
                    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.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'success',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot save value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    }

                });
            });
        });
    </script>
@endsection