@extends('frontend.layouts.master')

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
  select {
    /* styling */
    background-color: white;
    border: thin solid gray;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
    height: 50%;

    /* reset */
    margin: 0;
    box-sizing: border-box;
    appearance: none;
  }

  select.round {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      radial-gradient(#ddd 70%, transparent 72%);
    background-position:
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
      calc(100% - .5em) .5em;
    background-size:
      5px 5px,
      5px 5px,
      1.5em 1.5em;
    background-repeat: no-repeat;
  }

  select.round:focus {
    background-image:
      linear-gradient(45deg, white 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, white 50%),
      radial-gradient(gray 70%, transparent 72%);
    background-position:
      calc(100% - 15px) 1em,
      calc(100% - 20px) 1em,
      calc(100% - .5em) .5em;
    background-size:
      5px 5px,
      5px 5px,
      1.5em 1.5em;
    background-repeat: no-repeat;
    border-color: green;
    outline: 0;
  }
</style>

@section('content')

<div class="container">
    <div class="row">
        <div class="col-md-12">
            @if(session('status'))
                <h6 class="alert alert-success">{{ session('status')}}</h6>
            @endif

            <div class="card">
                <div class="card-header">
                    <h4>Update Toko
                        <a href="{{ url('toko')}}" class="btn btn-danger float-end">BACK</a>
                    </h4>
                </div>
                <div class="card-body">
                    <form action="{{ url('editDataToko/'.$toko->id )}}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="name">Name</label>
                                <input id="name" name="name" value="{{ $toko->name }}" class="form-control" style="height: 50%" readonly>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="accountnum">Accountnum</label>
                                <input id="accountnum" name="accountnum" value="{{ $toko->accountnum }}" class="form-control" style="height: 50%" readonly>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="nik">NIK</label>
                                <select class="form-control" id="nik" name="nik" style="height: 55%" onchange="isChangeSales(this.value)">
                                    <option value=''>--Pilih NIK--</option>
                                    @foreach ($tokos as $k)
                                        <option value="{{ $k->nik }}">{{ $k->nik }} - {{ $k->salesresponbility }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="salesresponbility">Salesresponbility</label>
                                <input class="form-control" id="salesresponbility" name="salesresponbility" value="{{ $toko->salesresponbility }}" style="height: 55%">
                            </div>
                            <!--  <div class="form-group col-md-4">-->
                            <!--    <label for="payment_term_code">Term of Payment</label>-->
                            <!--    <input class="form-control" id="payment_term_code" name="payment_term_code" style="height: 55%">-->
                            <!--</div>-->
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-lg">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

<script>
    var isAjax = null;
    let arr_sales = [];
    jQuery(document).ready(function($){
        isAjax = $;
    });

    @foreach($tokos as $a)
        arr_sales.push({'salesresponbility': "{{ $a->salesresponbility }}", 'nik': "{{ $a->nik }}"});
    @endforeach

    function isChangeSales(value) {
        let search = arr_sales.filter((f) => f['nik'] == value);
        let salesResponsibility = search.length > 0 ? search[0]['salesresponbility'] : '';
        isAjax("#salesresponbility").val(salesResponsibility);
    }
</script>