@extends('layouts.admin.master')

@section('title')
    {{ __('Dormitories') }}
@endsection
@push('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/photoswipe.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatable-extension.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/prism.css') }}">
@endpush

@section('content')
    @component('components.breadcrumb')
        @slot('breadcrumb_title')
            <h3>{{ __('Dormitories') }}</h3>
        @endslot
        <li class="breadcrumb-item active">{{ __('Dormitories') }}</li>
    @endcomponent


    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header header_flex">
                        <h5>Photos</h5>
                        <a class="btn btn-outline-primary-2x add-dormitory-images-btn"
                           id="add_dormitory_images_btn1"
                           style="margin:0 20px;"
                           data-bs-toggle="modal"
                           data-bs-target=".addImageModalDormitories"
                           data-dormitory_id="{{ $dormitory->id }}">
                            {{ __('Add Images') }}
                        </a>




                    </div>
                    @include('dashbord.include.image', [
                            'model_id' => 'addImageModalDormitories',
                            'type' => 'checkbox',
                            'name' => 'images_id[]',
                            'button_name' => 'Logo',
                            'route' => 'dormitories.addImages',
                            'hiddenInput' => ['dormitory_id' => $dormitory->id],
                        ])
                    {{-- @include('dashbord.include.addDormitoryImages') --}}

                    <div class="my-gallery card-body row gallery-with-description" itemscope="">
                        @foreach ($allImages as $item)
                            <figure class="col-xl-3 col-sm-6 img_overlay" itemprop="associatedMedia" itemscope="">
                                <a href="{{ $item->imagePath }}" itemprop="contentUrl">
                                    <img src="{{ $item->imagePath }}" itemprop="thumbnail" alt="Image description"/>

                                <button type="button" class="btn btn-danger close_overlay" data-toggle="modal" data-target="#deleteModal-{{ $item->id }}">
                                    X
                                </button>
                                </a>
                                <!-- Modal -->
                                <div class="modal fade" id="deleteModal-{{ $item->id }}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel-{{ $item->id }}" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteModalLabel-{{ $item->id }}">Confirm Deletion</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                Are you sure you want to delete this image?
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                <form id="deleteForm-{{ $item->id }}" action="{{ route('dormitories.deleteImage', $item->id) }}" method="POST" style="display:inline;">
                                                    @csrf
                                                    <input hidden="" name="dormitory_id" value="{{ $dormitory->id }}">
                                                    <button type="submit" class="btn btn-danger">Delete</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </figure>
                        @endforeach
                    </div>




                    <!-- Root element of PhotoSwipe. Must have class pswp.-->
                    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
                        <!--
                                      Background of PhotoSwipe.
                                      It's a separate element, as animating opacity is faster than rgba().
                                      -->
                        <div class="pswp__bg"></div>
                        <!-- Slides wrapper with overflow:hidden.-->
                        <div class="pswp__scroll-wrap">
                            <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.-->
                            <!-- don't modify these 3 pswp__item elements, data is added later on.-->
                            <div class="pswp__container">
                                <div class="pswp__item"></div>
                                <div class="pswp__item"></div>
                                <div class="pswp__item"></div>
                            </div>
                            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.-->
                            <div class="pswp__ui pswp__ui--hidden">
                                <div class="pswp__top-bar">
                                    <!-- Controls are self-explanatory. Order can be changed.-->
                                    <div class="pswp__counter"></div>
                                    <button class="pswp__button pswp__button--close"
                                            title="Close (Esc)"></button>
                                    <button class="pswp__button pswp__button--share" title="Share"></button>
                                    <button class="pswp__button pswp__button--fs"
                                            title="Toggle fullscreen"></button>
                                    <button class="pswp__button pswp__button--zoom"
                                            title="Zoom in/out"></button>
                                    <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR-->
                                    <!-- element will get class pswp__preloader--active when preloader is running-->
                                    <div class="pswp__preloader">
                                        <div class="pswp__preloader__icn">
                                            <div class="pswp__preloader__cut">
                                                <div class="pswp__preloader__donut"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                                    <div class="pswp__share-tooltip"></div>
                                </div>
                                <button class="pswp__button pswp__button--arrow--left"
                                        title="Previous (arrow left)"></button>
                                <button class="pswp__button pswp__button--arrow--right"
                                        title="Next (arrow right)"></button>
                                <div class="pswp__caption">
                                    <div class="pswp__caption__center"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @push('scripts')
        <script>
            $(document).ready(function () {
                $('.add-dormitory-images-btn').click(function () {
                    var dormitoryId = $(this).data('dormitory_id');
                    $('#modal-dormitory-id').val(dormitoryId);
                });
            });
        </script>


        <script src="{{ asset('assets/js/photoswipe/photoswipe.min.js') }}"></script>
        <script src="{{ asset('assets/js/photoswipe/photoswipe-ui-default.min.js') }}"></script>
        <script src="{{ asset('assets/js/photoswipe/photoswipe.js') }}"></script>


        <script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/jszip.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/buttons.colVis.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/pdfmake.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/vfs_fonts.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.autoFill.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.select.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/buttons.bootstrap4.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/buttons.print.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.bootstrap4.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/responsive.bootstrap4.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.keyTable.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.colReorder.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.fixedHeader.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.rowReorder.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.scroller.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/custom.js') }}"></script>
        <script src="{{ asset('assets/js/prism/prism.min.js') }}"></script>
        <script src="{{ asset('assets/js/clipboard/clipboard.min.js') }}"></script>
        <script src="{{ asset('assets/js/custom-card/custom-card.js') }}"></script>
        @include('dashbord.include.custom-datatable')





        {{--        Delete Module--}}

        <!-- Include Bootstrap JS and jQuery if not already included -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

        <script>
            $(document).ready(function() {
                // Submit form when delete button in modal is clicked
                $('.btn-danger').on('click', function() {
                    var formId = $(this).closest('.modal-content').find('form').attr('id');
                    $('#' + formId).submit();
                });
            });
        </script>
    @endpush
@endsection