@extends('layouts.app')
@section('title', trans('announcements.title'))

@section('plugin-styles')
    <link rel="stylesheet" href="{{asset('vendors/jquery-file-upload/uploadfile.css')}}">
@stop

@section('content')
    <div class="content">
        <form id="form" name="modal-form" action="{{url('announcements')}}" method="POST">
            <x-content.header title="{{ __('announcements.title') }}">
                <x-slot:headerRight>
                    <button type="submit" class="btn-primary-base btn-save">
                        {{trans('forms.lbl_create')}}
                    </button>

                    <button type="submit" class="btn-secondary-base btn-save btn-concept">
                        {{trans('forms.lbl_save_concept')}}
                    </button>

                    <button type="button"
                        data-id="0"
                        data-uri="{{route('announcements.preview')}}"
                        class="btn-secondary-base btn-preview">
                        <x-svg-icon class="text-custom-orange-900" icon="icon-eye" width="16" height="16" />
                    </button>

                    <a href="{{url('announcements')}}" class="btn-tertiary-base">
                        {{trans('forms.lbl_cancel')}}
                    </a>
                </x-slot:headerRight>
            </x-content.header>

            @include('announcement::form', ['edit' => false])

        </form>
    </div>
    @include('announcement::preview')
@stop

@section('footer-script')
    <!-- Custom js for this page-->
    <script src="{{asset('js/jquery-file-upload.js')}}"></script>

    <!-- End plugin js for this page -->
    <script type="text/javascript">
        $(".btn-save").on("click", function(event) {
            event.preventDefault();
            if($("#form").valid()) {
                data = $('#form').serialize();
                data = data+"&files="+ JSON.stringify(selectedFiles);

                if($(this).hasClass('btn-concept')) {
                    data = data+"&save_as_concept=1";
                }

                PDRequest({
                    type    : "POST",
                    url     : $("#form").prop("action"),
                    data    : data,
                    event   : event
                }).then(response => {
                    window.location = "{{route('announcements.index')}}";
                });
            }
        });

        $('input[name="notify_others"]').change(function() {

            if($(this).is(":checked")) {
                $(".notfiy_others_dependent").removeClass("hidden");
            } else {
                $(".notfiy_others_dependent").addClass("hidden");
            }
        });

        // Handling clicks for the second set of tabs
        $("body").on("click", ".tab-btn", function() {
            // Reset all tabs and contents for the second set
            $(".tab-btn").removeClass(
                "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
            );

            $(".tab-pane-box").addClass("hidden");

            // Set new active state for the clicked tab in the second set
            $(this).addClass(
                "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
            );

            $("#content-"+$(this).data('content')).removeClass("hidden");
        });

        // function changeTranslation(){
        //     var uploadText = "{{trans('forms.lbl_upload')}}";
        //     var dragText = "{{trans('label.Drag_Drop_Files')}}";
        //     if ($('#fileuploader').find('.ajax-file-upload').length ) {
        //         $('#fileuploader').find('.ajax-file-upload').text(uploadText);
        //         $('#fileuploader').find('span').find('b').text(dragText);
        //         clearInterval();
        //     }

        //     }
        // setInterval(changeTranslation, 1);

    </script>
@stop