@extends('dashboard.layouts.master')
@section('title', 'Compose Notification')

@push('after-styles')
<style>
    .targeting-box {
        background: #fdfdfd;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 25px;
    }
    .targeting-box h4 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 15px;
        font-weight: 700;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;
    }
    .form-group label {
        font-weight: 600;
        color: #555;
    }
    .btn-send:hover {
        background-color: #001a45;
        color: #fff;
    }
    .action-details {
        display: none;
        margin-top: 10px;
        padding: 15px;
        background: #f0f4f8;
        border-radius: 6px;
    }
    .valid_field {
        color: red;
    }
    .error {
        color: red;
        font-weight: normal;
        margin-top: 5px;
        display: block;
    }
    .loader {
        visibility: hidden;
        position: fixed;
        z-index: 9999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid #002868;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
@endpush

@section('content')
<div class="padding">
    <div id="success_file_popup" style="margin-bottom:10px;"></div>
    <div class="loader"></div>

        <div class="box">
            <div class="box-header m-b-2">
                <div class="box-header-left">
                    <h3 class="d-block">Compose Notification</h3>
                    <small class="d-inline-block">
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                        <a href="{{ route('notification') }}">Notification Management</a> /
                        <span>Compose</span>
                    </small>
                </div>
                <div class="box-header-right">
                    <div class="box-tool">
                        <ul class="nav">
                            <li class="nav-item inline">
                                <a class="nav-link" href="{{ route('notification') }}">
                                    <i class="material-icons md-18">×</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        <div class="box-body">
            <form id="notification-form">
                @csrf

                <div class="row">
                    {{-- Left Column: Targeting --}}
                    <div class="col-md-6">
                        <div class="targeting-box">
                            <h4><i class="fa fa-crosshairs"></i> Targeting Criteria</h4>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Country</label>
                                        <select name="country_id" id="country_id" class="form-control select2">
                                            <option value="">All Countries</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>City / Area</label>
                                        <select name="city_id" id="city_id" class="form-control select2">
                                            <option value="">All Cities</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Gender</label>
                                        <select name="gender_id" class="form-control">
                                            <option value="">All Genders</option>
                                            @foreach($genders as $gender)
                                                <option value="{{ $gender->id }}">{{ $gender->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Target Followers (Optional)</label>
                                        <select name="follower_business_id" class="form-control select2">
                                            <option value="">Any User</option>
                                            @foreach($businesses as $business)
                                                <option value="{{ $business->id }}">Followers of: {{ $business->business_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Min Age</label>
                                        <input type="number" name="age_min" class="form-control" placeholder="e.g. 18">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Max Age</label>
                                        <input type="number" name="age_max" class="form-control" placeholder="e.g. 60">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Right Column: Content & Actions --}}
                    <div class="col-md-6">
                        <div class="targeting-box">
                            <h4><i class="fa fa-envelope"></i> Notification Content</h4>

                            <div class="form-group">
                                <label>Notification Title <span class="valid_field">*</span></label>
                                <input type="text" name="title" id="title" class="form-control"  placeholder="Enter catchy title...">
                            </div>

                            <div class="form-group">
                                <label>Message Body <span class="valid_field">*</span></label>
                                <textarea name="message" id="message" class="form-control" rows="4"  placeholder="Type your message here..."></textarea>
                            </div>

                            <div class="form-group">
                                <label>Redirect Action</label>
                                <select name="action_type" id="action_type" class="form-control">
                                    <option value="">None (Just Notification)</option>
                                    <option value="1">App Screen</option>
                                    <option value="2">Specific Offer</option>
                                    <option value="3">Specific Business</option>
                                </select>
                            </div>

                            {{-- Action IDs --}}
                            <div id="action_screen_wrap" class="action-details">
                                <label>Target Screen</label>
                                <select name="action_id_screen" class="form-control">
                                    <option value="home">Home Screen</option>
                                    <option value="offers">Offers Tab</option>
                                    <option value="businesses">Businesses Tab</option>
                                    <option value="profile">User Profile</option>
                                    <option value="history">Point History</option>
                                </select>
                            </div>

                            <div id="action_offer_wrap" class="action-details">
                                <label>Target Offer</label>
                                <select name="action_id_offer" class="form-control select2" style="width:100%">
                                    @foreach($offers as $offer)
                                        <option value="{{ $offer->id }}">{{ $offer->title }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div id="action_business_wrap" class="action-details">
                                <label>Target Business</label>
                                <select name="action_id_business" class="form-control select2" style="width:100%">
                                    @foreach($businesses as $business)
                                        <option value="{{ $business->user_id }}">{{ $business->business_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group m-t-md text-right">
                            <button type="submit" class="solid-button m-r-1" id="btn-submit">
                                <i class="fa fa-paper-plane"></i> Send Push Notifications</button>
                            <a href="{{ route('notification') }}" class="border-btn"> {!! __('backend.cancel') !!} </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('after-scripts')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        // Initialize Select2 if available
        if ($.isFunction($.fn.select2)) {
            $('.select2').select2({
                theme: 'bootstrap'
            });
        }

        // Toggle action details
        $('#action_type').change(function() {
            $('.action-details').hide();
            var val = $(this).val();
            if (val == '1') $('#action_screen_wrap').show();
            if (val == '2') $('#action_offer_wrap').show();
            if (val == '3') $('#action_business_wrap').show();
        });

        // Dynamic Cities
        $('#country_id').change(function() {
            var country_id = $(this).val();
            $('#city_id').empty().append('<option value="">Loading...</option>');
            
            if (country_id) {
                $.post("{{ route('notification.getCities') }}", { country_id: country_id, _token: '{{ csrf_token() }}' }, function(data) {
                    $('#city_id').empty().append('<option value="">All Cities</option>');
                    $.each(data, function(i, item) {
                        $('#city_id').append('<option value="' + item.id + '">' + item.name + '</option>');
                    });
                });
            } else {
                $('#city_id').empty().append('<option value="">All Cities</option>');
            }
        });

        $("#notification-form").validate({
            rules: {
                title: {
                    required: true,
                    maxlength: 255
                },
                message: {
                    required: true
                }
            },
            messages: {
                title: {
                    required: "Title field is required.",
                    maxlength: "Title cannot exceed 255 characters."
                },
                message: {
                    required: "Message body is required."
                }
            },
            submitHandler: function(form) {
                var btn = $('#btn-submit');
                
                // Prepare action_id based on type
                var actionType = $('#action_type').val();
                var actionId = null;
                if (actionType == '1') actionId = $('select[name="action_id_screen"]').val();
                if (actionType == '2') actionId = $('select[name="action_id_offer"]').val();
                if (actionType == '3') actionId = $('select[name="action_id_business"]').val();

                var formData = new FormData(form);
                if (actionId) {
                    formData.append('action_id', actionId);
                }

                $.ajax({
                    url: "{{ route('notification.store') }}",
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $('.loader').css("visibility", "visible").fadeIn();
                        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');
                    },
                    success: function(data) {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        btn.prop('disabled', false).html('<i class="fa fa-paper-plane"></i> Send Push Notifications');
                        
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: data.msg,
                                confirmButtonText: 'OK'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = "{{ route('notification') }}";
                                }
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: data.msg
                            });
                        }
                    },
                    error: function(xhr) {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        btn.prop('disabled', false).html('<i class="fa fa-paper-plane"></i> Send Push Notifications');
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong. Please try again.'
                        });
                    }
                });
            }
        });
    });
</script>
@endpush