@extends('backend.app')

@push('style')
    <link rel="stylesheet" href="{{ asset('backend/assets/css/analytics.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .company-logo {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 16px;
            border: 4px solid white;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .company-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            padding: 2.5rem;
            color: white;
            position: relative;
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .company-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .info-item {
            padding: 1rem 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-label {
            font-weight: 600;
            color: #4a5568;
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }

        .info-value {
            color: #2d3748;
            font-size: 1rem;
        }

        .gallery-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 12px;
            transition: all 0.3s;
        }

        .gallery-image:hover {
            transform: scale(1.05);
        }

        .gallery-item {
            margin-bottom: 1rem;
            overflow: hidden;
            border-radius: 12px;
        }

        .action-btn {
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .subscription-badge {
            padding: 0.5rem 1.25rem;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .opening-hours-item {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .opening-hours-item:last-child {
            border-bottom: none;
        }

        .day-label {
            font-weight: 600;
            color: #4a5568;
        }

        .hours-value {
            color: #2d3748;
        }
    </style>
@endpush

@section('title', 'Company Details - ' . $company->name)

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <!-- Header Section -->
        <div class="company-header">
            <div class="row align-items-center">
                <div class="col-md-9">
                    <div class="d-flex align-items-center gap-4">
                        @if($company->images && $company->images->first() && $company->images->first()->image)
                            <img src="{{ asset($company->images->first()->image) }}" alt="{{ $company->name }}" class="company-logo">
                        @else
                            <div class="company-logo bg-white d-flex align-items-center justify-content-center">
                                <i class="fa-solid fa-building fa-3x text-primary"></i>
                            </div>
                        @endif

                        <div>
                            <h1 class="mb-2 fw-bold">{{ $company->name }}</h1>
                            <div class="d-flex align-items-center gap-3 flex-wrap">
                                @if($company->categories && is_array($company->categories))
                                    @foreach(array_slice($company->categories, 0, 2) as $category)
                                        <span class="badge bg-white text-primary">{{ $category }}</span>
                                    @endforeach
                                @endif

                                @if($company->city)
                                    <span class="d-flex align-items-center gap-1">
                                        <i class="fa-solid fa-location-dot"></i>
                                        {{ $company->city }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 text-md-end mt-3 mt-md-0">
                    <div class="d-flex flex-column gap-2">
                        <a href="{{ route('company.index') }}" class="btn btn-light action-btn">
                            <i class="fa-solid fa-arrow-left"></i>
                            Back to List
                        </a>
                        @if($company->status == 'approved')
                            <span class="subscription-badge bg-success text-white">
                                <i class="fa-solid fa-check-circle me-1"></i>Approved
                            </span>
                        @else
                            <span class="subscription-badge bg-warning text-dark">
                                <i class="fa-solid fa-clock me-1"></i>Pending
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3 col-sm-6">
                            <a href="{{ route('companies.show-analytics', $company) }}?days=30" class="btn btn-primary action-btn w-100">
                                <i class="fa-solid fa-chart-line"></i>
                                View Analytics
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <a href="{{ route('companies.bookings', $company) }}" class="btn btn-info action-btn w-100">
                                <i class="fa-solid fa-calendar-check"></i>
                                View Bookings
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <a href="{{ route('admin.manual-subscriptions.create') }}?company_id={{ $company->id }}" class="btn btn-success action-btn w-100">
                                <i class="fa-solid fa-crown"></i>
                                Manage Subscription
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <a href="{{ env('FRONTEND_URL') }}/company/{{ $company->slug }}" target="_blank" class="btn btn-dark action-btn w-100">
                                <i class="fa-solid fa-external-link-alt"></i>
                                View on Frontend
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Statistics Cards -->
            <div class="stats-overview mb-4">
                <div class="stat-card" style="--stat-color: #667eea; --stat-bg: rgba(102, 126, 234, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-users"></i>
                    </div>
                    <div class="stat-label">Total Employees</div>
                    <div class="stat-value">{{ $totalEmployees }}</div>
                    <small class="text-muted">{{ $activeEmployees }} active</small>
                </div>

                <div class="stat-card" style="--stat-color: #48bb78; --stat-bg: rgba(72, 187, 120, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-calendar-check"></i>
                    </div>
                    <div class="stat-label">Total Bookings</div>
                    <div class="stat-value">{{ $totalBookings }}</div>
                    <small class="text-muted">{{ $completedBookings }} completed</small>
                </div>

                <div class="stat-card" style="--stat-color: #ed8936; --stat-bg: rgba(237, 137, 54, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-concierge-bell"></i>
                    </div>
                    <div class="stat-label">Services</div>
                    <div class="stat-value">{{ $totalServices }}</div>
                    <small class="text-muted">Active listings</small>
                </div>

                <div class="stat-card" style="--stat-color: #4299e1; --stat-bg: rgba(66, 153, 225, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-star"></i>
                    </div>
                    <div class="stat-label">Rating</div>
                    <div class="stat-value">{{ $avgRating['rating'] }}</div>
                    <small class="text-muted">{{ $totalReviews }} reviews</small>
                </div>
            </div>

            <div class="row">
                <!-- Company Information -->
                <div class="col-lg-4 mb-4">
                    <div class="card info-card h-100">
                        <div class="card-header card-header-custom">
                            <h5 class="mb-0">
                                <i class="card-icon-building"><i class="fa-solid fa-building"></i></i>
                                Company Information
                            </h5>
                        </div>
                        <div class="card-body card-body-custom">
                            <div class="info-item">
                                <div class="info-label">Company Name</div>
                                <div class="info-value">{{ $company->name }}</div>
                            </div>

                            @if($company->website)
                            <div class="info-item">
                                <div class="info-label">Website</div>
                                <div class="info-value">
                                    <a href="{{ $company->website }}" target="_blank" class="text-primary">
                                        {{ $company->website }}
                                        <i class="fa-solid fa-external-link-alt ms-1"></i>
                                    </a>
                                </div>
                            </div>
                            @endif

                            @if($company->categories && is_array($company->categories))
                            <div class="info-item">
                                <div class="info-label">Categories</div>
                                <div class="info-value">
                                    @foreach($company->categories as $category)
                                        <span class="badge bg-primary me-1 mb-1">{{ $category }}</span>
                                    @endforeach
                                </div>
                            </div>
                            @endif

                            @if($company->address)
                            <div class="info-item">
                                <div class="info-label">Address</div>
                                <div class="info-value">
                                    <i class="fa-solid fa-location-dot text-muted me-1"></i>
                                    {{ $company->address }}
                                    @if($company->city), {{ $company->city }}@endif
                                </div>
                            </div>
                            @endif

                            @if($company->team_size)
                            <div class="info-item">
                                <div class="info-label">Team Size</div>
                                <div class="info-value">{{ $company->team_size }} members</div>
                            </div>
                            @endif

                            <div class="info-item">
                                <div class="info-label">Member Since</div>
                                <div class="info-value">{{ $company->created_at->format('M d, Y') }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Owner Information -->
                <div class="col-lg-4 mb-4">
                    <div class="card info-card h-100">
                        <div class="card-header card-header-custom">
                            <h5 class="mb-0">
                                <i class="card-icon-user"><i class="fa-solid fa-user"></i></i>
                                Owner Information
                            </h5>
                        </div>
                        <div class="card-body card-body-custom">
                            @if($company->user)
                                <div class="text-center mb-4">
                                    @if($company->user->avatar)
                                        <img src="{{ asset($company->user->avatar) }}" alt="{{ $company->user->name }}"
                                             class="rounded-circle" style="width: 80px; height: 80px; object-fit: cover;">
                                    @else
                                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mx-auto"
                                             style="width: 80px; height: 80px;">
                                            <span class="text-white fa-2x">{{ strtoupper(substr($company->user->name, 0, 1)) }}</span>
                                        </div>
                                    @endif
                                    <h5 class="mt-3 mb-1">{{ $company->user->name }}</h5>
                                    <p class="text-muted mb-0">{{ $company->user->email }}</p>
                                </div>

                                <div class="info-item">
                                    <div class="info-label">Phone</div>
                                    <div class="info-value">
                                        @if($company->user->phone)
                                            <a href="tel:{{ $company->user->phone }}" class="text-decoration-none">
                                                <i class="fa-solid fa-phone me-1"></i>{{ $company->user->phone }}
                                            </a>
                                        @else
                                            <span class="text-muted">Not provided</span>
                                        @endif
                                    </div>
                                </div>

                                @if($company->user->address)
                                <div class="info-item">
                                    <div class="info-label">Address</div>
                                    <div class="info-value">{{ $company->user->address }}</div>
                                </div>
                                @endif

                                <div class="info-item">
                                    <div class="info-label">Account Status</div>
                                    <div class="info-value">
                                        @if($company->user->status == 'active')
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-danger">Inactive</span>
                                        @endif
                                    </div>
                                </div>
                            @else
                                <div class="text-center text-muted py-4">
                                    <i class="fa-solid fa-user-slash fa-3x mb-3"></i>
                                    <p>No owner information available</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Subscription Status -->
                <div class="col-lg-4 mb-4">
                    <div class="card info-card h-100">
                        <div class="card-header card-header-custom">
                            <h5 class="mb-0">
                                <i class="card-icon-shield"><i class="fa-solid fa-crown"></i></i>
                                Subscription Status
                            </h5>
                        </div>
                        <div class="card-body card-body-custom">
                            <div class="text-center mb-4">
                                <div class="subscription-badge {{ $company->subscription_status == 'active' ? 'bg-success' : 'bg-warning text-dark' }} mb-3 d-inline-block">
                                    <i class="fa-solid fa-circle me-1"></i>
                                    {{ ucfirst($company->subscription_status ?? 'inactive') }}
                                </div>
                                @if($company->subscription_ends_at)
                                    <div class="text-muted">
                                        @if($company->subscription_ends_at->isFuture())
                                            Expires in {{ $company->subscription_ends_at->diffForHumans() }}
                                        @else
                                            Expired {{ $company->subscription_ends_at->diffForHumans() }}
                                        @endif
                                    </div>
                                @endif
                            </div>

                            <div class="info-item">
                                <div class="info-label">Subscription End Date</div>
                                <div class="info-value">
                                    @if($company->subscription_ends_at)
                                        {{ $company->subscription_ends_at->format('M d, Y') }}
                                    @else
                                        <span class="text-muted">Not set</span>
                                    @endif
                                </div>
                            </div>

                            <div class="info-item">
                                <div class="info-label">Total Bookings</div>
                                <div class="info-value">{{ $company->total_bookings ?? 0 }}</div>
                            </div>

                            <div class="mt-3">
                                <a href="{{ route('admin.manual-subscriptions.create') }}?company_id={{ $company->id }}"
                                   class="btn btn-primary action-btn w-100">
                                    <i class="fa-solid fa-plus me-1"></i>
                                    Add Subscription
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- About Company -->
                @if($company->about)
                <div class="col-lg-6 mb-4">
                    <div class="card info-card h-100">
                        <div class="card-header card-header-custom">
                            <h5 class="mb-0">
                                <i class="card-icon-calendar"><i class="fa-solid fa-align-left"></i></i>
                                About Company
                            </h5>
                        </div>
                        <div class="card-body card-body-custom">
                            <p class="mb-0">{{ $company->about }}</p>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Opening Hours -->
                @if($company->openingTimes)
                <div class="col-lg-6 mb-4">
                    <div class="card info-card h-100">
                        <div class="card-header card-header-custom">
                            <h5 class="mb-0">
                                <i class="card-icon-clock"><i class="fa-solid fa-clock"></i></i>
                                Opening Hours
                            </h5>
                        </div>
                        <div class="card-body card-body-custom">
                            @php
                                $days = [
                                    'monday' => 'Monday',
                                    'tuesday' => 'Tuesday',
                                    'wednesday' => 'Wednesday',
                                    'thursday' => 'Thursday',
                                    'friday' => 'Friday',
                                    'saturday' => 'Saturday',
                                    'sunday' => 'Sunday'
                                ];
                            @endphp

                            @foreach($days as $key => $day)
                                @if($company->openingTimes->$key)
                                    @php
                                        $hours = json_decode($company->openingTimes->$key, true);
                                        $isOpen = is_array($hours) && !empty($hours);
                                    @endphp

                                    <div class="opening-hours-item">
                                        <span class="day-label">{{ $day }}</span>
                                        <span class="hours-value">
                                            @if($isOpen)
                                                @foreach($hours as $index => $slot)
                                                    @if(isset($slot['start']) && isset($slot['end']))
                                                        {{ $slot['start'] }} - {{ $slot['end'] }}
                                                        @if($index < count($hours) - 1), @endif
                                                    @endif
                                                @endforeach
                                            @else
                                                <span class="text-muted">Closed</span>
                                            @endif
                                        </span>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- Gallery -->
            @if($company->images && $company->images->isNotEmpty())
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card info-card">
                        <div class="card-header card-header-custom">
                            <h5 class="mb-0">
                                <i class="card-icon-calendar"><i class="fa-solid fa-images"></i></i>
                                Gallery
                            </h5>
                        </div>
                        <div class="card-body card-body-custom">
                            <div class="row">
                                @foreach($company->images as $image)
                                    <div class="col-md-4 col-sm-6">
                                        <div class="gallery-item">
                                            <img src="{{ asset($image->image) }}" alt="{{ $company->name }}"
                                                 class="gallery-image">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Active Employees Preview -->
            @if($activeEmployeesList->isNotEmpty())
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card info-card">
                        <div class="card-header card-header-custom">
                            <h5 class="mb-0">
                                <i class="card-icon-user"><i class="fa-solid fa-users"></i></i>
                                Active Employees (Latest 5)
                            </h5>
                        </div>
                        <div class="card-body card-body-custom">
                            <div class="table-responsive">
                                <table class="table table-custom">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Job Title</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($activeEmployeesList as $employee)
                                            <tr>
                                                <td>
                                                    @if($employee->user)
                                                        <strong>{{ $employee->user->name }}</strong>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($employee->user)
                                                        {{ $employee->user->email }}
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>{{ $employee->job_title ?? 'N/A' }}</td>
                                                <td>
                                                    <span class="badge bg-{{ $employee->status == 'active' ? 'success' : 'warning' }}">
                                                        {{ ucfirst($employee->status) }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @if($activeEmployees > 5)
                            <div class="text-center mt-3">
                                <button class="btn btn-outline-primary" onclick="viewAllEmployees({{ $company->id }})">
                                    View All {{ $activeEmployees }} Employees
                                </button>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Recent Bookings -->
            @if($recentBookings->isNotEmpty())
            <div class="row">
                <div class="col-12">
                    <div class="card info-card">
                        <div class="card-header card-header-custom">
                            <h5 class="mb-0">
                                <i class="card-icon-calendar"><i class="fa-solid fa-calendar-check"></i></i>
                                Recent Bookings (Latest 5)
                            </h5>
                        </div>
                        <div class="card-body card-body-custom">
                            <div class="table-responsive">
                                <table class="table table-custom">
                                    <thead>
                                        <tr>
                                            <th>Booking ID</th>
                                            <th>Customer</th>
                                            <th>Employee</th>
                                            <th>Date & Time</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($recentBookings as $booking)
                                            <tr>
                                                <td><strong>#{{ $booking->id }}</strong></td>
                                                <td>
                                                    @if($booking->user)
                                                        {{ $booking->user->name }}
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($booking->employee && $booking->employee->user)
                                                        {{ $booking->employee->user->name }}
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div>
                                                        <i class="fa-regular fa-calendar text-muted me-1"></i>
                                                        {{ $booking->booking_date?->format('M d, Y') ?? 'N/A' }}
                                                    </div>
                                                    <small class="text-muted">
                                                        <i class="fa-regular fa-clock me-1"></i>{{ $booking->booking_time ?? 'N/A' }}
                                                    </small>
                                                </td>
                                                <td>
                                                    <span class="status-badge-custom status-{{ $booking->status }}">
                                                        {{ ucfirst($booking->status) }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @if($totalBookings > 5)
                            <div class="text-center mt-3">
                                <a href="{{ route('companies.bookings', $company) }}" class="btn btn-outline-primary">
                                    View All {{ $totalBookings }} Bookings
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function viewAllEmployees(companyId) {
        // Trigger the employees modal from the index page
        if (typeof viewEmployees === 'function') {
            const companyName = '{{ $company->name }}';
            viewEmployees(companyId, companyName);
        } else {
            // Fallback: redirect to employees list if exists
            console.log('View all employees for company:', companyId);
        }
    }
</script>
@endpush
@endsection