@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/vendors/select2.css')}}">
@endsection

@section('breadcrumb-title')
<!-- <h3>Payment Agents</h3> -->
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Payment Agents</li>
@endsection

@section('content')
<style>
    /* Custom dropdown styles */
    .custom-dropdown {
        position: relative;
        display: inline-block;
        width: 200px;
    }

    .custom-dropdown .dropdown-btn {
        width: 100;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .custom-dropdown .dropdown-btn i {
        margin-right: 10px;
    }

    .custom-dropdown .dropdown-content {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        width: 100%;
        z-index: 1;
    }

    .custom-dropdown .dropdown-content div {
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .custom-dropdown .dropdown-content div:hover {
        background-color: #f1f1f1;
    }

    .custom-dropdown .dropdown-content div i {
        margin-right: 10px;
    }

    .custom-dropdown .dropdown-content div.selected {
        background-color: #f0f0f0;
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            @if ($errors->has('email'))
            <div class="alert alert-danger dark alert-dismissible fade show">
                <i class="icon-alert"></i>
                <b>{{ $errors->first('email') }}</b>
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close" data-bs-original-title="" title=""></button>
            </div>
            @endif
            <div class="card height-equal">
                <div class="card-header card-no-border">
                    <div class="header-top">
                        <h4>Payment Agents</h4>
                        @if (strtolower(Request::segment(1)) !== 'client')
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPaymentAgent"><span class="fa fa-plus"></span></button>
                        @else
                        <div class="custom-dropdown" id="customDropdown">
                            <div class="dropdown-btn" id="dropdownBtn">
                                <i class="fa fa-hand-holding-dollar"></i>
                                <span>Deposit</span>
                                <i class="fa fa-chevron-down"></i>
                            </div>
                            <div class="dropdown-content">
                                <div data-value="1" data-icon="fa fa-hand-holding-dollar">
                                    <i class="fa fa-hand-holding-dollar"></i> Deposit
                                </div>
                                <div data-value="2" data-icon="fa fa-circle-dollar-to-slot">
                                    <i class="fa fa-circle-dollar-to-slot"></i> Withdraw
                                </div>
                            </div>
                            <input type="hidden" id="selectedValue"
                                @if (!empty(request('request_id')))
                                value="{{request('request_id')}}"
                                @else
                                value="1"
                                @endif>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="card-body p-t-0">
                    <div class="row">
                        @if (strtolower(Request::segment(1)) === 'client')
                        <p class="font-danger"><b>Disclaimer:</b> We are not responsible for any issues that may arise. Use payment agent services at your own risk.</pcl>
                            @endif
                            @if ((!empty($data)))
                            @foreach ($data as $row)
                            @if (strtolower(Request::segment(1)) === 'client')
                            @if(!empty($row->active))
                            @continue
                            @endif
                            @endif
                        <div class="col-md-6">
                            <div class="card shadow-lg">
                                <div class="card-body pl-3">
                                    <div class="row">
                                        <div class="col-md-5 col-12 m-b-10" style="text-align:center">
                                            <div class="avatars height_width_max">
                                                <div class="avatar height_width_max">
                                                    <img
                                                        @if (!empty($row->image))
                                                    src="{{ asset('public/storage/uploads/'.$row->image) }}"
                                                    @else
                                                    src="{{ asset('assets/dummy_person.jpg') }}"
                                                    @endif
                                                    alt="" class="rounded-circle height_width_max">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7 col-12">
                                            <div class="row">
                                                <div class="col-md-8 col-8 p-l-20">
                                                    <span class="fa fa-star txt-warning "></span>
                                                    <span class="fa fa-star txt-warning "></span>
                                                    <span class="fa fa-star txt-warning "></span>
                                                    <span class="fa fa-star txt-warning "></span>
                                                    <span class="m-l-10"><b>{{$row->rating}}</b></span>
                                                </div>
                                                @if (strtolower(Request::segment(1)) !== 'client')
                                                <div class="col-md-4 col-4 dropdown-basic" style="top: -10px;left: 10px;">
                                                    <button type="button"
                                                        @if(empty($row->active))
                                                        data-show_active="2"
                                                        @else
                                                        data-show_active="1"
                                                        @endif
                                                        class="btn btn-light p-0 border-1 b-primary" style="border-radius: 50%;height: 32px;width: 33px;" onclick="hide_payment_agent(this);active_row(this,'{{$row->id}}')"><span
                                                            @if(empty($row->active))
                                                            class="fa fa-eye"
                                                            @else
                                                            class="fa fa-eye-slash"
                                                            @endif
                                                            ></span></button>
                                                    <div class="dropdown">
                                                        <button type="button" class="btn btn-primary p-0 dropbtn" style="border-radius: 50%;height: 32px;width: 33px;"><span class="fa fa-gear"></span></button>
                                                        <div class="dropdown-content" style="top:30px !important;left: -85px !important;min-width: 115px !important;max-width: 115px !important;">
                                                            <a href="#" class="btn-light custom_dropdown_btn" data-bs-toggle="modal" data-bs-target="#editPaymentAgent_{{$row->id}}" style="width: 115px;" data-bs-original-title="" title=""><span class="fa fa-edit m-r-10"></span>Edit</a>
                                                            <a href="#" onclick="delete_row('{{$row->id}}')" class="btn-light custom_dropdown_btn" style="width: 115px;" data-bs-original-title="" title=""><span class="fa fa-trash m-r-10"></span>Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif
                                                <div class="col-md-12 col-12 m-l-10 mb-2">
                                                    <h4>{{$row->fname ." " .$row->lname}}</h4>
                                                </div>
                                                <div class="col-md-12 col-12 m-l-10 mb-2 "><span class="f-18 fa fa-facebook-square txt-primary  m-r-10"></span>{{$row->facebook_url}}</div>
                                                <div class="col-md-12 col-12 m-l-10 mb-2 "><span class="f-18 fa fa-whatsapp-square txt-primary  m-r-10"></span>{{$row->phone_number}}</div>
                                                <div class="col-md-12 col-12 m-l-10 mb-2 "><span class="f-18 fa fa-envelope-square txt-primary  m-r-10"></span>{{$row->email}}</div>
                                                <div class="col-md-12 col-12 m-l-10 mb-2 "><span class="f-18 fa fa-link txt-primary  m-r-10"></span>{{$row->website_url}}</div>

                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12 m-l-10 mb-2 ">
                                            <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#withdrawmodal" style="display: none;" id="withdraw_btn" data-id="{{$row->user_id}}" onclick="chnge_paid(this)">Withdraw</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if ((!empty($data)))
@foreach ($data as $row)
<div class="modal fade" id="editPaymentAgent_{{$row->id}}" tabindex="-1" role="dialog" aria-labelledby="editPaymentAgentLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editPaymentAgentLabel">Update Payment Agent</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
            </div>
            <form action="{{route('update.agents')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-2 p-r-0">
                            <img

                                @if (!empty($row->image))
                            src="{{ asset('public/storage/uploads/'.$row->image) }}"
                            @else
                            src="{{ asset('assets/dummy_img.jpg') }}"
                            @endif
                            alt="" height="200" width="175" onclick="click_file(this)" id="imagePreview">
                            <input type="file" name="image" style="margin-top: 5px" class="form-control a_img" id="fileInput" onchange="previewImage(this)">
                        </div>
                        <div class="col-md-10">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="">First Name</label>
                                    <input type="hidden" name="id" value="{{$row->id}}">
                                    <input type="text" name="fname" id="" class="form-control" placeholder="First Name" value="{{$row->fname}}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="">Last Name</label>
                                    <input type="text" name="lname" id="" class="form-control" placeholder="Last Name" value="{{$row->lname}}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="">Phone Number</label>
                                    <input type="text" name="phone_number" id="" class="form-control" value="{{$row->phone_number}}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="">Email</label>
                                    <input type="email" name="email" id="" class="form-control" placeholder="abc@email.com" value="{{$row->email}}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="">Facebook URL</label>
                                    <input type="text" name="facebook_url" id="" class="form-control" placeholder="www.facebook.com" value="{{$row->facebook_url}}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="">Website URL</label>
                                    <input type="text" name="" id="website_url" class="form-control" placeholder="www.website.com" value="{{$row->website_url}}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="">Rating</label>
                                    <input type="number" name="rating" class="form-control" placeholder="Rating" value="{{$row->rating}}" min="0" max="5.0" step="0.1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Close</button>
                    <button class="btn btn-primary" type="submit">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach
@endif
<div class="modal fade" id="createPaymentAgent" tabindex="-1" role="dialog" aria-labelledby="createPaymentAgentLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createPaymentAgentLabel">Create Payment Agent</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
            </div>
            <form action="{{route('create.agents')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-2">
                            <img src="{{ asset('assets/dummy_img.jpg') }}" class="border-1 b-light" alt="" height="200" width="180" onclick="click_file(this)">
                            <input type="file" style="display: none;" name="image" class="a_img">
                        </div>
                        <div class="col-md-10">
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <label for="">First Name</label>
                                    <input type="text" name="fname" id="" class="form-control" placeholder="First Name" required>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="">Last Name</label>
                                    <input type="text" name="lnmae" class="form-control" placeholder="Last Name">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="">Phone Number</label>
                                    <input type="text" name="phone_number" id="" class="form-control">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="">Email</label>
                                    <input type="email" name="email" id="" class="form-control" placeholder="abc@email.com" required>
                                </div>
                                <div class="col-md-4 mb-2">
                                    <label for="">Facebook URL</label>
                                    <input type="text" name="facebook_url" id="" class="form-control" placeholder="www.facebook.com">
                                </div>
                                <div class="col-md-4 mb-2">
                                    <label for="">Website URL</label>
                                    <input type="text" name="website_url" id="" class="form-control" placeholder="www.website.com">
                                </div>
                                <div class="col-md-4 mb-2">
                                    <label for="">Rating</label>
                                    <input type="number" name="rating" class="form-control" placeholder="Rating" min="0" max="5.0" step="0.1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Close</button>
                    <button class="btn btn-primary" type="submit">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>
@if (strtolower(Request::segment(1)) === 'client')
<div class="modal fade" id="withdrawmodal" tabindex="-1" role="dialog" aria-labelledby="withdrawmodalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="withdrawmodalLabel">Withdraw</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
            </div>
            <form action="{{route('create.payment_request')}}" method="post">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <label for="">Wallet Number</label>
                                    <input type="number" disabled id="" class="form-control" value="{{$wallet->wallet_no}}">
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="">Current Balance</label>
                                    <input type="number" disabled id="balance" class="form-control" value="{{$wallet->balance}}">
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="">Amount</label>
                                    <input type="hidden" name="user_id" value="{{ Auth::guard('client')->user()->id }}">
                                    <input type="hidden" name="payment_agent_id" id="payment_agent_id">
                                    <input type="hidden" name="request_type" value="2">
                                    <input type="number" name="amount" oninput="change_balance(this)" id="" class="form-control" min="10" required>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Close</button>
                    <button class="btn btn-primary" type="submit" id="submitBtn">Withdraw</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
<script>
    var request = "{{ request('request_id') }}";
    var balance = 0;
    $(document).ready(function() {
        balance = $('#balance').val();
    })

    function change_balance(obj) {
        var val = $(obj).val();

        var remainingBalance = balance - val;
        $('#balance').val(remainingBalance)
        if (remainingBalance < 0) {
            $('#submitBtn').prop('disabled', true);
        } else {
            $('#submitBtn').prop('disabled', false);
        }
    }

    function hide_payment_agent(obj) {
        if ($(obj).find('span').hasClass('fa-eye')) {
            $(obj).find('span').removeClass('fa-eye')
            $(obj).find('span').addClass('fa-eye-slash')
        } else {
            $(obj).find('span').removeClass('fa-eye-slash')
            $(obj).find('span').addClass('fa-eye')
        }
    }

    function previewImage(input) {
        var file = input.files[0];
        var reader = new FileReader();

        reader.onload = function(e) {
            document.getElementById('imagePreview').src = e.target.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        }
    }

    function chnge_paid(obj) {
        var id = $(obj).data('id');
        console.log('id');
        $('#payment_agent_id').val(id);

    }
    $(document).ready(function() {
        var $withdrawInput = $('input[name="amount"]');

        $withdrawInput.on('input', function() {
            if (this.validity.rangeUnderflow) {
                this.setCustomValidity("Minimum Withdraw Limit is $10.");
            } else {
                this.setCustomValidity("");
            }
        });
    });

    // function show_withdraw_btn(obj) {
    //     var val = $(obj).val();
    //     if (val == 2) {
    //         $('#withdraw_btn').show();
    //     } else {
    //         $('#withdraw_btn').hide();
    //     }
    // }

    function click_file(obj) {
        $(obj).closest('div').find('.a_img').click();
    }
</script>
@endsection

@section('script')
<script>
    $(document).ready(function() {})

    function delete_row(id) {
        $.ajax({
            url: "{{ route('delete.agents') }}",
            type: 'POST',
            data: {
                id: id,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                location.reload();

            }
        });
    }

    function active_row(obj, id) {
        var active = $(obj).attr('data-show_active');
        var not_active = '';
        if (active == 1) {
            not_active = 2
        } else {
            not_active = 1
        }
        $.ajax({
            url: "{{ route('update.JSON.agents') }}",
            type: 'POST',
            data: {
                id: id,
                active: active,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $(obj).attr('data-show_active', not_active);
            }
        });
    }
    $(document).ready(function() {
        var $dropdown = $('#customDropdown');
        var $dropdownBtn = $('#dropdownBtn');
        var $dropdownContent = $dropdown.find('.dropdown-content');
        var $selectedValue = $('#selectedValue');
        if ($selectedValue.val() == 2) {
            var $option = $('div[data-value="2"]');
            var iconClass = $option.data('icon'); // Get the data-icon attribute
            var text = $.trim($option.text()); // Get the option's text and trim any extra spaces
            var value = $option.data('value'); // Get the data-value attribute

            // Update the button with the selected option
            $dropdownBtn.find('i:first').attr('class', iconClass); // Set the icon class
            $dropdownBtn.find('span').text(text); // Set the option's text

            // Update the hidden input with the selected value
            $selectedValue.val(value);
            $('#withdraw_btn').show();
        } else {
            var $option = $('div[data-value="1"]');
            var iconClass = $option.data('icon'); // Get the data-icon attribute
            var text = $.trim($option.text()); // Get the option's text and trim any extra spaces
            var value = $option.data('value'); // Get the data-value attribute

            // Update the button with the selected option
            $dropdownBtn.find('i:first').attr('class', iconClass); // Set the icon class
            $dropdownBtn.find('span').text(text); // Set the option's text

            // Update the hidden input with the selected value
            $selectedValue.val(value);
            $('#withdraw_btn').hide();
        }


        // Toggle the dropdown content
        $dropdownBtn.on('click', function() {
            $dropdownContent.toggle(); // Toggle the visibility of the dropdown content
        });

        // Select an option
        $dropdownContent.on('click', 'div[data-value]', function() {
            var $option = $(this);
            var iconClass = $option.data('icon'); // Get the data-icon attribute
            var text = $.trim($option.text()); // Get the option's text and trim any extra spaces
            var value = $option.data('value'); // Get the data-value attribute

            // Update the button with the selected option
            $dropdownBtn.find('i:first').attr('class', iconClass); // Set the icon class
            $dropdownBtn.find('span').text(text); // Set the option's text

            // Update the hidden input with the selected value
            $selectedValue.val(value);
            if (value == 2) {
                $('#withdraw_btn').show();
            } else {
                $('#withdraw_btn').hide();
            }
            // Hide the dropdown content
            $dropdownContent.hide();
        });

        // Hide dropdown if clicked outside
        $(document).on('click', function(event) {
            if (!$dropdown.is(event.target) && $dropdown.has(event.target).length === 0) {
                $dropdownContent.hide(); // Hide the dropdown if clicked outside
            }
        });
    });
</script>
@endsection