@extends('frontend.layouts.master')

<!-- Include Sweet Alert CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.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;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-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 Diskon Item
                        <a href="{{ url('itemMaster')}}" class="btn btn-danger float-end">BACK</a>
                    </h4>
                </div>
                <div class="card-body">
                    <form action="{{ url('editDataItem/'.$item->id )}}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label for="accountnum">Accountnum</label>
                                <input id="accountnum" name="accountnum" value="{{ $item->accountnum }}" class="form-control" readonly>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="name">Nama Toko</label>
                                <input id="name" name="name" value="{{ $item->name }}" class="form-control" readonly>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="group">Group</label>
                                <input id="group" name="group" class="form-control" value="{{ $item->group}}" >
                            </div>
                            <div class="form-group col-md-3">
                                <label for="item_id">Item</label>
                                <input class="form-control" type="text" name="item_id" list="item" value="{{$item->item_id}}">
                                <datalist id="item" name="item_id">
                                  @foreach ($itemss as $k)
                                        <option value="{{ $k->item_id }}"> {{ $k->item_id }}</option>
                                    @endforeach
                                </datalist>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="disc_max">Disc Max</label>
                                <input id="disc_max" name="disc_max" class="form-control" value="{{ $item->disc_max }}">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="periode_start">Periode Start</label>
                                <input type="date" id="periode_start" name="periode_start" class="form-control" value="{{ $item->periode_start }}">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="periode_end">Periode End</label>
                                <input type="date" id="periode_end" name="periode_end" class="form-control" value="{{ $item->periode_end }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-lg">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var startDateInput = document.getElementById('periode_start');
        var endDateInput = document.getElementById('periode_end');

        startDateInput.addEventListener('change', function() {
            var startDate = new Date(startDateInput.value);
            var endDate = new Date(endDateInput.value);

            if (endDate < startDate) {
                endDateInput.value = startDateInput.value;
            }
        });

        endDateInput.addEventListener('change', function() {
            var startDate = new Date(startDateInput.value);
            var endDate = new Date(endDateInput.value);

            if (endDate < startDate) {
                swal({
                    title: "Error!",
                    text: "Periode End tidak boleh sebelum Periode Start",
                    icon: "error",
                    button: "OK",
                }).then(function() {
                    endDateInput.value = startDateInput.value;
                });
            }
        });
    });
</script>