@extends('layouts.layout')

@section('body_class', 'nav-md')

@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <h3>Laku Hoki</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <style>
                    h1 {
                        color: red;
                    }
                    .radio-wrapper {
                        display: inline-block;
                        margin-right: 10px;
                    }
                </style>

                <div class="row">
                    <div class="col-xs-12">
                        <ol class="breadcrumb">
                            <li><a href="{{ route('dashboard') }}">Home</a></li>
                            <li><a href="{{ route('master/reward') }}">Master Reward</a></li>
                            <li class="active">New</li>
                        </ol>
                    </div>
                    <div class="col-xs-12">
                        @if($count_probability != 100 )
                        <div class="alert alert-danger">
                           Probabilty tidak tepat 100% ({{ $count_probability . "%" }})
                        </div>
                        @endif
                    </div>
                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Add Data</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content" style="overflow: auto;">
                                <form class="form-horizontal" method="POST" action="/lakuhoki/master/create/save" enctype="multipart/form-data"> 
                                    {{ csrf_field() }}
                                    <div class="form-group">
                                        <label for="title" class="col-xs-12 col-sm-2 control-label">Title</label>
                                        <div class="col-xs-12 col-sm-2">
                                            <input type="text" name="title" class="form-control" value="{{ old('title') }}">
                                            @if($errors->has('title'))
                                                <h1><div style="font-size: 12px;">{{ $errors->first('title') }}</div></h1>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="description" class="col-xs-12 col-sm-2 control-label">Description</label>
                                        <div class="col-xs-12 col-sm-2">
                                            <input type="text" class="form-control" name="description"  >
                                            @if($errors->has('description'))
                                                <h1><div style="font-size: 12px;">{{ $errors->first('description') }}</div></h1>
                                            @endif
                                        </div>
                                    </div>
                                    {{-- <div class="form-group">
                                        <label for="probability" class="col-xs-12 col-sm-2 control-label">Probability</label>
                                        <div class="col-xs-6 col-sm-1">
                                            <input type="text" class="form-control" name="probability" value="{{ old('probability') }}">
                                            @if($errors->has('probability'))
                                                <h1><div style="font-size: 12px;">{{ $errors->first('probability') }}</div></h1>
                                            @endif
                                        </div>
                                    </div> --}}
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Image</label>
                                        <div class="col-xs-7 col-sm-2">
                                            <input type="file" class="form-control" name="image" id="image" accept="image/png" onchange="checkImage(this)">
                                            <h1><div style="font-size: 12px;">Harap pastikan file yang diunggah memiliki format PNG, Size Maks 100Kb</div></h1>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Image Thumbnail</label>
                                        <div class="col-xs-7 col-sm-2"> 
                                            <input type="file" class="form-control" name="image_thumbnail" id="image_thumbnail" accept="image/png" onchange="checkThumbnail(this)">  
                                            <h1><div style="font-size: 12px;">Harap pastikan file yang diunggah memiliki format PNG, Size Maks 100kb</div></h1>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Image Reward</label>
                                        <div class="col-xs-7 col-sm-2"> 
                                            <input type="file" class="form-control" name="image_reward" id="image_reward" accept="image/gif" onchange="checkReward(this)">  
                                            <h1><div style="font-size: 12px;">Harap pastikan file yang diunggah memiliki format GIF, Size Maks 300Kb</div></h1>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="reward_type" class="col-xs-12 col-sm-2 control-label">Reward Type</label>
                                        <div class="col-xs-5 col-sm-1">
                                            <select class="js-example-basic-multiple js-states form-control" id="dropdown" name="reward_type" onchange="handleRewardTypeChange()" aria-label="Default select example">
                                                <option value="">Reward Type</option>
                                                @foreach ($lakuhoki_lookup as $data)
                                                    <option value="{{ $data->value }}">{{ $data->name }}</option>
                                                    {{-- <option value="8" selected>contoh</option> --}}
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" name="isdefault">
                                        <label for="bonus_saldo" class="col-xs-12 col-sm-2 control-label">Nominal (Rp)</label>
                                        <div class="col-xs-6 col-sm-1">
                                            <input type="Number" class="form-control"  id="bonus_saldo" name="bonus_saldo" value="{{ old('bonus_saldo') }}">
                                            @if($errors->has('bonus_saldo'))
                                                <h1><div style="font-size: 12px;">{{ $errors->first('bonus_saldo') }}</div></h1>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group" name="isdefault">
                                        <label for="isdefault"  class="col-xs-12 col-sm-2 control-label">Is Default?</label>
                                        <div class="radio-box">
                                            <label class="radio-label" style="margin-top: 7px">
                                                <input type="radio" name="isdefault" value="1" style="margin-left: 10px" {{ $data->isdefault == 1 ? 'checked' : '' }}> Yes
                                            </label>
                                            <label class="radio-label">
                                                <input type="radio" name="isdefault" value="0" style="margin-left: 20px" {{ $data->isdefault == 0 ? 'checked' : '' }}> No
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" name="is_exclusive">
                                        <label for="is_exclusive" class="col-xs-12 col-sm-2 control-label">Is Exclusive?</label>
                                        <div class="radio-box">
                                            <label class="radio-label" style="margin-top: 7px">
                                                <input type="radio" name="is_exclusive" value="1" style="margin-left: 10px" {{ $data->is_exclusive == 1 ? 'checked' : '' }}> Yes
                                            </label>
                                            <label class="radio-label">
                                                <input type="radio" name="is_exclusive" value="0" style="margin-left: 20px" {{ $data->is_exclusive == 0 ? 'checked' : '' }}> No
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-xs-12">
                                            <div class="text-center loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                            <button type="submit" class="btn btn-primary">Proceed</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script>

function handleRewardTypeChange() {
        var rewardType = document.getElementById("dropdown").value;
        var submitButton = document.getElementById("submitButton");

        if (rewardType === "") {
            submitButton.disabled = true;
        } else {
            submitButton.disabled = false;
        }
    }
    
    window.addEventListener("DOMContentLoaded", function () {
    handleRewardTypeChange(); 
});

function handleRewardTypeChange() {
    var dropdown = document.getElementById("dropdown");
    var bonus_saldo = document.getElementById("bonus_saldo");
    var isdefaultRadios = document.getElementsByName("isdefault");
    var isexclusiveRadios = document.getElementsByName("is_exclusive");

    if (dropdown.value === "") { 
        bonus_saldo.disabled = true;
        hideElements(isdefaultRadios);
        hideElements(isexclusiveRadios);
    } 

    else if (dropdown.value === "1") { // Cashback
        bonus_saldo.value = ''; 
        bonus_saldo.disabled = true;
        hideElements(isdefaultRadios);
        showElements(isexclusiveRadios);
    } 
    
    else if (dropdown.value === "2") { // Item
        bonus_saldo.disabled = false;
        showElements(isdefaultRadios);
        hideElements(isexclusiveRadios);
    } else {
        bonus_saldo.value = '';
        bonus_saldo.disabled = true;
        showElements(isdefaultRadios);
        showElements(isexclusiveRadios);
    } 
}





function hideElements(elements) {
    for (var i = 0; i < elements.length; i++) {
        elements[i].classList.add("hidden");
    }
}

function showElements(elements) {
    for (var i = 0; i < elements.length; i++) {
        elements[i].classList.remove("hidden");
    }
}

</script>
<script>
    function checkImage(input) {
      if (input.files && input.files[0]) {
        const fileSize = input.files[0].size;
        if (fileSize > 100 * 1024) {
          alert("File size must be less than 100kb");
          input.value = "";
        }
      }
    }
    </script>
<script>
        function checkThumbnail(input) {
          if (input.files && input.files[0]) {
            const fileSize = input.files[0].size;
            if (fileSize > 100 * 1024) {
              alert("File size must be less than 100kb");
              input.value = "";
            }
          }
        }
</script>
<script>
    function checkReward(input) {
      if (input.files && input.files[0]) {
        const fileSize = input.files[0].size;
        if (fileSize > 300 * 1024) {
          alert("File size must be less than 100kb");
          input.value = "";
        }
      }
    }
</script>