@extends('Layouts.hms_master')
@section('content')

@php
    $imagePath = 'images/placeholder.png';
    // dd("in index");
@endphp
    
<style>
    .custom-anchor-color{
        color:rgba(13, 31, 131, 0.733)!important;
    }
    .page-aside {
        width: 194px;
    }
    .page-aside-left .page-aside+.page-main {
        margin-left: 180px;
    }
    .page-aside .list-group-item.active {
        /* color: #3e8ef7; */
        background-color: #d7f2ff;
        border: 0;
    }
    .page-aside {
        overflow-y: scroll; /* Show vertical scroll bar */
    }
    .page-aside::-webkit-scrollbar {
        width: 5px; /* Width of the vertical scrollbar */
    }
    .page-aside::-webkit-scrollbar-thumb {
        background-color: #a0a0a0; /* Color of the thumb */
        border-radius: 8px; /* Rounded corners for the thumb */
    }
    .page-aside::-webkit-scrollbar-track {
        background-color: #f0f0f0; /* Color of the track */
    }
    /* .table>thead {
        background-color: #fff;
    } */

</style>
<div class="page bg-white " style="min-height:400px;">
    <!-- Media Sidebar -->
    <div class="page-aside ">
        <div class="page-aside-switch">
            <i class="icon md-chevron-left" aria-hidden="true"></i>
            <i class="icon md-chevron-right" aria-hidden="true"></i>
        </div>
        <div class="page-aside-inner page-aside-scroll scrollable scrollable-vertical is-disabled" style="position: relative;">
            <div data-role="container" class="scrollable-container">
                <div data-role="content" class="scrollable-content" style="">
                    @foreach ($allbuilding as $bKey => $building)
                        {{-- @php
                            dd($building->floor);
                        @endphp --}}
                        <section class="page-aside-section">
                            <h5 class="page-aside-title">Building - {{ $building->name }}</h5>
                            <div class="list-group">
                                @foreach ($building->floor as  $fKey => $floors)

                                {{-- @php
                                    dd($floors);
                                @endphp --}}
                                    
                                    <a class="list-group-item custom-anchor-color {{ $bKey == 0 && $fKey == 0 ? 'active' : '' }} anchor{{($floors->id)}} anchor" 
                                    onclick="getfloorwiseroom('{{($floors->id)}}')"
                                    href="javascript:void(0)">
                                        <i class="icon md-view-dashboard" aria-hidden="true"></i>{{ $floors->floor_name }}
                                    </a>
                            
                                @endforeach
                            </div>
                        </section>
                    @endforeach
                </div>
            </div>
            <div class="scrollable-bar scrollable-bar-vertical scrollable-bar-hide" draggable="false">
                <div class="scrollable-bar-handle" style="height: 601.169px;"></div>
            </div>
        </div>
    </div>

    <!-- Media Content -->
    <div class="page-main ">
        <div class="page-header">
            <h1 class="page-title" id="fname">{{ $floorname }}</h1>
            <form id="dynamic_tutor_assign">
                <table class="mt-4 table w-full table-bordered table-striped">
                    {{-- style="background: #fff; color:#000" --}}
                    <thead>
                        <tr>
                            <th rowspan="2" style="width: 3%">SL</th>
                            <th rowspan="2">Room No</th>
                            {{-- <th>Description</th> --}}
                            <th rowspan="2">Add</th>

                            <th colspan="3">House Tutor</th>
                            <th rowspan="2">View Seats</th>
                        </tr>
                        <tr>
                            <th>Name</th>
                            <th>Designation</th>
                            <th>Department</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($allRoom as $key => $room)
                            <tr>
                                <td class="text-center" style="width:3%">{{ $key + 1 }}</td>
                                <td class="text-center">
                                    <a type="button" href="javascript:void(0)" class="m-2 btn btn-outline-info viewAction" data-id="{{ $room->id }}"
                                        data-link="{{ url()->current() }}/view_seat/{{ encrypt($room->id) }}">
                                            {{-- <i class="fa fa-hotel"></i> --}}
                                            {{ $room->room_no }}
                                        </a>
                                </td>
                              
                                {{-- <td>{{ $room->room_no }}</td> --}}

                                @if(isset($houseTutorByRoom[$room->id]) && $houseTutorByRoom[$room->id])
                                    <td class="text-center">
                                        {{-- <i class="icon wb-user" aria-hidden="true"></i> --}}
                                    </td>
                                    <td class="p-2">{{ $houseTutorByRoom[$room->id]['ht_name'] }}</td>
                                    <td class="p-2">{{ $houseTutorByRoom[$room->id]['designation'] }}</td>
                                    <td class="p-2">{{ $houseTutorByRoom[$room->id]['dept_name'] }}</td>
                                @else
                                    <td class="text-center">
                                        {{-- data-id="{{$key}}" --}}
                                        <a type="btn" class="btn btn-sm btn-outline-success add-btn" onclick="fngetTutor({{$key}})" title="Add HT" data-id="{{$key}}">
                                            <i class="fa fa-plus"></i>
                                        </a>
                                    </td>

                                    <td>
                                        <input type="hidden" name="room[]" value="{{ $room->id }}">
                                        <div class="input-group p-2 tutorselectbox" id="tutorselectbox_{{$key}}">
                                            <label class="input-title">Tutor</label>
                                            <select class="form-control clsSelect2 " name="ht_name[]" id="ht_{{ $key }}" required style="width: 100%">
                                            </select>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group p-2 tutorselectbox" id="tutordate_{{$key}}">
                                            <label class="input-title">Assign Date</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control datepicker-custom" placeholder="DD-MM-YY" name="date[]" id="date">
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group p-2 tutorselectbox" id="tutordescription_{{$key}}">
                                            <label class="input-title">Description</label>
                                            <div class="input-group">
                                                <textarea rows="1" id="description" name="description[]" class="form-control" placeholder="Enter description"
                                                placeholder="Enter Description"></textarea>
                                            </div>
                                        </div>
                                    </td>
                                @endif
                                
                                <td class="text-center">
                                    <a type="button" href="javascript:void(0)" class="m-2 btn btn-outline-info viewAction" data-id="{{ $room->id }}"
                                    data-link="{{ url()->current() }}/view_seat/{{ encrypt($room->id) }}">
                                        <i class="fa fa-hotel"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                        
                    </tbody>
                    
                </table>
                <div class="offset-5" style="margin-top: 150px">
                    <button type="button" class="btn btn-success" id="tutor-save">Save</button>
                </div>
            </form>
           
        </div>
    </div>
    
</div>
    
@endsection
<script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>

<script>
    
    $(document).ready(function(){

        

        $('.page-header-actions').hide();
        
        $('.tutorselectbox').hide();
        $('.add-btn').click(function(){
            // var dataid = $(this).data('id');
            // $('#tutorselectbox_'+dataid).show();
            // $('#tutordate_'+dataid).show();
            // $('#tutordescription_'+dataid).show();

            // // console.log(9)
            // // console.log($('#ht_' + dataid));
            // callApi("{{ route('hms_getAllTutor', '') }}/", 'get',  {},
            //     function(response, textStatus, xhr) {
            //         console.log(response, "test");
            //         $('#ht_' + dataid).val(null).trigger('change');
            //         $('#ht_' + dataid).select2({
            //             // dropdownParent: $("#commonModal"),
            //             data: response,
            //             escapeMarkup: function(markup) {
            //                 return markup;
            //             },
            //             templateResult: function(data) {
            //                 return data.html;
            //             },
            //             templateSelection: function(data) {
            //                 return data.text;
            //             }
            //         });
            //     }
            // );
        });

        $('#tutor-save').click(function(event) {
            console.log("{{ url()->current() }}/inserttutor/send/api");
            event.preventDefault();
            // console.log("{{ url()->current() }}/../../insert/send/api");
            callApi("{{ url()->current() }}/inserttutor/send/api", 'post', new FormData($('#dynamic_tutor_assign')[0]),
                function(response, textStatus, xhr) {
                    showApiResponse(xhr.status, response.message);
                   
                },
                function(response) {
                    showApiResponse(response.status, JSON.parse(response.responseText).message);
                }
            );
        });
    });

    function fnTestFocus(key){

        $('#tutordate_'+ key).datepicker({
            // format: 'dd-mm-yyyy',
            dateFormat: 'dd-mm-yy',
            orientation: 'bottom',
            autoclose: true,
            todayHighlight: true,
            changeMonth: true,
            changeYear: true,
            yearRange: '1900:+10',
            //        startDate: '-3d'
        }).keydown(false);
    }

    function fngetTutor(key){
            // var dataid = $(this).data('id');

            var dataid = key;
            $('#tutorselectbox_'+dataid).show();
            $('#tutordate_'+dataid).show();
            // $('#tutordate_' + dataid).addClass('datepicker-custom');
            $('#tutordescription_'+dataid).show();

            // console.log(9)
            // console.log($('#ht_' + dataid));
            callApi("{{ route('hms_getAllTutor', '') }}/", 'get',  {},
                function(response, textStatus, xhr) {
                    console.log(response, "test");
                    $('#ht_' + dataid).val(null).trigger('change');
                    $('#ht_' + dataid).select2({
                        // dropdownParent: $("#commonModal"),
                        data: response,
                        escapeMarkup: function(markup) {
                            return markup;
                        },
                        templateResult: function(data) {
                            return data.html;
                        },
                        templateSelection: function(data) {
                            return data.text;
                        }
                    });
                }
            );
        }

    function getfloorwiseroom(id){
        // console.log("getfloorwiseroom");
        $('.anchor').removeClass('active');
        var tag = $('.anchor'+id);
        tag.addClass('active');

        var url = window.location.href;
        var customurl = url+'/'+id;
        // console.log(customurl);
        $.ajax({
            url: customurl,
            type: 'POST',
            success: function(result){
                console.log(result);
                $('#fname').html(result.floorname);

                $('#dynamic_tutor_assign').html('');
                // var parentContainer = $('#parentcontainer');
                // parentContainer.html('');
                // result.allRoom.forEach(function(room) {
                // var imagePath = '{{ asset("images/placeholder.png") }}'; 
                // var listItem = $('<li>');
                // // console.log(room.room_no);
                // var link = $('<a>', {
                //     href: 'javascript:void(0)', 
                //     class: 'viewAction',
                //     'data-id': room.id,
                //     'data-link': '{{ url()->current() }}/view_seat/' + btoa(room.id),
                // });

                // var mediaItem = $('<div>', {
                //     class: 'media-item',
                //     'data-toggle': 'slidePanel',
                //     'data-url': 'panel.tpl'
                // });
                // var checkboxDiv = $('<div>', {
                //     class: 'checkbox-custom checkbox-primary checkbox-lg'
                // });
                // var checkboxInput = $('<input>', {
                //     type: 'checkbox',
                //     class: 'selectable-item',
                //     id: 'media_' + room.id
                // });
                // var checkboxLabel = $('<label>', {
                //     for: 'media_' + room.id
                // });
                // var title = $('<div>', {
                //     class: 'text-center text-dark',
                //     html: room.room_no
                // });
                // checkboxDiv.append(checkboxInput, checkboxLabel);
                // var imageWrap = $('<div>', {
                //     class: 'image-wrap'
                // });
                // var image = $('<img>', {
                //     class: 'image rounded',
                //     src: imagePath,
                //     alt: '...'
                // });
                // imageWrap.append(image);
                // mediaItem.append(checkboxDiv, imageWrap, title /* ... other elements ... */);
                // link.append(mediaItem);
             
                // listItem.append(link);
                // parentContainer.append(listItem);

                var table = $('<table>', { class: 'mt-4 table w-full table-bordered table-striped' });
                var thead = $('<thead>', { style: 'background: #fff; color: #000' });
                var trHead = $('<tr>');
                
                // Adding table headers
                trHead.append(
                    $('<th>', { rowspan: '2', style: 'width: 3%; color: #000', text: 'SL' }),
                    $('<th>', { rowspan: '2', style: 'color: #000', text: 'Room No' }),
                    $('<th>', { rowspan: '2', style: 'color: #000', text: 'Add HT' }),
                    $('<th>', { colspan: '3', style: 'color: #000', text: 'House Tutor' }),
                    $('<th>', { rowspan: '2', style: 'color: #000', text: 'View Seats' })
                );
                var secondTrHead = $('<tr>');
                secondTrHead.append(
                    $('<th>', { style: 'color: #000', text: 'Name' }),
                    $('<th>', { style: 'color: #000', text: 'Designation' }),
                    $('<th>', { style: 'color: #000', text: 'Department' })
                );
                thead.append(trHead);
                thead.append(secondTrHead);
                table.append(thead);

                var tbody = $('<tbody>');
                
                // Loop through your data and create table rows
                $.each(result.allRoom, function(key, room) {
                    var tr = $('<tr>');

                    tr.append(
                        $('<td>', { class: 'text-center', text: key + 1 }),
                        $('<td>', { class: 'text-center' }).append(
                            $('<a>', { type: 'button', href: 'javascript:void(0)', class: 'm-2 btn btn-outline-info viewAction', 'data-id': room.id, 'data-link': result.currentUrl + '/view_seat/' + room.id }).text(room.room_no)
                        ),
                        @if(isset($houseTutorByRoom[$room->id]) && $houseTutorByRoom[$room->id])
                            $('<td>', { class: 'text-center' }), // Empty cell
                            $('<td>', { class: 'p-2', text: result.houseTutorByRoom[room.id]['ht_name'] }),
                            $('<td>', { class: 'p-2', text: result.houseTutorByRoom[room.id]['designation'] }),
                            $('<td>', { class: 'p-2', text: result.houseTutorByRoom[room.id]['dept_name'] }),
                        @else
                        $('<td>', { class: 'text-center' }).append(
                            $('<a>', { 
                                type: 'btn',
                                onclick: 'fngetTutor("'+ key + '")', // Corrected onclick attribute value
                                class: 'btn btn-sm btn-outline-success add-btn',
                                title: 'Add HT',
                                
                                'data-id': key
                            }).append(
                                $('<i>', { class: 'fa fa-plus' })
                            )
                        ),

                            $('<input>', { type: 'hidden', name: 'room[]', value: room.id }),
                            $('<td>', { width: '20%' }).append(
                                $('<div>', { class: 'input-group p-2 tutorselectbox',style:'display:none', id: 'tutorselectbox_' + key }).append(
                                    $('<label>', { class: 'input-title', text: 'Tutor' }),
                                    $('<select>', { class: 'form-control clsSelect2', name: 'ht_name[]', id: 'ht_' + key, required: 'required', style: 'width: 100%' })
                                )
                            ),
                            $('<td>', { width: '15%' }).append(
                                $('<div>', { class: 'input-group p-2 tutorselectbox', style:'display:none', id: 'tutordate_' + key }).append(
                                    $('<label>', { class: 'input-title', text: 'Assign Date' }),
                                    $('<div>', { class: 'input-group' }).append(
                                        $('<input>', { type: 'text', 
                                                onfocus: 'fnTestFocus("'+ key + '")',
                                                class: 'form-control datepicker-custom', 
                                                placeholder: 'DD-MM-YY', 
                                                name: 'date[]', 
                                                id: 'date' })
                                    )
                                )
                            ),
                            $('<td>', { width: '20%' }).append(
                                $('<div>', { class: 'input-group p-2 tutorselectbox',style:'display:none', id: 'tutordescription_' + key }).append(
                                    $('<label>', { class: 'input-title', text: 'Description' }),
                                    $('<div>', { class: 'input-group' }).append(
                                        $('<textarea>', { rows: '1', id: 'description', name: 'description[]', class: 'form-control', placeholder: 'Enter description' })
                                    )
                                )
                            ),
                        @endif
                        $('<td>', { class: 'text-center' }).append(
                            $('<a>', { type: 'button', href: 'javascript:void(0)', class: 'm-2 btn btn-outline-info viewAction', 'data-id': room.id, 'data-link': result.currentUrl + '/view_seat/' + room.id }).append(
                                $('<i>', { class: 'fa fa-hotel' })
                            )
                        )
                    );

                    tbody.append(tr);
                });
                table.append(tbody);

                // Append the table to the desired container or element
                $('#dynamic_tutor_assign').append(table);
        
           $('.page').show();
        }});
    }
        
</script>

<script type="text/javascript">

    
</script>