@extends('backend.layout.masterlayout')
@section('content')
    @include('backend.partial.sidebar')
    @include('backend.partial.topbar')
    <div class="page-wrapper">
        <!--page-content-wrapper-->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card radius-15">
                            <div class="card-body" style="padding: 1.5rem 1.5rem;">
                                <div class="card-title text-center">
                                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/PhonePe_Logo.svg/1280px-PhonePe_Logo.svg.png"
                                        style="width: 40%;" />
                                    <div class="form-check form-switch pt-4" style="float: right;">
                                        <input class="form-check-input" type="checkbox"
                                            @if ($phonepegateway_credentials->status == 1) onclick="return confirm('Are you sure you want to disable phonepe gateway?')";
                                        @else
                                        onclick="return confirm('Are you sure you want to enable phonepe gateway?')"; @endif
                                            onChange="update_gateway_status(this)"
                                            value="{{ $phonepegateway_credentials->id }}" data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                            title="@if ($phonepegateway_credentials->status == 1) De-Activate Now
                                            @else Activate Now @endif" >
                                    </div>
                                </div>
                                <hr />
                                <form class="row
                                            g-3" method="POST" action="{{ route('configure-payment-gateway') }}"
                                            enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" class="form-control form-control-sm"
                                            value="{{ $phonepegateway_credentials->id }}" name="id" required />
                                        <div class="col-md-4">
                                            <label for="inputLastEnterUsername" class="form-label"
                                                style="font-size:14px;">Merchant Id<span
                                                    class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="Merchant Id"
                                                    value="{{ $phonepegateway_credentials->merchantId }}" onkeydown="this.value = this.value.trim()" onkeyup="this.value = this.value.trim()" name="merchantId"
                                                    required />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="inputLastEnterUsername" class="form-label"
                                                style="font-size:14px;">Merchant User Id<span
                                                    class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="Merchant User Id"
                                                    value="{{ $phonepegateway_credentials->merchantUserId }}"
                                                    name="merchantUserId" onkeydown="this.value = this.value.trim()" onkeyup="this.value = this.value.trim()" required />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="inputLastEnterUsername" class="form-label"
                                                style="font-size:14px;">Gateway Mode<span
                                                    class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <select class="form-select form-select-sm" name="enviroment" required>
                                                    <option value="staging" @if($phonepegateway_credentials->enviroment == 'staging') selected @endif>Test Env</option>
                                                    <option value="production" @if($phonepegateway_credentials->enviroment == 'production') selected @endif>Production Env</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-9">
                                            <label for="inputLastEnterUsername" class="form-label"
                                                style="font-size:14px;">Salt
                                                Key<span class="text-danger">*</span></label>

                                            <div class="input-group" id="show_hide_password">
                                                <input type="password" class="form-control form-control-sm border-end-0"
                                                    value="{{ $phonepegateway_credentials->salt_key }}"
                                                    placeholder="Salt Key" name="salt_key" required> <a href="javascript:;"
                                                    class="input-group-text bg-transparent"><i class="bx bx-hide"></i></a>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="inputLastEnterUsername" class="form-label"
                                                style="font-size:14px;">Salt
                                                Index<span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="number" class="form-control form-control-sm"
                                                    placeholder="Salt Index"
                                                    value="{{ $phonepegateway_credentials->salt_index }}" name="salt_index"
                                                    required />
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <label for="inputLastEnterUsername" class="form-label"
                                                style="font-size:14px;">CALLBACK URL <span
                                                    class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="URL" class="form-control form-control-sm"
                                                    placeholder="Payment Action URL"
                                                    value="{{ $phonepegateway_credentials->callback_url }}"
                                                    name="callback_url" required />
                                            </div>
                                        </div>
                                        <div class="col-md-5 pt-2">
                                            <div class="d-grid">
                                                <button type="submit" class="btn btn-primary">Save </button>
                                            </div>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end page-content-wrapper-->
            </div>
            <!--end page-wrapper-->
            <!--start overlay-->
            <div class="overlay toggle-btn-mobile"></div>
            <!--end overlay-->
            <!--Start Back To Top Button-->
            <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
            @include('backend.partial.dashboard_footer')
        @endsection
        @section('script')
            <script>
                function update_gateway_status(elv1) {
                    if (elv1.checked) {
                        var status = 1;
                    } else {
                        var status = 0;
                    }
                    $.post('{{ route('set-gateway-status') }}', {
                        _token: '{{ csrf_token() }}',
                        id: elv1.value,
                        status: status
                    }, function(data) {
                        if (data == 1) {
                            update_success_noti();
                            // setTimeout(function() {
                            //     window.location.reload();
                            // }, 1000);
                        } else {
                            update_error_noti();
                        }
                    });
                }
            </script>
        @endsection