@extends('dashboard.layouts.app')

@section('content')
@include('components.alert')
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card h-100 border-0 shadow-sm overflow-hidden p-3">
        <div
          class="card-header border-bottom py-3 px-5 d-flex align-items-center flex-wrap justify-content-between gap-3">
          <h5 class="mb-0">Compensations</h5>

          <form action="{{ route('compensations.user.store') }}" method="get" class="d-flex align-items-center gap-2">
            <label class="form-label mb-0 me-2">Select User</label>

            <div> {{$user->name}}</div>
          </form>
        </div>

        @if($user)
        <div class="p-4">
          <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
            <div>
              <h4 class="mb-1">{{ $user->full_name ?? $user->username }}</h4>
              <div class="text-muted">Position: {{ optional(optional($user->staff)->jobTitle)->name ?? '—' }}</div>
            </div>
            <div class="d-flex gap-3">
              <div class="card border-0 shadow-sm">
                <div class="card-body py-2 px-3">
                  <div class="small text-muted">Total Bonuses</div>
                  <div class="fs-5 text-success fw-semibold">{{ number_format($bonus_result, 2) }}</div>
                </div>
              </div>
              <div class="card border-0 shadow-sm">
                <div class="card-body py-2 px-3">
                  <div class="small text-muted">Total Penalties</div>
                  <div class="fs-5 text-danger fw-semibold">{{ number_format($penalty_result, 2) }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Edit Compensation Modal -->
          <div class="modal fade" id="editCompensationModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Edit Compensation</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <form id="editCompensationForm">
                    <input type="hidden" id="edit_compensation_id">
                    <div class="mb-3">
                      <label class="form-label">Rule</label>
                      <select id="edit_rule_id" class="form-select" required>
                        <option value="">-- select rule --</option>
                        @foreach($penaltyRules as $rule)
                          <option value="{{ $rule->id }}">[Penalty] {{ $rule->name }} - {{$rule->units}} -
                            ({{ $rule->value }})</option>
                        @endforeach
                        @foreach($bonusRules as $rule)
                          <option value="{{ $rule->id }}">[Bonus] {{ $rule->name }} ({{ $rule->value }})</option>
                        @endforeach
                      </select>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button type="button" class="btn btn-primary" id="btnUpdateCompensation">Update</button>
                </div>
              </div>
            </div>
          </div>

          <div class="row g-3">
            <div class="col-md-6">
              <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light fw-semibold">Add Penalty</div>
                <div class="card-body">
                  <form id="penaltyForm" action="{{ route('compensations.user.store') }}" method="get"
                    class="d-flex gap-2 align-items-end">
                    <input type="hidden" name="user_id" value="{{ $user->id }}">
                    <div class="flex-grow-1">
                      <label class="form-label">Penalty Rule</label>
                      <select name="rule_id" class="form-select" required>
                        <option value="">-- select penalty --</option>
                        @foreach($penaltyRules as $rule)
                          <option value="{{ $rule->id }}">{{ $rule->name }} - {{$rule->units}} - ({{ $rule->value }})
                          </option>
                        @endforeach
                      </select>
                    </div>
                    <button class="btn btn-danger" type="submit">Add</button>
                  </form>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light fw-semibold">Add Bonus</div>
                <div class="card-body">
                  <form id="bonusForm" action="{{ route('compensations.user.store') }}" method="get"
                    class="d-flex gap-2 align-items-end">
                    <input type="hidden" name="user_id" value="{{ $user->id }}">
                    <div class="flex-grow-1">
                      <label class="form-label">Bonus Rule</label>
                      <select name="rule_id" class="form-select" required>
                        <option value="">-- select bonus --</option>
                        @foreach($bonusRules as $rule)
                          <option value="{{ $rule->id }}">{{ $rule->name }} ({{ $rule->value }})</option>
                        @endforeach
                      </select>
                    </div>
                    <button class="btn btn-success" type="submit">Add</button>
                  </form>
                </div>
              </div>
            </div>
          </div>

          <div class="mt-4">
            <div class="card border-0 shadow-sm">
              <div class="card-header">

                <p>Existing Compensations</p>

                <div class="py-3 px-5 d-flex align-items-center flex-wrap justify-content-end gap-1">
                  <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                    data-bs-toggle="modal" data-bs-target="#createRuleModal">
                    <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                    Add Rule
                  </button>
                </div>
              </div>

              <div class="card-body p-0">
                <table class="table table-sm mb-0">
                  <thead class="table-light">
                    <tr>
                      <th>Type</th>
                      <th>Rule</th>
                      <th>Value</th>
                      <th> Unit </th>
                      <th>Created At</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    @forelse($compensations as $c)
                    <tr>
                      <td>
                        @php($type = optional($c->rule)->type)
                        <span
                          class="badge {{ $type === 'bonus' ? 'bg-success' : 'bg-danger' }}">{{ ucfirst($type ?? '—') }}</span>
                      </td>
                      <td>{{ optional($c->rule)->name }}</td>
                      <td>{{ optional($c->rule)->value }}</td>
                      <td> {{$c->rule?->units}}</td>
                      <td>{{ $c->created_at?->format('Y-m-d H:i') }}</td>
                      <td>
                        <div class="d-flex gap-2">
                          <button type="button" class="btn btn-outline-primary btn-sm btn-edit-compensation"
                            data-id="{{ $c->id }}">Edit</button>
                          <button type="button" class="btn btn-outline-danger btn-sm btn-delete-compensation"
                            data-id="{{ $c->id }}">Delete</button>
                        </div>
                      </td>
                    </tr>
                    @empty
                                  <tr>
                                    <td colspan="6" class="text-center text-muted">No compensations yet.</td>
                                  </tr>
                                  @endforelse
                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    @else
        <div class="p-4 text-muted">Please select a user to manage compensations.</div>
        @endif
      </div>
    </div>
  </div>
</div>

<!-- Create Modal -->
<div class="modal fade" id="createRuleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Rule</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="createRuleForm">
          @csrf
          <input type="hidden" name="user_id" value="{{ $user->id }}">
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input type="text" name="name" class="form-control" required maxlength="255">
          </div>
          <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control" required maxlength="1000"></textarea>
          </div>
          <div class="mb-3">
            <label class="form-label">Type</label>
            <select name="type" class="form-select" required>
              <option value="bonus">Bonus</option>
              <option value="penalty">Penalty</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Value</label>
            <input type="number" name="value" class="form-control" id="value_input" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Units</label>
            <select name="units" id="unit_select" class="form-select" required>
              <option value="fixed">Fixed</option>
              <option value="hour">hour</option>
              <option value="day">Day</option>
              <option value="percentage">Percentage</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Status</label>
            <select name="status" class="form-select" required>
              <option value="active">Active</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
          {{-- <div class="mb-3">
            <label class="form-label">Insert Type</label>
            <select name="insert_type" class="form-select" required>
              <option value="auto">Auto</option>
              <option value="manual">Manual</option>
            </select>
          </div> --}}
        </form>
        <div class="alert alert-danger d-none" id="createRuleErrors"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="btnSaveRule">Save</button>
      </div>
    </div>
  </div>
</div>
@endsection
@push('scripts')
  <script>
    (function () {
      let isLoading = false;

      function ajaxSubmit(formEl, successCb) {
        if (isLoading) return;
        isLoading = true;

        const $form = $(formEl);
        const $btn = $form.find('button[type="submit"]');
        const btnOriginalText = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Loading...');

        const url = $form.attr('action');
        const data = $form.serialize();
        $.ajax({
          url: url,
          type: 'GET',
          data: data,
          success: function (response) {
            toastr.success(response.message);
            if (typeof successCb === 'function') successCb(response);
          },
          error: function (xhr) {
            const msg = (xhr.responseJSON && (xhr.responseJSON.message || JSON.stringify(xhr.responseJSON))) || 'Request failed';
            alert(msg);
            $btn.prop('disabled', false).html(btnOriginalText);
            isLoading = false;
          }
        });
      }

      $('#penaltyForm').on('submit', function (e) {
        e.preventDefault();
        ajaxSubmit(this, function () {
          window.location.reload();
        });
      });

      $('#bonusForm').on('submit', function (e) {
        e.preventDefault();
        ajaxSubmit(this, function () {
          window.location.reload();
        });
      });

      $(document).on('click', '.btn-delete-compensation', function () {
        if (isLoading) return;
        isLoading = true;

        const $btn = $(this);
        const btnOriginalText = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');

        const id = $(this).data('id');
        $.ajax({
          url: `{{ url('compensations/delete') }}/${id}`,
          type: 'GET',
          dataType: 'json',
          success: function (response) {
            toastr.success(response.message);
            window.location.reload();
          },
          error: function (xhr) {
            const msg = (xhr.responseJSON && (xhr.responseJSON.message || JSON.stringify(xhr.responseJSON))) || 'Delete failed';
            alert(msg);
            $btn.prop('disabled', false).html(btnOriginalText);
            isLoading = false;
          }
        });
      });

      // Edit compensation
      $(document).on('click', '.btn-edit-compensation', function () {
        const id = $(this).data('id');
        fetch(`{{ url('compensations') }}/${id}`)
          .then(r => r.json())
          .then(c => {
            $('#edit_compensation_id').val(c.id);
            $('#edit_rule_id').val(c.rule_id);
            new bootstrap.Modal(document.getElementById('editCompensationModal')).show();
          })
          .catch(() => alert('Failed to load item'));
      });

      $('#btnUpdateCompensation').on('click', function () {
        if (isLoading) return;
        isLoading = true;

        const $btn = $(this);
        const btnOriginalText = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Updating...');

        const id = $('#edit_compensation_id').val();
        const ruleId = $('#edit_rule_id').val();
        $.ajax({
          url: `{{ url('compensations/update') }}/${id}`,
          type: 'GET',
          data: { rule_id: ruleId },
          dataType: 'json',
          success: function (response) {

            const modalEl = document.getElementById('editCompensationModal');
            let modalInstance = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
            modalInstance.hide();
            window.location.reload();
            toastr.success(response.message);
          },
          error: function (xhr) {
            const msg = (xhr.responseJSON && (xhr.responseJSON.message || JSON.stringify(xhr.responseJSON))) || 'Update failed';
            alert(msg);
            $btn.prop('disabled', false).html(btnOriginalText);
            isLoading = false;
          }
        });
      });
    })();
  </script>

  <script>
    $(document).ready(function () {
      const token = $('meta[name="csrf-token"]').attr('content');

      // Create Rule
      $('#btnSaveRule').on('click', function (e) {
        e.preventDefault();
        const formData = $('#createRuleForm');

        $.ajax({
          url: "{{ route('rules.store') }}",
          type: "GET",
          data: formData.serialize(),
          processData: false,
          contentType: false,
          success: function (response) {
            const r = response.data;
            toastr.success(response.message);
            const modalEl = document.getElementById('createRuleModal');
            const modalInstance = bootstrap.Modal.getInstance(modalEl);
            modalInstance.hide();
            // addOrUpdateRow(r);
            $('#createRuleErrors').empty();

            formData.find('input, select, textarea').each(function () {
              const type = $(this).attr('type');
              if (type === 'checkbox' || type === 'radio') {
                $(this).prop('checked', false);
              } else if (type === 'file') {
                $(this).val(null);
              } else {
                $(this).val('');
              }
            });
            window.location.reload();


          },
          error: function (xhr) {
            const body = xhr.responseJSON;
            showErrors('createRuleErrors', body);
          }
        });
      });
    });


    // Function to toggle field states based on insert_type



    function addOrUpdateRow(r) {
      const tbody = document.getElementById('rulesTableBody');
      let row = document.getElementById(`rule-row-${r.id}`);
      const typeBadge = r.type === 'bonus' ? 'bg-success' : 'bg-danger';
      const statusBadge = r.status === 'active' ? 'bg-primary' : 'bg-secondary';
      const insertTypeBadge = r.insert_type === 'auto' ? 'bg-info' : 'bg-warning';
      const actions = `
        <button type="button" class="btn btn-outline-primary btn-sm radius-8 btn-edit-rule" data-id="${r.id}">
          <iconify-icon icon="lucide:edit" class="text-lg"></iconify-icon>
        </button>
        <button type="button" class="btn btn-outline-danger btn-sm radius-8 btn-delete-rule" data-id="${r.id}" data-name="${r.name}">
          <iconify-icon icon="fluent:delete-24-regular" class="text-lg"></iconify-icon>
        </button>`;

      const html = `
        <td>${r.id}</td>
        <td class="rule-name">${(r.name)}</td>
        <td class="rule-description">${(r.description)}</td>
        <td class="rule-type"><span class="badge ${typeBadge}">${capitalize(r.type)}</span></td>
        <td class="rule-value">${(r.value)}</td>
        <td class="rule-units">${(r.units ?? '-')}</td>
        <td class="rule-status"><span class="badge ${statusBadge}">${capitalize(r.status)}</span></td>
        <td class="rule-insert-type"><span class="badge ${insertTypeBadge}">${capitalize(r.insert_type ?? 'auto')}</span></td>
        <td>${actions}</td>`;

      if (!row) {
        row = document.createElement('tr');
        row.id = `rule-row-${r.id}`;
        row.innerHTML = html;
        tbody.prepend(row);
      } else {
        row.innerHTML = html;
      }


    }

    function showErrors(containerId, body) {
      const el = document.getElementById(containerId);
      let message = 'An error occurred';
      if (body && body.errors) {
        message = Object.values(body.errors).flat().join("\n");
      } else if (body && body.message) {
        message = body.message;
      }
      el.classList.remove('d-none');
      el.textContent = message;
    }


    function capitalize(s) {
      return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
    }

  </script>
@endpush