@extends('layouts.backend.app')


@section('title', 'Mass Mail')

@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="#">
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                Mass Mail Services
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        Main Sending Information
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.mass-mail.store') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="status">Status</label>
                                <select name="status" id="status" class="form-control mt-1 mb-1">
                                    <option selected disabled>Select Status</option>
                                    <option {{ request('affiliate_status') == 'Approved' ? 'selected' : '' }}
                                        value="Approved">
                                        Approved</option>
                                    <option {{ request('affiliate_status') == 'Pending' ? 'selected' : '' }}
                                        value="Pending">
                                        Pending</option>
                                    <option {{ request('affiliate_status') == 'Suspend' ? 'selected' : '' }}
                                        value="Suspend">Suspend
                                    </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="affiliate_id">Affiliate</label>
                                <select name="affiliate_id[]" id="affiliate_id" class="form-control mt-1 mb-1 select2"
                                    multiple>
                                    <option value="all">All</option>
                                    @foreach ($affiliates as $affiliate)
                                        <option value="{{ $affiliate->id }}">({{ $affiliate->id }}) {{ $affiliate->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="subject">Subject</label>
                                <input type="text" name="subject" id="subject" class="form-control mt-1 mb-1"
                                    value="">
                            </div>
                            <div class="form-group">
                                <label for="description" class="mb-1">Content</label>
                                @include('admin.includes.editor', [
                                    'description' => 'description',
                                ])
                                <textarea name="body" style="display:none" id="hiddenArea"></textarea>
                            </div>
                            <button class="btn btn-success mt-2">
                                <i class="fa fa-paper-plane"></i>
                                <span>Send</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        Available Variables
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <ul>
                                    <li><strong>{name}</strong> - User Name</li>
                                    <li><strong>{user_type}</strong> - User Type</li>
                                    <li><strong>{network_name}</strong> - Network Name</li>
                                    <li><strong>{email}</strong> - User Email</li>
                                    <li><strong>{password}</strong> - User Password</li>
                                    <li><strong>{data}</strong> - Date</li>
                                    <li><strong>{offer_name}</strong> - Offer Name</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script>
        let status = $('#status');
        status.on('change', function() {
            selectMethod($(this).val())
        })

        function selectMethod(status) {
            const route = '{{ route('admin.mass-mail.index') }}'
            window.location.href = `${route}/?affiliate_status=${status}`
        }
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: 'Select Affiliate',
                allowClear: true,
            });
        });
        $('#affiliate_id').on('select2:select', function(e) {
            if (e.params.data.id === 'all') {
                const allAffiliate = [];
                const affiliateOptions = document.querySelectorAll('#affiliate_id option');
                affiliateOptions.forEach(function(option) {
                    if (option.value !== 'all') {
                        allAffiliate.push(option.value);
                    }
                });
                $('#affiliate_id').val(allAffiliate).trigger('change');
            }
        });
    </script>
@endpush