@extends('admin.layout.index')
@section('title', 'Kupon Düzenle')
@section('content')
    <section class="content-body">
        <form action="" class="form-container" enctype="multipart/form-data" method="POST">
            @csrf
            <div class="form-item">
                <label for="name">Kupon Adı</label>
                <input type="text" id="name" name="name" value="{{ $data->name }}">
            </div>
            <div class="form-item">
                <label for="code">Kupon Kodu</label>
                <input type="text" id="code" name="code" value="{{ $data->code }}">
            </div>
            <div class="form-item">
                <label for="min">Minimum Geçerlilik Tutarı ({{ CURRENCY }})</label>
                <input type="text" id="min" name="min" value="{{ $data->min }}">
            </div>
            <div class="form-item">
                <label for="type"> Kupon Türü </label>
                <select name="type" id="type">
                    <option value="0" {{ ($data->type == "0" ? 'selected' : '') }}> Yüzde Bazlı </option>
                    <option value="1" {{ ($data->type == "1" ? 'selected' : '') }}> Birim Bazlı ({{ CURRENCY }}) </option>
                </select>
            </div>
            <div class="form-item">
                <label for="sale"> Kupon İndirim Oranı ({{ ($data->type == 0 ? '%' : CURRENCY ) }}) </label>
                <input type="text" id="sale" name="sale" value="{{ $data->sale }}">
            </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>
    <script>
        let type = document.querySelector('select#type');
        let sale_text = document.querySelector('label[for="sale"]');
        type.addEventListener('change', event => {
            if(Number(event.target.value) === 1){
                sale_text.innerHTML = 'Kupon İndirim Oranı ({{ CURRENCY }})';
            }
            if(Number(event.target.value) === 0){
                sale_text.innerHTML = 'Kupon İndirim Oranı (%)';
            }
        })
    </script>
@endsection