@extends('users.layout.app')
@section('scripts')
<style type="text/css">
.project-list-wrapper {
    width: 33.33%;
    float: left;
    text-align: center;
    padding: 0 15px;
    margin: 0 0 60px;
}

.add-project-wrapper {
    width: 480px;
    max-width: 100%;
    position: relative;
    padding: 58% 0 0;
    margin: 0 auto;
}

.add-project-wrapper .add-project {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }
    * {
    box-sizing: border-box;
}
div {
    display: block;
}
</style>

<script>
$(document).ready(function () {
$('#yourModal').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
})
$('#confirm').on('click', function(e) {
    e.preventDefault();

    var id = $(this).data('id');
    // console.log(id);
    $('#yourModal').data('id', id).modal('show');
});
});
</script>
@endsection
@section('content')
@include('users.partials.sidebar')

<div class="container">
    <div class="row">
        <div class="col-ms-9">
        	<div class="project-list-wrapper">
		        <div class="add-project-wrapper">
		            <div class="add-project">
		                <a href="{{url('projects/create')}}">
		                    <span class="text-wrapper">
		                        <span class="plus"><img src="http://localhost/OYOBuddy/public/assests/builder/img/plus.png" alt="add icon" width="25" height="25"></span>
		                        <span>Add new project</span>
		                    </span>
		                </a>
		            </div>
		        </div>
        	</div>
        


  @if(!empty($projects))
            @foreach($projects as $project)

                <div class="project-list-wrapper">
                    <div class="add-project-wrapper">
                        <div class="add-project">
                            <div class="project-thumbnail">
                                <img src="{{asset('img/project-thumbnail.jpg')}}" data-url=""
                                     alt="project-thumbnail"
                                     width="480" height="353">

                                <div class="other-option uk-flex uk-flex-center uk-flex-middle uk-flex-space-between">
                                    <div class="option-btn">
                                        <a href="{{url('projects/show',[$project->id])}}" target="_blank" class="ripple-btn">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="12"
                                             viewBox="0 0 20.03 12">
                                            <path id="priview_icon" data-name="priview icon" class="cls-1"
                                                  d="M1552.23,25.786a11.457,11.457,0,0,0-19.91,0,0.413,0.413,0,0,0,0,.429,11.457,11.457,0,0,0,19.91,0A0.374,0.374,0,0,0,1552.23,25.786Zm-9.95,5.357A10.642,10.642,0,0,1,1533.21,26a10.561,10.561,0,0,1,18.13,0A10.613,10.613,0,0,1,1542.28,31.143Zm0-9A3.857,3.857,0,1,0,1546.11,26,3.826,3.826,0,0,0,1542.28,22.143Zm0,6.857a3,3,0,1,1,2.98-3A2.973,2.973,0,0,1,1542.28,29Zm0-4.714v0.857a0.857,0.857,0,1,1-.85.857h-0.85A1.7,1.7,0,1,0,1542.28,24.286Z"
                                                  transform="translate(-1532.28 -20)"/>
                                        </svg>
                                    </span>
                                            <span class="option-label"><a href="{{url('projects/show',[$project->id])}}">Preview</a></span>
                                        </a>
                                    </div>
                                   
                                        <div class="option-btn">
                                            <a href="{{url('projects/'. $project->id .'/edit' )}}" class="ripple-btn">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                             viewBox="0 0 14 14">
                                            <path class="cls-1"
                                                  d="M894.088,417.888a3.085,3.085,0,0,0-4.371,0l-8.014,8.021a0.4,0.4,0,0,0-.113.23l-0.594,4.4a0.4,0.4,0,0,0,.113.337,0.407,0.407,0,0,0,.284.12,0.308,0.308,0,0,0,.053,0l2.65-.359a0.4,0.4,0,0,0-.107-0.8l-2.125.287,0.415-3.072,3.228,3.233a0.406,0.406,0,0,0,.284.119,0.392,0.392,0,0,0,.283-0.119l8.014-8.022A3.093,3.093,0,0,0,894.088,417.888Zm-4.216.985,1.346,1.348-7.313,7.322-1.346-1.347Zm-4.078,10.558-1.316-1.317,7.313-7.323,1.316,1.318Zm7.874-7.9-3.22-3.223A2.289,2.289,0,0,1,893.668,421.532Z"
                                                  transform="translate(-881 -417)"/>
                                        </svg>
                                    </span>
                                                <span class="option-label"><a href="{{url('projects/'. $project->id .'/edit' )}}">Edit</a></span>
                                            </a>
                                        </div>

                                         <div class="option-btn">
                                          <a href="" class="ripple-btn">
                                          <span class="option-label">

                                          <a href="#" data-id="{{$project->id}}"  id="confirm">Delete</a></span>
                                          </a>
                                        </div>
                                    
                                 <div class="modal fade" id="yourModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                      <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                   
                                          <div class="modal-body">
                                            <h2> Are you sure you want to delete this project </h2>
                                          </div>
                                          <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                            <button type="button" class="btn btn-primary danger">Yes</button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>                                    
                                </div>

                                <span class="overlay"></span>
                            </div>
                        </div>
                    </div>
                    <div class="project-name">
                        <h3>{{$project->project_name}}</h3>
                        
                    </div>
                </div>
</div>
    </div>
</div>
@endforeach
@endif

@section('scripts')


<script>

$('#confirm').click(function(event){
event.preventDefault();
var id = $(this).data('id');

// console.log(id);

    $(".modal-header #id").val(id);
});

</script>
@endsection

@endsection