@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 {
        /* Initial styles */
        border: 1px solid transparent;
        /* Set initial border color */
        transition: transform 0.2s, border-color 0.2s, background-color 0.2s;
    }

    .app-media .media-list.is-grid .media-item:hover,
    .app-media .media-list.is-grid .media-item.active {
        /* border-color: #11c26d;  */
        color: white;
        font-weight: bold;
        background-color: rgb(226, 226, 226);
        /* Apply pop-up effect on hover/active */
        transform: scale(1.05);
    }

    /* .app-media .media-list.is-grid .media-item:hover i, 
    .app-media .media-list.is-grid .media-item.active
     {
        border-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 #000;
        /* background: #90EE90; */
        position: relative;
        cursor: pointer;
    }
    .titleSeat{
        color:#000;
    }
    .table td, .table th {
        padding: 0.572rem;
    }
    .box{
        border: 1px solid #a3afb7;
        padding: 10px 10px 10px 10px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .modal-lg{
        max-width: 90%;
    }
</style>

<form id="dynamic_seat_assign">
    @csrf
    <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"> --}}

                <table class="table w-full table-hover table-bordered table-striped">
                    <thead style="background-color: #17b3a3">
                        <tr>
                            <th class="text-center" style="color: #fff">SL</th>
                            <th class="text-center" style="color: #fff">Room No</th>
                            <th class="text-center" style="color: #fff">Seat No</th>
                            <th style="color: #fff">Seat<br> Booked ?</th>
                            <th class="text-center" style="color: #fff">Hall Id</th>
                            <th style="color: #fff">Student <br> Name</th>
                            <th style="color: #fff">Department</th>
                            <th class="text-center" style="color: #fff">Admission <br> Session</th>
                            <th style="color: #fff">Academic <br> Program</th>
                            <th class="text-center" style="color: #fff">Registration No</th>
                            <th class="text-center" style="color: #fff">Mobile No</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $buttonflag = false;
                        @endphp
                        @foreach ($seats as $key => $seat)
                            @php
                                if($seat->is_empty == 1){
                                    $buttonflag = true;
                                }
                            @endphp
                            <tr>
                                <td class="text-center">
                                    <div class="">{{ $key + 1 }}</div>
                                </td>
                                <td class="text-center">
                                    <div class="">{{ $seat->room_no }}</div>
                                </td>
                                <td class="text-center" id="seat_id_{{$key}}" value="{{ $seat->seat_id }}">
                                    <div class="">{{ $seat->seat_no }}</div>
                                </td>
                                <td class="text-center">
                                    @if (!$seat->is_empty)
                                        <div class=""><i class="icon wb-user" aria-hidden="true"></i></div>
                                        @else
                                        <a type="btn" class="add-btn" title="Add a student" data-id="{{$key}}">
                                            <i class="fa fa-plus-square-o"></i>
                                        </a>

                                    @endif
                                
                                </td>

                                {{-- @if($seat->is_empty)
                                    <td class="text-center">
                                        <a type="btn" class="btn btn-sm btn-outline-success add-btn" title="Add a student" data-id="{{$key}}">
                                            <i class="fa fa-plus"></i>
                                        </a>
                                    </td>
                                @endif --}}

                                @if($seat->is_empty)
                                    {{-- <td colspan="6" class="adjust" data-id="{{ $key }}"></td> --}}

                                    <td class="adjust" data-id="{{ $key }}"></td>
                                    @for ($i = 0; $i < 6; $i++)
                                        <td  class="adjust" data-id="{{ $key }}"></td>
                                    @endfor
                                    

                                    <td class="pop_up" data-id="{{ $key }}">
                                        <label class="input-title">Admission Session</label>
                                        <div class="input-group">
                                            <select id="add_session_{{ $key }}" name="session_id[]" class="form-control clsSelect2" style="width: 100%">
                                            </select>
                                        </div>
                                    </td>

                                    <td colspan="2"  class="pop_up" data-id="{{ $key }}">
                                        <label class="input-title">Student</label>
                                        <div class="input-group">
                                            <select id="add_student_{{ $key }}" name="student_id[]" class="form-control clsSelect2" style="width: 100%">
                                            </select>
                                        </div>
                                    </td>
                                    <td colspan="2"  class="pop_up" data-id="{{ $key }}">
                                        <label class="input-title">Assign Date</label>
                                        <div class="">
                                            <input type="text" class="form-control datepicker-custom" placeholder="DD-MM-YY" name="date[]" id="date">
                                        </div>
                                    </td>
                                    <td colspan="2"  class="pop_up" data-id="{{ $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>
                                    </td>
                                @endif

                                @if ($seat->hall_id)
                                    <td class="text-center">
                                        <div class="">{{ $seat->hall_id }}</div>
                                    </td>
                                    <td>
                                        <div class="">{{ $seat->student_name }}</div>
                                    </td>
                                    <td>
                                        <div class="">{{ $seat->dept_name }}</div>
                                    </td>
                                    <td class="text-center">
                                        <div>{{ $seat->admission_session }}</div>
                                    </td>
                                    <td>
                                        <div>{{ $seat->year }}</div>
                                    </td>
                                    <td class="text-center">
                                        <div>{{ $seat->registration_no }}</div>
                                    </td>
                                    <td class="text-center">
                                        <div>{{ $seat->mobile_no }}</div>
                                    </td>
                                @endif

                            </tr>
                        @endforeach
                        
                    </tbody>
                </table>
                @if($buttonflag)
                    <div class='offset-5'>
                        <button type='button' class='btn btn-primary mx-auto' id='submit-btn'>Submit</button>
                    </div>
                @endif
                {{-- @php
                    if($buttonflag){
                        echo "
                        <div class='offset-5'>
                            <button type='button' class='btn btn-primary mx-auto' id='submit-btn'>Submit</button>
                        </div>
                        ";
                    }
                @endphp --}}
              
                @foreach ($seats as $seat)

                @endforeach
            {{-- </ul> --}}
            {{-- <button type="button" class="btn btn-primary text-center mx-0" id="submit-btn">Submit</button> --}}
        </div>
        
    </div>
</form>

<script>
    $(document).ready(function(){
        $("form .clsSelect2").select2({
            dropdownParent: $("#commonModal")
        });
        $('.pop_up').hide();
    });

    $('.add-btn').click(function(){
        var dataId = $(this).data('id');
        $('.pop_up[data-id="' + dataId + '"]').show();
        $('.adjust[data-id="' + dataId + '"]').hide();
        var td = $('#seat_id_' + dataId);
        var seatId = $('#seat_id_' + dataId).attr('value');
        var hiddenInput = $('<input>', {
            type: 'hidden',
            name: 'seat_id[]', 
            value: seatId
        });
        td.append(hiddenInput);
        callApi("{{ route('hms_getSession', '') }}/", 'get',  {},
            function(response, textStatus, xhr) {
                $('#add_session_' + dataId).val(null).trigger('change');
                $('#add_session_' + dataId).select2({
                    dropdownParent: $("#commonModal"),
                    data: response,
                    escapeMarkup: function(markup) {
                        return markup;
                    },
                    templateResult: function(data) {
                        return data.html;
                    },
                    templateSelection: function(data) {
                        return data.text;
                    }
                });
            }
        );

        $('#add_session_' + dataId).change(function(event) {
            callApi("{{ route('hms_getNonResidentBySession', '') }}/" + $(this).val(), 'get', {},       
                    function(response, textStatus, xhr) {
                        $('#add_student_' + dataId).val(null).trigger('change');
                        $('#add_student_' + dataId).select2({
                            dropdownParent: $("#commonModal"),
                            data: response,
                            escapeMarkup: function(markup) {
                                return markup;
                            },
                            templateResult: function(data) {
                                return data.html;
                            },
                            templateSelection: function(data) {
                                return data.text;
                            }
                        });
                    }
            );
        });    

       
    });

    callApi("{{ url()->current() }}/../../get/" + "{{ $id }}/api" , 'post', '',
        function(response, textStatus, xhr) {
            $("#draftView").show();
            showApplicantData(response.result_data).then(()=>{
                showModal({
                    titleContent: "View Room Wise Seats",
                    // footerContent: getModalFooterElement({
                    //     'btnNature': {
                    //         0: 'save'
                    //     },
                    //     'btnName': {
                    //         0: 'Save'
                    //     },
                    //     'btnId': {
                    //         0: 'add_sendBtn'
                    //     }
                    // }),
                });
            });
        },
        function(response) {
            showApiResponse(response.status, JSON.parse(response.responseText).message);
        }
    );

    $('#submit-btn').click(function(event) {
        event.preventDefault();
        callApi("{{ url()->current() }}/../../insert/send/api", 'post', new FormData($('#dynamic_seat_assign')[0]),
            function(response, textStatus, xhr) {
                showApiResponse(xhr.status, '');
                hideModal();
            },
            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>