<?php $__env->startSection('title', 'Customers — HIGHRA CRM'); ?>
<?php $__env->startSection('header', 'Customers'); ?>

<?php $__env->startSection('content'); ?>
<!-- FLASH NOTIFICATIONS -->
<?php if(session('success')): ?>
    <div class="ok" style="margin-bottom: 16px;">
        ✓ <?php echo e(session('success')); ?>

    </div>
<?php endif; ?>

<?php if(isset($errors) && $errors->any()): ?>
    <div class="err" style="margin-bottom: 16px;">
        <ul style="margin: 0; padding-left: 18px;">
            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <li><?php echo e($error); ?></li>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </ul>
    </div>
<?php endif; ?>

<!-- HEADER ACTION ROW -->
<div class="row" style="margin-bottom: 18px;">
    <div>
        <h1 style="margin: 0 0 4px 0;">Customers</h1>
        <p style="color: #8e9ab4; margin: 0;">Converted leads, accounts, and customer relationships</p>
    </div>
    <div>
        <?php if(auth()->user()?->hasPermission('customers.create')): ?>
            <button onclick="document.getElementById('addCustomerModal').classList.add('show')" class="btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                + Add New
            </button>
        <?php endif; ?>
    </div>
</div>

<!-- SEARCH & FILTER TOOLBAR -->
<form id="customerFilterForm" method="GET" action="<?php echo e(route('customers')); ?>">
    <div class="filter-toolbar">
        <div class="filter-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
            <!-- Search Keyword -->
            <div class="filter-group" style="grid-column: span 2;">
                <label>Search Customer</label>
                <input type="text" name="search" value="<?php echo e(request('search')); ?>" placeholder="Search by name, code, phone, email, company...">
            </div>

            <!-- Actions -->
            <div class="filter-group">
                <label>&nbsp;</label>
                <div class="filter-actions">
                    <button type="submit" class="btn" style="padding: 7px 13px;">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                        Filter
                    </button>
                    <?php if(request('search')): ?>
                        <a href="<?php echo e(route('customers')); ?>" class="btn btn-secondary" style="padding: 7px 10px;" title="Reset Search">✕ Clear</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- CUSTOMERS LIST PANEL -->
<div class="panel" style="margin-top: 0;">
    <div style="margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;">
        <div>
            <h2 style="font-size: 15px; margin: 0 0 2px 0;">Customer Directory</h2>
            <p style="font-size: 12px; color: #8e9ab4; margin: 0;">Total active accounts: <?php echo e($stats['total']); ?></p>
        </div>
    </div>

    <?php if($customers->isEmpty()): ?>
        <div style="padding: 50px 20px; text-align: center; color: #64748b; font-size: 13px;">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="1.5" style="margin-bottom: 6px;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            <div>No customers found. Click <strong>+ Add New</strong> to register your first customer.</div>
        </div>
    <?php else: ?>
        <div style="overflow-x: auto;">
            <table style="width: 100%;">
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Contact Details</th>
                        <th>Company</th>
                        <th>Location</th>
                        <th>Quotes / Leads</th>
                        <th>Created</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $customers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td>
                                <strong style="color: #ffffff; display: block; font-size: 13.5px;"><?php echo e($c->name); ?></strong>
                                <small style="color: #8e9ab4; font-family: monospace;"><?php echo e($c->customer_code ?? 'CUST-#'.$c->id); ?></small>
                            </td>
                            <td>
                                <?php if($c->phone): ?>
                                    <div style="color: #edf1ff;"><a href="tel:<?php echo e($c->phone); ?>" style="color: #cbd5e1; text-decoration: none;">📞 <?php echo e($c->phone); ?></a></div>
                                <?php endif; ?>
                                <?php if($c->email): ?>
                                    <div><a href="mailto:<?php echo e($c->email); ?>" style="color: #8e9ab4; text-decoration: none; font-size: 12px;">✉️ <?php echo e($c->email); ?></a></div>
                                <?php endif; ?>
                                <?php if(!$c->phone && !$c->email): ?>
                                    <span style="color: #64748b; font-size: 12px;">—</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <span style="color: #cbd5e1;"><?php echo e($c->company ?: '—'); ?></span>
                            </td>
                            <td>
                                <span style="color: #94a3b8; font-size: 12px;"><?php echo e($c->location ?: ($c->address ? Str::limit($c->address, 20) : '—')); ?></span>
                            </td>
                            <td>
                                <span class="badge" style="background: #141e3a; color: #93c5fd; border: 1px solid #28375c;">
                                    <?php echo e($c->quotations_count ?? 0); ?> Quotes / <?php echo e($c->leads_count ?? 0); ?> Leads
                                </span>
                            </td>
                            <td style="color: #8e9ab4; font-size: 11.5px;">
                                <?php echo e(optional($c->created_at)->format('M d, Y') ?? '—'); ?>

                            </td>
                            <td style="text-align: right;">
                                <div style="display: inline-flex; gap: 6px;">
                                    <?php if(auth()->user()?->hasPermission('customers.edit')): ?>
                                        <button type="button" class="btn btn-secondary btn-sm" onclick="editCustomer(<?php echo e(json_encode($c)); ?>)">
                                            Edit
                                        </button>
                                    <?php endif; ?>
                                    <?php if(auth()->user()?->hasPermission('customers.delete')): ?>
                                        <form method="POST" action="<?php echo e(route('customers.destroy', $c)); ?>" onsubmit="return confirm('Are you sure you want to delete customer <?php echo e($c->name); ?>?');" style="display: inline;">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                            <button type="submit" class="btn btn-danger btn-sm" style="padding: 4px 8px;" title="Delete">
                                                ✕
                                            </button>
                                        </form>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>

        <!-- PAGINATION FOOTER -->
        <div class="pagination-wrapper">
            <div class="pagination-left">
                <span>Showing <?php echo e($customers->firstItem() ?? 0); ?> to <?php echo e($customers->lastItem() ?? 0); ?> of <?php echo e($customers->total()); ?> entries</span>
                <div class="entries-select-wrapper">
                    <label for="per_page_select" style="margin:0; font-size:12px; color:#8e9ab4;">Show:</label>
                    <select id="per_page_select" onchange="applyPerPage(this.value)">
                        <option value="10" <?php echo e(($perPageInput ?? '20') == '10' ? 'selected' : ''); ?>>10</option>
                        <option value="20" <?php echo e(($perPageInput ?? '20') == '20' ? 'selected' : ''); ?>>20</option>
                        <option value="50" <?php echo e(($perPageInput ?? '20') == '50' ? 'selected' : ''); ?>>50</option>
                        <option value="all" <?php echo e(($perPageInput ?? '20') == 'all' ? 'selected' : ''); ?>>All</option>
                    </select>
                </div>
            </div>
            <div>
                <?php echo e($customers->links()); ?>

            </div>
        </div>
    <?php endif; ?>
</div>

<!-- ADD CUSTOMER MODAL -->
<div id="addCustomerModal" class="modal-backdrop">
    <div class="modal">
        <div class="modal-header">
            <h3>Add New Customer</h3>
            <button class="modal-close" onclick="document.getElementById('addCustomerModal').classList.remove('show')">&times;</button>
        </div>
        <form method="POST" action="<?php echo e(route('customers.store')); ?>">
            <?php echo csrf_field(); ?>
            <label>Customer / Contact Name *</label>
            <input type="text" name="name" required placeholder="e.g. Arun Kumar" value="<?php echo e(old('name')); ?>">

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <div>
                    <label>Phone Number</label>
                    <input type="text" name="phone" placeholder="e.g. 9876543210" value="<?php echo e(old('phone')); ?>">
                </div>
                <div>
                    <label>Email Address</label>
                    <input type="email" name="email" placeholder="e.g. arun@example.com" value="<?php echo e(old('email')); ?>">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <div>
                    <label>Company Name</label>
                    <input type="text" name="company" placeholder="Company / Organization" value="<?php echo e(old('company')); ?>">
                </div>
                <div>
                    <label>Location / City</label>
                    <input type="text" name="location" placeholder="e.g. Chennai" value="<?php echo e(old('location')); ?>">
                </div>
            </div>

            <label>Address / Notes</label>
            <textarea name="address" rows="2" placeholder="Full address or customer notes..."><?php echo e(old('address')); ?></textarea>

            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" onclick="document.getElementById('addCustomerModal').classList.remove('show')">Cancel</button>
                <button type="submit" class="btn">Save Customer</button>
            </div>
        </form>
    </div>
</div>

<!-- EDIT CUSTOMER MODAL -->
<div id="editCustomerModal" class="modal-backdrop">
    <div class="modal">
        <div class="modal-header">
            <h3>Edit Customer</h3>
            <button class="modal-close" onclick="document.getElementById('editCustomerModal').classList.remove('show')">&times;</button>
        </div>
        <form id="editCustomerForm" method="POST" action="">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PUT'); ?>
            <label>Customer / Contact Name *</label>
            <input type="text" id="edit_name" name="name" required placeholder="Full Name">

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <div>
                    <label>Phone Number</label>
                    <input type="text" id="edit_phone" name="phone" placeholder="Phone">
                </div>
                <div>
                    <label>Email Address</label>
                    <input type="email" id="edit_email" name="email" placeholder="Email">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <div>
                    <label>Company Name</label>
                    <input type="text" id="edit_company" name="company" placeholder="Company">
                </div>
                <div>
                    <label>Location / City</label>
                    <input type="text" id="edit_location" name="location" placeholder="City">
                </div>
            </div>

            <label>Address / Notes</label>
            <textarea id="edit_address" name="address" rows="2" placeholder="Address"></textarea>

            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" onclick="document.getElementById('editCustomerModal').classList.remove('show')">Cancel</button>
                <button type="submit" class="btn">Update Customer</button>
            </div>
        </form>
    </div>
</div>

<script>
function editCustomer(customer) {
    document.getElementById('editCustomerForm').action = '/customers/' + customer.id;
    document.getElementById('edit_name').value = customer.name || '';
    document.getElementById('edit_phone').value = customer.phone || '';
    document.getElementById('edit_email').value = customer.email || '';
    document.getElementById('edit_company').value = customer.company || '';
    document.getElementById('edit_location').value = customer.location || '';
    document.getElementById('edit_address').value = customer.address || customer.notes || '';
    document.getElementById('editCustomerModal').classList.add('show');
}

function applyPerPage(val) {
    const url = new URL(window.location.href);
    url.searchParams.set('per_page', val);
    url.searchParams.delete('page');
    window.location.href = url.toString();
}
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/apple/Downloads/laravel/resources/views/customers/index.blade.php ENDPATH**/ ?>