@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">Edit</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> --}}
                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Edit Data</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content" style="overflow: auto;">
                            <form class="form-horizontal" form method="POST" action="{{ url('/lakuhoki/master/editdata/') }}" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <div class="form-group">
                                    <label for="title" class="col-xs-6 col-sm-2 control-label">Title</label>
                                    <div class="col-xs-12 col-sm-2">
                                        <input type="hidden" class="form-control" name="id" value="{{ $edit->id }}">
                                        <input type="text" class="form-control" name="title" value="{{ $edit->title }}" disabled>
                                    </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" value="{{ $edit->description }}" disabled>
                                    </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="{{ $edit->probability }}">
                                    </div>
                                </div> --}}
                                <div class="form-group">
                                    <label for="reward_type" class="col-xs-12 col-sm-2 control-label">Type</label>
                                    <div class="col-xs-12 col-sm-1">
                                        <select class="js-example-basic-multiple js-states form-control" id="dropdown" name="reward_type" onchange="disableBonusSaldo()" aria-label="Default select example" disabled>
                                            @foreach ($lakuhoki_lookup as $data)
                                                <option value="{{ $data->value }}" {{ $data->value == $edit->reward_type ? 'selected' : '' }}>{{ $data->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="image" class="col-xs-12 col-sm-2 control-label">Image</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <td class="text-center"><img width="100px" src="{{ env("ALIYUN_OSS_ENDPOINT") }}/lakuhoki/prize/{{ $data->image }}?x-oss-process=image/resize,w_100,limit_0"></td>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="image" class="col-xs-12 col-sm-2 control-label">Edit Image</label>
                                    <div class="col-xs-7 col-sm-2">
                                        <input type="file" class="form-control" name="image" id="image" accept="image/png" onchange="checkFile(this)" value="{{ $edit->image }}">
                                        <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 for="image" class="col-xs-12 col-sm-2 control-label">Image Thumbnail</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <td class="text-center"><img width="100px" src="{{ env("ALIYUN_OSS_ENDPOINT") }}/lakuhoki/prize/{{ $data->image_thumbnail }}?x-oss-process=image/resize,w_100,limit_0"></td>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Edit 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 for="image" class="col-xs-12 col-sm-2 control-label">Image Reward</label>
                                    <div class="col-xs-12 col-sm-5">
                                        <td class="text-center"><img width="100px" src="{{ env("ALIYUN_OSS_ENDPOINT") }}/lakuhoki/prize/{{ $data->image_reward }}?x-oss-process=image/resize,w_100,limit_0"></td>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="image_reward" class="col-xs-12 col-sm-2 control-label">Edit 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="checkFileSize(this)" value="{{ $edit->image_reward }}">
                                        <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" 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', $edit->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" {{ $edit->isdefault == 1 ? 'checked' : '' }}> Yes
                                        </label>
                                        <label class="radio-label">
                                            <input type="radio" name="isdefault" value="0" style="margin-left: 20px" {{ $edit->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" {{ $edit->is_exclusive == 1 ? 'checked' : '' }}> Yes
                                        </label>
                                        <label class="radio-label">
                                            <input type="radio" name="is_exclusive" value="0" style="margin-left: 20px" {{ $edit->is_exclusive == 0 ? 'checked' : '' }}> No
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                        <div class="text-center loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fa fa-floppy-o" aria-hidden="true"></i> Save
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script>
    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 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 checkFileSize(input) {
          if (input.files && input.files[0]) {
            const fileSize = input.files[0].size;
            if (fileSize > 300 * 1024) {
              alert("File size must be less than 300kb");
              input.value = "";
            }
          }
        }
</script>