@extends('layouts.backend.app')

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

@push('css')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@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('manager.dashboard') }}">
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                Asad Ali
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="users-edit">
        @include('manager.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 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>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h4 class="card-title">Offer Information</h4>
                        </div>
                        <div class="card-body pt-1">
                            <div class="row">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="logs" aria-labelledby="account-tab"
                                        role="tabpanel">
                                        <div class="table-responsive">
                                            <table class="table table-hover table-bordered mb-0">
                                                <thead class="table-primary">
                                                    <tr>
                                                        <th scope="col">Name</th>
                                                        <th scope="col">Advertiser</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>{{ $offer->name }}</td>
                                                        <td>{{ $offer->advertiser->name }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <table class="table table-hover table-bordered mb-0 mt-1">
                                                <thead class="table-primary">
                                                    <tr>
                                                        <th scope="col">Category</th>
                                                        <th scope="col">Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>{{ $offer->category->name }}</td>
                                                        <td>{{ $offer->status }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <table class="table table-hover table-bordered mb-0 mt-1">
                                                <thead class="table-primary">
                                                    <tr>
                                                        <th scope="col">Countries</th>
                                                        <th scope="col">Devices</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            @if (!empty($offer->countries))
                                                                @foreach ($offer->countries as $country)
                                                                    <span
                                                                        class="badge bg-light-primary">{{ $country->code }}</span>
                                                                @endforeach
                                                            @else
                                                                <span class="badge bg-light-danger">All Country</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if (!empty($offer->devices))
                                                                @foreach ($offer->devices as $device)
                                                                    <span
                                                                        class="badge bg-light-primary">{{ $device->name }}</span>
                                                                @endforeach
                                                            @else
                                                                <span class="badge bg-light-danger">All Device</span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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();
        });


        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