@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">
                    <h4 class="fw-bold">{{ $title }}</h4>
                </div>

                <div class="row g-3 p-4">
                    <div class="col-md-6">
                        <label class="form-label" for="collapsible-fullname"><span class="text-danger fst-italic">*</span>
                            {{ Session::get('SiteId') == 171 ? 'Hari' : 'Judul Agenda' }}</label>
                        @if (Session::get('SiteId') == 171)
                            <select id="title" name="title" class="select2 form-select" data-placeholder="Pilih Hari">
                                <option value=""></option>
                                @foreach (['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'] as $day)
                                    <option value="{{ $day }}" {{ $agenda[0]['Title'] == $day ? 'selected' : '' }}>
                                        {{ $day }}</option>
                                @endforeach
                            </select>
                        @else
                            <input type="text" id="title" name="title" class="form-control"
                                placeholder="Judul Agenda" value="{{ $agenda[0]['Title'] }}" />
                        @endif
                    </div>

                    <div class="{{ Session::get('SiteId') == 171 ? 'col-md-6' : 'col-md-3' }}">
                        <label class="form-label" for="selectAnimation"><span class="text-danger fst-italic">*</span>
                            {{ Session::get('SiteId') == 171 ? 'Tanggal' : 'Tanggal Mulai' }}</label>
                        <input type="text" class="flatpickr-datetime form-control" placeholder="DD-MM-YYYY HH:MM"
                            name="tanggalawal" id="tanggalawal"
                            value="{{ date('d-m-Y\TH:i', strtotime($agenda[0]['TanggalAwal'])) }}" />
                    </div>

                    <div class="col-md-3 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="selectAnimation"><span class="text-danger fst-italic">*</span>
                            Tanggal Selesai</label>
                        <input type="text" class="flatpickr-datetime form-control" placeholder="DD-MM-YYYY HH:MM"
                            name="tanggalakhir" id="tanggalakhir"
                            value="{{ date('d-m-Y\TH:i', strtotime($agenda[0]['TanggalAkhir'])) }}" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="collapsible-fullname"><span class="text-danger fst-italic">*</span>
                            {{ Session::get('SiteId') == 171 ? 'Disposisi' : 'Penyelenggara' }}</label>
                        <input type="text" id="penyelenggara" name="penyelenggara" class="form-control"
                            placeholder="{{ Session::get('SiteId') == 171 ? 'Disposisi' : 'Penyelenggara' }}"
                            value="{{ $agenda[0]['Penyelenggara'] }}" />
                    </div>

                    <div class="col-md-6 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="selectAnimation"><span class="text-danger fst-italic">*</span> Tipe
                            Agenda</label>
                        <select id="type" name="type" class="select2 form-select"
                            data-placeholder="Pilih Tipe Agenda">
                            <option value="" selected="">Pilih Tipe Agenda</option>
                            @foreach ($agendaType as $agendTy)
                                @if ($agenda[0]['Type'] == $agendTy->Code)
                                    <option value="{{ $agenda[0]['Type'] }}" selected>{{ $agendTy->Description }}
                                    </option>
                                @else
                                    <option value="{{ $agendTy->Code }}">{{ $agendTy->Description }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="nama_pic">Nama PIC</label>
                        <input type="text" id="nama_pic" name="nama_pic" class="form-control"
                            placeholder="PIC Penyelenggara"value="{{ $agenda[0]['NamaPIC'] }}" />
                    </div>

                    <div class="col-md-6 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="collapsible-fullname">Informasi Kontak</label>
                        <input type="text" id="pic" name="pic" class="form-control"
                            placeholder="Informasi Kontak"value="{{ $agenda[0]['PIC'] }}" />
                    </div>

                    <div class="col-md-6 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="status">Status Agenda</label>
                        <select id="status" name="status" class="select2 form-select"
                            data-placeholder="Pilih Status Agenda">
                            <option value=""></option>
                            <option value="Akan Datang" {{ $agenda[0]['Status'] == 'Akan Datang' ? 'selected' : '' }}>Akan
                                Datang</option>
                            <option value="Berlangsung" {{ $agenda[0]['Status'] == 'Berlangsung' ? 'selected' : '' }}>
                                Berlangsung</option>
                            <option value="Terlaksana" {{ $agenda[0]['Status'] == 'Terlaksana' ? 'selected' : '' }}>
                                Terlaksana</option>
                        </select>
                    </div>

                    <div class="col-sm-12 col-md-6 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="media_name">Upload Foto</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="dokumen_name" name="dokumen_name"
                                placeholder="Upload Dokumen" aria-describedby="inputGroupFileAddon04" aria-label="Upload"
                                value="{{ $agenda[0]['Media'] }}" readonly />
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="media_popup"
                                data-bs-target="#UploadMedia" style="border-radius: 0 5px 5px 0;">Upload</button>

                            <div class="modal fade" id="UploadMedia" 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_uploadmedia">
                                            <div class="modal-body" id="modal_uploadmedia">
                                                <input type="file" class="dropify" name="media" id="media"
                                                    data-height="300"
                                                    data-default-file="{{ Config::get('app.url_api') . '/api/Master/Image/png/' . $agenda[0]['Media'] }}" />
                                            </div>

                                        </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-6{{ Session::get('SiteId') == 283 ? ' d-none' : '' }}">
                        <label class="form-label" for="urlreference">Referensi URL</label>
                        <input type="text" name="urlreference" id="urlreference"
                            value="{{ $agenda[0]['UrlReference'] }}" class="form-control" placeholder="Referensi URL">
                    </div>

                    <div
                        class="col-md-6{{ Session::get('SiteId') == 283 || Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                        <label class="form-label" for="tags-input">Tags</label>
                        <input type="text" name="tagsname" id="tagsname" data-tagify value=""
                            class="form-control" placeholder="Tags">
                    </div>

                    <div class="{{ Session::get('SiteId') == 171 ? 'col-md-6' : 'col-md-12' }}">
                        <label class="form-label" for="basic-default-bio">{!! Session::get('SiteId') == 171 ? '<span class="text-danger fst-italic">*</span> Lokasi Kegiatan' : 'Alamat' !!}</label>
                        <textarea class="form-control" id="alamat" name="alamat" rows="1" required>{{ $agenda[0]['Alamat'] }}</textarea>
                    </div>

                    <div class="{{ Session::get('SiteId') == 171 ? 'col-md-6' : 'col-md-12' }}">
                        <label class="form-label" for="collapsible-address">{!! Session::get('SiteId') == 171
                            ? '<span class="text-danger fst-italic">*</span> Nama Kegiatan'
                            : 'Konten / Isi' !!}</label>
                        @if (Session::get('SiteId') == 171)
                            <input type="text" name="namakegiatan" id="namakegiatan" class="form-control"
                                placeholder="Nama Kegiatan" value="{{ $agenda[0]['Deskripsi'] }}">
                        @else
                            <div id="summernote-1">
                                {!! isset($agenda[0]['Deskripsi']) ? $agenda[0]['Deskripsi'] : '' !!}
                            </div>
                        @endif
                    </div>

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

                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-scripts')
    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/jQuery.tagify.min.js"></script>
    <script>
        let siteid = "{{ Session::get('SiteId') }}";

        let flatpickrDateTime = document.querySelector("#tanggalawal");
        flatpickrDateTime.flatpickr({
            enableTime: true,
            dateFormat: "d-m-Y H:i",
            time_24hr: true
        });

        let flatpickrDateTime2 = document.querySelector("#tanggalakhir");
        flatpickrDateTime2.flatpickr({
            enableTime: true,
            dateFormat: "d-m-Y H:i",
            time_24hr: true
        });

        let agendaId = {{ $agenda[0]['AgendaId'] }}
        let input = document.querySelector('#tagsname');
        let Tags = new Tagify(input, {
            originalInputValueFormat: tags => tags.map(tag => tag.value).join(',')
        });

        @php
            $tags = '';
            if (!empty($agenda[0]['Tags'])) {
                foreach ($agenda[0]['Tags'] as $key => $tag) {
                    $tags .= $tag['TagsName'] . (count($agenda[0]['Tags']) == $key + 1 ? '' : ',');
                }
            }
        @endphp

        let tagsName = "{{ $tags }}";
        let tagsArray = tagsName.split(',');
        Tags.addTags(tagsArray);

        function _edit_agenda() {
            if (siteid == 171) {
                deskripsi = $('#namakegiatan').val();
            } else {
                deskripsi = $('#summernote-1').summernote('code');
            }

            let form_data = new FormData();
            let token = $("meta[name='csrf-token']").attr("content");
            form_data.append('media', $('#media')[0].files[0])
            form_data.append('title', $('#title').val())
            form_data.append('tanggalawal', $('#tanggalawal').val())
            form_data.append('tanggalakhir', $('#tanggalakhir').val())
            form_data.append('penyelenggara', $('#penyelenggara').val())
            form_data.append('nama_pic', $('#nama_pic').val())
            form_data.append('pic', $('#pic').val())
            form_data.append('type', $('#type').val())
            form_data.append('alamat', $('#alamat').val())
            form_data.append('deskripsi', deskripsi)
            form_data.append('tagsname', $('#tagsname').val())
            form_data.append('urlreference', $('#urlreference').val())
            form_data.append('status', $('#status').val())

            $.ajax({
                url: "{{ url('agenda/_edit') }}/" + agendaId,
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': token
                },
                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 Ubah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        }).then(function() {
                            var redirectUrl = "{{ url('agenda/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
                        });
                    }
                },

            });
        }

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

            if (siteid == 171) {
                if ($("#title").val() == "" || $("#tanggalawal").val().trim() == "" || $("#penyelenggara").val() ==
                    "" || $("#alamat").val() == "" || $('#namakegiatan').val() == "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Hari, Tanggal, Disposisi, Lokasi, dan Nama Kegiatan Sudah Terisi!');
                    isValid = false;
                }
            } else {
                if ($("#title").val() == "" || $("#tanggalawal").val().trim() == "" || $("#tanggalakhir").val()
                    .trim() == "" || $("#penyelenggara").val() ==
                    "" || $("#type").val() == "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Judul, Tanggal Mulai, Tanggal Selesai, Penyelenggara, dan Tipe Agenda Sudah Terisi!'
                    );
                    isValid = false;
                } else if ($('#media')[0].files.length > 0) {
                    let fotoAllowedFormats = ['jpg', 'jpeg', 'png', 'webp'];
                    let fotoFileName = $('#media')[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 = $('#media')[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_agenda();
            }
        });

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

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

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