@extends('layout.app')
@section('title', 'Shopkeepers')
@section('page-title', 'Manage Shopkeepers')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Shopkeepers Details</h6>
                    <a class="btn btn-primary" href="{{ route('shopkeepers.create') }}">Add ShopKeeper</a>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <form method="GET" action="{{ request()->url() }}" id="searchForm">
                            <table class="table align-items-center mb-0 text-center">
                                <thead>
                                    <tr>
                                        <th>Sr#</th>
                                        <th>Name</th>
                                        <th>Shop Name</th>
                                        <th>City</th>
                                        <th>Address</th>
                                        <th>Mobile #1</th>
                                        <th>Mobile #2</th>
                                        <th>Pending Payment</th>
                                        <th>operations</th>
                                    </tr>
                                    <tr>
                                        <th></th>
                                        <th>
                                            <input type="search" name="name" value="{{ request('name') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="shop_name" value="{{ request('shop_name') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="city" value="{{ request('city') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="address" value="{{ request('address') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="mobile_1" value="{{ request('mobile_1') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="mobile_2" value="{{ request('mobile_2') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="pending_payment" value="{{ request('pending_payment') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($shopkeeper as $s)
                                        <tr>
                                            <td>{{ $loop->iteration ?? 'N/A' }}</td>
                                            <td>{{ $s->name ?? 'N/A' }}</td>
                                            <td>{{ $s->shop_name ?? 'N/A' }}</td>
                                            <td>{{ $s->city ?? 'N/A' }}</td>
                                            <td>{{ $s->address ?? 'N/A' }}</td>
                                            <td>{{ $s->mobile_1 ?? 'N/A' }}</td>
                                            <td>{{ $s->mobile_2 ?? 'N/A' }}</td>
                                            <td>{{ $s->pending_payment ?? 'N/A' }}</td>
                                            <td>
                                                <a href="{{ route('shopkeepers.edit', $s->id) }}"
                                                    class="btn p-0 border-0 bg-transparent text-primary me-3"
                                                    title="Edit">
                                                    <i class="bi bi-pencil-square fs-5"></i>
                                                </a>
                                                <a href="{{ route('shopkeeper.report', $s->id) }}"
                                                    class="btn p-0 border-0 bg-transparent text-primary me-3"
                                                    title="Report">
                                                    <i class="bi bi-file-earmark-text fs-5"></i>
                                                </a>
                                                <button type="button"
                                                    class="btn p-0 border-0 bg-transparent text-primary pay-btn"
                                                    data-url="{{ route('shopkeeper.paypending', $s->id) }}"
                                                    data-id="{{ $s->id }}" title="Pay Pending Amount">
                                                    <i class="bi bi-cash fs-5"></i>
                                                </button>

                                                {{-- <button type="button"
                                                    class="btn p-0 border-0 bg-transparent text-danger delete-btn"
                                                    data-url="{{ route('shopkeepers.destroy', $s->id) }}"
                                                    data-id="{{ $s->id }}" title="Delete">
                                                    <i class="bi bi-trash fs-5"></i>
                                                </button> --}}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">No shopkeepers found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
                <div class="card-footer px-3 py-2 d-flex justify-content-end">
                    <div class="d-flex justify-content-end">
                        {!! $shopkeeper->appends(request()->query())->links('pagination::bootstrap-4') !!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Modal -->
    <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentModalLabel">Pay Pending Amount</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="paymentForm" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="paymentAmount" class="form-label">Payment Amount</label>
                            <input type="number" class="form-control" id="payment" name="payment" placeholder="Enter payment amount" step="0.01" min="0" required>
                            <label for="paymentAmount" class="form-label">Payment Mode</label>
                            <input type="text" class="form-control" id="payment_mode" name="payment_mode" placeholder="Enter payment mode" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Record Payment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            const form = document.querySelector('form#searchForm');
            if (!form) return;
            let timeout;
            const inputs = form.querySelectorAll('input[type="search"]');
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    clearTimeout(timeout);
                    timeout = setTimeout(function() {
                        // keep current page reset to first page when filtering
                        const pageInput = form.querySelector('input[name="page"]');
                        if (pageInput) pageInput.value = 1;
                        form.submit();
                    }, 500);
                });
            });

            // Handle pay button clicks
            document.querySelectorAll('.pay-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const url = this.dataset.url;
                    const form = document.getElementById('paymentForm');
                    form.action = url;
                    form.reset();
                    const paymentInput = document.getElementById('payment');
                    paymentInput.focus();
                    const modal = new bootstrap.Modal(document.getElementById('paymentModal'));
                    modal.show();
                });
            });
        })();
    </script>
@endpush