@extends('admin.sub_contents.base')  
@section('main') 
<style type="text/css">
  	.list_table tbody tr td {
    font-size: 12.5px;
    font-weight: 400;
    border-style: dashed;
}

    .list_table thead tr th, .list_table tbody tr td {
        padding: 11px 6px 10px;
    }

    .table-bordered {
        border: none !important;
    }

 
	.requirement_box{
		width: 100%;
	    height: 40px;
	    background: #fff;
	    /*box-shadow: 0px 0px 1px rgb(98, 95, 139);*/
	    padding: 10px;
	    border-radius: 2px;
	    margin-bottom: 10px;
	    border: 1px solid #e4e4e4;
	}
	.uni_name{
		position: relative;
		top: 10%;
		font-size: 12px;
	    font-weight: 600;
	    color: rgb(98, 95, 139);
	    cursor: pointer;
	}
	.requirement_box:last-child{
		margin-bottom: 0;
	}
	.uni_name:hover{
		color: #ff7f00;
		transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	}
	.sl_number{
		color: #625f8b;
	    font-size: 14px;
	    position: relative;
	    left: -28px;
	    top: 2px;
	}

	.archive_btn:hover{
		color: #ff7f00;
    	transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	}
	.archive_btn{
		color: rgb(98, 95, 139);
		font-size: 15px;
	    top: 2px;
	    position: relative;
	}

	.requirement_map_part .single_doc_item{
        display: flex;
        background: fff;
        padding: 7px 16px;
        margin-top: 10px;
        border-radius: 0.75rem;
        border: 1px solid #e9f0f3;
    }
    .requirement_map_part .single_doc_item:hover{
        background: #f5f4fd;
    }
    .requirement_map_part .single_doc_item .left{
        width: calc(100% - 190px);
        align-self: center;
    }
    .requirement_map_part .single_doc_item .left strong{
        color: rgb(57, 59, 62);
        font-size: 12px;
    }
    .requirement_map_part .single_doc_item .right{
        width: 154px;
        align-self: center;
        text-align: -webkit-right;
    }
    .requirement_map_part .single_doc_item .round_btn_groups .label_badge_radius {
	    border-radius: 20px;
	    padding: 1px 10px;
	    font-size: 11px;
	    font-weight: 400;
	    line-height: 1.3;
	    letter-spacing: .2px;
	    background: #f5f4fd;
	    border: 1px solid #ceccda;
	}

	.requirement_map_part .single_doc_item .right .add_more_drop .dropdown-toggle:after{
        display: none;
    }
    /*.requirement_map_part .single_doc_item .right .add_more_drop .dropdown-toggle{
        color: #c3c3c3;
        cursor: pointer;
        border: .5px solid #d8e2e7;
        border-radius: 50%;
        padding: 3px 5px;
        font-size: .9rem;
        padding: 3px 5px;
    }*/
    .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-menu.show{
        /*margin-left: -97px;*/
        min-width: auto;
        padding: 0;

        z-index: 2;
        top: -5px !important; 
        left: 60px !important;
    }
    .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-menu.show .dropdown-item{
        background: #dedbf1;
        color: #2e1153;
        font-size: 12px;
        border: none;
    }
    .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-menu.show .dropdown-item:hover{
        background: #2e1153;
        color: #fff !important;
    }
    .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-menu.show .activate{
        background: #2e1153;
        color: #fff;
    }
    .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-menu.show .dropdown-item:first-child{
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
    }
    .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-menu.show .dropdown-item:last-child{
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
    }


    .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-toggle{
        background: #dedbf1;
        padding: 4px 8px 2px;
        border-radius: 50%;
        font-size: .8rem;
        border: 1px solid transparent;
        color: #2e1153;
        cursor: pointer;
    }
    .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-toggle:hover {
        color: #ff7f00 !important;
        transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        border: 1px solid #ff7f00;
    }
    .requirement_map_part .single_doc_item .right .add_more_drop{
        z-index: auto !important;

        margin: 0 3.5px;
    }

    .requirement_map_part .single_doc_item .round_btn_groups .add_more_drop .fa-paperclip{
        padding: 4px 6px 4px !important;
        font-size: .82rem;
      }
      .requirement_map_part .single_doc_item .round_btn_groups .add_more_drop .fa-upload, .requirement_map_part .single_doc_item .round_btn_groups .add_more_drop .fa-trash, .requirement_map_part .single_doc_item .round_btn_groups .add_more_drop .fa-pencil, .requirement_map_part .single_doc_item .round_btn_groups .add_more_drop .fa-info, .requirement_map_part .single_doc_item .round_btn_groups .add_more_drop .fa-archive{
        color: #826aa0 !important;
      }
      .requirement_map_part .single_doc_item .round_btn_groups .add_more_drop .fa-eye{
        padding: 4px 4.5px !important;
        color: #826aa0 !important;
      }
      .requirement_map_part .single_doc_item .right .add_more_drop .dropdown-toggle{
        padding: 4px 5px !important;
      }
      .requirement_map_part .single_doc_item .round_btn_groups .add_more_drop .font-icon{
        color: #826aa0 !important;
      }

      .requirement_map_part .single_doc_item .right .add_more_drop{
        z-index: auto !important;

        margin: 0 3.5px;
    }

    .requirement_map_part .single_doc_item .right img {
        width: 22px;
        height: 22px;
        border-radius: 50%;
    }

    .requirement_map_part .single_doc_item .round_btn_groups{
        display: flex;
        width: 174px;
        justify-content: flex-end;
      }


    .open_requirement_doc_info_div_inner{
        padding: 7px 16px;
        margin-top: 10px;
        border-radius: 30px;
        border: 1px solid #e9f0f3;
        display: flex;
        width: fit-content;
        margin-left: auto;
        background: #f5f4fd;
    }
    .open_requirement_doc_info_div_inner .btn_part{
        width: 175px;
        text-align-last: right;
        margin-top: 3px;
        margin-left: 15px;
    }

    .label_badge_radius {
	    background-image: linear-gradient(to right, rgb(46 17 83 / 19%), rgb(245, 244, 253));
	    color: rgb(46, 17, 83);
	    border-radius: 20px;
	    padding: 1px 10px;
	    font-size: 11px;
	    font-weight: 400;
	    line-height: 1.3;
	    letter-spacing: .2px;
	    display: inline-block;
	}

	.requirement_map_part .single_doc_item .left .pretty.p-switch.p-fill input:checked~.state.p-success:before {
        background-color: #2e1153!important;
    }
    .requirement_map_part .single_doc_item .left .pretty.p-switch input:checked~.state.p-success:before{
        border-color: #2e1153!important;;
    }

    
 
	
</style>

<div class="row requirement_map_part">
    <div class="col-lg-12"> 
        <div class="row">
            <div class="col-md-12">
                <div class="content_header mb-2 ml-0">
                <div class="left">
                    <i class="fa fa-list-ul" style="padding: 6px 6.8px;"></i>
                </div>
                <div class="right" style="display: flex; align-self: center;">
                    <span class="main_title" style="font-size: 18px;">Document or Information Required</span> 
                    {{-- <span class="badge badge-success ml-2" style="background: #ffffff; font-weight: 700; font-size: 12px !important; border-radius: 10px; padding: 4px 12px !important; border: 1px solid #d4d2df; color: #2e1153; position: relative; margin-left:5px;">{{$requirements->count()}}</span>  --}}
                </div>
                </div>
            </div>
            <div class="col-md-2 mb-2 ms-4 ps-4">  
                <span class="btn open_modal_page submit_button" data-url="{{route('modal-get',['add_doc_required', 'id'=>$proposal_details->id])}}" data-title="Add Requirement" style="padding: 4px 11px!important; height: 22px!important; font-size: 13px!important;">Add
                </span> 
            </div>
        </div>
    </div>
        <div class="table-responsive ms-4 ps-4 mt-1">
            @if($requirements->isEmpty())
            <div class="alert mb-1" role="alert" style="border-color: #e9f0f3; font-size: 12px !important; color: #dc3545; border-radius: 30px; padding: 8px 15px;">
                <span>No Requirement available.</span>
            </div>
            @else
            @foreach($requirements as $key=>$row)
            <div class="single_doc_item mb-3">
                <div class="left_icon" style="align-self: center;">
                    @if($row->need_upload)
                    <i class="fa fa-file-text tooltips" title="Document" style="background: #f1f0fb; padding: 4px 5px; border-radius: 50%; border: 1px solid #ceccda; margin: 0 5px 0 -5px; top: 7px; position: relative;"></i>
                    @else
                    <i class="fa fa-info tooltips" title="Information" style="background: #f1f0fb; padding: 4px 8px; border-radius: 50%; border: 1px solid #ceccda; margin: 0 5px 0 -5px; top: 7px; position: relative;"></i>
                    @endif
                </div>
                <div class="left ml-2">
                    <span>{{ $row->requirement_title }} </span>  
	                <br> 
                   <small style="color: rgb(134, 142, 150); font-size: 12px !important;">{{ utc_to_ltz($row->created_at) }} </small> 
                </div>
                <div class="right"> 
                    <div class="round_btn_groups">
                        {{-- <span style="border-bottom: none;">
                            <div class="add_more_drop tooltips" title="" data-original-title="View File">
                                <i class="fa fa-eye dropdown-toggle"></i>
                            </div>
                        </span> --}}
                        @if($row->need_upload)
                        <span class="add_more_drop add_more_drop" style="border-bottom: none;margin-top: -1px; margin-bottom: 1px;">
                            <span class="fa fa-upload tooltips upload_document hand dropdown-toggle" aria-hidden="true" data-id="{{$row->id}}" title='Upload Document'></span>
                        </span>
                        @endif
                        @if($row->document_file)
                        <a href="{{ asset('uploads/required_doc') }}/{{$row->document_file}}" download="{{ $row->document_file }}" style="border-bottom: none;">
	                        <div class="add_more_drop tooltips" title="" data-original-title="Download">
	                            <i class="fa fa-paperclip dropdown-toggle"></i>
	                        </div>
	                    </a>
                        @endif
                        <span class="add_more_drop open_modal_page" data-url="{{route('modal-get',['name'=>'edit_doc_required','id'=>$row->id])}}" data-title="Edit Requirement" data-toggle="tooltip" data-original-title="Edit">
                            <i class="fa fa-pencil action_button_hover dropdown-toggle"></i>
                        </span>
                        <span class="add_more_drop delete_doc_required" data-id="{{$row->id}}" data-toggle="tooltip" data-original-title="Delete">
                            <i class="fa fa-trash delete action_button_hover dropdown-toggle"></i>
                        </span>
                    </div>
                </div>
                 
            </div> 
            @endforeach
            @endif
        </div>
    </div>
</div>
 
@endsection

<script>
    $(function(){

        var form_row_added=false;

        $('.upload_document').on('click', function(){ 
            if(form_row_added){ 
                $('.open_department_info_div').remove();
                form_row_added=false;
            } 
            var self=$(this);  
            var self_tr=self.closest('.single_doc_item');

            var req_id=self.data('id');

            form_row_added=true;

            self_tr.after( 
            "<div class='open_department_info_div'><div class='open_document_info_div_inner'></div></div>"
            );

            fetch_sub_content(
                '.open_document_info_div_inner',
                "{{ route('sub-content', ['name'=>'upload_document_required']) }}?req_id="+req_id
            ); 
            
        });


        $('.delete_doc_required').on('click', function(){ 
            var id = $(this).attr("data-id"); 
            var form_data={
                _token: "{{ csrf_token() }}",  
                delete_id: id,
            }  
            swal({
                title: "Are you sure?",
                text: "You will not be able to recover this data!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                cancelButtonClass: "btn-info",
                confirmButtonText: "Yes, delete!",
                cancelButtonText: "No, cancel!",

            }, function(isConfirm){

                if(isConfirm){  
                    $.post("{{ route('ajax-post', ['name'=>'delete_doc_required']) }}",form_data
                    ).done(function(res){ 
                        pop_up_msg(res.msg); 
                        fetch_sub_content(
                            '#doc_required_load',
                            "{{ route('sub-content', ['name'=>'document_required_load','id'=>$proposal_details->id]) }}"
                        );

                    }).fail(function(err){ 
                        pop_up_msg(err_msg(err), 'error'); 
                    }); 
                } 
            }); 
                        
        });
    });
</script>