@extends('layouts/contentNavbarLayout')

@section('title', 'Challenges')

@section('content')

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5>NOTIFICATIONS {{ strtoupper($type) }} </h5>
        </div>
        <div class="card-body">
            @if(!empty(Session::get('success')))
                <div class="alert alert-success" role="alert">
                    {{  Session::get('success') }}
                </div>
            @endif
            @if(!empty(Session::get('error')))
                <div class="alert alert-danger" role="alert">
                    {{  Session::get('error') }}
                </div>
            @endif
            @include('content/notifications/create/'.$type)
            <table class="table">
                <thead>
                <tr>
                    <th>Picture</th>
                    <th>Title</th>
                    <th>Date</th>
                    <th>Status</th>
                    <th class="text-center">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($notifications as $notification)
                    <tr>
                        <td width="100px">
                            <img
                                    src="{{ $notification->image ?  asset('uploads/'.$notification->image) : asset('assets/img/default_image/default_company.png') }}"
                                    class="company-logo" alt="Logo" width="100">
                        </td>
                        <td>{{ $notification->title }}</td>
                        <td>{{ $notification->created_at }}</td>
                        <td>
                            @if( $notification->enabled == 1 )
                                <div class="text-center mb-2 bg-success text-white">Active</div>
                            @else
                                <div class="text-center mb-2 bg-danger  text-white">Inactive</div>
                            @endif
                        </td>

                        <td class="text-center">
                            <a href="{{ route('notifications.edit', [$notification->id, $type]) }}"
                               class="btn btn-icon btn-info btn-sm" title="Edit challenge">
                                <i class="mdi mdi-pencil-outline"></i>
                            </a>
                            {{--                            <a href="{{ route('challenges.affect-challenge-to-company', $challenge->id) }}"--}}
                            {{--                               class="btn btn-icon btn-info btn-sm" title="Affect challenge to company">--}}
                            {{--                                <i class="mdi mdi-arrow-right-top-bold"></i>--}}
                            {{--                            </a>--}}
                            {{--                            <a href="{{ route('challenges.index',['id' => $challenge->id]) }}"--}}
                            {{--                               class="btn btn-icon btn-primary btn-sm">--}}
                            {{--                                <i class="mdi mdi-account-outline"></i>--}}
                            {{--                            </a>--}}

                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6">
                            <div class="alert alert-info col-md-12" role="alert">
                                No content found !
                            </div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        $('#blockListDepartment').show();
        $('#blockListEmployees').show();
        $(document).ready(function() {
            selectDepartmentsEmployees();

            $('#birthday').on('change', function() {

                if ($('#birthday').val() == 'Family') {
                    $('#block_date_birthday').hide();
                    $('#date_birthday').val('');
                }
                if ($('#birthday').val() == 'Birthday') {
                    $('#block_date_birthday').show();
                }
            });
        });

        function selectDepartmentsEmployees() {
            var arrayDepartmentsSelected = $('#arrayDepartmentsSelected').val();
            var arrayEmployessSelected = $('#arrayEmployessSelected').val();
            //$('#select_company, #type').change(function() {
            var companyId = $('#company_id').val();
            var type = $('#type_dep_empl').val();
            if (companyId != '' && type != '') {
                // List Departments by Company
                if (type == 'Department') {
                    $('#selectDepartment').empty();
                    $('#selectEmployees').empty();
                    $.ajax({
                        url: "{{ route('list-department') }}",
                        data: { 'id': companyId },
                        type: 'GET',
                        dataType: 'json',
                        success: function(result) {
                            result.forEach((item) => {
                                var select = '';
                                if (arrayDepartmentsSelected.includes(item.id)) {
                                    select = 'selected';
                                }
                                var html = '<option value=' + item.id + ' ' + select + '>' + item.name + '</option>';
                                $('#selectDepartment').append(html);
                            });
                            $('#blockListDepartment').show();
                            $('#blockListEmployees').hide();
                        }
                    });
                }
                // List Employees by Company
                if (type == 'Employees') {
                    $('#selectDepartment').empty();
                    $('#selectEmployees').empty();
                    $.ajax({
                        url: "{{ route('list-employees') }}",
                        data: { 'id': companyId },
                        type: 'GET',
                        dataType: 'json',
                        success: function(result) {
                            result.forEach((item) => {
                                var select = '';
                                if (arrayEmployessSelected.includes(item.id)) {
                                    select = 'selected';
                                }
                                var html = '<option value=' + item.id + ' ' + select + '>' + item.name + ' ' + item.username + '</option>';
                                $('#selectEmployees').append(html);
                            });
                            $('#blockListDepartment').hide();
                            $('#blockListEmployees').show();
                        }
                    });
                }
            }
        }


        // });
        // $('#blockListDepartment').hide();
        // $('#blockListEmployees').hide();
    </script>
@endsection