@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> Pay your Bill</p>
                                    <div class="heading-seperator innerseperatorspace"><span></span></div>
                                    <h4>Pay your Bill</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12 py-3">
                <div class="innerabout-content">
                    <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 fw-bold mb-1">Pay Your Bill</p>
                    <p class="f-14 mb-4"><span class="text-danger">*</span>Below are the details for your Bill.
                    </p>

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Bill No.</th>
                                    <th>Due Date</th>
                                    <th>Total Bill Amount</th>
                                    <th>Total Invoice Amount</th>
                                    <th>Amount to be Paid</th>
                                    <th>Download</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- @foreach ($currentBills as $cb) --}}
                                {{--  @if((!($cb && $cb->orderDetails && $cb->orderDetails->payment_status == 'paid')) && $cb)  --}}
                                @if($cb)
                                <tr>
                                    <td>
                                        {{ $cb->bill_number }}
                                    </td>
                                    <td>
                                        {{ date('d-m-Y', strtotime($cb->due_date)) }}
                                    </td>
                                    <td>
                                        <i class="fa fa-rupee"></i>
                                        {{ $cb->total_bil_amount }} /-
                                    </td>
                                    <td>
                                        <i class="fa fa-rupee"></i>
                                        {{ $cb->total_invoice_amount }} /-
                                    </td>
                                    <td>
                                        <label class="badge badge-success f-15">
                                            <i class="fa fa-rupee"></i>
                                            {{ $cb->amount_to_be_paid }} /-
                                        </label>
                                    </td>
                                    <td>
                                        <a href="/bill-format/pdf?id={{ base64_encode($cb->id) }}&bill_number={{ $cb->bill_number }}&meter_number={{ $cb->meter_reading_number }}" target="_new" class="pdf-hover">
                                            <i class="fa fa-file-pdf-o text-theme f-22"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endif
                                {{-- @endforeach --}}
                            </tbody>
                        </table>
                    </div>
                    @if ($cb)
                        @if (!($user->eBill && $user->eBill->is_opted_ebill == 1))
                        <input type="text" id="email" value="{{$user->email}}" hidden />
                        <input type="text" id="bp_number" value="{{$user->bp_number}}" hidden />
                        <label id="successMessage" class="text-success fw-bold"></label>
                        <label id="errorMessage" class="text-danger fw-bold"></label>
                        <label id="checkbox-label"><input type="checkbox" class="eBill"> Opt for E-Bills instead of Physical Bills</label><br>
                        @endif
                    {{-- <a class="btn btn-primary px-5 mt-3" href="/payment-page">Pay your Bill</a> --}}
                    @endif
                </div>
            </div>
        </div>
        {{--  @if((!($cb && $cb->orderDetails && $cb->orderDetails->payment_status == 'paid')) && $cb && $cb->balance() > 0)  --}}
        @if($cb && $cb->balance() > 0)
            <div class="row">
                <div class="col-md-4">
                    <form method="post" action="/make-payment">
                        <div class="form-group">
                            <input type="number" class="form-control" name="amount_to_be_paid" min="1" max="999999" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="9" value="{{$cb->amount_to_be_paid}}">
                        </div>
                        <p class="f-14">
                            Please select payment option.
                        </p>
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="billing_master_id" value="{{$cb->id}}">
                        @if ($paymentChannels)
                            @foreach ($paymentChannels as $paymentChannel)
                                <p class="mx-2">
                                    <label class="container_radio">
                                        <input type="radio" name="payment_channel_id"
                                        value="{{ $paymentChannel->id }}" oninput="this.setCustomValidity('')">
                                        <strong>{!! $paymentChannel->image ? $paymentChannel->name.'<img class="ml-3" src = "'.$paymentChannel->image.'">' :$paymentChannel->name !!}</strong>
                                        <span class="checkmark"></span>
                                    </label>
                                </p>
                                @endforeach
                            <p class="mx-2" >
                                {!! $errors->first('payment_channel_id', '<label class="control-label"  for="payment_channel_id">:message</label>') !!}
                            </p>
                        @endif
                        <button type="submit" class="btn btn-primary btn-sm px-5 mt-3">Pay your Bill</button>
                    </form>
                </div>
            </div>
        @endif
        @if (isset($errorMessage) && $errorMessage)
            <p style="color: red;">{{ $errorMessage }}</p>
        @endif 
    </div>
</section>
@endsection

@section('styles')

@endsection

@section('scripts')
    @parent
    <script>
        $(document).ready(function() {
            $('#successMessage').hide();
            $('#errorMessage').hide();
        });
        $(".eBill").change(function() {
            if (this.checked) {
                if (confirm('You declare that you would like to opt for an e-Bill instead of a Physical Bill [Please note that Physical Bill will be discontinued if you opt for this]')) {
                    // console.log('yes');
                    var email = $('#email').val();
                    var bp_number = $('#bp_number').val()
                    var data = {
                        'email': email
                        , 'bp_number': bp_number
                        , '_token': '{{{csrf_token()}}}'
                    }
                    // console.log(data);
                    $.ajax({
                        url: '/ajax/opt-for-ebill'
                        , type: 'POST'
                        , data: data
                        , success: function(data) {
                            var data = JSON.parse(data);
                            if (data.result) {
                                $("#checkbox-label").hide();
                                $('#errorMessage').hide();
                                $('#successMessage').show();
                                $('#successMessage').html(data.message);
                            } 
                            else {
                                $("#checkbox-label").show();
                                $('.eBill').prop('checked', false);
                                $('#errorMessage').show();
                                $('#errorMessage').html(data.message);
                            }
                        }
                    });

                } else {
                    // console.log('no');
                    $('.eBill').prop('checked', false);
                }
            }
        });

    </script>
@endsection