@extends('admin.layout.index')
@section('title', 'Kampanya Düzenle')
@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" value="{{ $data->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" {{ $data->type == 'percentage' ? 'checked' : '' }}>
                    <span>Yüzdelik İndirim</span>
                </label>
                <label class="!flex !gap-2 !items-center">
                    <input type="radio" id="type" name="type" value="fix" {{ $data->type == 'fix' ? 'checked' : '' }}>
                    <span>Sabit Fiyat</span>
                </label>
            </div>

            <h3 class="text-black text-xl font-semibold mt-5{{ $data->type == 'cargo' ? ' hidden' : '' }}" id="values_title">Değerler</h3>
            <div class="form-item{{ $data->type == 'cargo' ? ' hidden' : '' }}" id="values">
                <label for="sale_fee">Kampanya İndirim Oranı ({{ $data->type == 'fix' ? CURRENCY : '%' }})</label>
                <input type="text" id="sale_fee" name="sale_fee" value="{{ $data->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" {{ $data->valid_all_product == '1' ? 'checked' : '' }}>
                    <span> Tüm Ürünlerde Geçerli </span>
                </label>
            </div>
            <div class="form-item {{ $data->valid_all_product == '1' ? 'hidden' : '' }}" 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 }}"  {{ $data->valid_brands == '' ? '' : (in_array($brand->id, json_decode($data->valid_brands, false)) ? 'selected' : '') }}>{{ $brand->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-item {{ $data->valid_all_product == '1' ? 'hidden' : '' }}" 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 }}" {{ $data->valid_categories == '' ? '' : (in_array($category->id, json_decode($data->valid_categories, false)) ? 'selected' : '') }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-item {{ $data->valid_all_product == '1' ? 'hidden' : '' }}" 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 }}" {{ $data->valid_products == '' ? '' : (in_array($product->id, json_decode($data->valid_products, false)) ? 'selected' : '') }}>{{ $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" value="{{ $data->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