@extends('layouts.master')
@section('body_id', 'vendor_hotels_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">My Registered Hotels</h2>
                                <p class="sub-welcome-caption">View, monitor, and optimize your registered hotel properties infrastructure logs.</p>
                            </div>
                            <div class="header-right-actions-group">
                                <a href="{{ route('vendor.hotels.create') }}" class="btn btn-elite-primary"><i class="fa fa-plus-circle"></i> Add New Hotel</a>
                            </div>
                        </div>

                        <div class="row table-content-row">
                            <div class="col-xs-12">
                                <div class="elite-table-card-wrapper">
                                    
                                    @if($hotels->isEmpty())
                                        <div class="empty-hotels-state text-center">
                                            <div class="empty-icon"><i class="fa fa-building-o"></i></div>
                                            <h4>No Properties Found</h4>
                                            <p>You haven't listed any hotel properties under your account index profile yet.</p>
                                            <a href="{{ route('vendor.hotels.create') }}" class="btn btn-elite-primary margin-top-15"><i class="fa fa-plus"></i> List Your First Hotel</a>
                                        </div>
                                    @else
                                        <div class="table-responsive">
                                            <table class="table elite-data-table">
                                                <thead>
                                                    <tr>
                                                        <th>Preview</th>
                                                        <th>Hotel Details</th>
                                                        <th>Location City</th>
                                                        <th>Google Map</th> <th>Amenities Included</th>
                                                        <th>Verification Status</th>
                                                        <th class="text-right">Action Grid</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($hotels as $hotel)
                                                        <tr>
                                                            <td style="width: 90px;">
                                                                <div class="hotel-preview-thumbnail">
                                                                    @if($hotel->cover_image)
                                                                        <img src="{{ asset($hotel->cover_image) }}" alt="Cover">
                                                                    @else
                                                                        <div class="no-img-placeholder"><i class="fa fa-picture-o"></i></div>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                            
                                                            <td>
                                                                <span class="hotel-primary-row-name">{{ $hotel->hotel_name }}</span>
                                                                <small class="hotel-sub-address text-muted"><i class="fa fa-map-marker"></i> {{ Str::limit($hotel->address, 45) }}</small>
                                                            </td>
                                                            
                                                            <td><span class="location-badge-text">{{ $hotel->city }}</span></td>
                                                            
                                                            <td>
                                                                @if($hotel->map_url)
                                                                    <button type="button" 
                                                                            class="btn btn-sm btn-info view-map-btn" 
                                                                            data-url="{{ $hotel->map_url }}" 
                                                                            data-name="{{ $hotel->hotel_name }}"
                                                                            style="background-color: #0ea5e9; border: none; color: white; border-radius: 4px; padding: 4px 10px; font-size: 12px;">
                                                                        <i class="fa fa-map"></i> View Map
                                                                    </button>
                                                                @else
                                                                    <span class="text-muted" style="font-size: 12px;">No Map</span>
                                                                @endif
                                                            </td>
                                                            
                                                            <td>
                                                                <div class="table-amenities-flex">
                                                                    @if(!empty($hotel->amenities) && is_array($hotel->amenities))
                                                                        @foreach(array_slice($hotel->amenities, 0, 3) as $amenity)
                                                                            <span class="amenity-inline-pill">{{ $amenity }}</span>
                                                                        @endforeach
                                                                        @if(count($hotel->amenities) > 3)
                                                                            <span class="amenity-inline-pill counting-pill">+{{ count($hotel->amenities) - 3 }}</span>
                                                                        @endif
                                                                    @else
                                                                        <span class="text-muted" style="font-size:12px;">None Specified</span>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                            
                                                            <td>
                                                                @if($hotel->status == 1)
                                                                    <span class="badge-status-pill pill-approved">Live & Active</span>
                                                                @elseif($hotel->status == 0)
                                                                    <span class="badge-status-pill pill-pending">Pending Review</span>
                                                                @else
                                                                    <span class="badge-status-pill pill-cancelled">Suspended</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.hotels.show', $hotel->id) }}" 
                                                                       class="btn btn-action-view" 
                                                                       title="View Hotel Details">
                                                                        <i class="fa fa-eye"></i>
                                                                    </a>
                                                                
                                                                    <a href="{{ route('vendor.hotels.edit', $hotel->id) }}" 
                                                                       class="btn-action-base btn-action-edit" 
                                                                       title="Edit Property">
                                                                        <i class="fa fa-pencil"></i>
                                                                    </a>
                                                                
                                                                    <form action="{{ route('vendor.hotels.destroy', $hotel->id) }}" method="POST" class="delete-hotel-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 Property">
                                                                            <i class="fa fa-trash"></i>
                                                                        </button>
                                                                    </form>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @endif

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

                    </div>
                </div>

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

    <div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mapModalLabel" style="font-weight: bold; display: inline-block;">Hotel Location Map</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right; font-size: 24px; background: none; border: none;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <iframe id="modalMapIframe" src="" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>

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

    <script>
    $(document).ready(function() {
        // Map Button click event
        $('.view-map-btn').on('click', function() {
            let mapUrl = $(this).data('url');
            let hotelName = $(this).data('name');
            
            // Modal ka title aur iframe source change karna
            $('#mapModalLabel').text(hotelName + " - Location Map");
            $('#modalMapIframe').attr('src', mapUrl);
            
            // Modal ko show karna
            $('#mapModal').modal('show');
        });

        // Modal close hone par map ko rokna (taaki background me load na hota rahe)
        $('#mapModal').on('hidden.bs.modal', function () {
            $('#modalMapIframe').attr('src', '');
        });

        // Intercept click on generic trash button to trigger SweetAlert2 modal instance
        $('.trigger-delete-btn').on('click', function(e) {
            e.preventDefault();
            
            let targetForm = $(this).closest('.delete-hotel-form');
            
            Swal.fire({
                title: 'Are you sure?',
                text: "This action will permanently delete this hotel property and all its uploaded images!",
                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