@extends('layouts.backend.app')


@section('title', 'Account Settings')

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css"
        integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@section('content')
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Dashboard</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">

                            <li class="breadcrumb-item">
                                <a href="{{ route('affiliate.dashboard') }}">
                                    Account
                                </a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 ">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        Global Postback Url
                    </div>
                    <div class="card-body">
                        <form action="">
                            <div class="form-group">
                                <textarea name="postback_url" class="form-control" id="postback_url">{{ auth()->user()->postbackurl->postback_url ?? '' }}</textarea>
                            </div>
                            <div class="col-md-12 mt-2">
                                <button type="submit" id="update_postback_url_btn"
                                    class="btn btn-primary btn-sm">Update</button>
                            </div>
                            <br>
                            <input type="checkbox" id="show_paramitar">
                            <label for="show_paramitar"><strong>show/hide Peramitars</strong></label>
                            <br>
                            <div class="table mt-1">
                                <table class="table responsive" id="peramitar" style="display:none">
                                    <div
                                        style="
                                    background: #f1f1f1;
                                    padding: 10px;">
                                        The global postback will be fired every time you generate a lead. If you have
                                        defined custom postbacks on specific campaigns, you can choose to fire that one
                                        instead in the campaign settings.
                                    </div>
                                    <br>
                                    <thead>
                                        <tr>
                                            <th>Peramitar</th>
                                            <th>Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{offer_name}</td>
                                            <td>Get Offer Name This Params</td>
                                        </tr>
                                        <tr>
                                            <td>{country_code}</td>
                                            <td>Get Country Code This Params</td>
                                        </tr>
                                        <tr>
                                            <td>{s1}</td>
                                            <td>Value that a media partner can include in the click URL</td>
                                        </tr>
                                        <tr>
                                            <td>{s2}</td>
                                            <td>Another value that a media partner can include in the click URL</td>
                                        </tr>
                                        <tr>
                                            <td>{s3}</td>
                                            <td>Another value that a media partner can include in the click URL</td>
                                        </tr>
                                        <tr>
                                            <td>{s4}</td>
                                            <td>Another value that a media partner can include in the click URL</td>
                                        </tr>
                                        <tr>
                                            <td>{payout}</td>
                                            <td>Affilaite Conversion Payout</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"
        integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        let name = $('#name');
        let phone = $('#phone');
        let address = $('#address');
        let city = $('#city');
        let zip = $('#zip');
        let country_id = $('#country_id');
        let _token = $('input[name=_token]').val();
        let updateBtn = $('#update_btn');
        let form = $('#update_form');
        updateBtn.click(function(e) {
            e.preventDefault();
            // update btn loading icon
            updateBtn.html(
                '<i class="fa fa-spinner fa-spin"></i>Update'
            );
            updateBtn.attr('disabled', true);
            $.ajax({
                url: "{{ route('affiliate.account.update') }}",
                type: "POST",
                data: {
                    name: name.val(),
                    phone: phone.val(),
                    address: address.val(),
                    city: city.val(),
                    zip: zip.val(),
                    country_id: country_id.val(),
                    _token: _token
                },
                success: function(response) {
                    updateBtn.html('Update');
                    updateBtn.attr('disabled', false);
                    toastr.success(response.message, 'Success');
                },
                error: function(response) {
                    updateBtn.html('Update');
                    updateBtn.attr('disabled', false);
                    let erros = response.responseJSON.errors;
                    $.each(erros, function(key, value) {
                        toastr.error(value, 'Error');
                    });
                }
            });
        });
    </script>
    <script>
        let updatePasswordBtn = $('#update_password_btn');
        let current_password = $('#current_password');
        let password = $('#password');
        let password_confirmation = $('#password_confirmation');
        updatePasswordBtn.click(function(e) {
            e.preventDefault();
            // update btn loading icon
            updatePasswordBtn.html(
                '<i class="fa fa-spinner fa-spin"></i>Update'
            );
            updatePasswordBtn.attr('disabled', true);
            $.ajax({
                url: "{{ route('affiliate.account.updatePassword') }}",
                type: "POST",
                data: {
                    current_password: current_password.val(),
                    password: password.val(),
                    password_confirmation: password_confirmation.val(),
                    _token: _token
                },
                success: function(response) {
                    if (response.status == 'error') {
                        toastr.error(response.message, 'Error');
                        updatePasswordBtn.html('Update');
                        updatePasswordBtn.attr('disabled', false);
                        return;
                    }
                    updatePasswordBtn.html('Update');
                    updatePasswordBtn.attr('disabled', false);
                    toastr.success(response.message, 'Success');
                },
                error: function(response) {
                    updatePasswordBtn.html('Update');
                    updatePasswordBtn.attr('disabled', false);
                    let erros = response.responseJSON.errors;
                    // loop errors
                    $.each(erros, function(key, value) {
                        toastr.error(value, 'Error');
                    });
                }
            });
        });
    </script>
    <script>
        let update_postback_url_btn = $('#update_postback_url_btn');
        let postback_url = $('#postback_url');
        update_postback_url_btn.click(function(e) {
            e.preventDefault();
            // update btn loading icon
            update_postback_url_btn.html(
                '<i class="fa fa-spinner fa-spin"></i>Update'
            );
            update_postback_url_btn.attr('disabled', true);
            $.ajax({
                url: "{{ route('affiliate.account.postback.update') }}",
                type: "POST",
                data: {
                    postback_url: postback_url.val(),
                    _token: _token
                },
                success: function(response) {
                    update_postback_url_btn.html('Update');
                    update_postback_url_btn.attr('disabled', false);
                    toastr.success(response.message, 'Success');
                },
                error: function(response) {
                    update_postback_url_btn.html('Update');
                    update_postback_url_btn.attr('disabled', false);
                    let erros = response.responseJSON.errors;
                    // loop errors
                    $.each(erros, function(key, value) {
                        toastr.error(value, 'Error');
                    });
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.dropify').dropify();
        });
        //dropify upload ajax
        $('.dropify').on('change', function() {
            let _token = $('input[name=_token]').val();
            let image = $('.dropify')[0].files[0]; // Get the first file from the file input element
            let formData = new FormData();
            formData.append('image', image);
            formData.append('_token', _token);
            $.ajax({
                url: "{{ route('affiliate.account.imageUpload') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    toastr.success('Profile Image Upload Success', 'Success');
                },
                error: function(response) {
                    let data = response.responseJSON;
                    if (data.errors.image) {
                        toastr.error(data.errors.image[0], 'Error');
                    }
                }
            });
        });
    </script>
    <script>
        const showParamitar = $('#show_paramitar');
        const peramitar = $('#peramitar');

        showParamitar.on('click', function() {
            if (showParamitar.is(':checked')) {
                peramitar.show();
            } else {
                peramitar.hide();
            }
        });
    </script>
@endpush