@extends('layouts.master')
@section('body_id', 'vendor_rooms_list_page')
@section('content')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <section class="vendor_dashboard_main_wrapper">
        <div class="container">
            <div class="row">
                
                @include('frontend.vendor.partials.sidebar')

                <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
                    <div class="premium-dashboard-core">
                        
                        <div class="elite-dashboard-header clearfix">
                            <div class="header-left-greetings">
                                <h2 class="main-welcome-heading">Room Inventory Logs</h2>
                                <p class="sub-welcome-caption">Configure, monitor pricing grids, and manage available room clusters across your indexes.</p>
                            </div>
                            <div class="header-right-actions-group">
                                <a href="{{ route('vendor.rooms.create') }}" class="btn btn-elite-primary"><i class="fa fa-plus-circle"></i> Add New Room</a>
                            </div>
                        </div>

                        <div class="row table-content-row">
                            <div class="col-xs-12">
                                <div class="elite-table-card-wrapper">
                                    
                                    @if($rooms->isEmpty())
                                        <div class="empty-hotels-state text-center">
                                            <div class="empty-icon"><i class="fa fa-building-o"></i></div>
                                            <h4>No Room Segments Found</h4>
                                            <p>You haven't listed any room configurations under your property profile index yet.</p>
                                            <a href="{{ route('vendor.rooms.create') }}" class="btn btn-elite-primary margin-top-15"><i class="fa fa-plus"></i> Configure Your First Room</a>
                                        </div>
                                    @else
                                        <div class="table-responsive">
                                            <table class="table elite-data-table">
                                                <thead>
                                                    <tr>
                                                        <th>Preview</th>
                                                        <th>Room Details</th>
                                                        <th>Price / Night</th>
                                                        <th>Inventory Stock</th>
                                                        <th>Amenities Included</th>
                                                        <th>Verification Status</th>
                                                        <th class="text-right">Action Grid</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($rooms as $room)
                                                        <tr>
                                                            <td style="width: 90px;">
                                                                <div class="hotel-preview-thumbnail">
                                                                    @if(!empty($room->images) && is_array($room->images) && isset($room->images[0]))
                                                                        <img src="{{ asset($room->images[0]) }}" alt="Room Preview">
                                                                    @else
                                                                        <div class="no-img-placeholder"><i class="fa fa-picture-o"></i></div>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                            
                                                            <td>
                                                                <span class="hotel-primary-row-name">{{ $room->room_type }}</span>
                                                                <small class="hotel-sub-address text-muted"><i class="fa fa-building"></i> {{ $room->hotel->hotel_name ?? 'Unknown Property' }}</small>
                                                            </td>
                                                            
                                                            <td><span class="location-badge-text" style="background-color: #eff6ff; color: #1e40af; border-color: #dbeafe;">₹{{ number_format($room->price_per_night, 2) }}</span></td>
                                                            
                                                            <td>
                                                                <span style="font-size: 13px; font-weight: 500; color: #475569;">
                                                                    <strong>{{ $room->available_rooms }}</strong> / {{ $room->total_rooms }} Available
                                                                </span>
                                                            </td>

                                                            <td>
                                                                <div class="table-amenities-flex">
                                                                    @if(!empty($room->amenities) && is_array($room->amenities))
                                                                        @foreach(array_slice($room->amenities, 0, 3) as $amenity)
                                                                            <span class="amenity-inline-pill">{{ $amenity }}</span>
                                                                        @endforeach
                                                                        @if(count($room->amenities) > 3)
                                                                            <span class="amenity-inline-pill counting-pill">+{{ count($room->amenities) - 3 }}</span>
                                                                        @endif
                                                                    @else
                                                                        <span class="text-muted" style="font-size:12px;">None Specified</span>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                            
                                                            <td style="text-align: center;">
                                                        @if($room->status == 1)
                                                            <span class="badge-status-pill pill-approved" style="background-color: #dcfce7; color: #15803d; padding: 6px 12px; border-radius: 50px; font-size: 12px; font-weight: 600; display: inline-block;">Available</span>
                                                        @elseif($room->status == 0)
                                                            <span class="badge-status-pill pill-cancelled" style="background-color: #fee2e2; color: #b91c1c; padding: 6px 12px; border-radius: 50px; font-size: 12px; font-weight: 600; display: inline-block;">Not Available</span>
                                                        @elseif($room->status == 2)
                                                            <span class="badge-status-pill pill-pending" style="background-color: #ffedd5; color: #c2410c; padding: 6px 12px; border-radius: 50px; font-size: 12px; font-weight: 600; display: inline-block;">Under Maintenance</span>
                                                        @endif
                                                    </td>
                                                            
                                                            <td class="text-right">
                                                                <div class="action-btn-group" style="display: flex; gap: 8px; justify-content: flex-end; align-items: center;">
                                                                    <a href="{{ route('vendor.rooms.show', $room->id) }}"  class="btn btn-action-view"  title="View Room Configurations">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                                                    <a href="{{ route('vendor.rooms.edit', $room->id) }}" 
                                                                       class="btn-action-base btn-action-edit" 
                                                                       title="Edit Room Layout">
                                                                        <i class="fa fa-pencil"></i>
                                                                    </a>
                                                                
                                                                    <form action="{{ route('vendor.rooms.destroy', $room->id) }}" method="POST" class="delete-room-form" style="display: inline-block; margin: 0;">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="button" class="btn-action-base btn-action-delete trigger-delete-btn" title="Remove Room Segment">
                                                                            <i class="fa fa-trash"></i>
                                                                        </button>
                                                                    </form>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @endif

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
    $(document).ready(function() {
        // Intercept click on room delete button to run SweetAlert2 verification
        $('.trigger-delete-btn').on('click', function(e) {
            e.preventDefault();
            
            let targetForm = $(this).closest('.delete-room-form');
            
            Swal.fire({
                title: 'Are you sure?',
                text: "This action will permanently remove this room segment configuration and wipe any asset logs!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626', // Premium Red
                cancelButtonColor: '#64748b',  // Slate Sub-Color
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                background: '#ffffff',
                customClass: {
                    popup: 'premium-swal-popup'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    targetForm.submit();
                }
            });
        });
    });
    </script>

    @if(session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    title: 'Success!',
                    text: "{{ session('success') }}",
                    icon: 'success',
                    confirmButtonColor: '#0ea5e9', // Theme Blue Primary
                    timer: 3500
                });
            });
        </script>
    @endif

@endsection