@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/'.$announcement->id)}}" method="POST">
            <x-content.header title="{{ __('announcements.title') }}">
                <x-slot:headerRight>
                    <button type="submit" class="btn-primary-base btn-save">
                        {{trans('forms.lbl_save')}}
                    </button>

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

                    <button type="button"
                        data-id="{{$announcement->id}}"
                        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')
        </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    : "PUT",
                    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");
        });

    </script>
@stop