@extends('crm.master')

@section('title', 'Taxes & Fees')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">Taxes &amp; Fees</h4>
          <p class="text-muted mb-0">Define percentage-based taxes and fees applied at checkout</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
          <i class="icon-base ti tabler-plus me-2 icon-14px"></i>
          New Tax / Fee
        </button>
      </div>
    </div>
  </div>

  @include('crm.components.alerts')

  <div class="card crm-grid-card">
    <div class="table-responsive crm-grid-wrap">
      <table class="table table-hover mb-0 crm-grid-table">
        <thead>
          <tr>
            <th class="bg-secondary text-white">#</th>
            <th class="bg-secondary text-white">Name</th>
            <th class="bg-secondary text-white">Percent</th>
            <th class="bg-secondary text-white">Description</th>
            <th class="bg-secondary text-white">Status</th>
            <th class="bg-secondary text-white">Actions</th>
          </tr>
        </thead>
        <tbody>
          @forelse($taxFees as $key => $item)
            <tr>
              <td>{{ $key + 1 }}</td>
              <td>
                <a href="javascript:void(0)" class="fw-semibold text-primary"
                  data-bs-toggle="modal" data-bs-target="#editModal{{ $item->hash_id }}">
                  {{ $item->name }}
                </a>
              </td>
              <td>
                <span class="badge bg-label-primary fs-6">{{ number_format($item->percent, 2) }}%</span>
              </td>
              <td><span class="text-muted small">{{ $item->description ?: '—' }}</span></td>
              <td>
                @if($item->enabled)
                  <span class="badge bg-success">Active</span>
                @else
                  <span class="badge bg-secondary">Inactive</span>
                @endif
              </td>
              <td>
                <div class="d-flex gap-1">
                  <button type="button" class="btn btn-sm btn-primary"
                    data-bs-toggle="modal" data-bs-target="#editModal{{ $item->hash_id }}">
                    <i class="ti tabler-edit icon-14px me-1"></i> Edit
                  </button>
                  <form action="{{ route('crm.tax-fees.toggle', $item->hash_id) }}" method="POST">
                    @csrf
                    @method('PATCH')
                    @if($item->enabled)
                      <button type="submit" class="btn btn-sm btn-warning">
                        <i class="ti tabler-toggle-right icon-14px me-1"></i> Deactivate
                      </button>
                    @else
                      <button type="submit" class="btn btn-sm btn-success">
                        <i class="ti tabler-toggle-left icon-14px me-1"></i> Activate
                      </button>
                    @endif
                  </form>
                </div>
              </td>
            </tr>

            <!-- Edit Modal -->
            <div class="modal fade" id="editModal{{ $item->hash_id }}" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Edit Tax / Fee</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <form action="{{ route('crm.tax-fees.update', $item->hash_id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                      <div class="mb-4">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name"
                          maxlength="100" value="{{ $item->name }}" required />
                      </div>
                      <div class="mb-4">
                        <label class="form-label">Percent (%) <span class="text-danger">*</span></label>
                        <div class="input-group">
                          <input type="number" class="form-control" name="percent"
                            min="0" max="100" step="0.01"
                            value="{{ $item->percent }}" required />
                          <span class="input-group-text">%</span>
                        </div>
                        <small class="text-muted">e.g. 3 for 3%</small>
                      </div>
                      <div class="mb-4">
                        <label class="form-label">Description</label>
                        <input type="text" class="form-control" name="description"
                          maxlength="255" value="{{ $item->description }}" placeholder="Optional description" />
                      </div>
                      <div class="mb-2">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" name="enabled" value="1"
                            id="enabled_{{ $item->hash_id }}"
                            {{ $item->enabled ? 'checked' : '' }}>
                          <label class="form-check-label" for="enabled_{{ $item->hash_id }}">Active</label>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                      <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>

          @empty
            <tr>
              <td colspan="6" class="text-center py-5">
                <p class="text-muted mb-2">No taxes or fees defined yet</p>
                <button type="button" class="btn btn-primary btn-sm"
                  data-bs-toggle="modal" data-bs-target="#createModal">
                  Add First Tax / Fee
                </button>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Create Modal -->
<div class="modal fade" id="createModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">New Tax / Fee</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="{{ route('crm.tax-fees.store') }}" method="POST">
        @csrf
        <div class="modal-body">
          <div class="mb-4">
            <label class="form-label">Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control @error('name') is-invalid @enderror"
              name="name" maxlength="100" value="{{ old('name') }}"
              placeholder="e.g. Booking Fee, Sales Tax, Car Rental Fee" required />
            @error('name')
              <span class="invalid-feedback">{{ $message }}</span>
            @enderror
          </div>
          <div class="mb-4">
            <label class="form-label">Percent (%) <span class="text-danger">*</span></label>
            <div class="input-group">
              <input type="number" class="form-control @error('percent') is-invalid @enderror"
                name="percent" min="0" max="100" step="0.01"
                value="{{ old('percent') }}" placeholder="e.g. 3" required />
              <span class="input-group-text">%</span>
            </div>
            @error('percent')
              <span class="invalid-feedback d-block">{{ $message }}</span>
            @enderror
            <small class="text-muted">e.g. enter 3 for 3%</small>
          </div>
          <div class="mb-4">
            <label class="form-label">Description</label>
            <input type="text" class="form-control @error('description') is-invalid @enderror"
              name="description" maxlength="255" value="{{ old('description') }}"
              placeholder="Optional description" />
            @error('description')
              <span class="invalid-feedback">{{ $message }}</span>
            @enderror
          </div>
          <div class="mb-2">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="enabled" value="1"
                id="create_enabled" {{ old('enabled', '1') ? 'checked' : '' }}>
              <label class="form-check-label" for="create_enabled">Active</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('page-script')
@if($errors->any())
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var modal = new bootstrap.Modal(document.getElementById('createModal'));
    modal.show();
  });
</script>
@endif
@endsection