@extends('layouts.admin')

@section('title', 'Store Details - ' . $store->store_name)

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Store Details</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.index') }}">Malls</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.show', $mall) }}">{{ $mall->name }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.shops', $mall) }}">Businesses</a></li>
                    <li class="breadcrumb-item active">{{ $store->store_name }}</li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <a href="{{ route('admin.malls.shops.edit', [$mall, $store]) }}" class="btn btn-warning">
                <i class="bi bi-pencil"></i> Edit Business
            </a>
            <a href="{{ route('admin.malls.shops', $mall) }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Back to Businesses
            </a>
        </div>
    </div>

    <!-- Store Information -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ $store->store_name }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Business Name:</strong></td>
                                    <td>{{ $store->store_name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Brand Name:</strong></td>
                                    <td>{{ $store->brand_name ?: 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Unit Number:</strong></td>
                                    <td>{{ $store->unit_number }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Floor Number:</strong></td>
                                    <td>{{ $store->floor_number }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Store Category:</strong></td>
                                    <td><span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $store->store_category)) }}</span></td>
                                </tr>
                                <tr>
                                    <td><strong>Business Type:</strong></td>
                                    <td>{{ ucfirst($store->business_type) }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Contact Name:</strong></td>
                                    <td>{{ $store->primary_contact_name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Phone:</strong></td>
                                    <td><a href="tel:{{ $store->primary_contact_phone }}">{{ $store->primary_contact_phone }}</a></td>
                                </tr>
                                <tr>
                                    <td><strong>Email:</strong></td>
                                    <td><a href="mailto:{{ $store->primary_contact_email }}">{{ $store->primary_contact_email }}</a></td>
                                </tr>
                                <tr>
                                    <td><strong>WhatsApp:</strong></td>
                                    <td>{{ $store->whatsapp_number ?: 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Website:</strong></td>
                                    <td>
                                        @if($store->website_url)
                                            <a href="{{ $store->website_url }}" target="_blank">{{ $store->website_url }}</a>
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    @if($store->store_description)
                        <div class="mt-3">
                            <h6>Business Description</h6>
                            <p class="text-muted">{{ $store->store_description }}</p>
                        </div>
                    @endif

                    @if($store->logo_image)
                    <div class="col-md-6">
                        <h6><i class="bi bi-image me-1"></i>Business Logo</h6>
                        <div class="text-center">
                            <img src="{{ asset('storage/' . $store->logo_image) }}" 
                                 alt="{{ $store->store_name }} Logo" 
                                 class="img-fluid rounded border" 
                                 style="max-height: 200px; max-width: 100%; object-fit: contain; cursor: pointer;"
                                 onclick="window.open('{{ asset('storage/' . $store->logo_image) }}', '_blank')">
                        </div>
                    </div>
                    @endif

                    @if($store->store_images && is_array($store->store_images) && count($store->store_images) > 0)
                    <div class="col-md-6">
                        <h6><i class="bi bi-images me-1"></i>Store Images</h6>
                        <div class="row g-2">
                            @foreach($store->store_images as $index => $image)
                            <div class="col-6">
                                <img src="{{ asset('storage/' . $image) }}" 
                                     alt="Store Image {{ $index + 1 }}" 
                                     class="img-fluid rounded border w-100" 
                                     style="height: 120px; object-fit: cover; cursor: pointer;"
                                     onclick="window.open('{{ asset('storage/' . $image) }}', '_blank')">
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    @if(!$store->logo_image && (!$store->store_images || !is_array($store->store_images) || count($store->store_images) === 0))
                    <div class="col-12">
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-image display-4"></i>
                            <p class="mt-2">No images uploaded yet</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Business Status</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Registration Status</label>
                        <br>
                        @php
                            $statusColors = [
                                'pending' => 'warning',
                                'approved' => 'success',
                                'rejected' => 'danger',
                                'suspended' => 'secondary'
                            ];
                            $statusColor = $statusColors[$store->registration_status] ?? 'secondary';
                        @endphp
                        <span class="badge bg-{{ $statusColor }} fs-6">{{ ucfirst($store->registration_status) }}</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Occupancy Status</label>
                        <br>
                        <span class="badge bg-info fs-6">{{ ucfirst(str_replace('_', ' ', $store->occupancy_status ?? 'N/A')) }}</span>
                    </div>

                    @if($store->store_number)
                    <div class="mb-3">
                        <label class="form-label">Store Number</label>
                        <p class="mb-0">{{ $store->store_number }}</p>
                    </div>
                    @endif

                    @if($store->application_date)
                    <div class="mb-3">
                        <label class="form-label">Application Date</label>
                        <p class="mb-0">{{ $store->application_date->format('M d, Y') }}</p>
                    </div>
                    @endif

                    @if($store->approved_at)
                    <div class="mb-3">
                        <label class="form-label">Approved Date</label>
                        <p class="mb-0">{{ $store->approved_at->format('M d, Y') }}</p>
                    </div>
                    @endif

                    @if($store->opening_date)
                    <div class="mb-3">
                        <label class="form-label">Opening Date</label>
                        <p class="mb-0">{{ $store->opening_date->format('M d, Y') }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Actions -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.malls.shops.edit', [$mall, $store]) }}" class="btn btn-warning">
                            <i class="bi bi-pencil me-1"></i>Edit Details
                        </a>
                        
                        <!-- Products & Services Management -->
                        @if($store->registration_status === 'approved')
                            <div class="dropdown-divider"></div>
                            @if($store->tenantBusiness)
                                <a href="{{ route('admin.malls.shops.products', [$mall, $store]) }}" class="btn btn-primary">
                                    <i class="bi bi-box me-1"></i>Manage Products
                                </a>
                                <a href="{{ route('admin.malls.shops.services', [$mall, $store]) }}" class="btn btn-info">
                                    <i class="bi bi-gear me-1"></i>Manage Services
                                </a>
                            @else
                                <div class="alert alert-warning mb-2">
                                    <small><i class="bi bi-exclamation-triangle me-1"></i>No business account found. Create one to manage products and services.</small>
                                </div>
                                <form action="{{ route('admin.malls.shops.create-tenant-business', [$mall, $store]) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-success">
                                        <i class="bi bi-plus-lg me-1"></i>Create Business Account
                                    </button>
                                </form>
                            @endif
                        @endif
                        

                        
                        @if($store->registration_status === 'pending')
                            <div class="dropdown-divider"></div>
                            <button class="btn btn-success" onclick="approveStore({{ $store->id }})">
                                <i class="bi bi-check-lg me-1"></i>Approve
                            </button>
                            <button class="btn btn-danger" onclick="rejectStore({{ $store->id }})">
                                <i class="bi bi-x-lg me-1"></i>Reject
                            </button>
                        @endif
                        
                        <div class="dropdown-divider"></div>
                        <button class="btn btn-outline-danger" onclick="deleteStore({{ $store->id }})">
                            <i class="bi bi-trash me-1"></i>Delete Store
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="" class="img-fluid rounded">
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function showImageModal(imageUrl, title) {
    // Check if modal exists, if not create it
    let modal = document.getElementById('imageModal');
    if (!modal) {
        // Create modal HTML
        const modalHTML = `
            <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body text-center">
                            <img id="modalImage" src="" alt="" class="img-fluid rounded">
                        </div>
                    </div>
                </div>
            </div>
        `;
        document.body.insertAdjacentHTML('beforeend', modalHTML);
        modal = document.getElementById('imageModal');
    }
    
    // Set image and title
    document.getElementById('modalImage').src = imageUrl;
    document.getElementById('imageModalLabel').textContent = title;
    new bootstrap.Modal(modal).show();
}

function approveStore(storeId) {
    if (confirm('Are you sure you want to approve this business application?')) {
        fetch(`/admin/malls/{{ $mall->id }}/shops/${storeId}/approve`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while approving the business.');
        });
    }
}

function rejectStore(storeId) {
    const reason = prompt('Please provide a reason for rejection:');
    if (reason && reason.trim()) {
        fetch(`/admin/malls/{{ $mall->id }}/shops/${storeId}/reject`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ reason: reason.trim() })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while rejecting the business.');
        });
    }
}

function deleteStore(storeId) {
    if (confirm('Are you sure you want to delete this business? This action cannot be undone.')) {
        fetch(`/admin/malls/{{ $mall->id }}/shops/${storeId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{{ route("admin.malls.shops", $mall) }}';
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while deleting the business.');
        });
    }
}
</script>
@endsection