@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="{{ asset(mix('vendors/css/animate/animate.min.css')) }}">
    <link rel='stylesheet' href="{{ asset(mix('vendors/css/extensions/sweetalert2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-sweet-alerts.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('affiliate.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 border-bottom">
                            <div class="card-title">
                                Country Payout
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.offer.countryPayoutStore', $offer->id) }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="country_id">Country</label>
                                            <select class="form-control select2" name="country_id[]" multiple>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}">{{ $country->code }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="payout_type">Payout Type</label>
                                            <select class="form-control" name="payout_type">
                                                <option selected disabled>Select Payout Type</option>
                                                <option value="Fixed">Fixed</option>
                                                <option value="RevenueShare">RevenueShare</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="revenue">Revenue</label>
                                            <input type="text" class="form-control" name="revenue"
                                                placeholder="Advertiser Payout">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="payout">Payout</label>
                                            <input type="text" class="form-control" name="payout"
                                                placeholder="Affiliate Payout">
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-success mt-2">
                                    <i class="fa fa-plus-circle"></i>
                                    <span>Create</span>
                                </button>
                            </form>
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Country</th>
                                                <th>Payout Type</th>
                                                <th>Revenue</th>
                                                <th>Payout</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($countryPayouts as $countrypayout)
                                                <tr>
                                                    <td>{{ $countrypayout->country->code }}</td>
                                                    <td>{{ $countrypayout->payout_type }}</td>
                                                    <td>{{ $countrypayout->revenue }}</td>
                                                    <td>{{ $countrypayout->payout }}</td>
                                                    <td>
                                                        <a href="{{ route('admin.offer.countryPayoutDelete', $countrypayout) }}"
                                                            class="btn btn-sm btn-danger"
                                                            onclick="return confirm('are u sure to delete?')">
                                                            <i class="fa fa-trash"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <div class="card-title">
                                Custom Payout
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.offer.customPayoutStore', $offer) }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="affiliate_id">Affiliate ID</label>
                                            <select class="form-control select2" name="affiliate_id[]" multiple>
                                                @foreach ($affiliates as $affiliate)
                                                    <option value="{{ $affiliate->id }}">({{ $affiliate->id }})
                                                        {{ $affiliate->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="revenue">Revenue</label>
                                            <input type="text" class="form-control" name="revenue"
                                                placeholder="Advertiser Payout">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="payout">Payout</label>
                                            <input type="text" class="form-control" name="payout"
                                                placeholder="Affiliate Payout">
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-success mt-2">
                                    <i class="fa fa-plus-circle"></i>
                                    <span>Create</span>
                                </button>
                            </form>
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Affiliate</th>
                                                <th>Revenue</th>
                                                <th>Payout</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($offer->customPayouts as $payout)
                                                <tr>
                                                    <td>{{ $payout->affiliate->name }}</td>
                                                    <td>{{ $payout->revenue }}</td>
                                                    <td>{{ $payout->payout }}</td>
                                                    <td>
                                                        <a href="{{ route('admin.offer.customPayoutStoreDelete', $payout) }}"
                                                            class="btn btn-sm btn-danger"
                                                            onclick="return confirm('are u sure to delete?')">
                                                            <i class="fa fa-trash"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <!-- vendor files -->
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
    <script src="{{ asset('js/scripts/components/components-navs.js') }}"></script>
    <script>
        $('.select2').select2({
            placeholder: "Select a Option",
            allowClear: true
        });

        // const selectAll = document.querySelector('#selectAll'),
        //     checkboxList = document.querySelectorAll('[type="checkbox"]');
        // selectAll.addEventListener('change', t => {
        //     checkboxList.forEach(e => {
        //         e.checked = t.target.checked;
        //     });
        // });
    </script>
@endpush