@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 mt-5">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        Account Settings
                    </div>
                    <div class="card-body">
                        <form action="" id="update_form">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email" class="mt-1 mb-1">Email</label>
                                            <input type="email" name="email" class="form-control"
                                                value="{{ auth()->user()->email }}" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="skype" class="mt-1 mb-1">Skype</label>
                                            <input type="text" name="skype" class="form-control"
                                                value="{{ auth()->user()->skype }}" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="mt-1 mb-1">Name</label>
                                            <input type="text" name="name" id="name"
                                                class="form-control @error('name')
                                                is-invalid
                                            @enderror"
                                                value="{{ auth()->user()->name }}">
                                            @error('name')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="phone" class="mt-1 mb-1">Phone</label>
                                            <input type="text" name="phone" id="phone"
                                                class="form-control @error('phone')
                                                is-invalid
                                            @enderror"
                                                value="{{ auth()->user()->phone }}">
                                            @error('phone')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="address" class="mt-1 mb-1">Address</label>
                                            <input type="text" name="address" id="address"
                                                class="form-control @error('address')
                                                is-invalid
                                            @enderror"
                                                value="{{ auth()->user()->address }}">
                                            @error('address')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="city" class="mt-1 mb-1">City</label>
                                            <input type="text" name="city" id="city"
                                                class="form-control @error('city')
                                                is-invalid
                                            @enderror"
                                                value="{{ auth()->user()->city }}">
                                            @error('city')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="zip" class="mt-1 mb-1">Zip</label>
                                            <input type="text" name="zip" id="zip"
                                                class="form-control @error('zip')
                                                is-invalid
                                            @enderror"
                                                value="{{ auth()->user()->zip }}">
                                            @error('zip')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="country_id" class="mt-1 mb-1">Country</label>
                                            <select class="form-control select2" name="country_id" id="country_id">
                                                @foreach ($countries as $country)
                                                    <option
                                                        {{ auth()->user()->country_id == $country->id ? 'selected' : '' }}
                                                        value="{{ $country->id }}">{{ $country->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('country_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mt-2">
                                <button type="submit" id="update_btn" class="btn btn-primary btn-sm">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        Refer Link
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <textarea class="form-control">{{ config('app.url') . '/register?refer=' . auth()->user()->id }}</textarea>
                        </div>
                    </div>
                </div>
                <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 class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        PASSWORD
                    </div>
                    <div class="card-body">
                        <form action="">
                            <div class="form-group">
                                <label for="current_password" class="mt-1 mb-1">Current password
                                </label>
                                <input type="password" name="current_password" id="current_password"
                                    class="form-control">
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="password" class="mt-1 mb-1">Password</label>
                                        <input type="password" name="password" id="password" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="password_confirmation" class="mt-1 mb-1">Confirm Password</label>
                                        <input type="password" name="password_confirmation" id="password_confirmation"
                                            class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mt-2">
                                <button type="submit" id="update_password_btn"
                                    class="btn btn-primary btn-sm">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card" style="width: 80%;margin:0px auto">
                    <div class="card-body">
                        <input type="file" class="dropify"
                            data-default-file="{{ asset('uploads/affiliate/' . auth()->user()->image) }}" />
                    </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