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

@section('plugin-styles')
    <style type="text/css">
        @media (min-width: 992px){
            .modal-lg, .modal-xl {
                max-width: 90%  !important;
            }
        }
    </style>
@stop
@section('content')
    @php $user = auth()->user(); @endphp

    <div class="content">
        <x-content.header title="{{__('announcements.title')}}" />
        <form name="company-profile" action="{{route('settings.profile.update')}}" method="POST">
            <div class="tw-card">
                <div class="p-6">

                    <div class="form_group">
                        <label class="form-label text-sm-semibold">{{__('forms.lbl_header')}}</label>
                        <input id="announcement_header" type="file" name="announcement_header" class="dropify cropper"
                            data-default-file="{{getMediaUrl($settings, 'announcement_header')}}"
                            data-allowed-file-extensions="jpg jpeg png"
                            data-uri="{{route('announcements.settings.store')}}"
                                />
                        <p>
                            <small class="text-muted">Recommended: 1024px x 200px PNG, JPEG with transparent background</small>
                        </p>
                        <button type="button" class="btn-primary-base btn-upload mt-4 hidden">
                            <i class="mdi mdi-pencil"></i> {{trans('forms.change_header_title')}}
                        </button>

                    </div>

                    <div class="form_group">
                        <label class="form-label text-sm-semibold">{{__('forms.lbl_footer')}}</label>
                        <input id="announcement_footer" type="file" name="announcement_footer" class="dropify cropper"
                            data-default-file="{{getMediaUrl($settings, 'announcement_footer')}}"
                            data-allowed-file-extensions="jpg jpeg png"
                            data-uri="{{route('announcements.settings.store')}}"
                                />
                        <p>
                            <small class="text-muted">Recommended: 1024px x 200px PNG, JPEG with transparent background</small>
                        </p>
                        {{-- <button type="button" class="btn btn-info btn-rounded btn-sm btn-upload mt-4 hidden">
                            <i class="mdi mdi-pencil"></i> {{trans('forms.change_footer_title')}}
                        </button> --}}

                    </div>

                    <div class="mt-4 border-top">
                        <a href="{{url('announcements')}}"  class="btn-tertirary mt-4">{{trans('forms.lbl_cancel')}}</a>
                    </div>
                </div>
            </div>
        </form>
    </div>



@endsection

@section('footer-script')
    <!-- plugin js for this page -->
    <!-- Custom js for this page-->
    <script type="text/javascript">

        $("input[type='file']").on('change', function(){
            $(".btn-upload").removeClass("hidden");
        });

        $(".btn-save").on("click", function(event) {
            event.preventDefault();
            let form = $(this).parents('form');
            PDRequest({
                type    : "PUT",
                url     : form.prop("action"),
                data    : form.serialize(),
                event   : event
            }).then((response) => {
                window.location = "{{route('settings.profile')}}";
            });
        });

        drEvent.on('dropify.beforeClear', function(event, element){
            if(confirm("{{trans('forms.do_you_really_want_delete')}}")) {
                return PDRequest({
                    type    : "DELETE",
                    url     : "{{route('announcements.settings.index')}}/"  + $(element.element).attr('name')
                }).then(function(response){
                    return $(".btn-upload").addClass("hidden");
                });;
            } else {
                return false;
            }
        });

        // $("body").on("click", ".delete-location", function(event) {
		// 	event.preventDefault();

        //     if($(this).data('uri') !== ""){
        //         PDRemove({
        //             url : $(this).data('uri')
        //         });
        //     }
        // });

    </script>
    <!-- End custom js for this page-->
@stop