@extends('admin.layout.index')
@section('title', 'Yeni Kampanya Ekle')
@section('content')
    <section class="content-body">
        <form action="" class="form-container" enctype="multipart/form-data" method="POST">
            @csrf
            <h3 class="text-black text-xl font-semibold mt-5">Temel Bilgiler</h3>
            <div class="form-item">
                <label for="name">Kampanya Adı</label>
                <input type="text" id="name" name="name">
            </div>
            <div class="form-item">
                <label>Kampanya Türü</label>
                <label class="!flex !gap-2 !items-center">
                    <input type="radio" id="type" name="type" value="percentage" checked>
                    <span>Yüzdelik İndirim</span>
                </label>
                <label class="!flex !gap-2 !items-center">
                    <input type="radio" id="type" name="type" value="fix">
                    <span>Sabit Fiyat</span>
                </label>
            </div>

            <h3 class="text-black text-xl font-semibold mt-5" id="values_title">Değerler</h3>
            <div class="form-item" id="values">
                <label for="sale_fee">Kampanya İndirim Oranı (%)</label>
                <input type="text" id="sale_fee" name="sale_fee">
            </div>

            <h3 class="text-black text-xl font-semibold mt-5">Uygulama Kapsamı</h3>
            <div class="form-item">
                <label class="!flex !gap-2 !items-center">
                    <input type="checkbox" id="valid_all_product" name="valid_all_product" value="1">
                    <span> Tüm Ürünlerde Geçerli </span>
                </label>
            </div>
            <div class="form-item" id="valid_all_product_elements">
                <label for="valid_brands">Geçerli Markalar</label>
                <select name="valid_brands[]" id="valid_brands" data-select multiple>
                    @foreach($brands as $brand)
                        <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-item" id="valid_all_product_elements">
                <label for="valid_categories">Geçerli Kategoriler</label>
                <select name="valid_categories[]" id="valid_categories" data-select multiple>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-item" id="valid_all_product_elements">
                <label for="valid_products">Geçerli Ürünler</label>
                <select name="valid_products[]" id="valid_products" data-select multiple>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                    @endforeach
                </select>
            </div>
            <h3 class="text-black text-xl font-semibold mt-5">Gerelilikler</h3>
            <div class="form-item">
                <label for="validity_fee">Geçerlilik Tutarı ({{ CURRENCY }})</label>
                <input type="text" id="validity_fee" name="validity_fee">
            </div>
            <div class="flex items-center justify-end gap-2">
                <button class="border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md" type="reset"> Sıfırla</button>
                <button class="border border-green-300 bg-green-50 hover:bg-green-200 px-4 py-2 rounded-md"> Kaydet</button>
            </div>
        </form>
    </section>
@endsection
@section('scripts')
<script>
    new Cleave(document.querySelector('#validity_fee'), {
        numeral: !0,
        numeralThousandsGroupStyle: "thousand",
        delimiter: '.',
        numeralDecimalMark: ','
    })
    let valid_all_product = document.querySelector('input[type="checkbox"]#valid_all_product')
    let valid_all_product_elements = document.querySelectorAll('#valid_all_product_elements');
    let type_inputs = document.querySelectorAll('input[type="radio"]#type');
    let values = document.querySelector('.form-item#values');
    let values_title = document.querySelector('h3#values_title');

    valid_all_product.addEventListener('change', event => {
        valid_all_product_elements.forEach(element => {
            if(event.target.checked){
                element.classList.add('hidden')
            } else {
                element.classList.remove('hidden')
            }
        })
    })

    type_inputs.forEach(element => {
        element.addEventListener('change', event => {
            if(event.target.checked){
                switch (event.target.value) {
                    case 'percentage':
                        values.classList.remove('hidden')
                        values_title.classList.remove('hidden');
                        values.querySelector('label').innerText = `Kampanya İndirim Oranı (%)`;
                    break
                    case 'fix':
                        values.classList.remove('hidden')
                        values_title.classList.remove('hidden');
                        values.querySelector('label').innerText = `Kampanya İndirim Oranı ({{ CURRENCY }})`;
                    break
                }
            }
        });
    })
</script>
@endsection