@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>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.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;
        /* 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>Add Data Diskon Item
                        <a href="{{ url('itemMaster')}}" class="btn btn-danger float-end">BACK</a>
                    </h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('addDataItem') }}" method="post">
                        @csrf
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="accountnum">Accountnum Toko</label>
                                        <select class="form-control" id="accountnum" name="accountnum" style="height: 55%" onchange="isChangeToko(this.value)">
                                            <option value=''>--Pilih Accountnum</option>
                                            @foreach ($akun as $k)
                                                <option value="{{ $k->accountnum }}">{{ $k->accountnum }} - {{ $k->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="name">Nama Toko</label>
                                        <select class="form-control" id="name" name="name" style="height: 45%; font-size:0.8rem;padding:0.25rem;margin:0.25rem">
                                            
                                        </select>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="group">Group</label>
                                        <select class="form-control" id="group" name="group" style="height: 55%" onchange="isChangeKategori(this.value)">
                                            <option value='' selected>--Pilih Group</option>
                                            @foreach ($group as $k)
                                                <option value="{{ $k->namelevel5 }}">{{ $k->namelevel5 }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="item">Item</label>
                                        <select id="item" name="item_id" class="form-control" style="height: 55%">
                                          
                                        </select>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-4">
                                        <label for="disc_max">Disc Max</label>
                                        <input class="form-control" id="disc_max" name="disc_max" style="height: 55%">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="periode_start">Periode Start</label>
                                        <input type="date" class="form-control" id="periode_start" name="periode_start" required style="height: 55%">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="periode_end">Periode End</label>
                                        <input type="date" class="form-control" id="periode_end" name="periode_end" style="height: 55%">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
    var isAjax = null
    let arr_item = []
    let arr_name = []
    jQuery(document).ready(function($){
        isAjax = $
        $('#accountnum').select2({
            placeholder: "--Pilih Accountnum",
            allowClear: true,
            theme: "classic"
        });
        $('#group').select2({
            placeholder: "--Pilih Group",
            allowClear: true,
            theme: "classic"
        });
        $('#item').select2({
            placeholder: "--Pilih Item",
            allowClear: true,
            theme: "classic"
        });
    });
    
    @foreach($item as $a)
        arr_item.push({'item_id': "{{$a->item_id}}", 'namelevel5': "{{$a->namelevel5}}"})
    @endforeach
    
    function isChangeKategori(value){
        let search = arr_item.filter((f) => { return f['namelevel5'] == value })
        let opt = `<option value='' selected>--Pilih Item</option>`
        search.forEach((a) => {
            opt += `<option value="${a['item_id']}">${a['item_id']}</option>`
        })
        console.log(search)
        isAjax("#item").html(opt)
    }
    
    @foreach($akun as $a)
        arr_name.push({'name': "{{$a->name}}", 'accountnum': "{{$a->accountnum}}"})
    @endforeach
    
    function isChangeToko(value){
        let search = arr_name.filter((f) => { return f['accountnum'] == value })
        // let opt = `<option value='' selected>--Pilih Toko</option>`
        search.forEach((a) => {
            opt = `<option value="${a['name']}">${a['name']}</option>`
        })
        console.log(search)
        isAjax("#name").html(opt)
    }
    
    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>