@php
    $imagePath = 'images/placeholder.png';
@endphp

<style>
    .checkbox-new input[type=checkbox], .checkbox-lg input[type=radio] {
        width: 44px;
        height: 44px;
        opacity: unset;
    }

    .app-media .media-list.is-grid .media-item:hover, 
    .app-media .media-list.is-grid .media-item.active,
    .app-media .media-list.is-grid .media-item-2,
     {
        /* border-color: #11c26d; */
        /* background-color: #11c26d; */
    }

    .app-media .media-list.is-grid .media-item-2 {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 0.286rem;
        border: 1px solid #909090;
        /* background: #90EE90; */
        position: relative;
        cursor: pointer;
    }
    .titleSeat{
        color:#000;
    }
</style>

<div id="draftView p-4">
    <div class="media-list is-grid pb-50" data-plugin="animateList" data-animate="fade"
        data-child="li">
          <ul class="blocks blocks-100 blocks-xxl-6 blocks-xl-6 blocks-lg-6 blocks-md-6 blocks-sm-2"
            data-plugin="animateList" data-child=">li">

            @foreach ($seats as $seat)

            {{-- <button class="btn btn-outline-primary" data-target="#exampleFillIn" data-toggle="modal"
                      type="button">{{ $room->room_no }}</button> --}}
            
              <li>
                <a href="javascript:void(0)" data-id="{{ $seat->id }}"
                    data-link="{{ url()->current() }}/load_student/{{ encrypt($seat->id) }}"
                    class="viewAction">
                    <div class="media-item media-item-2" data-toggle="slidePanel" data-url="panel.tpl">
                        <div class="checkbox-custom checkbox-info">
                            <input type="checkbox" class="selectable-item" id="media_1"
                            {{ $seat->is_empty == 0 ? 'checked' : '' }}>
                            <label for="media_1"></label>
                        </div>
                        {{-- <div class="image-wrap">
                            <img class="image rounded" src="{{ asset($imagePath) }}" alt="...">
                        </div> --}}
                        <div class="info-wrap">
                            <div class="dropdown">
                                <span class="icon md-settings" data-toggle="dropdown" aria-expanded="false" role="button"
                                data-animation="scale-up"></span>
                                <div class="dropdown-menu dropdown-menu-right" role="menu">
                                    <a class="dropdown-item" href="javascript:void(0)"><i class="icon md-edit" aria-hidden="true"></i>Edit</a>
                                    <a class="dropdown-item" href="javascript:void(0)"><i class="icon md-download" aria-hidden="true"></i>Download</a>
                                    <a class="dropdown-item" href="javascript:void(0)"><i class="icon md-delete" aria-hidden="true"></i>Delete</a>
                                </div>
                            </div>
                            <div class="titleSeat text-center">
                                {{ $seat->seat_no }}
                            </div>
                           
                            <div class="media-item-actions btn-group">
                                <button class="btn btn-icon btn-pure btn-default" data-original-title="Edit" data-toggle="tooltip"
                                    data-container="body" data-placement="top" data-trigger="hover"
                                    type="button">
                                    <i class="icon md-edit" aria-hidden="true"></i>
                                </button>
                                <button class="btn btn-icon btn-pure btn-default" data-original-title="Download"
                                    data-toggle="tooltip" data-container="body" data-placement="top"
                                    data-trigger="hover" type="button">
                                    <i class="icon md-download" aria-hidden="true"></i>
                                </button>
                                <button class="btn btn-icon btn-pure btn-default" data-original-title="Delete"
                                    data-toggle="tooltip" data-container="body" data-placement="top"
                                    data-trigger="hover" type="button">
                                    <i class="icon md-delete" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>
              </li>
            @endforeach
        </ul>
    </div>
</div>

<script>
    callApi("{{ url()->current() }}/../../get/" + "{{ $id }}/api" , 'post', '',
        function(response, textStatus, xhr) {
            $("#draftView").show();
            showApplicantData(response.result_data).then(()=>{
                showModal({
                    titleContent: "View Seats",
                });
            });
        },
        function(response) {
            showApiResponse(response.status, JSON.parse(response.responseText).message);
        }
    );
    
    async function showApplicantData(response){
        let html = "";
        html += '<ul class="blocks blocks-100 blocks-xxl-6 blocks-xl-6 blocks-lg-6 blocks-md-6 blocks-sm-2"';
        html += 'data-plugin="animateList" data-child=">li">';

        html += '<tr>' +
            '<td style="width: 20%"><b>Building </b></td>' +
            '<td style="width: 30%">'+ response.name +'</td>' +
         
            '<td style="width: 20%"><b>Code</b></td>' +
            '<td style="width: 30%">'+ response.code +'</td>' +
        '</tr>'+
        '<tr>' +
            '<td style="width: 20%"><b>Description</b></td>' +
            '<td style=""><b>'+ response.description +'</td>' +
        '</tr>';

        $('#details_table_body').html(html);
    }
</script>