@extends('admin.layout.master')

@section('content')

<div class="card sina-card">
    <div class="card-header card-header-s">
        <div class="d-flex justify-content-between">
            <h4>Notice</h4>
            <button class="btn btn-sm bg-white text-success add_new_notice">Add New</button>
        </div>
    </div>
    <div class="card-body">
        <table class="table table-hover" id="notices">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Subject</th>
                    <th>Description</th>
                    <th>Posted Date</th>
                    <th>Notice For</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($notices as $key=>$notice)
                    <tr>
                        <td>{{++$key}}</td>
                        <td>{{$notice->subject}}</td>
                        <td>{{$notice->description}}</td>
                        <td>{{date('d-m-Y', strtotime($notice->created_at))}}</td>
                        <td>
                            @forelse ($notice->role_ids as $role)
                                <span class="badge badge-info">{{$role->name}}</span>
                            @empty
                                Not Assigned Yet
                            @endforelse
                        </td>
                        <td id="current_status_{{$notice->id}}">{!! $notice->status == 1 ? '<span class="badge badge-info">Active</span>' : '<span class="badge badge-danger">Inactive</span>' !!}</td>
                        <td nowrap>
                            <button data-id="{{$notice->id}}" data-status="{{$notice->status}}" id="status_change_{{$notice->id}}" class="status_change btn btn-sm btn-{{$notice->status == 1 ? 'danger' : 'info'}}">{{$notice->status == 1 ? 'Inactive' : 'Active'}}</button>
                            <button data-id="{{$notice->id}}" class="btn_edit btn btn-sm btn-warning">Edit</button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center">No Notice Found</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
  
<div class="modal fade" id="noticeModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="noticeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="noticeModalLabel">Add Notice</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('notice.store')}}" method="post">
                @csrf
                <input type="hidden" id="row_id" name="row_id" value="">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="">Notice For (Receivers Role)</label>
                        <select name="role_id[]" id="role_id" class="form-control select_2" required multiple style="width: 100%">
                            @forelse ($roles as $role)
                                <option value="{{$role->id}}">{{$role->name}}</option>
                            @empty
                                
                            @endforelse
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="">Subject</label>
                        <textarea name="subject" id="subject" cols="30" rows="2" required class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="">Description</label>
                        <textarea name="description" id="description" cols="30" rows="5" required class="form-control"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-5">Send</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')

    <script>
        $(document).ready(function(){
            $('.add_new_notice').click(function(){
                $('#row_id').val('');
                $('#role_id').val('').trigger('change');
                $('#subject').val('');
                $('#description').val('');
                $('#noticeModal').modal('show');
            });

            $('.status_change').click(function(){
                let id=$(this).attr('data-id');
                let will_status=$(this).attr('data-status') == 1 ? 2 : 1;
                $(this).text(will_status == 1? 'Activating': 'Deactivating');
                ajaxCall('{{route('notice.status_change')}}','PUT', {id: id, will_status:will_status}, function(data){
                    console.log(data);
                    $(`#status_change_${id}`).
                    attr('data-status',will_status).text(will_status == 1 ? 'Inactive': 'Active').
                    removeClass(will_status == 1 ? 'btn-info': 'btn-danger').
                    addClass(will_status == 1 ? 'btn-danger': 'btn-info');

                    $(`#current_status_${id}`).html(will_status == 1 ? '<span class="badge badge-info">Active</span>' : '<span class="badge badge-danger">Inactive</span>');
                })
            });

            $('.btn_edit').click(function(){
                let id = $(this).attr('data-id');
                ajaxCall('{{route('notice.edit')}}','GET', {id: id}, function(data){
                    $('#row_id').val(data.id);
                    $('#role_id').val(data.all_roles).trigger('change');
                    $('#subject').val(data.subject);
                    $('#description').val(data.description);
                    $('#noticeModal').modal('show');
                })
            });
        });
        $('.select_2').select2();
        $('#notices').DataTable();
        
    </script>

@endsection