@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
    <style>
        .hidden {
            display: none;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y bg-grey">
            @csrf
            <div class="card">

                <div class="px-3 pt-3 border-bottom d-flex justify-content-between">
                    <h4 class="fw-bold">{{ $title }}</h4>
                </div>

                <div class="row g-3 p-4">
                    <div class="col-md-12 mb-1">
                        <label class="form-label" for="titlemenu"><span class="text-danger fst-italic">*</span> Judul</label>
                        <input type="text" class="form-control" id="titlemenu" name="titlemenu"
                            placeholder="Masukkan Judul"
                            value="{{ !empty($externallink['TitleMenu']) ? $externallink['TitleMenu'] : '' }}" />
                    </div>

                    <div class="typeid col-12 col-sm-6 mb-1">
                        <label class="form-label"><span class="text-danger fst-italic">*</span> Pilih Tipe</label>
                        <select class="select2 form-select" id="typeid" name="typeid" data-placeholder="Pilih Type">
                            <option value="" selected></option>
                            @if (!empty($extCode))
                                @foreach ($extCode as $ext)
                                    @if ($externallink['TypeId'] == $ext->Code)
                                        <option value="{{ $externallink['TypeId'] }}" selected>{{ $ext->Description }}
                                        </option>
                                    @else
                                        <option value="{{ $ext->Code }}">{{ $ext->Description }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="cat {{ Session::get('TypeRole') == "eksekutif" ? ' col-md-6' : 'col-md-4' }}">
                        <label class="form-label" for="selectAnimation"><span class="text-danger fst-italic">*</span> Kategori</label>
                        <select id="categorygroup" name="categorygroup" class="form-select animation-dropdown select2"
                            data-placeholder="Pilih Kategori" disabled>
                        </select>
                    </div>

                    <div class="cat col-md-1 mt-4 pt-3 {{ Session::get('TypeRole') == "eksekutif" ? ' d-none' : '' }}">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addCategoryModal">
                            <i class='bx bxs-user-plus'></i>
                        </button>
                    </div>

                    <div class="col-md-1 mt-4 pt-3 {{ Session::get('TypeRole') == "eksekutif" ? ' d-none' : '' }}">
                        <button type="button" class="btn btn-warning" data-bs-toggle="modal"
                            data-bs-target="#editCategoryModal">
                            <i class='bx bxs-edit'></i>
                        </button>
                    </div>

                    <div class="modal-onboarding modal fade animate__animated" id="editCategoryModal" tabindex="-1"
                        aria-hidden="true">
                        <div class="modal-dialog  modal-dialog-centered" role="document">
                            <div class="modal-content text-center">
                                <div class="modal-header border-0">

                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body  p-0">

                                    <div class="onboarding-content mb-0">
                                        <h4 class="onboarding-title text-body text-left">Edit Category</h4>
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label for="nameEx7" class="form-label">Nama Kategori</label>
                                                    <div id="lainnya-container" class="mb-3">
                                                        <input type="text" id="lainnya-description-edit"
                                                            name="description-edit" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer border-0">
                                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                            Close
                                        </button>

                                        <button type="button" id="editCategory" class="btn btn-primary">Save</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="modal-onboarding modal fade animate__animated" id="addCategoryModal" tabindex="-1"
                        aria-hidden="true">
                        <div class="modal-dialog  modal-dialog-centered" role="document">
                            <div class="modal-content text-center">
                                <div class="modal-header border-0">

                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body  p-0">

                                    <div class="onboarding-content mb-0">
                                        <h4 class="onboarding-title text-body text-left">New Category</h4>
                                        <hr>
                                        <form id="addCategory">
                                            <div class="row">
                                                <div class="col-md-6">

                                                    <div class="mb-3">
                                                        <label for="nameEx7" class="form-label">Nama Kategori</label>
                                                        <select style="z-index: 9999999999999999999;"
                                                            class="cat form-select select2" id="description"
                                                            name="description" data-placeholder="Pilih Kategori">
                                                        </select>
                                                    </div>
                                                    <div id="lainnya-container-add" class="mb-3"
                                                        style="display: none;">
                                                        <input type="text" id="lainnya-description"
                                                            name="lainnya_description" class="form-control">
                                                    </div>


                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="roleEx7" class="form-label">Parent
                                                            (Optional)</label>
                                                        <select class="cat form-select select2" id="parent_id"
                                                            name="parent_id" data-placeholder="Pilih Parent">
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="modal-footer border-0">
                                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                                        Close
                                    </button>

                                    <button type="button" id="createCategory" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="urlmenu">URL/Link Menu</label>
                        <input type="url" class="form-control" id="urlmenu" name="urlmenu"
                            placeholder="Masukkan URL "
                            value="{{ !empty($externallink['URLMenu']) ? $externallink['URLMenu'] : '' }}" />
                    </div>

                    <div class="col-sm-6">
                        <label class="form-label" for="imagemenu_name"><span class="text-danger fst-italic">*</span> Gambar Menu</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="imagemenu_name" name="imagemenu_name"
                                placeholder="Upload Gambar Menu" aria-describedby="inputGroupFileAddon04"
                                aria-label="Upload" value="{{ !empty($externallink['ImageMenu']) ? $externallink['ImageMenu'] : '' }}" readonly />
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="imagemenu_popup"
                                data-bs-target="#UploadImageMenu" style="border-radius: 0 5px 5px 0;">Upload</button>

                            <div class="modal fade" id="UploadImageMenu" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <p style="font-size: 25px" class="modal-title">Upload Gambar Menu</p>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body" id="modal_uploadimagemenu">
                                            <input type="file" class="dropify" name="imagemenu" id="imagemenu"
                                                data-height="300" data-default-file="{{ Config::get('app.url_api') . '/assets/' . !empty($externallink['ImageMenu']) ? $externallink['ImageMenu'] : '' }}"/>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button"
                                                class="btn btn-primary {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                                                data-bs-dismiss="modal">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span id="validation-dropzone" class="text-muted fst-italic mt-0" style="font-size: 14px"><span
                                class="text-mute fst-italic">*</span> Format: JPEG,
                            JPG, PNG, WEBP. Maximum Size : 2MB.</span>
                    </div>

                    <div class="col-12 col-sm-6 mb-1 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="code">Kode</label>
                        <input type="text" class="form-control" id="code" name="code" placeholder="Masukkan Kode"
                            value="{{ !empty($externallink['Code']) ? $externallink['Code'] : '' }}" />
                    </div>

                    <div class="col-12 col-sm-6 mb-1 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="parentid">Pilih Parent</label>
                        <select id="parentid" name="parentid" class="select2 form-select"
                            data-placeholder="Pilih Parent">
                            <option value="" selected></option>
                            @if (!empty($extParent['ExternalLink']))
                                @foreach ($extParent['ExternalLink'] as $prn)
                                    @if ($externallink['ParentId'] == $prn['Id'])
                                        <option value="{{ $externallink['ParentId'] }}" selected>{{ $prn['TitleMenu'] }}
                                        </option>
                                    @else
                                        <option value="{{ $prn['Id'] }}">{{ $prn['TitleMenu'] }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="col-12 mb-3 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="collapsible-address">Deskripsi</label>
                        <div id="summernote-1">
                            {!! isset($externallink['Description']) ? $externallink['Description'] : '' !!}
                        </div>
                    </div>


                    <div class="d-flex">
                        <a href="{{ url('externallink/list') }}">
                            <button type="button"
                                class="btn btn-label-secondary waves-effect waves-light m-2">Kembali</button>
                        </a>
                        <button id="editExternallink" type="button"
                            class="btn btn-primary waves-effect waves-light m-2 {{ Session::get('TypeRole') == "eksekutif" ? ' d-none' : '' }}">Simpan</button>
                    </div>
                </div>

            </div>

        </div>
    </div>

@endsection
@section('page-scripts')
    <script>
        $(document).ready(function() {
            category_option();
        });

        $('#editExternallink').on('click', function(event) {
            let isValid = true;

            if ($("#titlemenu").val() == "" || $("#typeid").val() == "0" || $("#categorygroup").val() == "0" || $('#imagemenu_name').val() == "") {
                custom_alert('warning', 'Peringatan',
                    'Pastikan Judul, Tipe File, Kategori, dan Gambar Menu Sudah Terisi!'
                );
                isValid = false;

            } else if ($('#imagemenu')[0].files.length > 0) {
                let fotoAllowedFormats = ['jpg', 'jpeg', 'png', 'webp'];
                let fotoFileName = $('#imagemenu')[0].files[0].name;
                let fotoFileExtension = fotoFileName.split('.').pop().toLowerCase();

                if (!fotoAllowedFormats.includes(fotoFileExtension)) {
                    custom_alert('warning', 'Peringatan', 'Format file foto tidak diizinkan!');
                    isValid = false;
                }

                let fotoFileSize = $('#imagemenu')[0].files[0].size;
                let maxFotoFileSize = (['jpg', 'jpeg', 'png', 'webp'].includes(fotoFileExtension)) ? 2 * 1024 *
                    1024 : 5 *
                    1024 * 1024;

                if (fotoFileSize > maxFotoFileSize) {
                    custom_alert('warning', 'Peringatan',
                        `Ukuran file foto terlalu besar! Maksimum ${maxFotoFileSize / (1024 * 1024)} MB.`);
                    isValid = false;
                }
            }

            if (isValid) {
                _edit_externallink();
            }

        });

        $('#editCategoryModal').on('show.bs.modal', function() {
            var selectedCategoryId = $('#categorygroup').val();
            var selectedCategoryDescription = $('#categorygroup option:selected').text();
            $('#lainnya-description-edit').val(selectedCategoryDescription);
            $('input[name="description-edit"]').val(selectedCategoryDescription);
        });

        $('#editCategory').on('click', function() {
            var editedCategoryDescription = $('#lainnya-description-edit').val();
            var selectedCategoryId = $('#categorygroup').val();
            _edit_category(editedCategoryDescription, selectedCategoryId);
        });

        $("#createCategory").click(function() {
            create_category();
        });

        function _edit_category(editedCategoryDescription, categoryId) {
            let form_data = new FormData();
            let token = $("meta[name='csrf-token']").attr("content");

            form_data.append('description', editedCategoryDescription);

            $.ajax({
                url: "{{ url('externallink/_edit_category') }}/" + categoryId,
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    if (response.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Edit",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        })
                        category_option();
                    } else {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                },
            });
        }

        function category_option() {
            $.ajax({
                url: "{{ url('externallink/_category_list') }}",
                method: "POST",
                data: {
                    kanal: $('#kanalUrl').val()
                },
                success: function(data) {
                    let d = JSON.parse(data);
                    let typeId =
                        `{{ !empty($externallink['CategoryGroup']) ? $externallink['CategoryGroup'] : '' }}`

                    let categoryHtml = '<option value="">Pilih Kategori..</option>';
                    let descriptionHtml = '<option value="">Pilih Kategori..</option>';
                    let parentHtml = '<option value="">Pilih Parent..</option>';


                    if (d.data === null || d.data.length === 0) {
                        descriptionHtml +=
                            '<option value="lainnya" style="color: grey !important;">Lainnya</option>';
                    } else {
                        for (let i = 0; i < d.data.length; i++) {
                            categoryHtml += '<option value="' + d.data[i].Id + '"' +
                                `${d.data[i].Id == typeId?'selected':''}>` + d.data[i].Description +
                                '</option>';
                            parentHtml += '<option value="' + d.data[i].Id + '">' + d.data[i].Description +
                                '</option>';
                            descriptionHtml += '<option value="' + d.data[i].Description + '">' + d.data[i]
                                .Description +
                                '</option>';
                        }
                        descriptionHtml +=
                            '<option value="lainnya" style="color: grey !important;">Lainnya</option>';
                    }

                    $("#categorygroup").prop("disabled", false);
                    $("#categorygroup").html(categoryHtml);

                    $("#parent_id").prop("disabled", false);
                    $("#parent_id").html(parentHtml);

                    $("#description").prop("disabled", false);
                    $("#description").html(descriptionHtml);

                    $('#description').on('change', function() {
                        var selectedOption = $(this).val();

                        if (selectedOption === 'lainnya') {
                            $('#lainnya-container-add').show();
                        } else {
                            $('#lainnya-container-add').hide();
                        }
                    });

                    if ($('#description').val() === 'lainnya') {
                        $('#lainnya-container-add').show();
                    } else {
                        $('#lainnya-container-add').hide();
                    }
                },

                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    console.error(error);
                }
            });
        }

        function create_category() {
            var selectedOption = $('#description').val();
            var descriptionValue = '';

            if (selectedOption === 'lainnya') {
                descriptionValue = $('#lainnya-description').val();
            } else {
                descriptionValue = selectedOption;
            }

            var form_data = new FormData();
            form_data.append('description', descriptionValue);
            form_data.append('parent_id', $('#parent_id').val());
            form_data.append('_token', "{{ csrf_token() }}");

            $.ajax({
                url: "{{ url('externallink/_add_category') }}",
                method: "POST",
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    var responseData = JSON.parse(data);

                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Tambahkan",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        });

                        category_option();
                        tablelistkategori.ajax.reload();

                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                }
            });
        }

        function _edit_externallink() {
            let formData = new FormData();

            formData.append('id', `{{ $externallink['Id'] }}`);
            formData.append("imagemenu", $("#imagemenu")[0].files[0])
            formData.append("titlemenu", $('#titlemenu').val());
            formData.append("code", $('#code').val());
            formData.append("typeid", $('#typeid').val());
            formData.append("urlmenu", $('#urlmenu').val());
            formData.append("parentid", $('#parentid').val());
            formData.append("address", $('#address').val());
            formData.append("categorygroup", $('#categorygroup').val());
            formData.append("description", $('#summernote-1').summernote('code'));

            $.ajax({
                url: "{{ url('externallink/_edit_externallink') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    let responseData = JSON.parse(response);
                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Ubah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        }).then(function() {
                            var redirectUrl = "{{ url('externallink/list') }}";
                            window.location.href = redirectUrl;
                        });
                    } else {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                },
                error: function() {
                    $(".spinnerloader").hide()
                    Swal.fire({
                        title: 'Error',
                        text: 'An error occurred while updating the content. Please try again.',
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        buttonsStyling: false
                    });
                }
            });
        }

        $('#imagemenu').change(function() {
            if ($('#imagemenu')[0].files[0] != undefined) {
                $('#imagemenu_name').val($('#imagemenu')[0].files[0]['name'])
            } else {
                $('#imagemenu_name').val(``)
            }
        })

        $("#modal_uploadimagemenu .dropify-clear").click(function() {
            $('#imagemenu_name').val(``)
        })

        $('#imagemenu_name').click(function() {
            $('#imagemenu_popup').trigger("click")
        })
    </script>
@endsection