@extends('layouts.backend.app')

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

@push('css')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.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="dashboard">
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                Asad Ali
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="users-edit">
        @include('admin.offer.topbar')
    </section>
    <div class="row">
        <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"><span class="text-muted"><strong>Advertiser Name</strong>:</span>
                                {{ $offer->advertiser->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>Traking URL </strong>:</span><a
                                    href="{{ $offer->offer_link }}">{{ $offer->offer_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 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>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h4 class="card-title">Tracking Link</h4>
                        </div>
                        <div class="card-body pt-1">
                            <div class="row">
                                <div class="tab-content">
                                    <div class="tab-pane active">
                                        <form action="">
                                            <div class="form-group mt-1">
                                                <label for="affiliate">Affiliate</label>
                                                <select name="affiliate" id="affiliate" class="form-control select2">
                                                    <option value="">Select Affiliate</option>
                                                    @foreach ($affiliates as $affiliate)
                                                        <option value="{{ $affiliate->id }}">({{ $affiliate->id }})
                                                            {{ $affiliate->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <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>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            Default Payout
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th>Goal Name</th>
                                            <th>Revenue</th>
                                            <th>Payout</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Default</td>
                                            <td>
                                                @if ($offer->payout_type == 'Fixed')
                                                    {{ $offer->revenue }}
                                                @else
                                                    {{ $offer->revenue }}%
                                                @endif
                                            </td>
                                            <td>
                                                @if ($offer->payout_type == 'Fixed')
                                                    {{ $offer->payout }}
                                                @else
                                                    {{ $offer->payout }}%
                                                @endif
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            Offer Image
                        </div>
                        <div class="card-body">
                            <form action="" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label for="avatar">Avatar</label>
                                    <input type="file" class="dropify"
                                        data-default-file="{{ $offer->image ? asset('uploads/offer/' . $offer->image) : '' }}" />
                                    @csrf
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@push('js')
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <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>
        $(document).ready(function() {
            $('.select2').select2();
        });

        // Dropify
        $('.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('id', {{ $offer->id }}); // Append all the additional data here
            formData.append('_token', _token);
            $.ajax({
                url: "{{ route('admin.offer.uploadImage') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    toastr.success('Offer Image Upload Success', 'Success');
                },
                error: function(response) {
                    let data = response.responseJSON;
                    if (data.errors.image) {
                        toastr.error(data.errors.image[0], 'Error');
                    }
                }
            });
        });


        const userField = document.getElementById('affiliate');
        const trackingField = document.getElementById('domain');
        const linkField = document.getElementById('offer_url')

        $('#affiliate').on('select2:select', function(e) {
            const data = e.params.data;
            if (data.id !== "") {
                if (trackingField.value !== "") {
                    linkField.value = trackingField.value + "/c?a=" + e.target.value + "&o=" +
                        "{{ $offer->id }}";
                }
            }

        });
        trackingField.addEventListener('change', e => {
            if (userField.value !== "") {
                linkField.value = e.target.value + "?/c=" + userField.value + "&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