@extends('layouts.app')

@section('title', 'Report')

@section('content')

<form action="" method="GET" id="stockr">
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div class="row">
                    <div class="col-3">
                        <label for="datefrom">From</label>
                    </div>
                    <div class="col-6">
                        <input autocomplete="off" type="tel" maxlength="10" placeholder="dd/mm/yyyy"
                            oninput="this.value = DDMMYYYY(this.value, event , this)" name="datefrom"
                            value="{{ isset($billing->datefrom) ? old('datefrom', \Carbon\Carbon::parse(str_replace('/', '-', $billing->datefrom))->format('d/m/Y')) : old('datefrom') }}"
                            id="datefrom" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="row">
                    <div class="col-3">
                        <label for="dateto">To</label>
                    </div>
                    <div class="col-6">
                        <input autocomplete="off" type="tel" maxlength="10" placeholder="dd/mm/yyyy"
                            oninput="this.value = DDMMYYYY(this.value, event , this)" name="dateto"
                            value="{{ isset($billing->dateto) ? old('dateto', \Carbon\Carbon::parse(str_replace('/', '-', $billing->dateto))->format('d/m/Y')) : old('dateto') }}"
                            id="dateto" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="row">
                    <div class="col-2">
                        <label for="company">Company</label>
                    </div>
                    <div class="col-9">
                        {{ Form::select('company', $company, old('company'), ['class' => 'form-control']) }}
                    </div>
                </div>
            </div>
        </div>
        <br><br>

        <button type="button" class="btn btn-success btn-lg mt-2 ncf" href='{{ url('') }}/show/stockdetail'   style="margin-right: 85px; margin-left: 450px;">View Stock   </button>
        <!-- <button type="button" class="btn btn-success btn-lg mt-2 ncf" href='{{ url('') }}/show/ratediff1'  style="margin-right: 85px;">New</button> -->


    </div>
</form>

@endsection
@section('scripts')

<script>

    $(window).ready(function() {

        $('.ncf').click(function(){
    $('#stockr').attr('action' , $(this).attr('href'));
    $('#stockr').submit();S
})

    $('[name="datefrom"]').focus();

    $('[name="company"]').val("")


    });
    function DDMMYYYY(value, event , $d) {
            let newValue = value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');

            const dayOrMonth = (index) => index % 2 === 1 && index < 4;
              
            if (!event.data) {
                return value;
            }

            if(newValue.split('').length != 8){
                return value;
            }
            $dates = newValue.split('').map((v, i) => dayOrMonth(i) ? v + '/' : v).join('');
            return $dates;
        }

        $('[oninput="this.value = DDMMYYYY(this.value, event , this)"]').focusout(function(){
            $dates = $(this).val();
            if(!isValidDate($dates)){
                $(this).addClass('required');
                $(this).focus()

            }else{
                
                $(this).removeClass('required');
            }

        })

        function isValidDate(dateString)
        {
            // First check for the pattern
            var regex_date = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
            console.log(regex_date);
            if(!regex_date.test(dateString))
            {
                return false;
            }

            // Parse the date parts to integers
            var parts   = dateString.split("/");
            var day     = parseInt(parts[0], 10);
            var month   = parseInt(parts[1], 10);
            var year    = parseInt(parts[2], 10);

            // Check the ranges of month and year
            if(year < 1000 || year > 3000 || month == 0 || month > 12)
            {
                return false;
            }

            var monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];

            // Adjust for leap years
            if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
            {
                monthLength[1] = 29;
            }

            // Check the range of the day
            return day > 0 && day <= monthLength[month - 1];
        }
</script>



@endsection

@section('ccss')

    

@endsection