@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-4">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <div class="card-title">
                                Cap
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.offer.capStore', $offer->id) }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="affiliate_id">Affiliate <code>Optional</code></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-6">
                                        <div class="form-group">
                                            <label for="cap">Cap</label>
                                            <input type="number" name="cap" class="form-control">
                                        </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>Cap</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($offer->caps as $cap)
                                                <tr>
                                                    <td>{{ $cap->affiliate->name ?? 'Global' }}</td>
                                                    <td>{{ $cap->cap }}</td>
                                                    <td>
                                                        <a href="{{ route('admin.offer.capDelete', $cap) }}"
                                                            class="btn btn-danger btn-sm"
                                                            onclick="return confirm('are u sure to delete cap?')">
                                                            <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">
                                Optimize
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.offer.optimizeStore', $offer) }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="affiliate_id">Affiliate <code>Optional</code></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-6">
                                        <div class="form-group">
                                            <label for="optimize_value">Optimize Value</label>
                                            <select class="form-control select2" name="optimize_value" id="optimize_value"
                                                required>
                                                <option selected disabled>Select Value</option>
                                                <option value="1">10 %</option>
                                                <option value="2">20 %</option>
                                                <option value="3">30 %</option>
                                                <option value="4">40 %</option>
                                                <option value="5">50 %</option>
                                            </select>
                                        </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>Optimize Value</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($offer->optimizes as $optimize)
                                                <tr>
                                                    <td>{{ $optimize->affiliate->name ?? 'Global' }}</td>
                                                    <td>{{ $optimize->optimize }}0%</td>
                                                    <td>
                                                        <a href="{{ route('admin.offer.optimizeDelete', $optimize) }}"
                                                            class="btn btn-danger btn-sm"
                                                            onclick="return confirm('are u sure to delete optimize?')">
                                                            <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