@extends('agent.layouts.layout')
@section('content')
    
    @section('pagecsscode')
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
        <style> 
            .avatar-upload {
                position: relative;
                max-width: 205px;
                margin: 10px auto;
            }

            .avatar-upload .avatar-edit {
                position: absolute;
                right: 42px;
                z-index: 1;
                top: 10px;
            }

            .avatar-upload .avatar-edit input {
                display: none;
            }

            .avatar-upload .avatar-edit input+label {
                display: inline-block;
                width: 34px;
                height: 34px;
                margin-bottom: 0;
                border-radius: 100%;
                background: #FFFFFF;
                border: 1px solid transparent;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                cursor: pointer;
                font-weight: normal;
                transition: all 0.2s ease-in-out;
            }

            .avatar-upload .avatar-edit input+label:hover {
                background: #f1f1f1;
                border-color: #d6d6d6;
            }   

            .avatar-upload .avatar-edit input+label:after {
                content: "\f040";
                font-family: 'FontAwesome';
                color: #757575;
                position: absolute;
                top: 7px;
                left: 0;
                right: 0;
                text-align: center;
                margin: auto;
            }

            .avatar-upload .avatar-preview {
                width: 152px;
                height: 152px;
                position: relative;
                border-radius: 100%;
                border: 6px solid #F8F8F8;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
            }

            .avatar-upload .avatar-preview>div {
                width: 100%;
                height: 100%;
                border-radius: 100%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
        </style>
    @endsection
    
    <div class="pxp-dashboard-content-details">

            <h4 class="card-title text-center1 mb-0"> Payment Request Form Wallet Amount : ${{ $totalAmount }}</h4>
            <hr>
            <form action="{{ route('agent.wallet_request_save') }}" method="post"  enctype="multipart/form-data">
            @csrf
             
            <div class="row">
                <div class="col-md-6">
                    <label for="pxp-candidate-name" class="form-label">Withdrawal Amount</label>
                    <input type="number" id="transaction_amount" name="transaction_amount" class="form-control" placeholder="Withdrawal Amount"  required>
                      @if ($errors->has('transaction_amount'))<span class="text-danger">
                    {{ $errors->first('transaction_amount') }}</span>@endif 
                </div>

                <div class="col-md-6">
                    <label for="pxp-candidate-name" class="form-label">Withdrawal Amount</label>
                    <textarea name="transaction_remark" class="form-control" placeholder="Note" required></textarea>
                      @if ($errors->has('transaction_remark'))<span class="text-danger">
                    {{ $errors->first('transaction_remark') }}</span>@endif 
                </div>
                

            </div>                  

            <div class="row mt-5 ">
                <div class="col-md-12">
                    <button type="submit" class="btn btn-block btn-primary col-md-2">Submit</button>
                    &nbsp;
                    <a href="" class="btn btn-block btn-secondary  col-md-2">Cancel</a>    
                </div>
            </div>
            
        </form>

    </div>

@endsection



@section('pagescriptcode')
<script type="text/javascript">
    
    function readURL(input) 
    {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#imagePreview').css('background-image', 'url('+e.target.result +')');
                $('#imagePreview').hide();
                $('#imagePreview').fadeIn(650);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imageUpload").change(function() {
        readURL(this);
    });         

    $(function () 
    {

        $('#education_country').select2({
            placeholder: 'Select Country of Education',
        });

        $('#education_level').select2({
            placeholder: 'Select Highest Level Of Education',
        });

          $('#education_scheme_grade').select2({
            placeholder: 'Select Grading Scheme',
        });

        


        $('#country_code').select2({
            placeholder: 'Select Country Code',
        });

        $('#getCurrency').select2({
            placeholder: 'Select Country',
        });

        $('#state-dropdown').select2({
            placeholder: 'Select State',
        });
        
        $('#city-dropdown').select2({
             placeholder: 'Select City',
        });

        $('#alt_country_code').select2({
             placeholder: 'Select Alternate  Country Code',
        });
        

    });
</script>    

<script>
    $(document).ready(function() 
    {

        flatpickr("#passport_expiry_date, #date_of_birth", {
            dateFormat: "d-m-Y",
            // Add any other options here
        });
        // alert();
        var upd_country = $("#getCurrency").val();
        var upd_state = $("#state-dropdown").val();
        var upd_city = $("#city-dropdown").val();
        
        
        getState(upd_country);

        $("#getCurrency").change(function() 
        {
            // $(this).find(':selected').attr('data-id')
            var id_country = $(this).val();
            getState(id_country)

        });

        function getState(id_country) 
        {   

            $.ajax({
                url: "{{ route('currency') }}",
                method: 'GET',
                data: {
                    id_country: id_country,

                },
                success: function(data) {

                    $(".currency-icon").html(data.currency);

                    $('#state-dropdown').html('<option value="">Select State</option>');
                    $.each(data.states, function(key, value) {
                        var selectState = upd_state == value.id ? 'selected' : '';
                        $("#state-dropdown").append('<option value="' + value.id +
                            '" ' + selectState + '>' + value.name + '</option>');
                    });
                    $('#city-dropdown').html(
                        '<option value="">Select State First</option>');
                    upd_state ? getCity(upd_state) : ''

                }
            });
        }

        $('#state-dropdown').on('change', function() 
        {
            var idState = this.value;
            getCity(idState)

        });

        function getCity(city) 
        {
           
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{ route('cities') }}",
                method: 'GET',
                data: {
                    state_id: city,
                    //_token: '{{ csrf_token() }}'
                },

                dataType: 'json',
                success: function(res) {
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function(key, value) {
                        var selectCity = upd_city == value.id ? 'selected' : '';
                        $("#city-dropdown").append('<option value="' + value
                            .id + '" ' + selectCity + '>' + value.name + '</option>');
                    });
                }
            });
        }

    });
</script>
@endsection