@extends('layouts.layoutMaster')

@section('title', __('Customer Details'))

@section('vendor-style')
@vite([
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
    'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
])
@endsection

@section('vendor-script')
@vite([
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
    'resources/assets/vendor/libs/flatpickr/flatpickr.js',
])
@endsection

@section('page-script')
@vite([
    'Modules/SystemCore/resources/assets/js/entity-management.js',
])
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Page data configuration for Entity Manager
    window.pageData = {
        entityType: 'customer',
        entityId: {{ $customer->id }},
        urls: {
            addresses: {
                store: "{{ route('systemcore.entity.addresses.store', ['entityType' => 'customer', 'entityId' => $customer->id]) }}",
                show: "{{ route('systemcore.entity.addresses.show', ['entityType' => 'customer', 'entityId' => $customer->id, 'address' => ':id']) }}",
                update: "{{ route('systemcore.entity.addresses.update', ['entityType' => 'customer', 'entityId' => $customer->id, 'address' => ':id']) }}",
                destroy: "{{ route('systemcore.entity.addresses.destroy', ['entityType' => 'customer', 'entityId' => $customer->id, 'address' => ':id']) }}",
                setPrimary: "{{ route('systemcore.entity.addresses.set-primary', ['entityType' => 'customer', 'entityId' => $customer->id, 'address' => ':id']) }}"
            },
            contacts: {
                store: "{{ route('systemcore.entity.contacts.store', ['entityType' => 'customer', 'entityId' => $customer->id]) }}",
                show: "{{ route('systemcore.entity.contacts.show', ['entityType' => 'customer', 'entityId' => $customer->id, 'contact' => ':id']) }}",
                update: "{{ route('systemcore.entity.contacts.update', ['entityType' => 'customer', 'entityId' => $customer->id, 'contact' => ':id']) }}",
                destroy: "{{ route('systemcore.entity.contacts.destroy', ['entityType' => 'customer', 'entityId' => $customer->id, 'contact' => ':id']) }}",
                setPrimary: "{{ route('systemcore.entity.contacts.set-primary', ['entityType' => 'customer', 'entityId' => $customer->id, 'contact' => ':id']) }}"
            },
            documents: {
                store: "{{ route('systemcore.customers.documents.store', $customer->id) }}",
                show: "{{ route('systemcore.customers.documents.show', [$customer->id, ':id']) }}",
                update: "{{ route('systemcore.customers.documents.update', [$customer->id, ':id']) }}",
                destroy: "{{ route('systemcore.customers.documents.destroy', [$customer->id, ':id']) }}",
                download: "{{ route('systemcore.customers.documents.download', [$customer->id, ':id']) }}"
            }
        },
        labels: {
            addAddress: "{{ __('Add Address') }}",
            editAddress: "{{ __('Edit Address') }}",
            addContact: "{{ __('Add Contact') }}",
            editContact: "{{ __('Edit Contact') }}",
            addDocument: "{{ __('Add Document') }}",
            editDocument: "{{ __('Edit Document') }}",
            confirmDelete: "{{ __('Are you sure?') }}",
            deleteAddressWarning: "{{ __('This address will be permanently deleted.') }}",
            deleteContactWarning: "{{ __('This contact will be permanently deleted.') }}",
            deleteDocumentWarning: "{{ __('This document will be permanently deleted.') }}",
            yesDelete: "{{ __('Yes, delete it!') }}",
            cancel: "{{ __('Cancel') }}",
            success: "{{ __('Success!') }}",
            error: "{{ __('Error!') }}",
            processing: "{{ __('Processing...') }}",
            validationError: "{{ __('Please check your input') }}",
            loadError: "{{ __('Failed to load data') }}",
            saveError: "{{ __('Failed to save') }}",
            deleteError: "{{ __('Failed to delete') }}",
            addressSaved: "{{ __('Address saved successfully') }}",
            addressDeleted: "{{ __('Address deleted successfully') }}",
            contactSaved: "{{ __('Contact saved successfully') }}",
            contactDeleted: "{{ __('Contact deleted successfully') }}",
            documentSaved: "{{ __('Document saved successfully') }}",
            documentDeleted: "{{ __('Document deleted successfully') }}",
            primaryAddressSet: "{{ __('Primary address updated') }}",
            primaryContactSet: "{{ __('Primary contact updated') }}"
        }
    };

    // Initialize Entity Manager
    if (typeof EntityManager !== 'undefined') {
        EntityManager.init(window.pageData);
    }
});

// Global functions for onclick handlers
function openAddressOffcanvas(id = null) {
    EntityManager.openAddressOffcanvas(id);
}
function editAddress(id) {
    EntityManager.openAddressOffcanvas(id);
}
function deleteAddress(id) {
    EntityManager.deleteAddress(id);
}
function openContactOffcanvas(id = null) {
    EntityManager.openContactOffcanvas(id);
}
function editContact(id) {
    EntityManager.openContactOffcanvas(id);
}
function deleteContact(id) {
    EntityManager.deleteContact(id);
}
function openDocumentOffcanvas(id = null) {
    EntityManager.openDocumentOffcanvas(id);
}
function editDocument(id) {
    EntityManager.openDocumentOffcanvas(id);
}
function deleteDocument(id) {
    EntityManager.deleteDocument(id);
}
</script>
@endsection

@section('content')
<x-breadcrumb
    :title="$customer->name"
    :breadcrumbs="[
        ['name' => __('System Core'), 'url' => route('systemcore.dashboard')],
        ['name' => __('Customers'), 'url' => route('systemcore.customers.index')],
        ['name' => __('Details')]
    ]"
/>

<div class="row">
    <!-- Customer Information -->
    <div class="col-xl-4 col-lg-5 col-md-5">
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="avatar avatar-lg me-3">
                        <span class="avatar-initial rounded-circle bg-label-primary">
                            {{ strtoupper(substr($customer->name, 0, 2)) }}
                        </span>
                    </div>
                    <div class="flex-grow-1">
                        <h5 class="mb-0">{{ $customer->name }}</h5>
                        <span class="badge bg-label-primary">{{ $customer->customer_code }}</span>
                    </div>
                </div>

                <div class="info-container">
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Company:') }}</span>
                            <span>{{ $customer->company_name ?? '-' }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Type:') }}</span>
                            <span class="badge bg-label-info">{{ $customer->customer_type->label() }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Status:') }}</span>
                            <span class="badge bg-{{ $customer->status->color() }}">{{ $customer->status->label() }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Email:') }}</span>
                            <span>{{ $customer->email ?? '-' }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Phone:') }}</span>
                            <span>{{ $customer->phone ?? '-' }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Mobile:') }}</span>
                            <span>{{ $customer->mobile ?? '-' }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Website:') }}</span>
                            <span>{{ $customer->website ?? '-' }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Tax ID:') }}</span>
                            <span>{{ $customer->tax_id ?? '-' }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('VAT Number:') }}</span>
                            <span>{{ $customer->vat_number ?? '-' }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Payment Terms:') }}</span>
                            <span>{{ $customer->paymentTerm?->name ?? '-' }}</span>
                        </li>
                        <li class="mb-2">
                            <span class="fw-medium me-1">{{ __('Credit Limit:') }}</span>
                            <span>{{ number_format($customer->credit_limit, 2) }}</span>
                        </li>
                    </ul>

                    @if($customer->notes)
                    <div class="mt-3">
                        <h6 class="fw-semibold">{{ __('Notes') }}</h6>
                        <p class="text-muted">{{ $customer->notes }}</p>
                    </div>
                    @endif

                    <div class="d-flex gap-2 mt-4">
                        <a href="{{ route('systemcore.customers.edit', $customer->id) }}" class="btn btn-primary">
                            <i class="bx bx-edit me-1"></i>{{ __('Edit') }}
                        </a>
                        <a href="{{ route('systemcore.customers.index') }}" class="btn btn-label-secondary">
                            <i class="bx bx-arrow-back me-1"></i>{{ __('Back') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics & Details -->
    <div class="col-xl-8 col-lg-7 col-md-7">
        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-sm-6 col-lg-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="badge rounded-pill bg-label-primary me-3 p-2">
                                <i class="bx bx-receipt bx-sm"></i>
                            </div>
                            <div class="card-info">
                                <h5 class="mb-0">{{ $stats['total_orders'] }}</h5>
                                <small>{{ __('Total Orders') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="badge rounded-pill bg-label-success me-3 p-2">
                                <i class="bx bx-dollar bx-sm"></i>
                            </div>
                            <div class="card-info">
                                <h5 class="mb-0">{{ number_format($stats['total_revenue'], 2) }}</h5>
                                <small>{{ __('Total Revenue') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="badge rounded-pill bg-label-warning me-3 p-2">
                                <i class="bx bx-time-five bx-sm"></i>
                            </div>
                            <div class="card-info">
                                <h5 class="mb-0">{{ $stats['pending_orders'] }}</h5>
                                <small>{{ __('Pending Orders') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="badge rounded-pill bg-label-info me-3 p-2">
                                <i class="bx bx-check-circle bx-sm"></i>
                            </div>
                            <div class="card-info">
                                <h5 class="mb-0">{{ $stats['completed_orders'] }}</h5>
                                <small>{{ __('Completed Orders') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Addresses Section --}}
        @include('systemcore::partials.entity._addresses_card', [
            'entityType' => 'customer',
            'entityId' => $customer->id,
            'addresses' => $customer->addresses,
            'canEdit' => true
        ])

        {{-- Contacts Section --}}
        @include('systemcore::partials.entity._contacts_card', [
            'entityType' => 'customer',
            'entityId' => $customer->id,
            'contacts' => $customer->contacts,
            'canEdit' => true
        ])

        {{-- Documents Section --}}
        @include('systemcore::customers._documents_card', [
            'customer' => $customer,
            'documents' => $customer->documents,
            'canEdit' => true
        ])

        <!-- Recent Sales Orders -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bx bx-cart me-1"></i>{{ __('Recent Sales Orders') }}
                </h5>
                @if($stats['total_orders'] > 0)
                <a href="{{ route('systemcore.sales-orders.index') }}?customer_id={{ $customer->id }}" class="btn btn-sm btn-label-primary">
                    {{ __('View All') }}
                </a>
                @endif
            </div>
            <div class="card-body">
                @if($customer->salesOrders->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>{{ __('Order Number') }}</th>
                                    <th>{{ __('Date') }}</th>
                                    <th>{{ __('Status') }}</th>
                                    <th>{{ __('Total') }}</th>
                                    <th>{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($customer->salesOrders as $order)
                                <tr>
                                    <td>{{ $order->order_number }}</td>
                                    <td>{{ $order->order_date->format('Y-m-d') }}</td>
                                    <td>
                                        <span class="badge bg-{{ $order->status->color() }}">
                                            {{ $order->status->label() }}
                                        </span>
                                    </td>
                                    <td>{{ number_format($order->total_amount, 2) }}</td>
                                    <td>
                                        <a href="{{ route('systemcore.sales-orders.show', $order->id) }}" class="btn btn-sm btn-icon btn-text-secondary rounded-pill">
                                            <i class="bx bx-show"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="bx bx-cart bx-lg text-muted"></i>
                        <p class="text-muted mt-2">{{ __('No sales orders found') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection