@extends('clients.base')

@section('action-content')
<section class="content">
  <div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">Client KYC / Membership Records</h3>
      <button class="btn btn-primary pull-right" id="btnAddClient">
        <i class="fa fa-plus"></i> New Client
      </button>
    </div>

    <div class="box-body">
      <table id="clientsTable" class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Full Name</th>
            <th>Client Account Number</th>
            <th>Account Type</th>
            <th>Gender</th>
            <th>Phone</th>
            <th>Ghana Card</th>
            <th>Bank</th>
            <th>Passport Photo / Ghana Card</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach($clients as $client)
          <tr>
            <td>{{ $loop->iteration }}</td>
            <td>{{ $client->title_label }} {{ $client->surname }} {{ $client->first_name }} {{ $client->other_names }}</td>
            <td>{{ $client->account_number}}</td>
            <td>
  @forelse($client->accounts as $account)
    <span class="label label-info" style="margin-right:4px;">
      {{ str_replace('_', ' ', $account->account_type) }}
    </span>
  @empty
    <span class="text-muted">No Account</span>
  @endforelse
</td>
            <td>{{ $client->gender }}</td>
            <td>{{ $client->phone }}</td>
            <td>{{ $client->ghana_card_no }}</td>
            <td>{{ $client->bank_name }}</td>
            <td>
              <div class="row text-center">
                <div class="col-xs-6">
                  <img src="{{ $client->photo ? asset('storage/' . $client->photo) : asset('images/default-avatar.png') }}"
                       alt="Client Photo"
                       width="60"
                       height="60"
                       class="img-thumbnail mb-1">
                  <p class="small text-muted">Photo</p>
                </div>
                <div class="col-xs-6">
                  @if($client->ghana_card_copy)
                    <img src="{{ asset('storage/' . $client->ghana_card_copy) }}"
                         alt="Ghana Card"
                         width="60"
                         height="60"
                         class="img-thumbnail mb-1">
                    <p class="small text-muted">Ghana Card</p>
                  @else
                    <p class="text-muted small">No Card</p>
                  @endif
                </div>
              </div>
            </td>
            @php
  $primaryAccount = $client->accounts->first();
@endphp

{{-- STATUS --}}
<td>
  @if($primaryAccount && $primaryAccount->is_active)
    <span class="label label-success">Active</span>
  @else
    <span class="label label-danger">Inactive</span>
  @endif
</td>

{{-- ACTIONS --}}
<td>
  {{-- Edit --}}
  <button class="btn btn-sm btn-warning editBtn" data-client='@json($client)' title="Edit KYC">
    <i class="fa fa-edit"></i>
  </button>

  {{-- Show ONLY to Admin & Manager --}}
@auth
@if(in_array(auth()->user()->role, ['admin','manager']))

    {{-- Activate / Deactivate --}}
    @if($primaryAccount)
        @if($primaryAccount->is_active)
            <button class="btn btn-sm btn-danger toggleAccount"
                data-url="{{ route('accounts.deactivate', $primaryAccount->id) }}"
                data-action="Deactivate"
                title="Deactivate Account">
                <i class="fa fa-ban"></i>
            </button>
        @else
            <button class="btn btn-sm btn-success toggleAccount"
                data-url="{{ route('accounts.activate', $primaryAccount->id) }}"
                data-action="Activate"
                title="Activate Account">
                <i class="fa fa-check"></i>
            </button>
        @endif
    @endif

    {{-- Delete --}}
    <button class="btn btn-sm btn-danger deleteBtn"
        data-id="{{ $client->id }}"
        title="Delete Account">
        <i class="fa fa-trash"></i>
    </button>

@endif
@endauth
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</section>

<!-- KYC Modal -->
<div class="modal fade" id="clientModal" tabindex="-1" role="dialog" aria-labelledby="clientModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form id="clientForm" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="id" id="client_id">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="clientModalLabel">New Client</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span>&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <div class="row">
            {{-- Personal Information --}}
            <div class="col-md-3">
              <label>Title*</label>
              <select name="title" class="form-control">
                <option value="">Select</option>
                <option value="Mr">Mr.</option>
        <option value="Mrs">Mrs.</option>
        <option value="Miss">Miss.</option>
        <option value="Dr">Dr.</option>
         <option value="Prof">Prof.</option>
              </select>
            </div>
            <div class="col-md-3"><label>Surname</label><input type="text" name="surname" class="form-control" required></div>
            <div class="col-md-3"><label>First Name</label><input type="text" name="first_name" class="form-control" required></div>
            <div class="col-md-3"><label>Other Names</label><input type="text" name="other_names" class="form-control"></div>

            <div class="col-md-3"><label>Gender</label>
              <select name="gender" class="form-control">
                <option value="">Select</option>
                <option>Male</option><option>Female</option>
              </select>
            </div>
            <div class="col-md-3"><label>Date of Birth</label><input type="date" name="dob" class="form-control"></div>
            <div class="col-md-3"><label>Place of Birth</label><input type="text" name="place_of_birth" class="form-control"></div>
            <div class="col-md-3"><label>Nationality*</label><input type="text" name="nationality" class="form-control"></div>

            {{-- Contact --}}
            <div class="col-md-4"><label>Phone*</label><input type="text" name="phone" class="form-control"></div>
            <div class="col-md-4"><label>Email</label><input type="email" name="email" class="form-control"></div>
            <div class="col-md-4"><label>GPS Address*</label><input type="text" name="gps_address" class="form-control"></div>

            {{-- Identity & Bank --}}
            <div class="col-md-6"><label>Ghana Card No.*</label><input type="text" name="ghana_card_no" class="form-control"></div>
            <div class="col-md-6"><label>Bank Name</label><input type="text" name="bank_name" class="form-control"></div>
            <div class="col-md-6"><label>Branch</label><input type="text" name="branch" class="form-control"></div>
            <div class="col-md-6"><label>Bank Account Number</label><input type="text" name="bank_account_number" class="form-control"></div>

            {{-- Account Details --}}
            <div class="col-md-6">
    <label>Account Type 1</label>
    <select name="type_of_account_1" class="form-control">
        <option value="">Select</option>
        <option value="Savings_and_Susu_Account">Savings and Susu Account</option>
        <option value="Kids_and_Student_Account">Kids and Student Account</option>
        <option value="Salary_Account">Salary Account</option>
        <option value="Group_Account">Group Account</option>
        <option value="Xmas_Account">Xmas Account</option>
        <option value="Business_Account">Business Account</option>
        <option value="Shares_Account">Shares Account</option>
        <option value="Fixed_Deposits_Account">Fixed Deposits Account</option>
        <option value="Investment_Portfolio_Account">Investment Portfolio Account</option>
        <option value="Retirement_Account">Retirement account</option>
    </select>
</div>
            <div class="col-md-6"><label>Initial Deposit 1</label><input type="number" name="initial_deposit_1" step="0.01" class="form-control"></div>

          <div class="col-md-6">
    <label>Account Type 2</label>
    <select name="type_of_account_2" class="form-control">
        <option value="">Select</option>
        <option value="Savings_and_Susu_Account">Savings and Susu Account</option>
        <option value="Kids_and_Student_Account">Kids and Student Account</option>
        <option value="Salary_Account">Salary Account</option>
        <option value="Group_Account">Group Account</option>
        <option value="Xmas_Account">Xmas Account</option>
        <option value="Business_Account">Business Account</option>
        <option value="Shares_Account">Shares Account</option>
        <option value="Fixed_Deposits_Account">Fixed Deposits Account</option>
        <option value="Investment_Portfolio_Account">Investment Portfolio Account</option>
        <option value="Retirement_Account">Retirement account</option>
    </select>
</div>
            <div class="col-md-6"><label>Initial Deposit 2</label><input type="number" name="initial_deposit_2" step="0.01" class="form-control"></div>

        <div class="col-md-6">
    <label>Account Type 3</label>
    <select name="type_of_account_3" class="form-control">
        <option value="">Select</option>
        <option value="Savings_and_Susu_Account">Savings and Susu Account</option>
        <option value="Kids_and_Student_Account">Kids and Student Account</option>
        <option value="Salary_Account">Salary Account</option>
        <option value="Group_Account">Group Account</option>
        <option value="Xmas_Account">Xmas Account</option>
        <option value="Business_Account">Business Account</option>
        <option value="Shares_Account">Shares Account</option>
        <option value="Fixed_Deposits_Account">Fixed Deposits Account</option>
        <option value="Investment_Portfolio_Account">Investment Portfolio Account</option>
        <option value="Retirement_Account">Retirement account</option>
    </select>
</div>
            <div class="col-md-6"><label>Initial Deposit 3</label><input type="number" name="initial_deposit_3" step="0.01" class="form-control"></div>

            {{-- Beneficiaries --}}
            <div class="col-md-6"><label>Beneficiary 1 Name</label><input type="text" name="beneficiary1_name" class="form-control"></div>
            <div class="col-md-3"><label>Relationship</label><input type="text" name="beneficiary1_relationship" class="form-control"></div>
            <div class="col-md-3"><label>Phone</label><input type="text" name="beneficiary1_phone" class="form-control"></div>

            <div class="col-md-6"><label>Beneficiary 2 Name</label><input type="text" name="beneficiary2_name" class="form-control"></div>
            <div class="col-md-3"><label>Relationship</label><input type="text" name="beneficiary2_relationship" class="form-control"></div>
            <div class="col-md-3"><label>Phone</label><input type="text" name="beneficiary2_phone" class="form-control"></div>

            {{-- Uploads --}}
            <div class="col-md-6">
              <label>Passport Photo</label>
              <input type="file" name="photo" id="photo" class="form-control" accept="image/*">
              <img id="photoPreview" src="#" alt="Passport Preview" class="img-thumbnail mt-2" style="display:none; width:120px; height:120px;">
            </div>

            <div class="col-md-6">
              <label>Ghana Card Copy</label>
              <input type="file" name="ghana_card_copy" id="ghana_card_copy" class="form-control" accept="image/*">
              <img id="ghanaCardPreview" src="#" alt="Ghana Card Preview" class="img-thumbnail mt-2" style="display:none; width:120px; height:120px;">
            </div>

            <div class="col-md-6">
              <label>Offer Letter (optional)</label>
              <input type="file" name="offer_letter" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save Client</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
$(function () {
  const modal = $('#clientModal');
  const form = $('#clientForm');
  const devMode = true; // 🔹 Set to false in production

  $('#clientsTable').DataTable({
    responsive: true,
    pageLength: 10,
    order: [[0, 'asc']],
    autoWidth: false,
    "bDestroy": true
  });

  // ✅ Add Client
  $('#btnAddClient').on('click', function () {
    form[0].reset();
    $('#client_id').val('');
    $('#photoPreview').hide();
    $('#ghanaCardPreview').hide();
    $('#clientModalLabel').text('Add New Client');
    modal.modal('show');
  });

  // ✅ Edit Client
  $(document).on('click', '.editBtn', function () {
    const client = $(this).data('client');
    $('#clientModalLabel').text('Edit Client');
    $('#client_id').val(client.id);

    for (const [key, value] of Object.entries(client)) {
      if ($(`[name="${key}"]`).attr('type') !== 'file') {
        $(`[name="${key}"]`).val(value);
      }
    }

    if (client.photo) $('#photoPreview').attr('src', `/storage/${client.photo}`).show();
    else $('#photoPreview').hide();

    if (client.ghana_card_copy) $('#ghanaCardPreview').attr('src', `/storage/${client.ghana_card_copy}`).show();
    else $('#ghanaCardPreview').hide();

    modal.modal('show');
  });

  // ✅ Save / Update Client with try-catch & enhanced server error
  form.on('submit', function (e) {
    e.preventDefault();

    try {
      const id = $('#client_id').val();
      const url = id ? `/clients/${id}` : `/clients`;
      const formData = new FormData(this);
      if (id) formData.append('_method', 'PUT');

      Swal.fire({
        title: id ? 'Update Client?' : 'Save Client?',
        text: 'Please confirm to proceed.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: id ? 'Update' : 'Save'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (res) {
              modal.modal('hide');
              Swal.fire('Success', res.message, 'success')
                .then(() => location.reload());
            },
            error: function (xhr) {
              console.group('AJAX ERROR DEBUG');
              console.log('Status Code:', xhr.status);
              console.log('Status Text:', xhr.statusText);
              console.log('Response:', xhr.responseJSON ?? xhr.responseText);
              console.groupEnd();

              let message = 'Something went wrong.';

              // Laravel validation errors (422)
              if (xhr.status === 422 && xhr.responseJSON?.errors) {
                message = Object.values(xhr.responseJSON.errors)
                  .map(err => err.join('<br>'))
                  .join('<br>');
              }

              // Server error (500)
              if (xhr.status === 500) {
                message = devMode 
                  ? (xhr.responseJSON?.message ?? xhr.responseText) 
                  : 'Server error. Check logs.';
              }

              // Forbidden / CSRF
              if (xhr.status === 419) {
                message = 'Session expired. Please refresh the page.';
              }

              Swal.fire({
                title: 'Error',
                html: message,
                icon: 'error'
              });
            }
          });
        }
      });

    } catch (err) {
      console.error('Unexpected JS Error:', err);
      Swal.fire({
        title: 'Error',
        html: 'An unexpected error occurred. Check console for details.',
        icon: 'error'
      });
    }
  });

  // ✅ Delete Client
  $(document).on('click', '.deleteBtn', function () {
    const id = $(this).data('id');
    Swal.fire({
      title: 'Delete Client?',
      text: 'This record will be permanently deleted.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        try {
          $.ajax({
            url: `/clients/${id}`,
            type: 'POST',
            data: { _method: 'DELETE', _token: '{{ csrf_token() }}' },
            success: function (res) {
              Swal.fire('Deleted!', res.message, 'success')
                .then(() => location.reload());
            },
            error: function (xhr) {
              let message = devMode 
                ? (xhr.responseJSON?.message ?? xhr.responseText)
                : 'Could not delete record.';
              console.error('Delete Error:', xhr);
              Swal.fire('Error', message, 'error');
            }
          });
        } catch (err) {
          console.error('Unexpected Error:', err);
          Swal.fire('Error', 'Unexpected error occurred during deletion.', 'error');
        }
      }
    });
  });

  // ✅ Live Previews
  $('#photo').change(function (e) {
    const reader = new FileReader();
    reader.onload = (event) => $('#photoPreview').attr('src', event.target.result).show();
    if (e.target.files[0]) reader.readAsDataURL(e.target.files[0]);
  });

  $('#ghana_card_copy').change(function (e) {
    const reader = new FileReader();
    reader.onload = (event) => $('#ghanaCardPreview').attr('src', event.target.result).show();
    if (e.target.files[0]) reader.readAsDataURL(e.target.files[0]);
  });

  // ✅ Toggle Account
  $(document).on('click', '.toggleAccount', function () {
    const url = $(this).data('url');
    const action = $(this).data('action');

    Swal.fire({
      title: action + ' Account?',
      text: 'This will affect all transactions on this account.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, ' + action
    }).then((result) => {
      if (result.isConfirmed) {
        try {
          $.ajax({
            url: url,
            type: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            success: function (res) {
              Swal.fire('Success', res.message, 'success')
                .then(() => location.reload());
            },
            error: function (xhr) {
              let message = devMode 
                ? (xhr.responseJSON?.message ?? xhr.responseText)
                : 'Action failed.';
              console.error('Toggle Account Error:', xhr);
              Swal.fire('Error', message, 'error');
            }
          });
        } catch (err) {
          console.error('Unexpected Error:', err);
          Swal.fire('Error', 'Unexpected error occurred.', 'error');
        }
      }
    });
  });
});
</script>
@endsection