@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage_notification';
    @endphp
    <style>
        .error-message {
            color: #FF0000;
        }

        form .error-message {
            color: red;
            /* Set your desired color here */
        }

        form .input_class.error-message {
            color: #0e1726;
        }
    </style>

    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <a class="d-flex align-items-center justify-content-center pl-2"
                                href="{{ route('manage.notification') }}">
                                <img class="back-btn" src="{{ asset('public/assets/img/left-arrow.svg') }}">
                                <h6 class="card-title p-0">Add Details</h6>
                            </a>
                        </div>
                        <div class="col-md-8">

                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn h-10">
                        <div class="view-details Article">
                            <form id="send_notification_form">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="company-name" class="label">Notification Content</label>
                                            <input type="text" class="form-control" name="title">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="company-name" class="label">Description</label>
                                            <textarea type="text" class="form-control" name="description"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="company-name" class="label">Upload Image</label>
                                            <input type="file" class="form-control" name="image" accept="image/*">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="location" class="label">When should this message start
                                                sending:</label>
                                            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                                <input class="form-check-input" type="radio" name="user_type"
                                                    value="1" id="select-all-ids" />
                                                <label class="form-check-label" for="select-all-ids">Send to unsubscribed
                                                    users who are in their respective states</label><br>
                                                <div id="dropdown-1"
                                                    style="display: none; max-height: 200px; overflow-y: auto;">
                                                    @foreach ($state as $states)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="states[]"
                                                                value="{{ $states['id'] }}"
                                                                id="state-{{ $states['id'] }}" />
                                                            <label class="form-check-label"
                                                                for="state-{{ $states['id'] }}">{{ $states['name'] }}</label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <input class="form-check-input" type="radio" name="user_type"
                                                    id="select-popular-ids" value="2" /><br>
                                                <label class="form-check-label" for="select-popular-ids">Send to subscribed
                                                    users who are in their respective states</label><br>
                                                <div id="dropdown-2"
                                                    style="display: none; max-height: 200px; overflow-y: auto;">
                                                    @foreach ($state as $states)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="states[]"
                                                                value="{{ $states['id'] }}"
                                                                id="state-{{ $states['id'] }}" />
                                                            <label class="form-check-label"
                                                                for="state-{{ $states['id'] }}">{{ $states['name'] }}</label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-12">
                                        <button class="download-btn-custom mt-3 custom-width-10" type="submit"
                                            id="store_notification_btn">
                                            <span>Submit</span>
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('section_script')
    <script>
        $(document).ready(function() {
            // Validate the form
            $('#send_notification_form').validate({
                ignore: [],
                debug: false,
                rules: {
                    title: {
                        required: true
                    },
                    description: {
                        required: true
                    },
                    image: {
                        required: true
                    },
                    recipients: {
                        required: true
                    }
                },
                messages: {
                    title: {
                        required: 'Please enter this field'
                    },
                    description: {
                        required: 'Please enter this field'
                    },
                    image: {
                        required: 'Please upload an image file'
                    },
                    recipients: {
                        required: 'Please select at least one category'
                    }
                },
                errorClass: 'error-message',
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "user_type") {
                        error.insertAfter("#select-popular-ids").addClass('error-message');
                    } else {
                        error.insertAfter(element).addClass('error-message');
                    }
                },
                submitHandler: function(form) {
                    var formData = new FormData(form);
                    let base_url = url_path;
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: base_url + '/insert_notification',
                        type: 'POST',
                        data: formData,
                        beforeSend: function() {
                            $('#store_notification_btn').html('Please wait...');
                            $('#store_notification_btn').attr('disabled', true);
                        },
                        processData: false,
                        contentType: false,
                        success: function(result) {
                            if (result.status_code == 200) {
                                toastr.success('Data Added Successfully');
                                setTimeout(function() {
                                    window.location.href = base_url +
                                        "/manage-notification";
                                }, 2000);
                            } else if (result.status_code == 422) {
                                // Display validation errors using toastr
                                $.each(result.errors, function(key, value) {
                                    toastr.error(value);
                                    setTimeout(function() {
                                        window.location.href = base_url +
                                            "/manage-notification";
                                    }, 2000);
                                });
                            } else {
                                toastr.error('Something Went Wrong');
                                setTimeout(function() {
                                    window.location.href = base_url +
                                        "/manage-notification";
                                }, 2000);
                            }
                            $('#store_notification_btn').attr('disabled', false);
                            $('#store_notification_btn').text('Submit');
                        },
                    });
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function handleUserTypeChange() {
                var dropdown1 = document.getElementById('dropdown-1');
                var dropdown2 = document.getElementById('dropdown-2');

                dropdown1.style.display = this.value === '1' ? 'block' : 'none';
                dropdown2.style.display = this.value === '2' ? 'block' : 'none';
            }

            var userTypeRadios = document.getElementsByName('user_type');
            for (var i = 0; i < userTypeRadios.length; i++) {
                userTypeRadios[i].addEventListener('change', handleUserTypeChange);
            }

            var checkedRadio = document.querySelector('input[name="user_type"]:checked');
            if (checkedRadio) {
                handleUserTypeChange.call(checkedRadio);
            }
        });
    </script>
@endsection
