@extends('layouts.backend.app')

@section('title', $offer->name)

@push('css')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
        integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous">
    </script>
@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') }}">
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                {{ $offer->name }}
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header" style="border-radius: 100%">
                            Offer Details
                        </div>
                        <div class="card-body border-collapse">
                            <span class="" style="float: right;">
                                <img src="{{ asset('uploads/offer/' . $offer->image) }}"
                                    class="img-fluid img-thumbnail izoom" width="150"
                                    style="max-width: 150px;max-height: 150px;min-width: 85px;min-height: 85px;">
                            </span>
                            <p></p>
                            <p class="card-text"><span class="text-muted"><strong>Offer Name</strong>:</span>
                                {{ $offer->name }} </p>
                            <p class="card-text mt-1"><span class="text-muted"><strong>Preview URL </strong>:</span><a
                                    href="{{ $offer->preview_link }}">{{ $offer->preview_link }}</a></p>
                            <p class="card-text mt-1"><span class="text-muted"><strong>Category
                                        Name </strong>:</span>{{ $offer->category->name ?? '' }}</p>
                            <p class="card-text mt-1"><span class="text-muted"><strong>Expire Date
                                        Name </strong>:</span>{{ $offer->expiration_date }}</p>
                            <p class="card-text mt-1"><span class="text-muted"><strong>Discription
                                    </strong>:</span>{!! $offer->description !!}</p>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            Goal and Payout
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th>Goal Name</th>
                                            <th>Payout</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Default</td>
                                            <td>
                                                {!! $offer->payout !!}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card mb-4 shadow-lg border-left-dark">
                        <div class="card-header with-border">
                            <h6 class="m-0 text-primary font-weight-bold">Tracking Link</h6>

                        </div>
                        <div class="card-body">
                            <div class="tab-pane active">
                                @if ($offer->status == 'RequestApproved')
                                    @php
                                        $offerPermission = \App\Models\OfferPermission::where('affiliate_id', auth()->user()->id)
                                            ->where('offer_id', $offer->id)
                                            ->first();
                                    @endphp
                                    @if (!$offerPermission)
                                        <form action="{{ route('affiliate.offer.application', $offer) }}" method="POST">
                                            @csrf
                                            <div class="form-group">
                                                <label for="application">Application</label>
                                                <textarea name="application" id="application" class="form-control"></textarea>
                                            </div>
                                            <button class="btn btn-sm btn-success mt-2"> <i
                                                    class="fa fa-refresh"></i>Submit</button>
                                        </form>
                                    @elseif($offerPermission->status !== 'Approved')
                                        <form>
                                            <div class="form-group">
                                                <label for="application">Application</label>
                                                <textarea name="application" id="application" class="form-control">Your application is {{ $offerPermission->status }}</textarea>
                                            </div>
                                        </form>
                                    @elseif($offerPermission->status === 'Approved')
                                        <form>
                                            <div class="form-group mt-1 mb-1">
                                                <label for="domain">Domain</label>
                                                <select name="domain" id="domain" class="form-control">
                                                    <option value="">Select Domain</option>
                                                    @foreach ($domains as $domain)
                                                        <option selected value="{{ $domain->domain }}">
                                                            {{ $domain->domain }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group mt-1 mb-1">
                                                <label for="offer_url">Promotional Link</label>
                                                <textarea class="form-control" id="offer_url"></textarea>
                                            </div>
                                            <div class="row" id="paramBody">
                                                @for ($i = 1; $i <= 4; $i++)
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="affiliate">S{{ $i }}</label>
                                                            <input name="s{{ $i }}" id="offer_url"
                                                                rows="2" class="form-control sub_field">
                                                        </div>
                                                    </div>
                                                @endfor
                                                <div class="col-md-6 mt-2">
                                                    <div class="form-actions">
                                                        <button id="update_link" class="btn btn-sm btn-success"> <i
                                                                class="fa fa-refresh"></i> Update</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    @endif
                                @else
                                    <form action="">
                                        <div class="form-group mt-1 mb-1">
                                            <label for="domain">Domain</label>
                                            <select name="domain" id="domain" class="form-control">
                                                <option value="">Select Domain</option>
                                                @foreach ($domains as $domain)
                                                    <option selected value="{{ $domain->domain }}">
                                                        {{ $domain->domain }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mt-1 mb-1">
                                            <label for="offer_url">Promotional Link</label>
                                            <textarea class="form-control" id="offer_url"></textarea>
                                        </div>
                                        <div class="row" id="paramBody">
                                            @for ($i = 1; $i <= 8; $i++)
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="affiliate">S{{ $i }}</label>
                                                        <input name="s{{ $i }}" id="offer_url" rows="2"
                                                            class="form-control sub_field">
                                                    </div>
                                                </div>
                                            @endfor
                                            <div class="col-md-6 mt-2">
                                                <div class="form-actions">
                                                    <button id="update_link" class="btn btn-sm btn-success"> <i
                                                            class="fa fa-refresh"></i> Update</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="card mb-4 shadow-lg border-left-dark">
                        <div class="card-header with-border">
                            <h6 class="m-0 text-primary font-weight-bold">Targeting</h6>

                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <p class="card-text"><span class="text-muted">Country:</span>

                                @if (!$offer->countries->isEmpty())
                                    @foreach ($offer->countries as $country)
                                        @php
                                            $country_code = strtolower($country->code);
                                        @endphp
                                        <i class="flag-icon flag-icon-{{ $country_code }}"></i> {{ $country->name }}
                                    @endforeach
                                @else
                                    All
                                @endif
                            </p>
                            <p class="card-text"><span class="text-muted">Device:</span>

                                @if (!$offer->devices->isEmpty())
                                    @foreach ($offer->devices as $device)
                                        <i class="fas fa-{{ $device->name }} fa-lg" style="color:rgb(0, 0, 0)"></i>
                                    @endforeach
                                @else
                                    <p class="card-text"><span class="text-muted">Browser:</span>
                                        All
                                    </p>
                                @endif
                            </p>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <div class="card mb-4 shadow-lg border-left-dark ">
                        <div class="card-header with-border">
                            <h6 class="m-0 text-primary font-weight-bold">Pixel / Postback</h6>
                            <div class="float-right" style="float:right;">
                                <!-- Button trigger modal -->
                                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addPostback">Add
                                    Postback</button>
                                <!-- Modal -->
                                <div class="modal fade" id="addPostback" tabindex="-1" role="dialog"
                                    aria-labelledby="addPostback" 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="localpostback">Add Local Postback</h5>
                                            </div>
                                            <div class="modal-body">
                                                <form action="{{ route('affiliate.offer.postbackStore') }}"
                                                    method="POST">
                                                    @csrf
                                                    <input type="hidden" name="offer_id" value="{{ $offer->id }}">
                                                    <br>
                                                    <small>Note : You can replace params with your affiliate postback url.
                                                        Be sure you replace correct param otherwise your affiliate postback
                                                        will not be posted.
                                                        <br>
                                                        <br>
                                                        This postback will work local only this offer need more
                                                        info postback contact your affiliate manager !
                                                        !</small>
                                                    <code>
                                                        <br>
                                                        <br>
                                                        send click id : {s3}
                                                        <br>
                                                        <br>
                                                        send your affiliate id : {s1}
                                                        <br>
                                                        <br>
                                                        get payout in cents : {payout}
                                                    </code>
                                                    <div class="form-group mt-2">
                                                        <label for="postback_url">Postback Url</label>
                                                        <textarea class="form-control" id="url" name="url"></textarea>
                                                        <div style="margin-top: 10px">
                                                            <span onclick="changeLink('{country_code}')"
                                                                class="btn btn-sm btn-primary mb-1 mt-1">{country_code}</span>
                                                            <span onclick="changeLink('{offer_name}')"
                                                                class="btn btn-sm btn-primary mb-1 mt-1">{offer_name}</span>
                                                            <span onclick="changeLink('{ref_id}')"
                                                                class="btn btn-sm btn-primary mb-1 mt-1">{ref_id}</span>
                                                            <span onclick="changeLink('{s1}')"
                                                                class="btn btn-sm btn-primary">{s1}</span>
                                                            <span onclick="changeLink('{s2}')"
                                                                class="btn btn-sm btn-primary">{s2}</span>
                                                            <span onclick="changeLink('{s3}')"
                                                                class="btn btn-sm btn-primary">{s3}</span>
                                                            <span onclick="changeLink('{s4}')"
                                                                class="btn btn-sm btn-primary">{s4}</span>
                                                            <span onclick="changeLink('{payout}')"
                                                                class="btn btn-sm btn-primary">{payout}</span>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-primary">Save
                                                            changes</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-strip table-sm">
                                    <thead>
                                        <tr>
                                            <th>Offer name</th>
                                            <th>Postback URL</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $postback = App\Models\LocalPostback::where('offer_id', $offer->id)
                                                ->where('affiliate_id', Auth::id())
                                                ->first();
                                        @endphp
                                        <tr>
                                            @if ($postback)
                                                <td>{{ $postback->offer->name }}</td>
                                                <td>{{ $postback->postback_url }}</td>
                                                <td>
                                                    Approved
                                                </td>
                                                <td>
                                                    <a href="{{ route('affiliate.offer.postbackDelete', $postback->id) }}"
                                                        class="btn btn-danger btn-sm"
                                                        onclick="return confirm('are u sure?')">
                                                        <i class="fa fa-trash"></i>
                                                    </a>
                                                </td>
                                            @else
                                                <td colspan="4"
                                                    style="text-align: center; font-weight: 700; font-size: 1.85rem">No
                                                    Postback Found !
                                                </td>
                                            @endif
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@push('js')
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });

        function insertAtCursor(myField, myValue) {
            //IE support
            if (document.selection) {
                myField.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
            }
            //MOZILLA and others
            else if (myField.selectionStart || myField.selectionStart == '0') {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                myField.value = myField.value.substring(0, startPos) +
                    myValue +
                    myField.value.substring(endPos, myField.value.length);
            }
        }

        function changeLink(key) {
            const trackingBox = document.getElementById('url');
            const trackingLink = document.getElementById('url').value;
            if (trackingLink != "") {
                insertAtCursor(trackingBox, key)
            }
        }


        const userField = '{{ auth()->user()->id }}';
        const trackingField = document.getElementById('domain');
        const linkField = document.getElementById('offer_url')


        linkField.value = trackingField.value + "/c?a=" + userField + "&o=" +
            "{{ $offer->id }}";

        trackingField.addEventListener('change', e => {
            if (userField.value !== "") {
                linkField.value = e.target.value + "/c?a=" + userField + "&o=" +
                    "{{ $offer->id }}";
            }
        })
        document.getElementById('update_link').addEventListener('click', e => {
            e.preventDefault();
            const subField = document.getElementsByClassName('sub_field');
            if (linkField.value !== "") {
                const url = new URL(linkField.value);
                for (let i = 0; i < subField.length; i++) {
                    if (linkField.value !== "") {
                        const subKey = "s" + (i + 1);
                        if (subField[i].value != "") {
                            url.searchParams.set(subKey, subField[i].value);
                        } else {
                            url.searchParams.delete(subKey);
                        }
                    }

                }
                linkField.value = url;
            } else {
                return;
            }
        })
    </script>
@endpush