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

            <input type="hidden" name="parentid" id="parentid" value="0">
            <input type="hidden" name="useraccess" id="useraccess" value="0">

            @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">
                    <form action="" method="post" id="dropzone_media" class="dropzone needsclick"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="dz-message needsclick">
                            Drop files here or click to upload
                        </div>

                        <div class="fallback">
                            <input type="file" id="file" name="file">
                        </div>
                    </form>

                    <div class="col-12 mb-1">
                        <label class="form-label" for="namegrup">Nama Grub</label>
                        <input type="text" class="form-control" id="namegrup" name="namegrup"
                            placeholder="Masukkan Nama grub" value="" />
                    </div>

                    <div class="col-sm-12 col-md-6 mb-4">
                        <label class="form-label" for="icon_name">Upload Icon</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="icon_name" name="icon_name"
                                placeholder="Upload Icon" aria-describedby="inputGroupFileAddon04" aria-label="Upload"
                                readonly />
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="dokumen_popup"
                                data-bs-target="#icon_grub" style="border-radius: 0 5px 5px 0;">Upload</button>

                            <div class="modal fade" id="icon_grub" 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 Icon</p>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body" id="modal_icon">
                                            <form action="" method="post" id="dropzone_bucket"
                                                class="dropzone needsclick" enctype="multipart/form-data">
                                                @csrf
                                                <div class="dz-message needsclick">
                                                    Drop files here or click to upload
                                                </div>
                                                <div class="fallback">
                                                    <input type="file" id="file" name="file">
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-primary"
                                                data-bs-dismiss="modal">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="parentname">Parent</label>
                        <select id="parentname" name="parentname" class="select2 form-select"
                            data-placeholder="Pilih Parent">
                            <option value=""></option>
                            @if (!empty($parent['Grub']))
                                @foreach ($parent['Grub'] as $prn)
                                    <option value="{{ $prn['NameGrup'] }}">{{ $prn['NameGrup'] }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="status">Status</label>
                        <select id="status" name="status" class="select2 form-select" data-placeholder="Pilih Status">
                            <option value="">Pilih Status</option>
                            @if (!empty($status))
                                @foreach ($status as $status)
                                    <option value="{{ $status->Code }}">{{ $status->Description }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="urutan">Urutan</label>
                        <input type="number" class="form-control" id="urutan" name="urutan"
                            placeholder="Masukkan urutan grub" value="" />
                    </div>

                    <div class="col-12 mb-3 ">
                        <label class="form-label" for="collapsible-address">Deskripsi</label>
                        <div id="summernote-1">
                        </div>
                    </div>

                    <div class="d-flex mt-4">
                        <a href="{{ url('grub/list') }}">
                            <button type="button"
                                class="btn btn-label-secondary waves-effect waves-light m-2">Kembali</button>
                        </a>
                        <button id="addGrub" type="button" onclick="sendBucketDropzone()"
                            class="btn btn-primary waves-effect waves-light m-2">Simpan</button>
                    </div>
                </div>

            </div>

        </div>
    </div>
@endsection
@section('page-scripts')
    <script>
        Dropzone.autoDiscover = false;
        let grupid = '';

        // Konfigurasi Dropzone untuk bucket
        let bucket = new Dropzone('#dropzone_bucket', {
            url: "{{ url('grub/_add_grub') }}",
            autoProcessQueue: false,
            addRemoveLinks: true,
            maxFiles: 1,
            maxFilesize: 9999999999,
            init: function() {
                let dropzone = this;

                dropzone.on("sending", function(file, xhr, formData) {
                    formData.append("namegrup", $('#namegrup').val());
                    formData.append("parentid", $('#parentid').val());
                    formData.append("useraccess", $('#useraccess').val());
                    formData.append("parentname", $('#parentname').val());
                    formData.append("urutan", $('#urutan').val());
                    formData.append("status", $('#status').val());
                    formData.append("description", $('#summernote-1').summernote('code'));

                    $(".spinnerloader").show();
                });

                dropzone.on("addedfile", function(file) {
                    $("#icon_name").val(file.name);
                });

                dropzone.on("success", function(file, response) {
                    let responseData = JSON.parse(response);
                    grupid = responseData.Data.idgrup;
                    sendMediaDropzone();
                    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
                        }).then(function() {
                            var redirectUrl = "{{ url('grub/list') }}";
                            window.location.href = redirectUrl;
                        });
                    } 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
                        });
                    }
                });

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

        // Konfigurasi Dropzone untuk media
        let media = new Dropzone('#dropzone_media', {
            url: "{{ url('grub/_add_attachment') }}",
            autoProcessQueue: false,
            addRemoveLinks: true,
            maxFiles: 2000,
            maxFilesize: 9999999999,
            init: function() {
                let dropzone = this;

                dropzone.on("sending", function(file, xhr, formData) {
                    formData.append("idgrup", grupid);
                });

                dropzone.on("success", function(file, response) {

                });

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

        // Mengirim Dropzone bucket
        function sendBucketDropzone() {
            if (bucket.files.length > 0) {
                bucket.processQueue();
            } else {
                sendData();
            }
        }

        // Mengirim Dropzone media
        function sendMediaDropzone() {
            if (media.files.length > 0) {
                // bucket.processQueue();
                media.processQueue();
            }
        }

        // Mengirim data form jika tidak ada pengunggahan media
        function sendData() {
            let formData = new FormData();
            formData.append("namegrup", $('#namegrup').val());
            formData.append("parentid", $('#parentid').val());
            formData.append("useraccess", $('#useraccess').val());
            formData.append("parentname", $('#parentname').val());
            formData.append("urutan", $('#urutan').val());
            formData.append("status", $('#status').val());
            formData.append("description", $('#summernote-1').summernote('code'));

            $.ajax({
                url: "{{ url('grub/_add_grub') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    let responseData = JSON.parse(response);
                    grupid = responseData.Data.idgrup;
                    sendMediaDropzone();
                    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
                        }).then(function() {
                            var redirectUrl = "{{ url('grub/list') }}";
                            window.location.href = redirectUrl;
                        });
                    } 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
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'An error occurred while updating the content. Please try again.',
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        buttonsStyling: false
                    });
                }
            });
        }
    </script>
@endsection