@php
    // Keep the action buttons permission-aware for staff users.
    $canCreateSupplier = \App\Support\AdminAccess::canAction('suppliers', 'create');
    $canEditSupplier = \App\Support\AdminAccess::canAction('suppliers', 'edit');
    $canDeleteSupplier = \App\Support\AdminAccess::canAction('suppliers', 'delete');
@endphp

<div>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-0">{{ __('Suppliers') }}</h4>
            <small class="text-muted">{{ __('Manage vendors and purchase sources') }}</small>
        </div>
        @if($canCreateSupplier)
            <button wire:click="openCreateModal" class="btn btn-primary shadow-sm">
                <i class="fa fa-plus me-1"></i> {{ __('Add Supplier') }}
            </button>
        @endif
    </div>

    @if (session()->has('message'))
        <div class="alert alert-success border-0 shadow-sm mb-4">{{ session('message') }}</div>
    @endif

    <div class="card shadow-sm border-0 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">{{ __('Supplier / Company') }}</th>
                        <th>{{ __('Phone') }}</th>
                        <th>{{ __('Email') }}</th>
                        <th>{{ __('NTN') }}</th>
                        <th>{{ __('Opening Balance') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th class="text-end pe-4">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($all_suppliers as $item)
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex flex-column">
                                <strong>{{ $item->display_name }}</strong>
                                <small class="text-muted">{{ $item->company_name ?? __('Individual') }}</small>
                            </div>
                        </td>
                        <td>{{ $item->phone ?? '-' }}</td>
                        <td>{{ $item->email ?? '-' }}</td>
                        <td>{{ $item->ntn_number ?? '-' }}</td>
                        <td><span class="text-danger fw-bold">Rs. {{ number_format($item->opening_balance) }}</span></td>
                        {{-- <td>
                            <span class="badge {{ $item->status == 'active' ? 'bg-label-success' : 'bg-label-danger' }}">
                                {{ ucfirst($item->status) }}
                            </span>
                        </td> --}}
                        <td class="text-center">
                            <div class="d-flex align-items-center" style="gap: 5px;">
                                    <label class="switch">
                                        <input type="checkbox" class="switch-input"
                                            {{ $item->status == 'active' ? 'checked' : '' }}
                                            wire:click="toggleStatus({{ $item->id }})">
                                        <span class="switch-toggle-slider {{ $item->status == 'active' ? 'range-success' : 'range-danger' }}"></span>
                                    </label>

                                    <span class="fw-bold {{ $item->status == 'active' ? 'text-success' : 'text-danger' }}"
                                        style="font-size: 0.6rem; white-space: nowrap; line-height: 1;">
                                        {{ strtoupper($item->status) }}
                                    </span>
                                </div>
                            </td>
                        <td class="text-end pe-4">
                            @if($canEditSupplier)
                                <button wire:click="edit({{ $item->id }})" class="btn btn-sm btn-icon btn-text-info rounded-pill"><i class="fa fa-edit"></i></button>
                            @endif
                            @if($canDeleteSupplier)
                                <button onclick="confirm('Delete karein?') || event.stopImmediatePropagation()" wire:click="delete({{ $item->id }})" class="btn btn-sm btn-icon btn-text-danger rounded-pill"><i class="fa fa-trash"></i></button>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">{{ __('No suppliers found.') }}</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div wire:ignore.self class="modal fade" id="productModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold">{{ $isEditMode ? __('Edit Supplier') : __('Add New Supplier') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                </div>
                <form wire:submit.prevent="save">
                    <div class="modal-body pt-4">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Person Name') }}</label>
                                <div class="input-group">
                                    <input type="text" wire:model="name" class="form-control" placeholder="{{ __('Ali Raza') }}">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" wire:click="translateNameToUrdu">UR</button>
                                </div>
                                @error('name') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Urdu Person Name') }}</label>
                                <input type="text" wire:model="name_urdu" class="form-control" placeholder="{{ __('Urdu name') }}" dir="rtl">
                                @error('name_urdu') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Company Name (Optional)') }}</label>
                                <input type="text" wire:model="company_name" class="form-control" placeholder="{{ __('') }}">
                            </div>
                        </div>

                        <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">{{ __('Phone Number') }}</label>
                                    <input type="number" wire:model="phone" class="form-control" placeholder="{{ __('03xx xxxxxxx') }}">
                                </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('NTN Number') }}</label>
                                <input type="number" wire:model="ntn_number" class="form-control" placeholder="1234567-8">
                            </div>
                        </div>

                         <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Email Address') }}</label>
                            <input type="email" wire:model="email" class="form-control" placeholder="{{ __('example@email.com') }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Address') }}</label>
                            <textarea wire:model="address" class="form-control" rows="2"></textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Opening Balance (Payable)') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rs</span>
                                    <input type="number" wire:model="opening_balance" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Status') }}</label>
                                <select wire:model="status" class="form-select">
                                    <option value="active">{{ __('Active') }}</option>
                                    <option value="inactive">{{ __('Inactive') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        {{-- <button type="submit" class="btn btn-primary px-4">{{ $isEditMode ? __('Update') : __('Save') }} Supplier</button> --}}
                        <button type="submit" class="btn btn-primary">
                            <span wire:loading.remove>{{ __('Save Supplier') }}</span>
                            <span wire:loading>
                                <i class="fa fa-spinner fa-spin"></i> {{ __('Saving...') }}
                             </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        window.addEventListener('show-modal', event => {
            let myModal = new bootstrap.Modal(document.getElementById('productModal'));
            myModal.show();
        });
        window.addEventListener('hide-modal', event => {
            let modalEl = document.getElementById('productModal');
            let modal = bootstrap.Modal.getInstance(modalEl);
            if(modal) modal.hide();
        });
    </script>
</div>