@extends('layout.master')
@section('css')
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">

    <style>
        .dropdown.bootstrap-select>.btn,
        .dropdown.bootstrap-select>.btn:hover,
        .dropdown.bootstrap-select>.btn:active,
        .dropdown.bootstrap-select>.btn:visited,
        .dropdown.bootstrap-select>.btn:focus {
            background-color: transparent;
            color: #495057;
            text-transform: none;
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        }
        .razorpay-payment-button{
            visibility: hidden ;
        }
    </style>
@stop
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <form name="pinrequest" id="pinrequest" action="{{ route('pinrequests.store') }}" method="POST">
                        @csrf

                        <div class="card">
                            <div class="card-header card-header-warning">

                                <h4 class="card-title">Add Pin Request</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">

                                    <div class="col-md-12 col-sm-12 p-3">

                                        <div class="row">
                                            <label class="col-sm-3 col-form-label">Requested PINs<span
                                                    class="text-danger"> *</span></label>
                                            <div class="col-sm-8">
                                                <div class="form-group bmd-form-group">
                                                    <input type="number" min="1" max="10" class="form-control" id="number" name="number" placeholder="Enter Requested PINs" value="">
                                                </div>
                                            </div>
                                        </div>
                                        @if ($isAssociateAdmin)
                                            <div class="row">
                                                <label class="col-sm-3 col-form-label">Payment Type<span class="text-danger">
                                                        * </span></label>
                                                <div class="form-group col-sm-8 bmd-form-group">
                                                    <input id="pendding" name="payment_status" class="statuspayment" value="2" type="radio" checked />
                                                    <label for="pendding">Pay Latter</label>
                                                    <input id="pay_now" name="payment_status" class="statuspayment" value="1" type="radio" />
                                                    <label for="pay_now">Pay Now (Bank)</label>
                                                    @if ($errors->has('payment_status'))
                                                        <div class="error">
                                                            <strong>{{ $errors->first('payment_status') }}</strong></div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="text-center p-2">
                                <a href="{{ route('pinrequests') }}" class="btn btn-danger w-25">Cancel</a>
                                <input type="submit" class="btn btn-info w-25" id="submitpayment" name="btnSubmit" value="Send Request">
                            </div>
                        </div>
                </div>
                </form>
                <form action="{{ route('razorpay.payment.store') }}" method="POST" id="paymentform" >
                    @csrf
                    <script src="https://checkout.razorpay.com/v1/checkout.js" data-key="{{ env('RAZORPAY_KEY') }}" data-amount="200" data-name="{{ $doctor->get_doctor_details->username }}" data-phone="" data-email="{{ $doctor->get_doctor_details->email }}" data-description="Razorpay" 
                    {{-- data-image="{{ asset('images' . '/favicon.png') }}"  --}}
                    data-prefill.name="name" data-prefill.email="" data-theme.color="#9ABF2A">

                    </script>
                </form>
            </div>
        </div>
    </div>

@stop
@section('script')
    <style>
        body {
            overflow: hidden;
        }

        .table-responsive {
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

        .bmd-form-group .form-control,
        .bmd-form-group label,
        .bmd-form-group input::placeholder {
            line-height: 3.5;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="url"],
        input[type="time"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="tel"],
        input[type="number"],
        input[type="search"],
        textarea.materialize-textarea {
            margin: 0 auto;
            padding: 0;
        }

        .form-control {
            background: none;
        }

        .activity_section .form-control[type="url"] {
            border-bottom: 1px solid #9e9e9e;
        }

        input.file-path::placeholder {
            line-height: 2;
        }

        textarea.form-control {
            border-bottom: 1px solid #9e9e9e;
        }

        .bootstrap-select {

            background-image: none !important;
            padding: 0 !important;
        }

    </style>
    <script>

    var totalPinsrequest=0;
    var options = {
            "key": "{{ env('RAZORPAY_KEY') }}", // Enter the Key ID generated from the Dashboard
            "amount": 1, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
            "currency": "INR",
            "name": "{{ $doctor->get_doctor_details->username }}",
            "description": "Doctor PIN Request : "+totalPinsrequest,
            // "image": "{{ asset('images' . '/favicon.png') }}",
            "handler": function (response){
                $.ajax({
                    url :"{{ route('razorpay.payment.store') }}",
                    type:"post",
                    dataType: 'json',
                    data:{"_token": "{{ csrf_token() }}",
                        razorpay_payment_id: response.razorpay_payment_id , 
                        totalAmount : options.amount,
                        totalpinrequest :totalPinsrequest 
                    },
                    success:function(data){
                        if(data.status==200){
                            $('#paymentform,#pinrequest').trigger('reset');
                            showAlert("success", data.msg);
                            $("#submitpayment").attr("disabled", false);
                            window.location.href = "{{ route('pinrequests') }}";
                        }
                        else{
                            $('#paymentform,#pinrequest').trigger('reset');
                            showAlert("danger", data.msg);
                            $("#submitpayment").attr("disabled", false);
                        }
                    },
                    error:function(msg){
                        alert("Payment not added successfull");
                    }
                })
            },
            "prefill": {
                "name": "{{ $doctor->get_doctor_details->username }}",
                "email": "{{ $doctor->get_doctor_details->email }}",
                "contact": "+{{ $doctor->phone_code}}{{$doctor->mobile_number }}"
            },
            "notes": {
                "address": "Doctor PIN Request : "+totalPinsrequest
            },
            "theme": {
                "color": "#9ABF2A"
            }
        };



    var amount=$('#amount').val();
    $('#number').on('keyup',function(e){
        var pinrequest=parseInt($(this).val());
        var doctoramount="{{ $doctorPinPrice }}";
        totalPinsrequest=pinrequest;
        amount=parseInt(doctoramount) * 100 * pinrequest;
        options.amount=amount;
        options.description="Doctor PIN Request : "+totalPinsrequest;
        // options.notes="Doctor PIN Request : "+totalPinsrequest;
    });



    $('#pinrequest').on('submit',function(e){
        e.preventDefault();
        if(!$('#pinrequest').valid()){
            return false;
        }
        if($('[name=payment_status]:checked').val()==1){
            // $("#submitpayment").attr("disabled", true);
            $(this).on('submit');
            options.amount=amount;
            var rzp1 = new Razorpay(options);
            rzp1.on('payment.failed', function (response){
                //console.log(response.error);
                $.ajax({
                    url :"{{ route('razorpay.payment.failed') }}",
                    type:"post",
                    dataType: 'json',
                    data:{"_token": "{{ csrf_token() }}",
                        razorpay_error : response.error,
                        totalAmount : options.amount,
                        totalpinrequest :totalPinsrequest 
                    },
                    success:function(data){
                        showAlert("danger", data.msg);
                        $('#paymentform,#pinrequest').trigger('reset');
                    },
                    error:function(msg){
                        //$('#paymentform,#pinrequest').trigger('reset');
                    }
                })
            });
            rzp1.open();
        }
        else{
            $('#pinrequest')[0].submit();
        }
    });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
    </script>
    <script src="{{ asset('js/doctor/pinrequests/add.js') }}" type="text/javascript"></script>
    @stop