@extends('store.layout.main')

@php
$typeLabels = [
    'buyer'        => ['label' => 'Buyer',        'color' => 'blue'],
    'seller'       => ['label' => 'Seller',       'color' => 'indigo'],
    'wholesale'    => ['label' => 'Wholesale',    'color' => 'violet'],
    'manufacturer' => ['label' => 'Manufacturer', 'color' => 'purple'],
    'agent'        => ['label' => 'Agent',        'color' => 'pink'],
    'other'        => ['label' => 'Other',        'color' => 'secondary'],
];
@endphp

@section('page-header')
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <div class="page-pretitle">Manage</div>
                <h2 class="page-title">Customers</h2>
            </div>
            <div class="col-auto ms-auto">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M12 5l0 14"/><path d="M5 12l14 0"/>
                    </svg>
                    Add Customer
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('main-container')

{{-- ── FILTERS ── --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4">
                <input type="text" name="search" class="form-control"
                       placeholder="Search name, phone, email, company…"
                       value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <select name="type" class="form-select">
                    <option value="">All Types</option>
                    @foreach($typeLabels as $val => $meta)
                        <option value="{{ $val }}" {{ request('type') == $val ? 'selected' : '' }}>
                            {{ $meta['label'] }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-secondary">Filter</button>
                @if(request()->anyFilled(['search','type','status']))
                    <a href="{{ route('store.customers.index') }}" class="btn btn-ghost-secondary">Clear</a>
                @endif
            </div>
        </form>
    </div>
</div>

{{-- ── TABLE ── --}}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ $customers->total() }} Customer(s)</h3>
    </div>
    <div class="card-table table-responsive">
        <table class="table table-vcenter">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Contact</th>
                    <th>City</th>
                    <th>Orders</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
            @forelse($customers as $c)
            <tr>
                <td class="text-muted">{{ $c->id }}</td>
                <td>
                    <div class="fw-bold">{{ $c->name }}</div>
                    @if($c->company_name)
                        <div class="text-muted small">{{ $c->company_name }}</div>
                    @endif
                </td>
                <td>
                    <span class="badge bg-{{ $typeLabels[$c->customer_type]['color'] ?? 'secondary' }}-lt
                                      text-{{ $typeLabels[$c->customer_type]['color'] ?? 'secondary' }}">
                        {{ $typeLabels[$c->customer_type]['label'] ?? $c->customer_type }}
                    </span>
                </td>
                <td>
                    <div>{{ $c->phone ?? '—' }}</div>
                    <div class="text-muted small">{{ $c->email ?? '' }}</div>
                </td>
                <td class="text-muted">{{ $c->city ?? '—' }}</td>
                <td>
                    @if($c->orders_count > 0)
                        <a href="#" class="badge bg-blue-lt text-blue text-decoration-none"
                           onclick="viewOrders({{ $c->id }}, '{{ addslashes($c->name) }}')">
                            {{ $c->orders_count }} order(s)
                        </a>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
                <td>
                    @if($c->is_active)
                        <span class="badge bg-success-lt text-success">Active</span>
                    @else
                        <span class="badge bg-danger-lt text-danger">Inactive</span>
                    @endif
                </td>
                <td class="text-end">
                    <div class="btn-list flex-nowrap justify-content-end">
                        <button class="btn btn-sm btn-ghost-secondary"
                                onclick="openEditModal({{ $c }})">
                            Edit
                        </button>
                        <form action="{{ route('store.customers.toggle-status', $c->id) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-ghost-{{ $c->is_active ? 'danger' : 'success' }}">
                                {{ $c->is_active ? 'Deactivate' : 'Activate' }}
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" class="text-center text-muted py-4">No customers found.</td>
            </tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($customers->hasPages())
    <div class="card-footer d-flex align-items-center">
        {{ $customers->links() }}
    </div>
    @endif
</div>

{{-- ══════════════════════
     ADD CUSTOMER MODAL
══════════════════════ --}}
<div class="modal modal-blur fade" id="addCustomerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('store.customers.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Customer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label required">Name</label>
                            <input type="text" name="name" class="form-control" required placeholder="Full name">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required">Type</label>
                            <select name="customer_type" class="form-select" required>
                                @foreach($typeLabels as $val => $meta)
                                    <option value="{{ $val }}">{{ $meta['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control" placeholder="+92 300 0000000">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" placeholder="email@example.com">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Company Name</label>
                            <input type="text" name="company_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tax / NTN Number</label>
                            <input type="text" name="tax_number" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Country</label>
                            <input type="text" name="country" class="form-control" value="Pakistan">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <textarea name="address" rows="2" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-ghost-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Customer</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ══════════════════════
     EDIT CUSTOMER MODAL
══════════════════════ --}}
<div class="modal modal-blur fade" id="editCustomerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="editCustomerForm" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Edit Customer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label required">Name</label>
                            <input type="text" name="name" id="edit_name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required">Type</label>
                            <select name="customer_type" id="edit_customer_type" class="form-select" required>
                                @foreach($typeLabels as $val => $meta)
                                    <option value="{{ $val }}">{{ $meta['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" id="edit_phone" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" id="edit_email" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Company Name</label>
                            <input type="text" name="company_name" id="edit_company_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tax / NTN Number</label>
                            <input type="text" name="tax_number" id="edit_tax_number" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">City</label>
                            <input type="text" name="city" id="edit_city" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Country</label>
                            <input type="text" name="country" id="edit_country" class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <textarea name="address" id="edit_address" rows="2" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-ghost-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ══════════════════════
     ORDERS MODAL
══════════════════════ --}}
<div class="modal modal-blur fade" id="ordersModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="ordersModalTitle">Order History</h5>
                    <div class="text-muted small" id="ordersModalSubtitle"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" id="ordersModalBody">
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
function openEditModal(customer) {
    document.getElementById('editCustomerForm').action = `/store/customers/${customer.id}/update`;
    document.getElementById('edit_name').value          = customer.name ?? '';
    document.getElementById('edit_phone').value         = customer.phone ?? '';
    document.getElementById('edit_email').value         = customer.email ?? '';
    document.getElementById('edit_customer_type').value = customer.customer_type ?? 'buyer';
    document.getElementById('edit_company_name').value  = customer.company_name ?? '';
    document.getElementById('edit_tax_number').value    = customer.tax_number ?? '';
    document.getElementById('edit_address').value       = customer.address ?? '';
    document.getElementById('edit_city').value          = customer.city ?? '';
    document.getElementById('edit_country').value       = customer.country ?? '';
    new bootstrap.Modal(document.getElementById('editCustomerModal')).show();
}

function viewOrders(customerId, customerName) {
    document.getElementById('ordersModalTitle').textContent   = customerName + ' — Orders';
    document.getElementById('ordersModalSubtitle').textContent = '';
    document.getElementById('ordersModalBody').innerHTML =
        '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div></div>';
    new bootstrap.Modal(document.getElementById('ordersModal')).show();

    fetch(`/store/customers/${customerId}/orders`, {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        document.getElementById('ordersModalSubtitle').textContent = data.customer.phone;
        const orders = data.orders;
        if (!orders.length) {
            document.getElementById('ordersModalBody').innerHTML =
                '<p class="text-center text-muted py-4">No orders found.</p>';
            return;
        }
        let html = `<table class="table table-vcenter card-table">
            <thead><tr>
                <th>Order #</th><th>Date</th><th>Items</th>
                <th>Total</th><th>Payment</th><th></th>
            </tr></thead><tbody>`;
        orders.forEach(o => {
            const statusColor = { completed: 'success', cancelled: 'danger', draft: 'warning' };
            const payColor    = { paid: 'success', unpaid: 'danger', partial: 'warning' };
            html += `<tr>
                <td class="fw-bold">${o.order_number ?? '#'+o.id}</td>
                <td class="text-muted small">${o.created_at}</td>
                <td>${o.items_count} item(s)</td>
                <td class="fw-bold">${o.grand_total}</td>
                <td><span class="badge bg-${payColor[o.payment_status] ?? 'secondary'}-lt
                             text-${payColor[o.payment_status] ?? 'secondary'}">${o.payment_status}</span></td>
                <td><a href="${o.view_url}" class="btn btn-sm btn-ghost-secondary" target="_blank">View</a></td>
            </tr>`;
        });
        html += '</tbody></table>';
        document.getElementById('ordersModalBody').innerHTML = html;
    })
    .catch(() => {
        document.getElementById('ordersModalBody').innerHTML =
            '<p class="text-center text-danger py-4">Failed to load orders.</p>';
    });
}
</script>
@endsection