@extends('frontend.app')
<!-- Main Container  -->
@section('content')

<div class="position-relative">


    <div id="carouselExampleIndicators" class="carousel slide" data-pause="false" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active innerHeaderimg">
                <img src="/assets/frontend/images/inner-about.jpg" />
                <div class="carousel-caption innertopHEadcaption">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="capbg">
                                    <p>Home <i class="fa fa-angle-right mx-2"></i> Customer Zone <i class="fa fa-angle-right mx-2"></i> Log your Meter Reading</p>
                                    <div class="heading-seperator innerseperatorspace"><span></span></div>
                                    <h4>Log your Meter Reading</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

{!! Form::model($reading, ['method' => 'post', 'enctype' => 'multipart/form-data', 'onsubmit' => 'return fileValidation()']) !!}
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12 py-3">
                <div class="innerabout-content">
                    @if (isset($message))
                    <div class="alert alert-success alert-block">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $message }}</strong>
                    </div>
                    @endif
                    <a href="/user" class="mb-4 text-theme d-block fw-bold"><i class="fa fa-angle-double-left"></i> Back to Dashboard</a>
                    <p class="f-22 mb-1 fw-bold">Log your Meter Reading</p>
                    <p class="f-14 mb-4"><span class="text-danger">*</span>Fill the below details to log your meter reading</p>


                    <div class="row">
                        <div class="col-md-3">
                            <label class="fw-bold">BP Number <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <input type="text" class="form-control" placeholder="" name="bp_number" value="{{ $user->bp_number }}" maxlength="10" readonly>
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            {!! $errors->first('bp_number', '<label class="control-label" for="bp_number">:message</label>')!!}
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Registered Customer Name <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <input type="text" class="form-control" placeholder="" name="customer_name" value="{{ $user->name }}" maxlength="180" readonly>
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            {!! $errors->first('customer_name', '<label class="control-label" for="customer_name">:message</label>')!!}
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Email <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <input type="text" class="form-control" placeholder="" name="email" value="{{ $user->email }}" maxlength="180" readonly>
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            {!! $errors->first('email', '<label class="control-label" for="email">:message</label>')!!}
                        </div>
                    </div>

                    {{-- <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Previous Meter Reading <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <input type="text" class="form-control" placeholder="" name="previous_reading" value="{{ $reading->previous_reading }}" maxlength="180" readonly>
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            {!! $errors->first('previous_reading', '<label class="control-label" for="previous_reading">:message</label>')!!}
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Previous Meter Reading Date <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <input type="date" class="form-control" placeholder="" name="previous_reading_date" value="{{ $reading->previous_reading_date }}" maxlength="180" readonly>
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            {!! $errors->first('previous_reading_date', '<label class="control-label" for="previous_reading_date">:message</label>')!!}
                        </div>
                    </div> --}}

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Name of the person entering details</label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <input type="text" class="form-control" name="applicant_name" value="{{ old('applicant_name') }}" maxlength="180" placeholder="Enter Name">
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            {!! $errors->first('applicant_name', '<label class="control-label" for="applicant_name">:message</label>')!!}
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Enter Meter Reading <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                {{-- <input type="text" class="form-control" name="meter_reading" maxlength="8" placeholder="">  
                                <i class="fa fa-file-text-o"></i> --}}
                                {{-- <div class="row">
                                    <div class="col-md-5 mr-3">
                                        <input type="text" class="form-control" name="meter_reading[]" maxlength="1" placeholder="">  
                                    </div>
                                    <div class="col-md-1 mr-3">
                                        <input type="text" class="form-control" name="meter_reading[]" maxlength="1" placeholder="">  
                                    </div>
                                    <div class="col-md-1 mr-3">
                                        <input type="text" class="form-control" name="meter_reading[]" maxlength="1" placeholder="">  
                                    </div>
                                    <div class="col-md-1 mr-3">
                                        <input type="text" class="form-control" name="meter_reading[]" maxlength="1" placeholder="">  
                                    </div>
                                    <div class="col-md-1 mr-3">
                                        <input type="text" class="form-control" name="meter_reading[]" maxlength="1" placeholder="">  
                                    </div>
                                    <div class="col-md-1 mr-3">
                                        <input type="text" class="form-control" name="meter_reading[]" maxlength="1" placeholder="">  
                                    </div>
                                    <div class="col-md-1 mr-3">
                                        <input type="text" class="form-control" name="meter_reading[]" maxlength="1" placeholder="">  
                                    </div>
                                    <div class="col-md-1 mr-3">
                                        <input type="text" class="form-control" name="meter_reading[]" maxlength="1" placeholder="">  
                                    </div>
                                </div> --}}
                                <big>
                                    <input name="meter_reading[]" type="text" maxlength="1" value="{{ old('meter_reading.0') }}" onkeypress="NumOnly(event)">
                                    <input name="meter_reading[]" type="text" maxlength="1" value="{{ old('meter_reading.1') }}" onkeypress="NumOnly(event)">
                                    <input name="meter_reading[]" type="text" maxlength="1" value="{{ old('meter_reading.2') }}" onkeypress="NumOnly(event)">
                                    <input name="meter_reading[]" type="text" maxlength="1" value="{{ old('meter_reading.3') }}" onkeypress="NumOnly(event)">
                                    <input name="meter_reading[]" type="text" maxlength="1" value="{{ old('meter_reading.4') }}" onkeypress="NumOnly(event)"><small> -</small>
                                    <input name="meter_reading[]" type="text" maxlength="1" value="{{ old('meter_reading.5') }}" onkeypress="NumOnly(event)">
                                    <input name="meter_reading[]" type="text" maxlength="1" value="{{ old('meter_reading.6') }}" onkeypress="NumOnly(event)">
                                    <input name="meter_reading[]" type="text" maxlength="1" value="{{ old('meter_reading.7') }}" onkeypress="NumOnly(event)">
                                </big>
                            </div>
                            {!! $errors->first('meter_reading.*', '<label class="control-label" for="meter_reading">:message</label>')!!}
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Reason <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <select class="form-control" name="reason" id="reason">
                                    <option value="">Select Reason</option>
                                    <option value="Assesed reading" @if(old('reason') == 'Assesed reading') selected @endif>Assesed reading</option>
                                    <option value="Bill not recieved since commencement of gas" @if(old('reason') == 'Bill not recieved since commencement of gas') selected @endif>Bill not recieved since commencement of gas</option>
                                    <option value="Bill recieved on actual consumption but reading differs" @if(old('reason') == 'Bill recieved on actual consumption but reading differs') selected @endif>Bill recieved on actual consumption but reading differs</option>
                                    <option value="Flat generally not occupied" @if(old('reason') == 'Flat generally not occupied') selected @endif>Flat generally not occupied</option>
                                    <option value="Not available at home during the office hours" @if(old('reason') == 'Not available at home during the office hours') selected @endif>Not available at home during the office hours</option>
                                </select>
                                <i class="fa fa-cubes"></i>
                            </div>
                            {!! $errors->first('reason', '<label class="control-label" for="reason">:message</label>')!!}
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Photograph Date <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <input type="date" class="form-control" name="photograph_date" maxlength="180" value="{{ old('photograph_date') }}" placeholder="********">
                                <i class="fa fa-file-text-o"></i>
                            </div>
                            {!! $errors->first('photograph_date', '<label class="control-label" for="photograph_date">:message</label>')!!}
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Upload photograph <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="login-form">
                                <input type="file" class="form-control" name="image" id="image" accept=".png,.jpg,.jpeg" placeholder="********">
                                <i class="fa fa-file-image-o"></i>
                            </div>
                            {!! $errors->first('image', '<label class="control-label" for="image">:message</label>')!!}
                            <label class="control-label" id="imageErr" for="image"></label>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="fw-bold">Enter Captcha <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-5">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="login-form">
                                        <input type="text" class="form-control" name="captcha" id="captcha" maxlength="5" placeholder="Enter Captcha">
                                        <i class="fa fa-file-text-o"></i>
                                    </div>
                                    {!! $errors->first('captcha', '<label class="control-label" for="captcha">:message</label>')!!}
                                </div>
                                <div class="col-md-6">
                                    <div class="captcha">
                                        <span>{!! captcha_img() !!}</span>
                                        <button type="button" class="btn btn-danger" class="reload" id="reload">
                                        ↻
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-5">
                        <div class="col-md-12">

                            <button class="btn btn-outline-secondary px-4 px-sm-5 mr-3" onclick="resetData(event)">Reset</button>
                            <button class="btn btn-primary px-4 px-sm-5">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{!! Form::close() !!}

@endsection

@section('styles')
    <style>
        big input{
            width: 10%;
            text-align: center;
        }
    </style>
@endsection

@section('scripts')
@parent
<script src="/assets/frontend/js/validation.js"></script>
<script>
    $(document).ready(function() {
        $('#imageErr').hide();
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var yyyy = today.getFullYear();
        if (dd < 10) {
            dd = '0' + dd;
        }
        if (mm < 10) {
            mm = '0' + mm;
        }
        today = yyyy + '-' + mm + '-' + dd;
        // console.log(today);
        $("[name='photograph_date']").attr("max", today);
    });

    function fileValidation() {
        // if ($("#image").val() == '') {
        //     $('#imageErr').show();
        //     $('#imageErr').text('File required');
        //     return false;
        // }
        if (($("#image").val() != '') && (typeof($("#image")[0].files) != "undefined")) {
            var size = parseFloat(($("#image")[0].files[0].size / 1024) / 1024).toFixed(2);
            if (size > 2) {
                $('.control-label').text('');
                $('#imageErr').show();
                $('#imageErr').text('File must be within 2MB.');
                return false;
            }
        }
        $('#imageErr').hide();
        return true;
    }

    function resetData(e) {
        e.preventDefault();
        $("[name='applicant_name']").val('');
        $("[name='meter_reading']").val('');
        $("[name='reason']").val('');
        $("[name='photograph_date']").val('');
        $("[name='image']").val('');
    }

</script>
<script type="text/javascript">
    $('#reload').click(function () {
    $.ajax({
    type: 'GET',
    url: '/reload-captcha',
    success: function (data) {
    $(".captcha span").html(data.captcha);
    }
    });
    });
    </script>
@endsection