@extends('savings.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">Savings Accounts</h3>
        </div>
        <div class="col-sm-4 text-right">
          <button id="btnAddSaving" class="btn btn-primary">
            <i class="fa fa-plus"></i> New Savings Account
          </button>
        </div>
      </div>

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

    <div class="box-body">
      <div class="table-responsive">
        <table id="savingsTable" class="table table-bordered table-hover">
          <thead class="thead-dark">
            <tr>
              <th>#</th>
              <th>Client</th>
              <th>Account Number</th>
              <th>Plan</th>
              <th>Interest Rate</th>
              <th>Balance</th>
              <th>Status</th>
              <th>Client Type</th>
              <th>Start Date</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
@foreach($accounts as $acc)
<tr>
    <!-- # -->
    <td>{{ $loop->iteration }}</td>

    <!-- Client -->
    <td>
        {{ $acc->client->surname }}
        {{ $acc->client->first_name }}
        {{ $acc->client->other_names }}
    </td>

    <!-- Account Number -->
    <td>{{ $acc->account_number }}</td>

    <!-- Plan -->
    <td>{{ ucfirst($acc->plan_type) }}</td>

    <!-- Interest Rate -->
    <td>{{ $acc->interest_rate }}%</td>

    <!-- Balance (FROM CLIENT ACCOUNT – SINGLE SOURCE OF TRUTH) -->
    <td>
        ₵{{ number_format(optional($acc->clientAccount)->balance ?? 0, 4) }}
    </td>

    <!-- Status -->
    <td>
        <span class="badge badge-{{ $acc->status === 'active' ? 'success' : 'danger' }}">
            {{ ucfirst($acc->status) }}
        </span>
    </td>

    <!-- Client Type -->
    <td>
        @php
            $balance = optional($acc->clientAccount)->balance ?? 0;
            $totalDeposits = $acc->deposits_sum_amount ?? 0;
        @endphp

        @if($totalDeposits == $balance)
            <span class="badge badge-info">New Client</span>
        @else
            <span class="badge badge-success">Old Client</span>
        @endif
    </td>

    <!-- Start Date -->
    <td>{{ \Carbon\Carbon::parse($acc->start_date)->format('d M Y') }}</td>

    <!-- Action -->
    <td>
        <!-- Withdraw -->
        <button
            class="btn btn-success btn-sm withdrawBtn"
            data-id="{{ $acc->id }}"
            data-client-name="{{ $acc->client->surname }} {{ $acc->client->first_name }}"
            data-balance="{{ $balance }}"
            title="Withdraw Funds"
        >
            <i class="fa fa-money"></i>
        </button>

                <!-- History -->
        <button
            class="btn btn-primary btn-sm viewHistoryBtn"
            data-client="{{ $acc->client_id }}"
            data-client-name="{{ $acc->client->surname }} {{ $acc->client->first_name }}"
            title="View Withdrawal History"
        >
            <i class="fa fa-history"></i>
        </button>

        <!-- Edit -->
        <button
            class="btn btn-warning btn-sm editBtn"
            data-id="{{ $acc->id }}"
            data-client="{{ $acc->client_id }}"
            data-rate="{{ $acc->interest_rate }}"
            data-plan="{{ $acc->plan_type }}"
            data-date="{{ $acc->start_date }}"
            data-status="{{ $acc->status }}"
            title="Edit Savings"
        >
            <i class="fa fa-edit"></i>
        </button>

                <!-- Interest Settings Button -->
                <a 
                  href="{{ route('interest.settings.page', $acc->id) }}" 
                  class="btn btn-info btn-sm"
                  title="Interest Settings"
                >
                  <i class="fa fa-percent"></i>
                </a>

                <!-- Delete Button -->
                <form 
                  action="{{ route('savings.destroy', $acc->id) }}" 
                  method="POST" 
                  class="d-inline delete-form"
                  title="Delete Savings"
                >
                {{-- Show ONLY to Admin & Manager --}}
@auth
@if(in_array(auth()->user()->role, ['admin','manager']))
                  @csrf 
                  @method('DELETE')
                  <button type="button" class="btn btn-danger btn-sm btn-delete">
                    <i class="fa fa-trash"></i>
                  </button>
                  @endif
@endauth
                </form>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      

      <!-- Withdrawal History Section -->
      <div class="mt-4" id="withdrawalHistorySection" style="display: none;">
        <h4>Withdrawal History for <span id="historyClientName"></span></h4>

        <div class="table-responsive">
          <table class="table table-bordered table-hover" id="withdrawalHistoryTable">
            <thead class="thead-dark">
              <tr>
                <th>#</th>
                <th>Amount (₵)</th>
                <th>Balance After (₵)</th>
                <th>Remarks</th>
                <th>Reference</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody id="withdrawalHistoryBody"></tbody>
          </table>
        </div>

        <button id="closeHistory" class="btn btn-secondary mt-2">Close History</button>
      </div>
    </div>
  </div>
</section>

@include('savings.modal')

<!-- Single Dynamic Withdrawal Modal -->
<div class="modal fade" id="withdrawModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="withdrawForm">
        @csrf
        <input type="hidden" name="savings_id" id="withdrawSavingsId">
        <div class="modal-header bg-success text-white">
          <h5 class="modal-title">Withdraw Funds</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <p><strong>Client:</strong> <span id="withdrawClientName"></span></p>
          <p><strong>Balance:</strong> <span id="currentBalance">₵0.00</span></p>
          <div class="form-group">
            <label>Amount</label>
            <input type="number" name="amount" class="form-control" min="1" required>
          </div>
          <div class="form-group">
            <label>Remarks</label>
            <textarea name="remarks" class="form-control"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Confirm Withdrawal</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection

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

  // Initialize DataTable
  $('#savingsTable').DataTable({
    responsive: true,
    autoWidth: false,
    ordering: true,
    pageLength: 10,
    "bDestroy": true
  });

  // --- ADD / EDIT SAVING MODAL ---
$('#btnAddSaving').click(function () {
    $('#savingForm')[0].reset();
    $('#client_id').val('').trigger('change');
    $('#saving_id').val('');
    $('#methodField').remove(); 
    $('#savingModalLabel').text('Add Savings Account');
    $('#savingModal').modal('show');
});

// --- EDIT SAVING ---
$(document).on('click', '.editBtn', function() {
    let id     = $(this).data('id');
    let client = $(this).data('client');
    let rate   = $(this).data('rate');
    let plan   = $(this).data('plan');
    let date   = $(this).data('date');
    let status = $(this).data('status');

    $('#savingForm')[0].reset();
    $('#saving_id').val(id);

    $('#client_id').val(client).trigger('change');
    $('#interest_rate').val(rate);
    $('#plan_type').val(plan);
    $('#start_date').val(date);
    $('#status').val(status);

    $('#methodField').remove();
    $('#savingForm').append('<input type="hidden" name="_method" value="PUT" id="methodField">');

    $('#savingModalLabel').text('Edit Savings Account');
    $('#savingModal').modal('show');
});

  // --- Open Withdrawal Modal ---
  $(document).on('click', '.withdrawBtn', function() {
    let clientName = $(this).data('client-name');
    let balance = $(this).data('balance');
    let savingsId = $(this).data('id');

$('#withdrawClientName').text(clientName);
    $('#currentBalance').text('₵' + Number(balance).toString());
    $('#withdrawSavingsId').val(savingsId);

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

  // --- Submit Withdrawal ---
  $('#withdrawForm').submit(function(e) {
    e.preventDefault();
    let id = $('#withdrawSavingsId').val();
    let url = "/savings/" + id + "/withdraw";

    Swal.fire({
      title: 'Confirm Withdrawal?',
      text: 'Are you sure you want to withdraw this amount?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, Withdraw'
    }).then((result) => {
      if(result.isConfirmed){
        $.ajax({
          url: url,
          method: 'POST',
          data: $(this).serialize(),
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          success: function(res){
            if(res.status === 'success'){
              // Update balance in table
              $('button[data-id="' + id + '"]').closest('tr').find('td:nth-child(6)').text('₵' + res.balance);

              // Close modal
              $('#withdrawModal').modal('hide');
              $('#withdrawForm')[0].reset();

              Swal.fire('Success!', res.message, 'success');
            } else {
              Swal.fire('Error', res.message, 'error');
            }
          },
          error: function(err){
            Swal.fire('Error', 'Something went wrong.', 'error');
            console.log(err.responseText);
          }
        });
      }
    });
  });

  // --- View Withdrawal History ---
  $(document).on('click', '.viewHistoryBtn', function() {
    let clientId = $(this).data('client');
    let clientName = $(this).data('client-name');

    $('#historyClientName').text(clientName);
    $('#withdrawalHistorySection').slideDown();
    $('#withdrawalHistoryBody').html('');

    $.ajax({
      url: '/savings/' + clientId + '/withdrawals',
      type: 'GET',
      success: function(res) {
        if(res.length === 0) {
          $('#withdrawalHistoryBody').html('<tr><td colspan="6" class="text-center">No withdrawals found</td></tr>');
          return;
        }
        res.forEach(function(txn, index) {
  let row = `<tr>
    <td>${index + 1}</td>
    <td>₵${Number(txn.amount).toFixed(2)}</td>
    <td>₵${Number(txn.balance_after).toFixed(2)}</td>
    <td>${txn.remarks ?? ''}</td>
    <td>${txn.reference}</td>
    <td>${new Date(txn.created_at).toLocaleDateString()}</td>
  </tr>`;
  $('#withdrawalHistoryBody').append(row);
});
      },
      error: function(err) {
        Swal.fire('Error', 'Failed to load withdrawal history.', 'error');
        console.log(err.responseText);
      }
    });
  });

  // --- Close History Section ---
  $('#closeHistory').on('click', function () {
    $('#withdrawalHistorySection').slideUp();
});


  // --- SAVE SAVINGS ACCOUNT (CREATE or UPDATE) ---
$('#savingForm').submit(function(e) {
    e.preventDefault();

    let id = $('#saving_id').val();
    let formData = $(this).serialize();

    let url = "";
    let method = "";

    if (id === "") {
        // CREATE
        url = "/savings";
        method = "POST";
    } else {
        // UPDATE
        url = "/savings/" + id;
        method = "POST"; // Laravel will detect PUT from _method
    }

    $.ajax({
        url: url,
        type: method,
        data: formData,
        success: function(response) {
            $('#savingModal').modal('hide');
            location.reload(); // Refresh list
        },
        error: function(xhr) {
            alert("Error saving account: " + xhr.responseText);
        }
    });
});


});
</script>
@endsection