@extends('layouts.backend.app')

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

@push('css')
    <link rel='stylesheet' href="{{ asset(mix('vendors/css/extensions/sweetalert2.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('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-12">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h4 class="card-title">Offer Permission</h4>
                        </div>
                        <div class="card-body pt-1">
                            <div class="row">
                                <div class="tab-content">
                                    <div class="tab-pane active">
                                        <form action="">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="notapprovedaffiliate">Not Approved Affiliate</label>
                                                        <select class="form-control" multiple id="notapprovedaffiliate">
                                                            @foreach ($notApprovedAffiliates as $notApprovedAffiliate)
                                                                <option value="{{ $notApprovedAffiliate->id }}">
                                                                    {{ $notApprovedAffiliate->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <button class="btn btn-success btn-sm mt-1"
                                                        id="notApprovedToApprovedBtn" type="button">
                                                        <i class="fa fa-check"></i>
                                                        <span>Approved</span>
                                                    </button>
                                                    <button class="btn btn-danger btn-sm mt-1" id="notApprovedToBlocked"
                                                        type="button">
                                                        <i class="fa fa-ban"></i>
                                                        <span>Blocked</span>
                                                    </button>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="approvedAffiliate">Approved Affiliate</label>
                                                        <select class="form-control" multiple id="approvedAffiliate">
                                                            @foreach ($approvedAffiliates as $approvedAffiliate)
                                                                <option value="{{ $approvedAffiliate->id }}">
                                                                    {{ $approvedAffiliate->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <button class="btn btn-success btn-sm mt-1" id="approvedToClien"
                                                        type="button">
                                                        <i class="fa fa-check"></i>
                                                        <span>Clean</span>
                                                    </button>
                                                    <button class="btn btn-danger btn-sm mt-1" id="approvedToBlock"
                                                        type="button">
                                                        <i class="fa fa-ban"></i>
                                                        <span>Blocked</span>
                                                    </button>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="blockedAffiliate">Blocked Affiliate</label>
                                                        <select class="form-control" multiple id="blockedAffiliate">
                                                            @foreach ($blockedAffiliates as $blockedAffiliat)
                                                                <option value="{{ $blockedAffiliat->id }}">
                                                                    {{ $blockedAffiliat->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <button class="btn btn-success btn-sm mt-1" id="blockedToClean"
                                                        type="button">
                                                        <i class="fa fa-check"></i>
                                                        <span>Clean</span>
                                                    </button>
                                                    <button class="btn btn-primary btn-sm mt-1" id="blockedToApproved"
                                                        type="button">
                                                        <i class="fa fa-check"></i>
                                                        <span>Approved</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
    <script>
        let approvedAffiliate = $('#approvedAffiliate');
        let notapprovedaffiliate = $('#notapprovedaffiliate');
        let blockedAffiliate = $('#blockedAffiliate');

        let notApprovedToApprovedBtn = $('#notApprovedToApprovedBtn');
        let notApprovedToBlocked = $('#notApprovedToBlocked');
        let approvedToClien = $('#approvedToClien');
        let approvedToBlock = $('#approvedToBlock');
        let blockedToApproved = $('#blockedToApproved');
        let blockedToClean = $('#blockedToClean');

        notApprovedToApprovedBtn.on('click', function(e) {
            e.preventDefault();
            const url = "{{ route('admin.offer.approved') }}";
            const status = "Approved";
            sendRequest(url, notapprovedaffiliate, approvedAffiliate, status);
        });
        notApprovedToBlocked.on('click', function(e) {
            e.preventDefault();
            const url = "{{ route('admin.offer.approved') }}";
            const status = "Blocked";
            sendRequest(url, notapprovedaffiliate, blockedAffiliate, status);
        });
        approvedToBlock.on('click', function(e) {
            e.preventDefault();
            const url = "{{ route('admin.offer.approved') }}";
            const status = "Blocked";
            sendRequest(url, approvedAffiliate, blockedAffiliate, status);
        });
        approvedToClien.on('click', function(e) {
            e.preventDefault();
            const url = "{{ route('admin.offer.approved') }}";
            const status = "Delete";
            sendRequest(url, approvedAffiliate, notapprovedaffiliate, status);
        });
        blockedToApproved.on('click', function(e) {
            e.preventDefault();
            const url = "{{ route('admin.offer.approved') }}";
            const status = "Approved";
            sendRequest(url, blockedAffiliate, approvedAffiliate, status);
        });
        blockedToClean.on('click', function(e) {
            e.preventDefault();
            const url = "{{ route('admin.offer.approved') }}";
            const status = "Delete";
            sendRequest(url, blockedAffiliate, notapprovedaffiliate, status);
        });

        function sendRequest(url, affiliate, append, status) {
            let selected = affiliate.val();
            if (selected != null) {
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        offer_id: "{{ $offer->id }}",
                        affiliate_id: selected,
                        status: status
                    },
                    success: function(data) {
                        if (data.status === "success") {
                            Swal.fire({
                                title: 'Success',
                                text: data.message,
                                icon: 'success',
                                showCancelButton: false,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'Ok'
                            })
                            if (data.affiliates != null) {
                                $.each(data.affiliates, function(index, value) {
                                    let option = affiliate.find('option[value="' + value.id + '"]');
                                    append.append(option);
                                    affiliate.find('option[value="' + value + '"]').remove();
                                });
                            }
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: data.message,
                                icon: 'error',
                                showCancelButton: false,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'Ok'
                            })
                        }
                    }
                })
            }
        }
    </script>
@endpush