@extends('layouts.main')

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Creditors Management</h1>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Creditors List</h5>
            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createCreditorModal">
                <i class="material-icons md-add"></i> Create New
            </button>
        </div>
        <div class="card-body">
            <table id="creditors-table" class="table table-bordered table-striped w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Account Number</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Phone Number</th>
                        <th>Balance</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody><!-- filled by DataTable --></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Create Modal -->
<div class="modal fade" id="createCreditorModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New Creditor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('creditors.store') }}" id="createCreditorForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Account Number</label>
                        <input type="text" name="account_number" class="form-control" value="{{ $nextAccountNumber }}" readonly>
                        <small class="form-text text-muted">Auto-generated account number</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">First Name <span class="text-danger">*</span></label>
                        <input type="text" name="first_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Last Name <span class="text-danger">*</span></label>
                        <input type="text" name="last_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Phone Number <span class="text-danger">*</span></label>
                        <input
                          type="text"
                          name="phone_number"
                          id="phone_number"
                          class="form-control"
                          maxlength="9"
                          inputmode="numeric"
                          placeholder="7XXXXXXXX"
                          required
                        >
                        <small class="form-text text-muted">
                          Must start with 6 or 7 and be 9 digits total
                        </small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Initial Credit Amount (TZS)</label>
                        <input type="number" name="initial_credit" class="form-control" value="0" min="0" step="0.01">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Paid To</label>
                        <select name="payment_to" class="form-select" required>
                            <option value="">Select Payment Method</option>
                            @foreach ($payment_methods as $payment_method)
                              <option value={{ $payment_method->id }}>{{ $payment_method->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Payment Receipt</label>
                        <input type="file" name="payment_proof" class="form-control">
                    </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-success">Create Creditor</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editCreditorModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Creditor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" id="editCreditorForm">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Account Number</label>
                        <input type="text" name="account_number" id="edit_account_number" class="form-control" readonly>
                        <small class="form-text text-muted">Account number cannot be changed</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">First Name <span class="text-danger">*</span></label>
                        <input type="text" name="first_name" id="edit_first_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Last Name <span class="text-danger">*</span></label>
                        <input type="text" name="last_name" id="edit_last_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Phone Number <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">+255</span>
                            <input type="tel" name="phone_number" id="edit_phone_number" class="form-control"
                                pattern="[67][0-9]{7}"
                                title="Phone number must start with 6 or 7 followed by 7 digits"
                                required>
                        </div>
                        <small class="form-text text-muted">Format: starts with 6 or 7 followed by 7 digits</small>
                    </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-success">Update Creditor</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteCreditorModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Creditor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" id="deleteCreditorForm">
                @csrf
                @method('DELETE')
                <div class="modal-body">
                    <p>Are you sure you want to delete this creditor?</p>
                    <p class="text-danger"><strong>This action cannot be undone.</strong></p>
                    <div class="creditor-details">
                        <p><strong>Account Number:</strong> <span id="delete_account_number"></span></p>
                        <p><strong>Name:</strong> <span id="delete_creditor_name"></span></p>
                    </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-danger">Delete Creditor</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Credit Modal -->
<div class="modal fade" id="addCreditModal" tabindex="-1" aria-labelledby="addCreditModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Credit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" id="addCreditForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Creditor</label>
                        <input type="text" id="credit_creditor_name" class="form-control" readonly>
                        <input type="hidden" name="creditor_id" id="credit_creditor_id">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Amount (TZS) <span class="text-danger">*</span></label>
                        <input type="number" name="amount" class="form-control" min="0" step="0.01" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Payment Receipt <span class="text-danger">*</span></label>
                        <input type="file" name="payment_proof" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Paid To</label>
                        <select name="payment_to" class="form-select" required>
                            <option value="">Select Payment Method</option>
                            @foreach ($payment_methods as $payment_method)
                              <option value={{ $payment_method->id }}>{{ $payment_method->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="2"></textarea>
                    </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-success">Add Credit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Transactions Modal -->
<div class="modal fade" id="transactionsModal" tabindex="-1" aria-labelledby="transactionsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          Transactions — <span id="tx_creditor_name"></span>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <table id="transactions-table" class="table table-striped table-bordered w-100">
          <thead>
            <tr>
              <th>#</th>
              <th>Date</th>
              <th>Type</th>
              <th>Amount (TZS)</th>
              <th>Payment Method</th>
              <th>Description</th>
              <th>Receipt</th>
            </tr>
          </thead>
          <tbody><!-- populated by DataTable --></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
<style>
    .card { border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,.1); margin-bottom: 20px; }
    .card-header { background-color: #f8f9fa; border-bottom: 1px solid #e3e6f0; padding: 15px 20px; }
    .input-group-text { background-color: #f8f9fa; font-weight: 500; }
    .form-text { font-size: .85rem; }
    .table th { background-color: #f8f9fa; font-weight: 600; }
    .btn-sm { padding: .25rem .5rem; font-size: .75rem; }
    .badge { font-size: .75em; }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

<script>
$(document).ready(function () {
    // ---- Main creditors table
    const table = $('#creditors-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("creditors.index") }}',
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'account_number' },
            { data: 'first_name' },
            { data: 'last_name' },
            {
                data: 'phone_number',
                render: function (data) { return data ? data : ''; }
            },
            {
                data: 'balance',
                render: function (data) {
                    return 'TZS ' + parseFloat(data).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }
            },
            {
                data: 'created_at',
                render: function (data) {
                    return new Date(data).toLocaleDateString('en-US', { year:'numeric', month:'short', day:'numeric' });
                }
            },
            {
                data: 'action',
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    return `
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-outline-primary add-credit-btn" data-id="${row.id}" data-name="${row.first_name} ${row.last_name}">
                                <i class="material-icons md-add"></i> Credit
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary edit-creditor-btn"
                                data-id="${row.id}"
                                data-account-number="${row.account_number}"
                                data-first-name="${row.first_name}"
                                data-last-name="${row.last_name}"
                                data-phone-number="${row.phone_number}">
                                <i class="material-icons md-edit"></i> Edit
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-info transactions-btn"
                                data-id="${row.id}"
                                data-name="${row.first_name} ${row.last_name}">
                                <i class="material-icons md-receipt"></i> Transactions
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger delete-creditor-btn"
                                data-id="${row.id}"
                                data-account-number="${row.account_number}"
                                data-name="${row.first_name} ${row.last_name}">
                                <i class="material-icons md-delete"></i> Delete
                            </button>
                        </div>`;
                }
            }
        ],
        dom: 'Bfrtip',
        buttons: [
            { extend: 'copy', className: 'btn btn-sm btn-outline-secondary' },
            { extend: 'csv', className: 'btn btn-sm btn-outline-primary' },
            { extend: 'excel', className: 'btn btn-sm btn-outline-success' },
            { extend: 'pdf', className: 'btn btn-sm btn-outline-danger' },
            { extend: 'print', className: 'btn btn-sm btn-outline-info' }
        ],
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search creditors...",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "Showing 0 to 0 of 0 entries",
            infoFiltered: "(filtered from _MAX_ total entries)",
            zeroRecords: "No matching records found",
            paginate: { first: "First", last: "Last", next: "Next", previous: "Previous" }
        }
    });

    // ---- Edit Creditor
    $(document).on('click', '.edit-creditor-btn', function () {
        const id = $(this).data('id');
        const account_number = $(this).data('account-number');
        const first_name = $(this).data('first-name');
        const last_name = $(this).data('last-name');
        const phone_number = $(this).data('phone-number');

        let phoneValue = phone_number;
        if (phone_number && phone_number.length >= 9) {
            phoneValue = phone_number.substring(3); // remove +255 if present in your payload
        }

        $('#edit_account_number').val(account_number);
        $('#edit_first_name').val(first_name);
        $('#edit_last_name').val(last_name);
        $('#edit_phone_number').val(phoneValue);
        $('#editCreditorForm').attr('action', '/creditors/' + id);
        $('#editCreditorModal').modal('show');
    });

    // ---- Delete Creditor
    $(document).on('click', '.delete-creditor-btn', function () {
        const id = $(this).data('id');
        const account_number = $(this).data('account-number');
        const name = $(this).data('name');

        $('#delete_account_number').text(account_number);
        $('#delete_creditor_name').text(name);
        $('#deleteCreditorForm').attr('action', '/creditors/' + id);
        $('#deleteCreditorModal').modal('show');
    });

    // ---- Add Credit
    $(document).on('click', '.add-credit-btn', function () {
        const id = $(this).data('id');
        const name = $(this).data('name');

        $('#credit_creditor_id').val(id);
        $('#credit_creditor_name').val(name);
        $('#addCreditForm').attr('action', '/creditors/' + id + '/add-credit');
        $('#addCreditModal').modal('show');
    });

    // ---- Phone input format
    $('#createCreditorForm, #editCreditorForm').on('submit', function () {
        const phoneInput = $(this).find('input[name="phone_number"]');
        let phoneValue = phoneInput.val();
        if (phoneValue && !phoneValue.startsWith('255')) {
            phoneInput.val(phoneValue);
        }
    });

    document.querySelector('input[name="phone_number"]').addEventListener('input', e => {
        e.target.value = e.target.value.replace(/\D/g, '');
    });

    // ---- Unified AJAX submission for forms
    $('#createCreditorForm, #editCreditorForm, #deleteCreditorForm, #addCreditForm').on('submit', function (e) {
        e.preventDefault();

        const form   = $(this);
        const url    = form.attr('action');
        const method = (form.attr('method') || 'POST').toUpperCase();

        // prepend 255 if missing (for forms having phone input)
        const phoneInput = form.find('input[name="phone_number"]');
        if (phoneInput.length) {
            let v = phoneInput.val() || '';
            if (v && !v.startsWith('255')) phoneInput.val('255' + v);
        }

        const hasFile = form.find('input[type="file"]').length > 0;
        let payload, ajaxOptions = {};

        if (hasFile) {
            payload = new FormData(form[0]);
            ajaxOptions.processData = false;
            ajaxOptions.contentType = false;
            ajaxOptions.type = 'POST';
        } else {
            payload = form.serialize();
            ajaxOptions.type = method;
        }

        $.ajax(Object.assign({
            url: url,
            data: payload,
            success: function (response) {
                $('.modal').modal('hide');
                alert(response.message || 'Operation completed successfully');
                $('#creditors-table').DataTable().ajax.reload();

                if (form.is('#createCreditorForm') || form.is('#addCreditForm')) {
                    form[0].reset();
                }

                if (form.is('#addCreditForm')) {
                    $('#credit_creditor_id').val('');
                    $('#credit_creditor_name').val('');
                    form.attr('action', '');
                    const file = form.find('input[type="file"]')[0];
                    if (file) file.value = '';
                }
            },
            error: function (xhr) {
                alert('Error: ' + (xhr.responseJSON?.message || 'Something went wrong'));
            }
        }, ajaxOptions));
    });

    // ---- Client-side restriction for create form phone input
    document.getElementById('phone_number').addEventListener('input', function (e) {
        let v = e.target.value;
        v = v.replace(/\D/g, '');
        if (v.length === 1 && !/[67]/.test(v)) v = '';
        if (v.length > 9) v = v.slice(0, 9);
        e.target.value = v;
    });

    // -------------------- Transactions Modal logic --------------------
    let txTable = null;

    $(document).on('click', '.transactions-btn', function () {
      const id = $(this).data('id');
      const name = $(this).data('name') || 'Creditor';
      $('#tx_creditor_name').text(name);

      if (!txTable) {
        txTable = $('#transactions-table').DataTable({
          processing: true,
          serverSide: true,
          ajax: {
            url: `/creditors/${id}/transactions`
          },
          columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            {
              data: 'transaction_date',
              name: 'transaction_date',
              render: function (data) {
                return data ? new Date(data).toLocaleString() : '';
              }
            },
            { data: 'transaction_type', name: 'transaction_type' },
            {
              data: 'amount',
              name: 'amount',
              render: function (data) {
                return 'TZS ' + parseFloat(data).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
              }
            },
            { data: 'payment_method_name', name: 'payment_method_name', defaultContent: '' },
            { data: 'description', name: 'description', defaultContent: '' },
            {
              data: 'file_url',
              orderable: false,
              searchable: false,
              render: function (data) {
                if (!data) return '';
                return `<a href="${data}" target="_blank" class="btn btn-sm btn-outline-secondary">
                          <i class="material-icons md-attach_file"></i> View
                        </a>`;
              }
            }
          ],
          order: [[1, 'desc']],
          pageLength: 10,
          lengthMenu: [10, 25, 50, 100],
        });
      } else {
        txTable.ajax.url(`/creditors/${id}/transactions`).load();
      }

      $('#transactionsModal').modal('show');
    });
    // -----------------------------------------------------------------
});
</script>
@endpush