@extends('crm.master')

@section('title', 'Add Custom Rate')

@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">Add Custom Rate</h4>
          <p class="text-muted mb-0">Create a new duration-based pricing rule</p>
        </div>
        <a href="{{ route('crm.custom-rates.index') }}" class="btn btn-label-secondary">
          <i class="icon-base ti tabler-arrow-left me-2 icon-14px"></i>
          Back
        </a>
      </div>
    </div>
  </div>

  <!-- Alerts -->
  @include('crm.components.alerts')

  <form method="POST" action="{{ route('crm.custom-rates.store') }}">
    @csrf

    <div class="row g-4">

      <!-- Left Column -->
      <div class="col-lg-8">

        <!-- Basic Info -->
        <div class="card mb-4">
          <div class="card-header"><h6 class="mb-0">Rate Details</h6></div>
          <div class="card-body">

            <div class="mb-3">
              <label class="form-label">Rate Name <span class="text-danger">*</span></label>
              <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                     value="{{ old('name') }}" placeholder="e.g. Weekly Discount" required>
              @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
              <label class="form-label">Rate Type <span class="text-danger">*</span></label>
              <input type="hidden" name="rate_type" value="per_booking">
              <div class="form-control bg-light">Per Booking</div>
              @error('rate_type')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">Start Date <span class="text-danger">*</span></label>
                <input type="date" name="start_date" class="form-control @error('start_date') is-invalid @enderror"
                       value="{{ old('start_date') }}" required>
                @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-md-6">
                <label class="form-label">End Date</label>
                <div id="endDateWrap">
                  <input type="date" name="end_date" id="endDateInput"
                         class="form-control @error('end_date') is-invalid @enderror"
                         value="{{ old('end_date') }}"
                         style="{{ old('end_date') ? '' : 'display:none' }}">
                  @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  <button type="button" id="addEndDateBtn" class="btn btn-sm btn-label-secondary"
                          style="{{ old('end_date') ? 'display:none' : '' }}"
                          onclick="showEndDate()">
                    <i class="ti tabler-plus me-1"></i> Add End Date
                  </button>
                </div>
              </div>
            </div>

          </div>
        </div>

        <!-- Duration Tiers -->
        <div class="card mb-4">
          <div class="card-header">
            <h6 class="mb-0">Duration Tiers</h6>
          </div>
          <div class="card-body">

            <p class="text-muted small mb-3">
              Define pricing adjustments based on booking duration (in hours).
              Leave <strong>Upper</strong> empty on the last tier to mean "Max" (no upper limit).
            </p>

            <div id="tiersContainer">
              @php $oldTiers = old('tiers', [['lower'=>1,'upper'=>'','adjustment_type'=>'fixed','amount'=>0]]); @endphp
              @foreach($oldTiers as $i => $tier)
                <div class="tier-row border rounded p-3 mb-2 bg-light" data-index="{{ $i }}">
                  <div class="row g-2 align-items-center">
                    <div class="col-md-2">
                      <label class="form-label small mb-1">Lower (hours)</label>
                      <input type="number" name="tiers[{{ $i }}][lower]" min="1"
                             class="form-control form-control-sm @error('tiers.'.$i.'.lower') is-invalid @enderror"
                             value="{{ $tier['lower'] ?? 1 }}" required>
                    </div>
                    <div class="col-md-2">
                      <label class="form-label small mb-1">Upper (hours)</label>
                      <input type="number" name="tiers[{{ $i }}][upper]" min="1"
                             class="form-control form-control-sm"
                             value="{{ $tier['upper'] ?? '' }}"
                             placeholder="Max">
                    </div>
                    <input type="hidden" name="tiers[{{ $i }}][adjustment_type]" value="fixed">
                    <div class="col-md-3">
                      <label class="form-label small mb-1">Amount</label>
                      <input type="number" name="tiers[{{ $i }}][amount]" min="0" step="0.01"
                             class="form-control form-control-sm @error('tiers.'.$i.'.amount') is-invalid @enderror"
                             value="{{ $tier['amount'] ?? 0 }}" required>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                      <button type="button" class="btn btn-sm btn-icon btn-label-danger remove-tier-btn" onclick="removeTier(this)">
                        <i class="ti tabler-x"></i>
                      </button>
                    </div>
                  </div>
                </div>
              @endforeach
            </div>

            <button type="button" class="btn btn-sm btn-label-primary mt-2" onclick="addTier()">
              <i class="ti tabler-plus me-1"></i> Add Duration
            </button>

          </div>
        </div>

        <!-- Product Scope -->
        <div class="card mb-4">
          <div class="card-header"><h6 class="mb-0">Product Scope</h6></div>
          <div class="card-body">

            <div class="mb-3">
              <div class="form-check form-switch">
                <input type="hidden" name="apply_to_all_products" value="0">
                <input class="form-check-input" type="checkbox" name="apply_to_all_products" id="applyAll" value="1"
                       {{ old('apply_to_all_products') == '1' ? 'checked' : '' }} onchange="toggleProductList()">
                <label class="form-check-label" for="applyAll">Apply to All Products</label>
              </div>
            </div>

            <div id="productListWrap" style="{{ old('apply_to_all_products') == '1' ? 'display:none' : '' }}">
              @php $selectedIds = old('product_ids', []); @endphp
              <div class="border rounded p-3" style="max-height: 320px; overflow-y: auto;">
                @include('crm.components.product-selector')
              </div>
            </div>

          </div>
        </div>

      </div>

      <!-- Right Column -->
      <div class="col-lg-4">

        <div class="d-grid gap-2">
          <button type="submit" class="btn btn-primary">
            <i class="ti tabler-device-floppy me-2"></i> Save Custom Rate
          </button>
          <a href="{{ route('crm.custom-rates.index') }}" class="btn btn-label-secondary">Cancel</a>
        </div>

      </div>

    </div>

  </form>

</div>

<script>
var tierIndex = {{ count(old('tiers', [['lower'=>1,'upper'=>'','adjustment_type'=>'fixed','amount'=>0]])) }};

function addTier() {
    var i = tierIndex++;
    var html = `
      <div class="tier-row border rounded p-3 mb-2 bg-light" data-index="${i}">
        <div class="row g-2 align-items-center">
          <div class="col-md-2">
            <label class="form-label small mb-1">Lower (hours)</label>
            <input type="number" name="tiers[${i}][lower]" min="1" class="form-control form-control-sm" value="1" required>
          </div>
          <div class="col-md-2">
            <label class="form-label small mb-1">Upper (hours)</label>
            <input type="number" name="tiers[${i}][upper]" min="1" class="form-control form-control-sm" placeholder="Max">
          </div>
          <input type="hidden" name="tiers[${i}][adjustment_type]" value="fixed">
          <div class="col-md-3">
            <label class="form-label small mb-1">Amount</label>
            <input type="number" name="tiers[${i}][amount]" min="0" step="0.01" class="form-control form-control-sm" value="0" required>
          </div>
          <div class="col-md-1 d-flex align-items-end">
            <button type="button" class="btn btn-sm btn-icon btn-label-danger remove-tier-btn" onclick="removeTier(this)">
              <i class="ti tabler-x"></i>
            </button>
          </div>
        </div>
      </div>`;
    document.getElementById('tiersContainer').insertAdjacentHTML('beforeend', html);
}

function removeTier(btn) {
    var rows = document.querySelectorAll('#tiersContainer .tier-row');
    if (rows.length <= 1) return;
    btn.closest('.tier-row').remove();
}

function showEndDate() {
    document.getElementById('endDateInput').style.display = '';
    document.getElementById('addEndDateBtn').style.display = 'none';
    document.getElementById('endDateInput').focus();
}

function toggleProductList() {
    var checked = document.getElementById('applyAll').checked;
    document.getElementById('productListWrap').style.display = checked ? 'none' : '';
}
</script>
@endsection