@extends('layouts/base_view')
@section('title')
<li class="breadcrumb-item"><a href="{{ route('reward-operator-mappings.index') }}">Mapping Reward - Operator</a></li>
<li class="breadcrumb-item active">Tambah Mapping</li>
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Form Tambah Mapping</h3>
                    </div>
                    <form action="{{ route('reward-operator-mappings.store', 0) }}" method="POST">
                        @csrf
                        <div class="card-body">
                            <div class="form-group">
                                <label>Reward Item <span class="text-danger">*</span></label>
                                <select name="reward_item_id" class="form-control select2 @error('reward_item_id') is-invalid @enderror" required>
                                    <option value="">-- Pilih Reward Item --</option>
                                    @foreach($rewardItems as $item)
                                        <option value="{{ $item->id }}" {{ old('reward_item_id') == $item->id ? 'selected' : '' }}>
                                            {{ $item->name }} ({{ $item->item_code ?? 'No Code' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('reward_item_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Product Operator <span class="text-danger">*</span></label>
                                <select name="operator_product_id" class="form-control select2 @error('operator_product_id') is-invalid @enderror" required>
                                    <option value="">-- Pilih Product Operator --</option>
                                    @foreach($operatorProducts as $product)
                                        <option value="{{ $product->id }}" {{ old('operator_product_id') == $product->id ? 'selected' : '' }}>
                                            {{ $product->product_code }} - {{ $product->product_name }} - {{ $product->operator->operator_name ?? '' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('operator_product_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <div class="custom-control custom-checkbox">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_active">Aktif</label>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Simpan
                            </button>
                            <a href="{{ route('reward-operator-mappings.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Kembali
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(function() {
    $('.select2').select2({
        theme: 'bootstrap4',
        width: '100%'
    });
});
</script>
@endsection