@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">
            <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-6 mb-1">
                        <label class="form-label" for="nama"><span class="text-danger fst-italic">*</span> Nama</label>
                        <input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan Nama"
                            value="" required />
                    </div>

                    <div class="col-md-6 mb-1">
                        <label class="form-label" for="nip"><span class="text-danger fst-italic">*</span> Nip</label>
                        <input type="number" class="form-control" id="nip" name="nip" placeholder="Masukkan Nip"
                            value="" required />
                    </div>

                    <div class="col-md-6 mb-1">
                        <label class="form-label" for="jabatan"><span class="text-danger fst-italic">*</span>
                            Jabatan</label>
                        <input type="text" class="form-control" id="jabatan" name="jabatan"
                            placeholder="Masukkan Jabatan" value="" required />
                    </div>

                    <div class="col-md-6 mb-1">
                        <label class="form-label" for="foto_name"><span class="text-danger fst-italic">*</span> Foto</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="foto_name" name="foto_name"
                                placeholder="Upload Foto" aria-describedby="inputGroupFileAddon04" aria-label="Upload"
                                readonly />
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="foto_popup"
                                data-bs-target="#Foto" style="border-radius: 0 5px 5px 0;">Upload</button>

                            <div class="modal fade" id="Foto" 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 Foto</p>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body" id="modal_foto">
                                            <input type="file" class="dropify" name="foto" id="foto"
                                                data-height="300" />
                                        </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-md-12 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="collapsible-address">Tugas Pokok</label>
                        <div id="summernote-1">

                        </div>
                    </div>

                    <div class="col-md-12 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="collapsible-address">Uraian Tugas</label>
                        <div id="summernote-2">

                        </div>
                    </div>

                    <div class="d-flex mt-4">
                        <a href="{{ url('organization/list') }}">
                            <button type="button"
                                class="btn btn-label-secondary waves-effect waves-light m-2">Kembali</button>
                        </a>
                        <button id="addJabatan" 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>
        $('#addJabatan').on('click', function(event) {
            let isValid = true;

            if ($("#jabatan").val() == "" || $("#nama").val() == "" || $("#nip").val() == "" || $('#foto')[0].files
                .length == 0) {
                custom_alert('warning', 'Peringatan',
                    'Pastikan Nama, Jabatan, Nip, dan Foto Sudah Terisi!'
                )
                isValid = false;
            } else if ($('#foto')[0].files.length > 0) {
                let fotoAllowedFormats = ['jpg', 'jpeg', 'png', 'webp'];
                let fotoFileName = $('#foto')[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 = $('#foto')[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) {
                AddJabatan();
            }
        })


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

            formData.append('foto', $('#foto')[0].files[0]);
            formData.append("jabatan", $('#jabatan').val());
            formData.append("nama", $('#nama').val());
            formData.append("nip", $('#nip').val());
            formData.append("tugaspokok", $('#summernote-1').summernote('code'));
            formData.append("uraiantugas", $('#summernote-2').summernote('code'));

            $.ajax({
                url: "{{ url('jabatan/_add_jabatan') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    var responseData = JSON.parse(response);
                    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('jabatan/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
                    });
                }
            });

        }

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

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

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