<div>
    <div class="page-header">
        <h1 class="page-title">{{ __('Register Daily Sales') }}</h1>
    </div>

    @if (session()->has('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <form wire:submit.prevent="saveDailySale">
                <div class="row mb-4">
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Sale Date') }} <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('sale_date') is-invalid @enderror" wire:model="sale_date">
                        @error('sale_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="table-responsive mb-4">
                    <table class="table table-bordered">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 30%">{{ __('Payment Method') }}</th>
                                <th style="width: 30%">{{ __('Amount') }}</th>
                                <th>{{ __('Reference / Notes') }}</th>
                                <th style="width: 50px"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($payments as $index => $payment)
                                <tr>
                                    <td>
                                        <select class="form-select @error('payments.'.$index.'.payment_method_id') is-invalid @enderror" 
                                                wire:model.live="payments.{{ $index }}.payment_method_id">
                                            <option value="">{{ __('Select Method') }}</option>
                                            @foreach ($paymentMethods as $method)
                                                <option value="{{ $method->id }}">{{ $method->localized_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('payments.'.$index.'.payment_method_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" class="form-control @error('payments.'.$index.'.amount') is-invalid @enderror" 
                                               wire:model.live="payments.{{ $index }}.amount" placeholder="0.00">
                                        @error('payments.'.$index.'.amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" wire:model="payments.{{ $index }}.reference" placeholder="{{ __('Optional') }}">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-danger" wire:click="removePayment({{ $index }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4">
                                    <button type="button" class="btn btn-sm btn-outline-primary" wire:click="addPayment">
                                        <i class="fas fa-plus me-1"></i> {{ __('Add Payment Row') }}
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Notes') }}</label>
                        <textarea class="form-control" wire:model="notes" rows="3"></textarea>
                    </div>
                    <div class="col-md-6">
                        <div class="alert alert-info">
                            <div class="d-flex justify-content-between align-items-center mb-0">
                                <h4 class="mb-0">{{ __('Total Sales') }}</h4>
                                <h2 class="mb-0 fw-bold">{{ number_format($total_amount, 2) }}</h2>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 text-end">
                    <a href="{{ route('sales.daily.index') }}" class="btn btn-light me-2">{{ __('Cancel') }}</a>
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-save me-2"></i> {{ __('Save Daily Sales') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
