@extends('payroll.employee_frontend.layouts.employee')
@section('content')
    <section>
        <div class="col-12 mt-4">
            <h2 class="page-title text-center">Acknowledgement Notice</h2>
            <div class="mb-2 heading-border"></div>
        </div>
    </section>
    <section class="px-3  pt-3 pt-lg-5 row">
        <div class="col-12 mb-4">
            <div class="blu-card d-flex flex-wrap">
                <div class="col-12 col-md-6">
                    <h5 class="mb-3 card-in-h">
                    </h5>
                </div>
                <div class="col-12 col-md-6 text-left text-md-right">
                </div>
                <div class="col-12 table-responsive">
                    <table class="table table-sm table-bordered table-hover table-striped">
                        <thead>
                            <th>#</th>
                            <th>Image</th>
                            <th>Message</th>
                            <th>Publish Date</th>
                            <th>Action</th>
                        </thead>

                        <tbody>
                            @foreach ($notices as $key => $notification)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td class="text-center">
                                        @if ($notification->image == null)
                                            Not Found
                                        @else
                                            <a href="{{ asset('storage/admin_notifications/' . $notification->image) }}"
                                                target="_blank">
                                                Document
                                            </a>
                                        @endif
                                    </td>
                                    <td>Please read the document and confirm your acknowledgement</td>

                                    <td>
                                        @if ($notification->schedule_start_time)
                                            {{ date('d-m-Y, h:i A', strtotime($notification->schedule_start_time)) }}
                                        @endif
                                    </td>
                                    <td>
                                        @if(!$notification->acknowlegement()->where('employee_id', active_user())->first())
                                            <button type="button" class="btn btn-warning btn-sm py-1"
                                                onclick="openModal({{ $notification->id }},{{ json_encode($notification->message) }})">Accept</button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

                        <div class="d-flex justify-content-end">
                            {!! $notices->links() !!}
                        </div>
                    </table>
                </div>
            </div>
        </div>
        @include('payroll.employee_frontend.notification.acknowledgement_modal')
    </section>
@endsection
@section('script')
    <script>
        function loader(buttonId, title, status = true) {
            $("#" + buttonId).prop("disabled", status).text(title);
        }

        function openModal(notice_id,message) {
            $('#notice_id').val(notice_id);
            $('#ack_message').html(message);
            $('#ack_modal').modal('show');
        }

        function acceptAcknowledgement() {
            if (!confirm('Are you sure?')) return false;

            let link = "{{ route('employee.accept_acknowledgement') }}";
            loader('ack_btn', '...');
            ajaxCallV2(link, 'POST', {
                'notice_id': $('#notice_id').val()
            }, (data) => {
                $('#loader').hide();
                loader('ack_btn', 'Accepted ☑');
            }, (error) => {
                loader('ack_btn', 'Agree', false);
                $('#loader').hide();
            });
        }
    </script>
@endsection