@extends('admin.layouts.master')
@section('breadcrumb')
    <section class="content-header">
        <h1>Send Store Owner Email</h1>
    </section>
@stop
@section('content')
    <div class="container-fluid my-style">
        <form action="{{ route('admin.stores.Send_email') }}" method="POST" id="form-settings">
            @csrf
        <div class="wraper">
            <div class="content-div">
                <div class="form-group row">
                    <label for="stores" class="col-sm-2 col-form-label col-form-label-sm lable-style">Select Stores</label>
                    <div class="col-sm-10">
                        <select multiple="multiple" id="stores" name="stores[]" required
                                class="form-control form-control-sm">
                            <option value="all">All Stores</option>
                        </select>
                        <span class="text-danger">@error('stores') {{ $message }} @enderror</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <section class="content-header">
                            <h1><strong>Store Plan</strong></h1>
                        </section>
                        <label><input type="checkbox" name="plan_type[]" value="basic" class="plan-checkbox"> Basic Plan</label><br>
                        <label><input type="checkbox" name="plan_type[]" value="elite" class="plan-checkbox"> Elite Plan</label><br>
                        <label><input type="checkbox" name="plan_type[]" value="professional" class="plan-checkbox"> Professional Plan</label><br>
                    </div>
                    <div class="col-md-6">
                        <section class="content-header">
                            <h1><strong>Status</strong></h1>
                        </section>
                        {{--                        <label class="col-form-label col-form-label-sm lable-style"><strong>Active Stores</strong></label><br>--}}

                        <label><input type="checkbox" name="send_option[]" value="true" class="status-checkbox"> Active Stores </label><br>
                        <label><input type="checkbox" name="send_option[]" value="false" class="status-checkbox"> InActive Stores </label>
                    </div>
                </div>
                <br>

                <div class="form-group row">
                    <label for="subject" class="col-sm-2 col-form-label col-form-label-sm lable-style">Subject</label>
                    <div class="col-sm-10">
                        <input type="text" id="subject" name="subject" class="form-control form-control-sm" required>
                        <span class="text-danger">@error('subject') {{ $message }} @enderror</span>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="body" class="col-sm-2 col-form-label col-form-label-sm lable-style">Message</label>
                    <div class="col-sm-10">
                        <textarea id="body" name="body" class="form-control form-control-sm" style="height: 200px" required></textarea>
                        <span class="text-danger">@error('body') {{ $message }} @enderror</span>
                    </div>
                </div>
                <!-- custom button-->
                <div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
                    <label>
                        <input type="checkbox" id="custom_link_checkbox"> Add button with link at Email Bottom
                    </label>
                    <div id="custom_link_fields" style="display: none; flex-direction: column; gap: 10px; padding-left: 5%;">
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <label for="custom_name">Name:</label>
                            <input type="text" name="custom_name" id="custom_name" style="width: 250px;">
                        </div>

                        <div style="display: flex; align-items: center; gap: 10px;">
                            <label for="custom_link">Link:</label>
                            <input type="url" name="custom_link" id="custom_link" style="width: 300px; margin-left: 10px;">
                        </div>
                    </div>
                </div>
                <div class="sub-btn">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
        </form>
    </div>
@stop
@section('last_scripts')
    <script>
        // oric_Validation_application("form-settings");
        $('#stores').select2({
            placeholder: "Select Stores",
            ajax: {
                url: "{{ route('stores_select2_format') }}",
                minimumInputLength: 1,
                cache: true,
                data: function (params) {
                    var query = {
                        search: params.term || '',
                        page: params.page || 1
                    }
                    return query;
                },
                processResults: function (data, params) {
                    var allStoresOption = [{ id: 'all', text: 'All Stores' }];
                    return {
                        results: allStoresOption.concat(data.results),
                        pagination: data.pagination
                    };
                }
            },
            templateResult: function (data) {
                return data.text;
            },
            templateSelection: function (data) {
                return data.text;
            }
        });
        document.addEventListener('DOMContentLoaded', function () {
            const planCheckboxes = document.querySelectorAll('.plan-checkbox');
            const activeStoresRadio = document.querySelectorAll('.status-checkbox');
            const storesDropdown = document.getElementById('stores');
            function toggleCheckboxes(checkboxes, disable, excludeCheckbox = null) {
                checkboxes.forEach(cb => {
                    if (cb !== excludeCheckbox) {
                        cb.disabled = disable;
                    }
                });
            }

            planCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const anyChecked = Array.from(planCheckboxes).some(cb => cb.checked);
                    storesDropdown.disabled = anyChecked;
                    toggleCheckboxes(activeStoresRadio, anyChecked);
                });
            });
            activeStoresRadio.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const anyChecked = Array.from(activeStoresRadio).some(cb => cb.checked);
                    storesDropdown.disabled = anyChecked;
                    toggleCheckboxes(planCheckboxes, anyChecked);
                    toggleCheckboxes(activeStoresRadio, anyChecked, checkbox);
                });
            });
        });
        document.getElementById('custom_link_checkbox').addEventListener('change', function () {
            const fields = document.getElementById('custom_link_fields');
            fields.style.display = this.checked ? 'flex' : 'none';
        });
    </script>
@stop