@extends('layouts.master')

@section('title', 'Add Payment | ')

@section('content')
    @include('partials.header')
    @include('partials.sidebar')

    <main class="app-content">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-edit"></i> Add Payment</h1>
            </div>

            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item">Payments</li>
                <li class="breadcrumb-item"><a href="#">Create</a></li>
            </ul>
        </div>

        <div class="row">
            <div class="clearix"></div>
            <div class="col-md-12">

                <!-- New Payment Button -->
                <div class="mb-3">
                    <button type="button" class="btn btn-success" id="show-payment-form">
                        <i class="fa fa-plus"></i> New Payment
                    </button>
                </div>

                <!-- Payment Form: Initially Hidden -->
                <div class="tile" id="payment-form" style="display: none;">
                    <h3 class="tile-title">Payment Voucher</h3>
                    <div class="tile-body">

                        <form method="POST" action="{{ route('payment.store') }}">
                            @csrf

                            <div class="row">
                                <!-- Remarks Input -->
                                <div class="form-group col-md-3">
                                    <label class="control-label">Remarks</label>
                                    <input type="text" name="remarks" class="form-control border" placeholder="Enter Remarks">
                                </div>

                                <!-- Date Input -->
                                <div class="form-group col-md-3">
                                    <label class="control-label">Date</label>
                                    <input name="date" class="form-control datepicker" type="date" value="{{ date('Y-m-d') }}" required>
                                </div>

                             
                            </div>

                            <!-- Payment Details Table -->
                            <div class="col-md-12">
                                <table class="table table-bordered" id="payment-details">
                                    <thead>
                                        <tr>
                                            <th>Account</th>
                                            <th>Cash/Bank A/c.</th>
                                            <th>Entry Narration</th>
                                            <th>Amount</th>
<th>Site Name</th>
                                            <th><a class="addRow badge badge-success text-white"><i class="fa fa-plus"></i> Add Row</a></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select name="account_id[]" class="form-control border" required>
                                                    <option value="">Select Account</option>
                                                    @foreach($accounts as $account)
                                                        <option value="{{ $account->Account_ID }}">{{ $account->Account_Title }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select name="cash_bank_id[]" class="form-control border" required>
                                                    <option value="">Select Cash/Bank</option>
                                                    @foreach($cashAccounts as $account)
                                                        <option value="{{ $account->Account_ID }}">{{ $account->Account_Title }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="text" name="entry_narration[]" class="form-control border" required></td>
                                            <td><input type="number" name="amount[]" class="form-control border" required></td>
   <td>
        <select name="site_id[]" class="form-control border">
            <option value="">Select Site</option>
            @foreach($sites as $site)
                <option value="{{ $site->id }}">{{ $site->name }}</option>
            @endforeach
        </select>
    </td>
                                            <td><a href="#" class="btn btn-danger remove"><i class="fa fa-remove"></i></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Submit Button -->
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>

                        </form>
                    </div>
                </div>

<!-- Search Form -->
<form method="GET" action="{{ route('payment.create') }}" class="form-inline mb-3">
    <div class="form-group mr-2">
        <input type="text" name="search" class="form-control" placeholder="Search by Remarks or ID" value="{{ request('search') }}">
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
</form>

                <!-- Today's Payment Vouchers -->
                <hr>
                <h4>Today's Payment Vouchers</h4>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Remarks</th>
                            <th>ID</th>
                            <th>Total Amount</th>
                            <th>Show</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>

@forelse($previousPayments as $payment)
                            <tr>
                                <td>{{ \Carbon\Carbon::parse($payment->VoucherDate)->format('d-M-Y') }}</td>
                                <td>{{ $payment->Remarks }}</td>
                                <td>{{ $payment->Id }}</td>
                                <td>{{ number_format($payment->totalAmount) }}</td>
                                <td><a href="{{ route('payment.show', $payment->Id) }}" class="btn btn-info btn-sm"><i class="fa fa-eye"></i></a></td>
                                <td><a href="{{ route('payment.edit', $payment->Id) }}" class="btn btn-warning btn-sm"><i class="fa fa-edit"></i></a></td>
                                <td>
                                    <form method="POST" action="{{ route('payment.destroy', $payment->Id) }}" onsubmit="return confirm('Are you sure you want to delete this payment?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7">No payment vouchers found for today.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
<div class="d-flex justify-content-center">
    {{ $previousPayments->links() }}
</div>
            </div>
        </div>
    </main>

    @push('js')
    <script>
        $(document).ready(function () {
            // Show form on button click
            $('#show-payment-form').click(function () {
                $('#payment-form').slideDown();
                $(this).hide();
            });

            // Add new row
            $('.addRow').click(function () {
                var newRow = $('#payment-details tbody tr:first').clone();
                newRow.find('input').val('');
                $('#payment-details tbody').append(newRow);
            });

            // Remove row
            $(document).on('click', '.remove', function () {
                var rowCount = $('#payment-details tbody tr').length;
                if (rowCount > 1) {
                    $(this).closest('tr').remove();
                } else {
                    alert('You cannot delete the last row.');
                }
            });
        });
    </script>
    @endpush
@endsection