@php
    // Read the current staff permissions once so the row buttons stay simple.
    $canCreateAccount = \App\Support\AdminAccess::canAction('accounts', 'create');
    $canEditAccount = \App\Support\AdminAccess::canAction('accounts', 'edit');
    $canDeleteAccount = \App\Support\AdminAccess::canAction('accounts', 'delete');
@endphp

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-3">
            <h5 class="mb-0">{{ __('Accounts Management') }}</h5>
            @if($canCreateAccount)
                <button wire:click="create()" class="btn btn-primary w-20 w-sm-auto">{{ __('Add New Account') }}</button>
            @endif
        </div>

        <div class="card-body">
            <div class="mb-3 w-100 w-md-25">
                <input type="text" wire:model.live="search" class="form-control" placeholder="{{ __('Search accounts...') }}">
            </div>

            @if (session()->has('message'))
                <div class="alert alert-success">{{ session('message') }}</div>
            @endif

            <div class="table-responsive text-nowrap">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>{{ __('Account Name') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Account No') }}</th>
                            <th>{{ __('Balance') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($accounts as $account)
                        <tr>
                            <td>{{ $account->account_name }}</td>
                            <td><span class="badge bg-label-info">{{ $account->account_type }}</span></td>
                            <td>{{ $account->account_number ?? __('N/A') }}</td>
                            <td><strong>Rs. {{ number_format($account->current_balance) }}</strong></td>
                            <td>
                                <div class="d-flex gap-1">
                                    @if($canEditAccount)
                                        <button wire:click="edit({{ $account->id }})" class="btn btn-sm btn-outline-primary"><i class="fa fa-edit"></i></button>
                                    @endif
                                    @if($canDeleteAccount)
                                        <button onclick="confirm(@js(__('Are you sure?'))) || event.stopImmediatePropagation()" wire:click="delete({{ $account->id }})" class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $accounts->links() }}
            </div>
        </div>
    </div>

    @if($isOpen)
    <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5); overflow-y: auto;">
        <div class="modal-dialog modal-dialog-centered px-3"> <div class="modal-content border-0 shadow-lg" style="border-radius: 15px;">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title fw-bold">{{ $account_id ? __('Edit Account') : __('Add Account') }}</h5>
                    <button type="button" class="btn-close" wire:click="closeModal()"></button>
                </div>
                <form wire:submit.prevent="store">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold">{{ __('Account Name') }}</label>
                            <input type="text" wire:model="account_name" class="form-control rounded-3" placeholder="{{ __('e.g. Meezan Bank') }}">
                            @error('account_name') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label fw-bold">{{ __('Account Type') }}</label>
                                <select wire:model="account_type" class="form-select rounded-3">
                                    <option value="">{{ __('Select Type') }}</option>
                                    <option value="Cash">{{ __('Cash') }}</option>
                                    <option value="Bank">{{ __('Bank') }}</option>
                                    <option value="Mobile Wallet">{{ __('Mobile Wallet (Easypaisa/JazzCash)') }}</option>
                                </select>
                                @error('account_type') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label fw-bold">{{ __('Opening Balance') }}</label>
                                <input type="number"
                                       wire:model="opening_balance"
                                       class="form-control rounded-3"
                                       placeholder="0.00"
                                       @if($account_id && ! $canEditOpeningBalance) readonly @endif>
                                @if($account_id && $canEditOpeningBalance)
                                    <small class="text-muted">{{ __('Opening balance abhi edit ho sakti hai (pehli setup). Transactions ke baad lock ho jayegi.') }}</small>
                                @elseif($account_id && ! $canEditOpeningBalance)
                                    <small class="text-muted">{{ __('Opening balance lock hai kyunki is account pe transactions ho chuki hain.') }}</small>
                                @endif
                                @error('opening_balance') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">{{ __('Account Number (Optional)') }}</label>
                            <input type="text" wire:model="account_number" class="form-control rounded-3" placeholder="{{ __('XXXX-XXXX-XXXX') }}">
                        </div>
                    </div>
                    <div class="modal-footer border-top px-4 d-flex flex-column-reverse flex-sm-row">
                        <button type="button" class="btn btn-label-secondary w-100 w-sm-auto mb-2 mb-sm-0" wire:click="closeModal()">{{ __('Close') }}</button>
                        <button type="submit" class="btn btn-primary px-4 shadow-sm w-100 w-sm-auto">{{ $account_id ? __('Update') : __('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif
</div>