@extends('users.layout.app')
@section('scripts')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<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).on('click', '.confirm-room', function (e) {
    e.preventDefault();
    var id = $(this).data('id');

    var base_url = {!! json_encode(url('/')) !!};
    var project_id = {!! $id !!};


     var url =  base_url +'/room/confirm-delete/'+id;

    // console.log(url);
    swal({
            title: "Are you sure you want to delete this room!",
            type: "error",
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes!",
            showCancelButton: true,
        },
        function() {
            $.ajax({
                type: "GET",
                url: base_url +'/room/confirm-delete/'+id,
                data: {id:id},
                success: function (data) {
                    console.log(data);
                    if (data) {
                            location.reload();
                          }
                    }
            });
    });
});

</script>

@endsection
@section('content')
@include('users.partials.sidebar')
{{-- <div id="content">
    <div class="row">
        <div class="col-sm-9">
        	<div class="project-list-wrapper">
		        <div class="add-project-wrapper">
		            <div class="add-project">
		                <a href="{{url('room/create',[$id])}}">
		                    <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 room</span>
		                    </span>
		                </a>
		            </div>
		        </div>


		    @if(!empty($rooms))
            @foreach($rooms as $room)

		        <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="" 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('room/show',[$room->id])}}">Preview</a></span>
                                        </a>
                                    </div>

                                        <div class="option-btn">
                                            <a href="" 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('room/'. $room->id .'/edit' )}}">Edit</a></span>
                                            </a>
                                        </div>

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

                                          <a href="#" data-id="{{$room->id}}" class="confirm-room">Delete</a></span>
                                          </a>
                                        </div>
                                </div>

                                <span class="overlay"></span>
                            </div>
                        </div>
                    </div>
                    <div class="project-name">
                        <h3>{{$room->room_name}}</h3>

 --}}
<div id="content" class="vheight">
                <div class="table-responsive">
                    <div class="add-project marginbottom20 margintop20">
                        <a href="{{url('room/create',[$id])}}">
                            <button class="btn btn-green">New Room</button>

                        </a>

                    </div>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-left">Room Name</th>
                            <th class="text-center">Preview</th>
                            <th class="text-center">Edit</th>
                            <th class="text-center">Delete</th>
                            <th class="text-center">Room Design</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if(!empty($rooms))
                                                        @foreach($rooms as $room)
                                <tr>
                                    <td class="text-center">{{++$sNo}}</td>
                                    <td class="text-left">{{$room->room_name}}</td>
                                    <td class="text-center"><a href="{{url('room/show',[$room->id])}}" title="Show Room" class="btn btn-green"><i class="fa fa-fw fa-eye"></i></a></td>
                                    <td class="text-center"><a href="{{url('room/'. $room->id .'/edit' )}}" title="Edit Room" class="btn btn-warning"><i class="fa fa-fw fa-edit"></i></a></td>
                                    <td class="text-center"><a href="#" data-id="{{$room->id}}" title="Delete Room" class="confirm-room btn btn-danger" ><i class="fa fa-fw fa-times"></i></a>
                                    <td class="text-center"><a href="#" class="btn btn-primary" title="Room Design"><i class="fa fa-fw fa-edit"></i></a></td>

                                    </td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>


</div>

@endsection

@section('scripts')
<script>



</script>
@endsection