@extends('layouts.admin')
@section('page-title')
    Room Gallery
@endsection
@section('page-top-title')
    Room Gallery
@endsection
@section('content-body')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
    <div class="container-fluid">
        <!-- Row -->
        <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
            {{-- Messages --}}
            @include('backend.inc.messages')
            <div class="card">
                <div class="card-header border-0 p-3">
                    <h4 class="heading mb-0">Room Gallery -
                        {{ $establishment ? \App\Models\Establishment::find($establishment)->name : '' }}</h4>

                    <a href="javascript:void" class="btn btn-light ms-2 btn-sm" data-bs-toggle="modal"
                        data-bs-target="#addGalleryImage"><i class="fa-solid fa-plus"></i> Add Gallery Image(s)</a>

                    {{-- Add Gallery Item Modal --}}
                    <div class="modal modal-lg fade" id="addGalleryImage" tabindex="-1"
                        aria-labelledby="addGalleryImageLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-center">
                            <form class="needs-validation"
                                action="{{ route('establishment.room.gallery.store', $establishment_room) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="addGalleryImageLabel"><span> Add Gallery Image(s)</span>
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="my-1">
                                                    <input type="hidden" name="hdnEstablishment"
                                                        value="{{ $establishment }}">
                                                    <input type="hidden" name="hdnEstablishmentRoomId"
                                                        value="{{ $establishment_room }}">
                                                    <label for="image" class="form-label mb-2">Upload file*</label>
                                                    <input class="form-control form-control-sm" name="image[]"
                                                        type="file" required accept="image/jpeg, image/jpg, image/png"
                                                        multiple onchange="validateFiles(this)">
                                                    <small class="file-size-message">Max total file size 20MB</small>
                                                </div>
                                            </div>
                                            {{-- <div class="col-12">
                                                <div class="my-1">
                                                    <label for="caption" class="form-label mb-2">Caption</label>
                                                    <input type="text" class="form-control form-control-sm"
                                                        id="caption" name="caption"
                                                        value="{{ old('caption') }}">
                                                </div>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger light"
                                            data-bs-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-primary light">Add Gallery Image(s)</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive basic-tbl">
                        <table id="smalldtb" class="display" style="min-width: 350px">
                            <thead>
                                <tr>
                                    <th width="10%">ID</th>
                                    <th width="30%">Image</th>
                                    <th>Associated Room</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($galleryImages as $image)
                                    @php
                                        //$imageUrl = asset('storage/backend-resources/images/profile/profile.png');
                                        $imageUrl = asset(
                                            'storage/Establishments/' .
                                                \App\Models\Establishment::find($establishment)->name .
                                                '/' .
                                                \App\Models\EstablishmentRoom::find($establishment_room)->name .
                                                '/' .
                                                $image->image,
                                        );
                                    @endphp
                                    <tr>
                                        <td><span class="text-primary font-w600">{{ $image->id }}</span>
                                        </td>
                                        <td><a href="{{ $imageUrl }}" data-lightbox="gallery"
                                                data-title="{{ \App\Models\EstablishmentRoom::find($establishment_room)->name }}"><img
                                                    src="{{ $imageUrl }}" class="img-fluid" alt=""
                                                    width="100px"></a>
                                        </td>
                                        <td>{{ \App\Models\EstablishmentRoom::find($establishment_room)->name }}</td>
                                        <td>
                                            <button onclick="confirmDelete({{ $image->id }})"
                                                class="btn btn-danger light remove-img ms-2 btn-sm"><i
                                                    class="fa-solid fa-times"></i> Delete</button>

                                            <form id="delete-form-{{ $image->id }}"
                                                action="{{ route('rooms.gallery.image.delete', $image->id) }}"
                                                method="POST" style="display: none;">
                                                @csrf
                                                @method('DELETE')
                                            </form>

                                            {{-- <a href="javascript:void" class="btn btn-danger light remove-img ms-2 btn-sm"><i
                                                    class="fa-solid fa-times"></i> Delete</a> --}}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('storage/backend-resources/vendor/peity/jquery.peity.min.js') }}"></script>
    <script src="{{ asset('storage/backend-resources/vendor/jquery-nice-select/js/jquery.nice-select.min.js') }}"></script>
    <!--swiper-slider-->
    <script src="{{ asset('storage/backend-resources/vendor/swiper/js/swiper-bundle.min.js') }}"></script>

    {{-- <script src="{{ asset('storage/backend-resources/js/sl-ntb-custom.js') }}"></script> --}}
    <script src="{{ asset('js/sl-ntb-custom.js') }}"></script>
    <script src="{{ asset('storage/backend-resources/js/dashboard/custom.js') }}"></script>

    <script>
        function validateFiles(input) {
            const maxFiles = 10;
            const maxTotalSizeMB = 20;
            const maxTotalSizeBytes = maxTotalSizeMB * 1024 * 1024;
            const maxFileSizeMB = 2;
            const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
            let totalSize = 0;

            if (input.files.length > maxFiles) {
                alert('You can upload a maximum of 10 images.');
                input.value = ''; // Clear the input
                return;
            }

            for (let i = 0; i < input.files.length; i++) {
                if (input.files[i].size > maxFileSizeBytes) {
                    alert('Each file must not exceed 2MB.');
                    input.value = ''; // Clear the input
                    return;
                }
                totalSize += input.files[i].size;
            }

            if (totalSize > maxTotalSizeBytes) {
                alert('Total file size must not exceed 20MB.');
                input.value = ''; // Clear the input
            }
        }
    </script>
@endsection