@extends('crm.master')

@section('title', 'Create Closure')

@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">Create Product Closure</h4>
          <p class="text-muted mb-0">Block products for a specific date range</p>
        </div>
        <a href="{{ route('crm.product-closures.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.product-closures.store') }}">
    @csrf

    <div class="row g-4">

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

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

            <div class="mb-3">
              <label class="form-label">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. May Long Weekend" required>
              @error('name')<div class="invalid-feedback">{{ $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 <span class="text-danger">*</span></label>
                <input type="date" name="end_date" class="form-control @error('end_date') is-invalid @enderror"
                       value="{{ old('end_date') }}" required>
                @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
            </div>

          </div>
        </div>

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

            <label class="form-label">Applicable Booking Days <span class="text-danger">*</span></label>
            <div class="btn-group d-flex mb-3" role="group">
              @foreach(['everyday' => 'Everyday', 'weekdays' => 'Weekdays', 'weekends' => 'Weekends', 'custom' => 'Custom'] as $val => $label)
                <input type="radio" class="btn-check" name="schedule" id="sched_{{ $val }}" value="{{ $val }}"
                       {{ old('schedule', 'everyday') === $val ? 'checked' : '' }} onchange="toggleCustomDays()">
                <label class="btn btn-outline-primary" for="sched_{{ $val }}">{{ $label }}</label>
              @endforeach
            </div>

            <div id="customDaysWrap" style="{{ old('schedule') === 'custom' ? '' : 'display:none' }}">
              <label class="form-label">Select Days</label>
              @php $oldCustomDays = old('applicable_days', []); @endphp
              <div class="d-flex flex-wrap gap-2">
                @foreach(['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] as $day)
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" name="applicable_days[]"
                           id="cday_{{ $day }}" value="{{ $day }}"
                           {{ in_array($day, $oldCustomDays) ? 'checked' : '' }}>
                    <label class="form-check-label" for="cday_{{ $day }}">{{ $day }}</label>
                  </div>
                @endforeach
              </div>
              @error('applicable_days')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

          </div>
        </div>

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

            <p class="text-muted small mb-3">Select products to apply this closure to.</p>

            <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') ? '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') ? '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="card mb-4">
          <div class="card-header"><h6 class="mb-0">Settings</h6></div>
          <div class="card-body">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="enabled" id="enabled" value="1"
                     {{ old('enabled', '1') ? 'checked' : '' }}>
              <label class="form-check-label" for="enabled">Enabled</label>
            </div>
          </div>
        </div>

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

      </div>
    </div>

  </form>

</div>

<script>
function toggleCustomDays() {
    var val = document.querySelector('input[name="schedule"]:checked')?.value;
    document.getElementById('customDaysWrap').style.display = val === 'custom' ? '' : 'none';
}
function toggleProductList() {
    var checked = document.getElementById('applyAll').checked;
    document.getElementById('productListWrap').style.display = checked ? 'none' : '';
}
</script>
@endsection