@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage_cms';
    @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-12 left d-flex align-items-center justify-content-between" style="gap: 15px;">
                            <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">Edit Notification</h6>
                            </a>
                        </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 p-0">
                        <div class="view-details">
                            <div class="simple-tab">
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                                        aria-labelledby="home-tab" tabindex="0">
                                        <form method="POST" id="editNotificationForm" class="form py-5 pb-0"
                                            action="javascript:void(0)" enctype="multipart/form-data">
                                            @csrf
                                            <div class="row">

                                                <div class="col-md-6">
                                                    <input type="hidden" name="id" id="id"
                                                        value="{{ $edit_notification->id }}" />

                                                    <div class="form-group">
                                                        <label for="company-name" class="label">Notification Title</label>
                                                        <input type="text" class="form-control" id="type"
                                                            name="type" value="{{ $edit_notification->type }}" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">

                                                    <div class="form-group">
                                                        <label for="description">Description</label>
                                                        <textarea class="form-control" id="description" name="description" rows="3" required>{{ $edit_notification->description }}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group ">
                                                        <label for="company-name" class="label">Image</label>
                                                        <input type="file" accept="image/*" class="form-control"
                                                            name="image" id="imageInputNormal">
                                                        <div id="imageInputPreviewNormal" style="width: 30%;">
                                                            <img src="{{ $edit_notification->image }}" alt="Image Preview"
                                                                style="width: 40%;">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="delivery_schedule">Delivery Schedule</label>
                                                        <input type="datetime-local" class="form-control"
                                                            id="delivery_schedule" name="delivery_schedule"
                                                            min="{{ date('Y-m-d\TH:i') }}"
                                                            value="{{ \Carbon\Carbon::parse($edit_notification->delivery_schedule)->format('Y-m-d\TH:i') }}"
                                                            required>
                                                    </div>
                                                </div>
                                                @php
                                                    $stateIds = json_decode($edit_notification->state_ids, true);
                                                    if (!is_array($stateIds)) {
                                                        $stateIds = [];
                                                    }
                                                @endphp
                                                <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">
                                                            <!-- Radio Button 1 -->
                                                            <input class="form-check-input" type="radio" name="user_type"
                                                                value="1" id="select-all-ids-edit"
                                                                {{ $edit_notification->user_type == 1 ? 'checked' : '' }} />
                                                            <label class="form-check-label" for="select-all-ids-edit">Send
                                                                to subscribed users who are in their respective
                                                                states</label><br>
                                                            <div id="dropdown-1-edit"
                                                                class="dropdown-container state-group-1"
                                                                style="display: {{ $edit_notification->user_type == 1 ? 'block' : 'none' }}; max-height: 200px; overflow-y: auto;">
                                                                <div class="form-check">
                                                                    <input class="form-check-input select-all-checkbox"
                                                                        type="checkbox" id="select-all-1-edit"
                                                                        data-group="1" />
                                                                    <label class="form-check-label"
                                                                        for="select-all-1-edit">Select All States</label>
                                                                </div>
                                                                @foreach ($states as $state)
                                                                    <div class="form-check">
                                                                        <input
                                                                            class="form-check-input state-checkbox state-group-1-checkbox"
                                                                            type="checkbox" name="state_ids[]"
                                                                            value="{{ $state->id }}"
                                                                            id="state-1-{{ $state->id }}"
                                                                            {{ in_array($state->id, $stateIds) ? 'checked' : '' }} />
                                                                        <label class="form-check-label"
                                                                            for="state-1-{{ $state->id }}">{{ $state->name }}</label>
                                                                    </div>
                                                                @endforeach
                                                            </div>

                                                            <!-- Radio Button 2 -->
                                                            <input class="form-check-input" type="radio"
                                                                name="user_type" id="select-popular-ids-edit"
                                                                value="2"
                                                                {{ $edit_notification->user_type == 2 ? 'checked' : '' }} />
                                                            <label class="form-check-label"
                                                                for="select-popular-ids-edit">Send to unsubscribed users
                                                                who are in their respective states</label><br>
                                                            <div id="dropdown-2-edit"
                                                                class="dropdown-container state-group-2"
                                                                style="display: {{ $edit_notification->user_type == 2 ? 'block' : 'none' }}; max-height: 200px; overflow-y: auto;">
                                                                <div class="form-check">
                                                                    <input class="form-check-input select-all-checkbox"
                                                                        type="checkbox" id="select-all-2-edit"
                                                                        data-group="2" />
                                                                    <label class="form-check-label"
                                                                        for="select-all-2-edit">Select All States</label>
                                                                </div>
                                                                @foreach ($states as $state)
                                                                    <div class="form-check">
                                                                        <input
                                                                            class="form-check-input state-checkbox state-group-2-checkbox"
                                                                            type="checkbox" name="state_ids[]"
                                                                            value="{{ $state->id }}"
                                                                            id="state-2-{{ $state->id }}"
                                                                            {{ in_array($state->id, $stateIds) ? 'checked' : '' }} />
                                                                        <label class="form-check-label"
                                                                            for="state-2-{{ $state->id }}">{{ $state->name }}</label>
                                                                    </div>
                                                                @endforeach
                                                            </div>

                                                            <!-- Radio Button 3 -->
                                                            <input class="form-check-input" type="radio"
                                                                name="user_type" id="select-ids-edit" value="3"
                                                                {{ $edit_notification->user_type == 3 ? 'checked' : '' }} />
                                                            <label class="form-check-label" for="select-ids-edit">Send to
                                                                subscribed and unsubscribed users who are in their
                                                                respective states</label><br>
                                                            <div id="dropdown-3-edit"
                                                                class="dropdown-container state-group-3"
                                                                style="display: {{ $edit_notification->user_type == 3 ? 'block' : 'none' }}; max-height: 200px; overflow-y: auto;">
                                                                <div class="form-check">
                                                                    <input class="form-check-input select-all-checkbox"
                                                                        type="checkbox" id="select-all-3-edit"
                                                                        data-group="3" />
                                                                    <label class="form-check-label"
                                                                        for="select-all-3-edit">Select All States</label>
                                                                </div>
                                                                @foreach ($states as $state)
                                                                    <div class="form-check">
                                                                        <input
                                                                            class="form-check-input state-checkbox state-group-3-checkbox"
                                                                            type="checkbox" name="state_ids[]"
                                                                            value="{{ $state->id }}"
                                                                            id="state-3-{{ $state->id }}"
                                                                            {{ in_array($state->id, $stateIds) ? 'checked' : '' }} />
                                                                        <label class="form-check-label"
                                                                            for="state-3-{{ $state->id }}">{{ $state->name }}</label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>



                                            </div>
                                            <button button class="download-btn-custom mt-3 custom-width-10"
                                                id="update_notification">Update
                                                Notification</button>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('section_script')
    <script>
        $(document).ready(function() {
            $('#editNotificationForm').validate({
                ignore: [],
                debug: false,
                rules: {
                    type: {
                        required: true
                    },
                    description: {
                        required: true
                    },
                    {{-- image: {
                        extension: "jpg|jpeg|png|gif"
                    }, --}}
                    delivery_schedule: {
                        required: true,
                    }
                },
                messages: {
                    type: {
                        required: 'Please enter the notification title'
                    },
                    description: {
                        required: 'Please enter the description'
                    },
                    {{-- image: {
                        extension: 'Please upload a valid image file (jpg, jpeg, png, gif)'
                    }, --}}
                    delivery_schedule: {
                        required: 'Please select a delivery schedule',
                    }
                },
                errorClass: 'error-message',
                submitHandler: function(form) {
                    var formData = new FormData(form);

                    $('#update_notification').text('Please wait...');
                    $('#update_notification').attr('disabled', true);

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        url: "{{ route('manage_update_notifications') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(result) {
                            if (result.status_code == 200) {
                                toastr.success('Notification Updated Successfully');
                                setTimeout(function() {
                                    window.location.href =
                                        "{{ route('manage.notification') }}";
                                }, 2000);
                            } else {
                                toastr.error('Something Went Wrong');
                                setTimeout(function() {
                                    window.location.href =
                                        "{{ route('manage.notification') }}";
                                }, 2000);
                            }
                            $('#update_notification').attr('disabled', false);
                            $('#update_notification').text('Submit');
                        },
                        error: function(xhr) {
                            toastr.error('An error occurred: ' + xhr.responseText);
                            $('#update_notification').attr('disabled', false);
                            $('#update_notification').text('Submit');
                        }
                    });
                }
            });
        });
    </script>
    <script>
 $(document).ready(function() {
    $('input[name="user_type"]').change(function() {
        var selectedValue = $(this).val();

        $('.dropdown-container').hide();

        // Disable all checkboxes
        $('.dropdown-container input[type="checkbox"]').prop('disabled', true);

        // Enable and show the checkboxes for the selected radio button
        $('#dropdown-' + selectedValue + '-edit').show();
        $('#dropdown-' + selectedValue + '-edit input[type="checkbox"]').prop('disabled', false);
    });

    // Trigger the change event on page load to set the initial state
    $('input[name="user_type"]:checked').trigger('change');

    // Select All functionality
    $('.select-all-checkbox').change(function() {
        var groupNumber = $(this).data('group');
        var isChecked = $(this).is(':checked');
        $('.state-group-' + groupNumber + '-checkbox').prop('checked', isChecked);
    });

    // Check if all checkboxes are checked when loading the form
    $('.select-all-checkbox').each(function() {
        var groupNumber = $(this).data('group');
        var allChecked = $('.state-group-' + groupNumber + '-checkbox').length === $('.state-group-' + groupNumber + '-checkbox:checked').length;
        $(this).prop('checked', allChecked);
    });

    // Update "Select All" checkbox when any state checkbox is changed
    $('.state-checkbox').change(function() {
        var groupNumber = $(this).closest('.dropdown-container').find('.select-all-checkbox').data('group');
        var allChecked = $('.state-group-' + groupNumber + '-checkbox').length === $('.state-group-' + groupNumber + '-checkbox:checked').length;
        $('#select-all-' + groupNumber + '-edit').prop('checked', allChecked);
    });
});

    </script>
    <script>
       const imageInputEdit = document.getElementById('imageInputNormal');
        const imagePreviewEdit = document.getElementById('imageInputPreviewNormal');

        imageInputEdit.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    img.style.maxWidth = '60px';
                    img.style.maxHeight = '60px';
                    imagePreviewEdit.innerHTML = '';
                    imagePreviewEdit.appendChild(img);
                };
                reader.readAsDataURL(file);
            } else {
                imagePreviewEdit.innerHTML = '';
            }
        });
    </script>
@endsection
