@extends('layouts.user_type.auth')

@section('content')
<div class="row">
  <div class="col-md-8 mx-auto">
    <div class="card">
      <div class="card-header pb-0">
        <h6>Tambah Target</h6>
      </div>
      <div class="card-body">
        <form method="POST" action="{{ route('targets.store') }}">
          @csrf
          <div class="mb-3">
            <label class="form-label">Nama Target</label>
            <input type="text" class="form-control" name="name" value="{{ old('name') }}" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Minggu Target</label>
            <select class="form-control js-week" name="target_week" required>
                <option value="">Pilih Minggu Target</option>
                @foreach(range(1, 12) as $month)
                    @foreach(range(1, 5) as $week)
                        <option value="W{{ $week }}M{{ $month }}" {{ old('target_week') == "W{$week}M{$month}" ? 'selected' : '' }}>W{{ $week }}M{{ $month }} (Week {{ $week }} Month {{ $month }})</option>
                    @endforeach
                @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Reminder Freq (Jam)</label>
            <input type="text" class="form-control" name="reminder_frequency" value="{{ old('reminder_frequency') }}" placeholder="Contoh: 24" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Penerima Email</label>
            <select class="form-control js-emails" name="recipient_emails[]" multiple data-placeholder="Tambah email...">
              @foreach(old('recipient_emails', []) as $email)
                <option value="{{ $email }}" selected>{{ $email }}</option>
              @endforeach
            </select>
            <small class="text-xs text-secondary">Masukkan satu atau lebih email; tekan Enter untuk menambahkan.</small>
          </div>
          <div class="d-flex justify-content-end">
            <a href="{{ route('targets.index') }}" class="btn btn-light me-2">Batal</a>
            <button type="submit" class="btn btn-primary">Simpan</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@push('dashboard')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container {
        width: 100% !important;
    }
    .select2-selection {
        border: 1px solid #d2d6da !important;
        border-radius: 0.5rem !important;
        padding: 0.25rem !important;
        height: auto !important;
        min-height: 40px;
    }
    .select2-selection__arrow {
        height: 38px !important;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
  $(function() {
    $('.js-week').select2({
        placeholder: "Pilih Minggu Target",
        allowClear: true
    });

    $('.js-emails').select2({
      tags: true,
      tokenSeparators: [',', ';', ' '],
      placeholder: $('.js-emails').data('placeholder') || 'Tambah email...',
      width: '100'
    }).on('select2:select', function (e) {
      var email = e.params.data.id || '';
      var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!re.test(email)) {
        alert('Format email tidak valid: ' + email);
        var $sel = $(this);
        setTimeout(function(){ 
          var opt = $sel.find('option[value="'+email+'"]');
          opt.prop('selected', false).remove();
          $sel.trigger('change');
        }, 0);
      }
    });
  });
</script>
@endpush
@endsection