@extends('deposits.base')

@section('action-content')
<section class="content">
  <div class="box">
    <div class="box-header">
      <div class="row mb-2">
        <div class="col-sm-8">
          <h3 class="box-title">List of Deposits</h3>
        </div>
        <div class="col-sm-4 text-right">
          @if(in_array(auth()->user()->role, ['teller', 'manager', 'admin']))
            <button id="btnAddDeposit" class="btn btn-primary">
              <i class="fa fa-plus"></i> New Deposit
            </button>
          @endif
        </div>
      </div>
    </div>

    <div class="box-body">
      <table id="depositsTable" class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Client</th>
            <th>Account</th>
            <th>Balance</th>
            <th>Amount</th>
            <th>Method</th>
            <th>Reference</th>
            <th>Date</th>
            <th>Status</th>
            <th width="180">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach($deposits as $deposit)
          <tr>
            <td>{{ $loop->iteration }}</td>
            <td>{{ $deposit->client->surname ?? '' }} {{ $deposit->client->first_name ?? '' }}</td>
            <td>{{ str_replace('_',' ', $deposit->clientAccount->account_type ?? 'N/A') }}</td>
            <td>₵{{ number_format($deposit->clientAccount->balance ?? 0,2) }}</td>
            <td>₵{{ number_format($deposit->amount,2) }}</td>
            <td>{{ ucfirst($deposit->payment_method) }}</td>
            <td>{{ $deposit->reference_no }}</td>
            <td>{{ $deposit->created_at->format('d M Y') }}</td>


            {{-- ================= STATUS COLUMN ================= --}}
   <td>
    @if($deposit->status === 'pending')

        <span class="label label-warning">Pending</span>

    @elseif($deposit->status === 'approved')

        @if($deposit->clientAccount->account_type === 'Fixed_Deposits_Account')

            @if($deposit->fixedDeposit)

                @if($deposit->fixedDeposit->status === 'paid_out')
                    <span class="label label-primary">Paid Out</span>

                @elseif($deposit->fixedDeposit->status === 'matured')
                    <span class="label label-warning">Matured</span>

                @elseif($deposit->fixedDeposit->status === 'active')
                    <span class="label label-success">Active</span>

                @else
                    <span class="label label-default">
                        {{ ucfirst($deposit->fixedDeposit->status) }}
                    </span>
                @endif

            @else
                <span class="label label-default">FD Record</span>
            @endif

        @else
            <span class="label label-success">Approved</span>
        @endif

    @elseif($deposit->status === 'reversed')

        <span class="label label-danger">Reversed</span>

    @else

        <span class="label label-default">
            {{ ucfirst($deposit->status) }}
        </span>

    @endif
</td>

            {{-- ================= ACTIONS ================= --}}
            <td>
              {{-- EDIT BUTTON --}}
              @if(
                  (auth()->user()->role === 'teller' && $deposit->status === 'pending') ||
                  (in_array(auth()->user()->role, ['manager', 'admin']) && $deposit->status === 'pending')
              )
                <button class="btn btn-warning btn-sm editBtn"
                        data-id="{{ $deposit->id }}"
                        data-client="{{ $deposit->client_id }}"
                        data-account="{{ $deposit->client_account_id }}"
                        data-amount="{{ $deposit->amount }}"
                        data-method="{{ $deposit->payment_method }}"
                        data-reference="{{ $deposit->reference_no }}">
                  <i class="fa fa-edit"></i>
                </button>
              @endif

              {{-- APPROVE --}}
              @if(in_array(auth()->user()->role, ['admin', 'manager']) && $deposit->status === 'pending')
                <button class="btn btn-success btn-sm approveBtn" data-id="{{ $deposit->id }}">
                  <i class="fa fa-check"></i>
                </button>
              @endif

              {{-- REVERSE --}}
              @if(
                  in_array(auth()->user()->role, ['admin', 'manager']) &&
                  $deposit->isApproved() &&
                  !$deposit->isReversed()
              )
                <button class="btn btn-danger btn-sm reverseBtn"
                        data-id="{{ $deposit->id }}"
                        data-amount="{{ number_format($deposit->amount, 2) }}"
                        data-client="{{ $deposit->client->surname }} {{ $deposit->client->first_name }}">
                  <i class="fa fa-undo"></i>
                </button>
              @endif

              {{-- PRINT RECEIPT --}}
              <a href="{{ url('/deposits/'.$deposit->id.'/receipt') }}" target="_blank" class="btn btn-sm btn-info">
                  <i class="fa fa-print"></i>
              </a>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>


{{-- ================= ADD / EDIT DEPOSIT MODAL ================= --}}
<div class="modal fade" id="depositModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form id="depositForm">
        @csrf
        <input type="hidden" id="deposit_id">

        <div class="modal-header bg-primary text-white">
          <h4 id="depositModalLabel">Add Deposit</h4>
          <button class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body row">
          <div class="col-md-6">
            <label>Client</label>
            <select id="client_id" name="client_id" class="form-control" required>
              <option value="">Select Client</option>
              @foreach($clients as $client)
                <option value="{{ $client->id }}">{{ $client->surname }} {{ $client->first_name }} ({{ $client->account_number }})</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-6">
            <label>Account</label>
            <select id="client_account_id" name="client_account_id" class="form-control" required>
              <option value="">Select Account</option>
            </select>
          </div>

          <div class="col-md-6 mt-2">
            <label>Initial Deposit (info only)</label>
            <input type="text" id="initial_deposit_info" class="form-control" readonly>
          </div>

          <div class="col-md-6 mt-2">
            <label>Current Balance</label>
            <input type="text" id="current_balance" class="form-control" readonly>
          </div>

          <div class="col-md-6 mt-2">
            <label>Deposit Amount</label>
            <input type="number" id="deposit_amount" name="amount" class="form-control" step="0.01" min="0" required>
          </div>

          <div class="col-md-6 mt-2">
            <label>Payment Method</label>
            <select name="payment_method" class="form-control" required>
              <option value="cash">Cash</option>
              <option value="transfer">Transfer</option>
              <option value="cheque">Cheque</option>
            </select>
          </div>

          <div class="col-md-12 mt-2">
            <label>Reference</label>
            <input type="text" name="reference_no" class="form-control" readonly>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary">Save Deposit</button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- ================= REVERSE MODAL ================= --}}
<div class="modal fade" id="reverseDepositModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="reverseDepositForm">
        @csrf
        <input type="hidden" id="reverse_deposit_id">

        <div class="modal-header bg-danger">
          <h4 class="modal-title"><i class="fa fa-warning"></i> Reverse Deposit</h4>
          <button class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body">
          <p>
            Reverse deposit of <strong>₵<span id="reverse_amount"></span></strong><br>
            Client: <strong><span id="reverse_client"></span></strong>
          </p>

          <div class="form-group">
            <label>Reason <span class="text-danger">*</span></label>
            <textarea id="reverse_reason" class="form-control" required></textarea>
          </div>

          <div class="alert alert-warning">
            This action cannot be undone.
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button class="btn btn-danger">
            <i class="fa fa-undo"></i> Confirm Reversal
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
$(function () {

    // Initialize DataTable
    $('#depositsTable').DataTable({ responsive:true, autoWidth:false });

    // ================= ADD DEPOSIT =================
    $('#btnAddDeposit').click(function () {
        $('#depositForm')[0].reset();
        $('#deposit_id').val('');
        $('#depositModalLabel').text('Add Deposit');
        $('#client_id').val('').trigger('change');
        $('#client_account_id').html('<option value="">Select Account</option>');
        $('#initial_deposit_info,#current_balance').val('');
        $('input[name="reference_no"]').val('DEP-' + Math.random().toString(36).substr(2,9).toUpperCase());
        $('#depositModal').modal('show');
    });

    // ================= EDIT DEPOSIT =================
    $(document).on('click', '.editBtn', function () {
        let d = $(this).data();
        $('#depositForm')[0].reset();
        $('#deposit_id').val(d.id);
        $('#depositModalLabel').text('Edit Deposit');
        $('input[name="reference_no"]').val(d.reference);
        $('#client_id').val(d.client).trigger('change');

        setTimeout(() => {
            $('#client_account_id').val(d.account).trigger('change');
            $('#deposit_amount').val(parseFloat(d.amount).toFixed(2));
        }, 400);

        $('#depositModal').modal('show');
    });

    // ================= LOAD ACCOUNTS =================
    $('#client_id').on('change', function () {
        let clientId = $(this).val();
        let sel = $('#client_account_id');
        sel.html('<option>Loading...</option>');
        $('#initial_deposit_info').val('');

        if (!clientId) { sel.html('<option value="">Select Account</option>'); return; }

        $.get(`/clients/${clientId}/accounts`, function(accounts) {
            sel.html('<option value="">Select Account</option>');
            accounts.forEach(a => {
                sel.append(`<option value="${a.id}" data-balance="${a.balance}" data-initial="${a.initial_deposit ?? 0}">${a.account_type.replaceAll('_',' ')}</option>`);
            });
        }).fail(xhr => sel.html('<option value="">Error loading accounts</option>'));
    });

    // ================= SHOW INITIAL DEPOSIT =================
    $('#client_account_id').on('change', function () {
        const selected = $('option:selected', this);
        const initialDeposit = selected.data('initial');
        $('#initial_deposit_info').val(initialDeposit ? Number(initialDeposit).toFixed(2) : '0.00');
        $('#current_balance').val(`₵${parseFloat(selected.data('balance')||0).toFixed(2)}`);
    });

    // ================= SAVE / UPDATE DEPOSIT =================
    $('#depositForm').submit(function (e) {
    e.preventDefault();

    let id = $('#deposit_id').val();
    let url = id
        ? `/deposits/${id}/live-update`   // ✅ EDIT
        : '/deposits';                    // ✅ CREATE

    $.post(url, $(this).serialize())
        .done(r => {
            Swal.fire(
                'Success',
                r.message || 'Saved successfully',
                'success'
            ).then(() => location.reload());
        })
        .fail(xhr => {
            Swal.fire(
                'Error',
                xhr.responseJSON?.message || 'Operation failed',
                'error'
            );
        });
});

    // ================= REVERSE DEPOSIT =================
    $(document).on('click', '.reverseBtn', function () {
    $('#reverse_deposit_id').val($(this).data('id'));
    $('#reverse_amount').text($(this).data('amount'));
    $('#reverse_client').text($(this).data('client'));
    $('#reverse_reason').val('');
    $('#reverseDepositModal').modal('show');
});

$('#reverseDepositForm').on('submit', function (e) {
    e.preventDefault();

    let id = $('#reverse_deposit_id').val();

    $.post(`/deposits/${id}/reverse`, {
        _token: $('meta[name="csrf-token"]').attr('content'),
        reason: $('#reverse_reason').val()
    })
    .done(function (r) {
        $('#reverseDepositModal').modal('hide');
        Swal.fire(
            'Reversed',
            r.message || 'Deposit reversed successfully',
            'success'
        ).then(() => location.reload());
    })
    .fail(function (xhr) {
        console.error('Reversal Error:', xhr);

        Swal.fire(
            'Reversal Error',
            xhr.responseJSON?.error ||
            xhr.responseJSON?.message ||
            xhr.responseText ||
            'Reversal failed',
            'error'
        );
    });
});

   // ===================== APPROVE DEPOSIT =====================
$(document).on('click', '.approveBtn', function () {
    let id = $(this).data('id');

    Swal.fire({
        title: 'Approve Deposit?',
        text: 'This will credit the client account.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Yes, approve',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            $.post(`/deposits/${id}/approve`, {
                _token: $('meta[name="csrf-token"]').attr('content')
            })
            .done(r => {
                Swal.fire('Approved', r.message, 'success').then(() => location.reload());
            })
            .fail(xhr => {
                let msg = xhr.responseJSON?.message || 'Failed to approve deposit';
                Swal.fire('Error', msg, 'error');
            });
        }
    });
});

});
</script>
@endsection