@extends('layouts.appuser')




@section('dynamic_css')
<link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}" rel="stylesheet" />
    <style>
        select.form-control:not([size]):not([multiple]) {
            height: calc(2rem + 2px);
        }
        
        .modal-backdrop{
            display: contents;
        }
        @media (max-width: 768px)
        {

        }

        /*body{
    background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}*/
        .emp-profile{
            /*padding: 3%;*/
            margin-top: 1%;
            margin-bottom: 1%;
            border-radius: 0.5rem;
            background: #fff;
        }
        .profile-img{
            text-align: center;

        }
        .profile-img img{
            width: 225px;
            height:200px;
        }
        .profile-img .file {
            position: relative;
            overflow: hidden;
            margin-top: -14%;
            width: 225px;
            border: none;
            border-radius: 0;
            font-size: 15px;
            background: #212529b8;
        }
        .profile-img .file input {
            position: absolute;
            opacity: 0;
            right: 0;
            top: 0;
        }
        .profile-head h5{
            color: #333;
        }
        .profile-head h6{
            color: #0062cc;
        }
        .profile-edit-btn{
            border: none;
            border-radius: 1.5rem;
            width: 70%;
            padding: 2%;
            font-weight: 600;
            color: #6c757d;
            cursor: pointer;
        }
        .proile-rating{
            font-size: 12px;
            color: #818182;
            margin-top: 5%;
        }
        .proile-rating span{
            color: #495057;
            font-size: 15px;
            font-weight: 600;
        }
        .profile-head .nav-tabs{
            margin-bottom:5%;
        }
        .profile-head .nav-tabs .nav-link{
            font-weight:600;
            border: none;
        }
        .profile-head .nav-tabs .nav-link.active{
            border: none;
            border-bottom:2px solid #0062cc;
        }
        .profile-work{
            padding: 14%;
            margin-top: -20%;
        }
        .profile-work p{
            font-size: 12px;
            color:white;
            font-weight: 600;
            margin-top: 10%;
            padding: 7px 5px;
            background-color: #1d93ae;
            box-shadow: 0px 1px 5px 0px #083c50;
        }
        .profile-work a{
            text-decoration: none;
            color:white;
            /*font-weight: 600;*/
            font-size: 14px;
            display: -webkit-box;
        }
        .profile-work ul{
            list-style: none;
        }
        .profile-tab label{
            font-weight: 600;
        }

        .profile-tab label{
            font-weight: 800;
            color: #0062cc;
        }

        .profile-tab .row{
            margin-top: 10px;
        }


        .nav-tabs .nav-item {
            margin-bottom: -1px;
            margin-top: 5px;
            margin-left: 5px;
            border-right: 1px solid white;
        }

        .full-width-tabs > ul.nav.nav-tabs {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .full-width-tabs > ul.nav.nav-tabs > li {
            float: none;
            display: table-cell;
        }
        .full-width-tabs > ul.nav.nav-tabs > li > a {
            text-align: center;
        }


        .box_shadow{
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
        }
        
        .profile_padding_left{
            padding-left: 0px;
        }
        .mt0 {
            margin-top: 0px !important;
        }
        
        p{
           margin-bottom: .2rem;
           color: #3c3939;
        }
        .mt25{
            margin-top: 25px !important;
        }
    </style>
@endsection
@section('content')
    <div class="container">
    <div id="error"></div>
    <form id="electricity_form">
 
        <div class="row container_layout " style="background-color: #80808038;
    margin-top: 23px;">
    
        <div class="col-md-4">
            <label style="color:blue;font-weight:bold">Receipt of payment<span style="color:red">(JPEG,JPG,PDF )*</span></label>
            <input type="file" class="form-control" name="file">

        </div>
        <div class="col-md-4">
            <label style="color:blue;font-weight:bold">Consumer No<span style="color:red">*</span></label>
            <input type="text" class="form-control" name="consumer">
        </div>
        {{csrf_field()}}
        <div class="col-md-4">
            <label style="color:blue;font-weight:bold">Month<span style="color:red">*</span></label>
           <select class="form-control" name="month">
                <option value="">Select</option>
                <option value="1">jan</option>
                <option value="2">Feb</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">Sept</option>
                <option value="10">Oct</option>
                <option value="11">Nov</option>
                <option value="12">Dec</option>
               
                
           </select>
        </div>
        <div class="col-md-4 mt-3">
            <label style="color:blue;font-weight:bold">Year<span style="color:red">*</span></label>
            <select class="form-control" name="year">
                <option value="">Select year</option>
                <option value="2021">2021</option>
              
                
            </select>
        </div>
        <div class="col-md-4 mt-3">
            <label style="color:blue;font-weight:bold">Bill Type<span style="color:red">*</span></label>
            <select class="form-control" name="type">
                <option value="">Select year</option>
                <option value="Prepaid">Prepaid</option>
                <option value="Postpaid">Postpaid</option>
              
                
            </select>
        </div>
        <div class="col-md-4 mt-3">
            <label style="color:blue;font-weight:bold">Remarks(if any)</label>
                <textarea class="form-control" name="remarks"></textarea>
        </div>
       

        <div class="col-md-4" style="padding: 34px;">
            <button type="submit" class="btn btn-primary btn-sm">Submit</button>
        </div>
                            
        </div>
    </form>

    </div>


@endsection




@section('dynamic_js')

    <!-- script for image -->
<script src="{{ asset('js/lib/moment.min.js') }}"></script>
<script src="{{ asset('plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>

    <script>
            $(document).on('submit','#electricity_form',function (e) {
            e.preventDefault()
            $('.page-loader-wrapper').fadeIn();
            $('#error').empty();

            $.ajax({
                type: "POST",
                url: "{{route('user.electricitySubmit')}}",
                dataType: 'json',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {

                    $('.page-loader-wrapper').fadeOut();


                    if(data.msg=="validationFails"){

                        $.each(data.data, function (index, value) {
                            $('#error').append('<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Warning!</strong>'+value+'</div>');
                        });
                    }
                    if(data.msg=="success"){

                        $("#electricity_form")[0].reset();







                        swal("Success!", "Vaccination details updated successfully!", "success");
                    }
                    if(data.msg=="exist"){




                        Swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'Already exist!',


                        })
                    }

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Something went wrong!',


                    })

                }
            });


        })

        
        
        
        
        
    </script>

@endsection