@extends('layouts.customer')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12"><h1>Tip settings</h1></div>
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <form action="{{-- route('staff.tip.settings.update', ['account' => $account]) --}}" method="POST">
                            @csrf
                            @method('PUT')

                            @php 
                                $field = json_decode($settings->setting_value); 

                                // echo '<pre>'; print_r( $field ); echo '</pre>';
                            @endphp

                            <div class="row mb-2">
                                @if ($message = Session::get('success'))
                                    <div class="w-100 alert alert-success">
                                        <p>{{ $message }}</p>
                                    </div>
                                @endif
                            </div>

                            <h2>What type of tipping method you want?</h2>
                            <div class="mb-4">
                                <div class="custom-control custom-radio">
                                    <input type="radio" name="setting_value[pool_type]" id="tippingPool" class="custom-control-input" value="0" @if( $field->pool_type == 0 ) checked @endif required />
                                    <label class="custom-control-label" for="tippingPool"> Tipping Pool</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" name="setting_value[pool_type]" id="individualPool" class="custom-control-input" value="1" @if( $field->pool_type == 1 ) checked @endif required />
                                    <label class="custom-control-label" for="individualPool"> Individual Tipping</label>
                                </div>
                            </div>

                            <h2>Percentage of tips distributed to employees.</h2>
                            <div class="mb-4">
                                <div class="form-group">
                                    <input type="text" name="setting_value[percentage]" class="form-control" @if( $field->percentage ) value="{{ $field->percentage ?? '' }}" @endif placeholder="Enter the percentage" required />
                                </div>
                            </div>

                            <div class="mb-4 distributed_by" @if( $field->pool_type == 0 ) style="display:block;" @else style="display:none;" @endif>
                                <div class="custom-control custom-radio">
                                    <input type="radio" name="setting_value[distributed_by]" id="distributed_by1" class="custom-control-input distributed_by-input" value="0" @if( isset($field->distributed_by) && $field->distributed_by == 0 ) checked @endif @if( $field->pool_type == 0 ) required @endif>
                                    <label class="custom-control-label" for="distributed_by1"> Evenly by Employees</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" name="setting_value[distributed_by]" id="distributed_by2" class="custom-control-input distributed_by-input" value="1" @if( isset($field->distributed_by) && $field->distributed_by == 1 ) checked @endif @if( $field->pool_type == 0 ) required @endif>
                                    <label class="custom-control-label" for="distributed_by2"> Evenly by hours worked</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <button class="btn btn-success" style="float: right;" type="submit">save</button>
                                </div>
                            </div>
                            <input type="hidden" name="setting_key" value="{{ $settings->setting_key }}" />
                            <input type="hidden" name="setting_prop" value="{{ $settings->setting_prop }}" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    (function($) {
        $(document).ready(function() {
            $('input[name="setting_value[pool_type]"]').on('change', function() {
                if( this.value == 0 ) {
                    $('.distributed_by').show();
                    $('.distributed_by-input')
                        .attr('name', 'setting_value[distributed_by]')
                        .attr('required', 'required');
                } else {
                    $('.distributed_by').hide();
                    $('.distributed_by-input')
                        .removeAttr('name')
                        .removeAttr('required');
                }
            });
        });
    })(jQuery);
</script>
@endsection