@extends('user.app.layout')

@section('content')
    <div class="main-content">
        <section class="table-section">
            <div class="table-section-color">
                <div class="add-contact">
                    <h4><a href="{{ route('audience') }}"><span class="me-4"><img
                                    src="../assets/images/vuesax-linear-arrow-left.svg"
                                    style="    vertical-align: middle;"></span></a>{{ $title }} Audience</h4>
                    {{ Form::open(['url' => '#', 'name' => 'contactForm', 'id' => 'contactForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                    <div class="row">

                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <div class="br_select">
                                    <label for="inputEmail">Select Group</label>
                                    <select class="form-control js-example-basic-single" id="group_id" name="group_id[]"
                                        multiple>
                                        <option value="">Group Filter</option>
                                        @php
                                            $selectedGroups = isset($audience->group_id)
                                                ? explode(',', $audience->group_id)
                                                : [];
                                        @endphp

                                        @foreach ($groups as $group)
                                            <option value="{{ Crypt::encrypt($group->id) }}"
                                                {{ in_array($group->id, $selectedGroups) ? 'selected' : '' }}>
                                                {{ $group->group_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="first_name">First Name <span class="text-danger"><i
                                            class="fa-solid fa-star-of-life"></i></span></label>
                                <input type="text" id="first_name" name="first_name"
                                    value="{{ isset($audience->first_name) ? $audience->first_name : '' }}"
                                    class="form-control" placeholder="Enter First Name">

                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="last_name">Last Name <span class="text-danger"><i
                                            class="fa-solid fa-star-of-life"></i></span></label>
                                <input type="text" id="last_name" name="last_name"
                                    value="{{ isset($audience->last_name) ? $audience->last_name : '' }}"
                                    class="form-control" placeholder="Enter Last Name">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" id="email" name="email"
                                    value="{{ isset($audience->email) ? $audience->email : '' }}" class="form-control"
                                    placeholder="Enter Email Name">
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="mobile_number">Mobile Number <span class="text-danger"><i
                                            class="fa-solid fa-star-of-life"></i></span></label>
                                <div class="country">
                                    <select class="form-control" id="countries" style="width:60px;">
                                        <option value="AF" data-capital="Kabul">India</option>
                                    </select>
                                    <input type="number" class="form-control" id="mobile_number" name="mobile_number"
                                        value="{{ isset($audience->mobile_number) ? $audience->mobile_number : '' }}"
                                        placeholder="Enter Mobile Number" maxlength="10"
                                        oninput="validateMobileNumber(this)">

                                </div>
                                <label id="mobile_number-error" class="error" for="mobile_number"></label>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="whatsapp_number">WhatsApp Number</label>
                                <div class="country">
                                    <select class="form-control" id="countries" style="width:60px;">
                                        <option value="AF" data-capital="Kabul">India</option>
                                    </select>
                                    <input type="number" class="form-control" id="whatsapp_number" name="whatsapp_number"
                                        value="{{ isset($audience->whatsapp_number) ? $audience->whatsapp_number : '' }}"
                                        placeholder="Enter WhatsApp Number" maxlength="10"
                                        oninput="validateMobileNumber(this)">
                                </div>
                                <label id="whatsapp_number-error" class="error" for="whatsapp_number"></label>
                                <div class="form-group_number">
                                    <label>
                                        <input type="checkbox" id="sameAsMobileCheckbox">
                                        <span>Same As Mobile Number</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group froup_group_upload">
                                <div class="froup-group_logo">
                                    <label for="audience_photo_file">Photo <span class="text-danger">(1000*1000 & 2
                                            MB)</span></label>
                                    <div class="resorces-leftbox file-upload">
                                        <div class="file-upload">
                                            <form action="#" name="form" method="get">
                                                <div class="file image-upload-wrap image-add">
                                                    <div class="file__input" id="file__input">
                                                        <input class="cropImage file__input--file file-upload-input"
                                                            id="audience_photo_file" type="file"
                                                            name="audience_photo_file" />
                                                        <div class="drag-text drag_text">
                                                            <p>Upload Photo</p>
                                                        </div>
                                                        {{-- <a class="btn file__input--label file-add"
                                                            href="javascript:void(0)">No File Selected.</a> --}}
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <label id="audience_photo_file-error" class="error"
                                        for="audience_photo_file"></label>
                                </div>

                                <div class="profile-1">
                                    <img id="audience_photo_file_preview"
                                        src="{{ isset($audience->audience_photo_file) && $audience->audience_photo_file != ''
                                            ? asset('storage/Images/temp/' . $audience->audience_photo_file)
                                            : asset('assets/images/profile1.png') }}"
                                        alt="image" width="150px">

                                </div>
                                <input type="hidden" id="audience_photo_filename" name="audience_photo_filename"
                                    value="{{ isset($audience->audience_photo_file) ? $audience->audience_photo_file : '' }}">
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="business_name">Business Name</label>
                                <input type="text" id="business_name" name="business_name" class="form-control"
                                    value="{{ isset($audience->business_name) ? $audience->business_name : '' }}"
                                    placeholder="Enter Business Name">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group froup_group_upload">
                                <div class="froup-group_logo">
                                    <label for="business_logo_file">Business Logo</label>
                                    <div class="resorces-leftbox file-upload">
                                        <div class="file-upload">
                                            <form action="#" name="form" method="get">
                                                <div class="file image-upload-wrap image-add">
                                                    <div class="file__input" id="file__input">
                                                        <input class="cropImage file__input--file file-upload-input"
                                                            id="business_logo_file" type="file"
                                                            name="business_logo_file" />
                                                        <div class="drag-text drag_text">
                                                            <p>Upload Photo</p>
                                                        </div>
                                                        {{-- <a class="btn file__input--label file-add"
                                                            href="javascript:void(0)">No File Selected.</a> --}}
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <label id="audience_photo_file-error" class="error"
                                        for="audience_photo_file"></label>
                                </div>
                                <input type="hidden" name="business_logo_filename" id="business_logo_filename"
                                    value="{{ isset($audience->business_logo_file) ? $audience->business_logo_file : '' }}">
                                <div class="profile-1">
                                    <img id="business_logo_preview"
                                        src="{{ isset($audience->business_logo_file) && $audience->business_logo_file != ''
                                            ? asset('storage/Images/temp/' . $audience->business_logo_file)
                                            : asset('assets/images/business.png') }}"
                                        alt="image" width="150px">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="business_address">Business Address Line 1</label>
                                <input type="text" id="business_address" name="business_address" class="form-control"
                                    value="{{ isset($audience->business_address) ? $audience->business_address : '' }}"
                                    placeholder="Enter Business Address Line 1">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <label for="pincode">Pincode</label>
                                <input type="number" id="pincode" name="pincode" class="form-control"
                                    value="{{ isset($audience->pincode) ? $audience->pincode : '' }}"
                                    placeholder="Enter Pincode">
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <div class="br_select">
                                    <label for="state_id">State</label>
                                    <select class="form-control js-example-basic-single" id="state_id" name="state_id">
                                        <option value="">Select State</option>
                                        @foreach ($states as $state)
                                            <option value="{{ Crypt::encrypt($state->id) }}"
                                                {{ isset($audience->state_id) && $audience->state_id == $state->id ? 'selected' : '' }}>
                                                {{ $state->state_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <label id="state_id-error" class="error" for="state_id"></label>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="form-group">
                                <div class="br_select">
                                    <label for="city_id">City</label>
                                    <select class="form-control js-example-basic-single" id="city_id" name="city_id">
                                        <option value="">Select City</option>
                                    </select>
                                </div>
                                <label id="city_id-error" class="error" for="city_id"></label>
                            </div>
                        </div>
                        <input type="hidden" name="contact_id" id="contact_id"
                            value="{{ isset($audience->id) ? Crypt::encrypt($audience->id) : '' }}">
                        <div class="col-lg-12 col-sm-12 text-center pb-5">
                            <button type="submit" class="btn btn-blue-button btn-padding" id="contactFormSubmit">Save
                                Contact</button>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </section>
        <div class="modal fade addresource-modal" id="addresourcepopup" data-bs-backdrop="static"
            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-width">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Contact Name 1</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="new-resorces row">
                            <div class="col-sm-12 col-lg-12 col-md-12">
                                <div class="resorces-leftbox file-upload">
                                    <form>
                                        <img src="../assets/images/profile1.png" alt="image">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">First Name</label>
                                                    <input type="text" id="inputEmail" class="form-control"
                                                        placeholder="Rakesh">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Last Name</label>
                                                    <input type="text" id="inputEmail" class="form-control"
                                                        placeholder="Mehan">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Email</label>
                                                    <input type="email" id="inputEmail" class="form-control"
                                                        placeholder="rakeshmehan123@gmail.com">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Mobile Number</label>
                                                    <input type="tel" id="inputEmail" class="form-control"
                                                        placeholder="9858784255">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Business Name</label>
                                                    <input type="text" id="inputEmail" class="form-control"
                                                        placeholder="xyz">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Business Logo</label>
                                                    <div class="form-control-img">
                                                        <img src="../assets/images/business.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Business Address Line 1</label>
                                                    <input type="text" id="inputEmail" class="form-control"
                                                        placeholder="2566 Dow ST">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Business Address Line 2</label>
                                                    <input type="text" id="inputEmail" class="form-control"
                                                        placeholder="Box 168">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Landmark</label>
                                                    <input type="email" id="inputEmail" class="form-control"
                                                        placeholder="behind Megha Mart">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">State</label>
                                                    <input type="text" id="inputEmail" class="form-control"
                                                        placeholder="Gujarat">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">City</label>
                                                    <input type="text" id="inputEmail" class="form-control"
                                                        placeholder="ahmedabad">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Pincode</label>
                                                    <input type="email" id="inputEmail" class="form-control"
                                                        placeholder="320008">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Business Email</label>
                                                    <input type="email" id="inputEmail" class="form-control"
                                                        placeholder="rakeshmehan123@gmail.com">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="inputEmail">Business Phone Number</label>
                                                    <input type="tel" id="inputEmail" class="form-control"
                                                        placeholder="9999888858">
                                                </div>
                                            </div>
                                            <div class="col-lg-4 text-end">
                                                <a class="btn btn-blue-button btn-padding" href="javascript:void(0)"
                                                    data-bs-toggle="modal" data-bs-target="#addresourcepopup">Save</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>

    <div id="uploadimageModal" class="modal " role="dialog" data-keyboard="false" data-backdrop="static"
        data-aos="fade-in">
        <div class="modal-dialog modal-dialog-centered modal-md ">
            <div class="modal-content ">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Crop Image</h1>
                    <div class="d-flex justify-content-end border-bottom-0 py-1 px-1">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                </div>

                <div class="modal-body">
                    <div>
                        <div class="col-md-12 text-center">
                            <div id="image_demo" class="responsive"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <div class="d-lg-flex d-md-flex justify-content-center">
                        <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="-90" type="submit"><i
                                class="fas fa-undo" aria-hidden="true"></i></button>

                        <button class="btn btn-primary mt-3 crop_image p-3">Save</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        function validateMobileNumber(input) {
            if (input.value.length > 10) {
                input.value = input.value.slice(0, 10); // Trim extra digits
            }
        }


        $('#sameAsMobileCheckbox').on('change', function() {
            const mobileNumber = $('#mobile_number').val();
            const $whatsappNumber = $('#whatsapp_number');

            if ($(this).is(':checked')) {
                if (mobileNumber && /^[0-9]{10}$/.test(mobileNumber)) {
                    $whatsappNumber.val(mobileNumber);
                } else {
                    $.notify('Please enter a valid 10-digit mobile number before using this option.', "error");
                    $(this).prop('checked', false);
                }
            } else {
                $whatsappNumber.val('');

            }
        });


        $("#state_id").on('change', function() {

            var selectedValue = $(this).val();

            $.ajax({
                url: "{{ route('getCity') }}",
                type: 'POST',
                data: {
                    'state_id': selectedValue,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#city_id').html('<option value="">Select City</option>');
                        $.each(response.data.cities, function(index, city) {
                            $("#city_id").append('<option value="' + city
                                .id + '">' +
                                city.city_name + '</option>');
                        });

                        @if (isset($audience->city_id))
                            $("#city_id").val("{{ $audience->city_id }}");
                        @endif
                    } else {
                        $('#city_id').html('<option value="">Select City</option>');

                        // $.notify(response.msg, "error");
                    }

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#city_id').html('<option value="">Select City</option>');

                    // $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        });



        $(document).ready(function() {
            if ($("#state_id").val() !== '') {
                $("#state_id").trigger('change');
            }

            let $image_crop = $('#image_demo').croppie({
                viewport: {
                    width: 200,
                    height: 200,
                },
                boundary: {
                    height: 300,
                    width: 300,
                },
                showZoomer: true,
                enableExif: true,
                enableOrientation: true
            });

            // Variables to track the current field being processed
            let currentInputId = '';
            let currentPreviewId = '';
            let currentFilenameInputId = '';

            $('.cropImage').on('change', function() {
                const inputId = $(this).attr('id');
                const previewId = inputId === 'business_logo_file' ? '#business_logo_preview' :
                    '#audience_photo_file_preview';
                const filenameInputId = inputId === 'business_logo_file' ? '#business_logo_filename' :
                    '#audience_photo_filename';

                currentInputId = inputId;
                currentPreviewId = previewId;
                currentFilenameInputId = filenameInputId;

                const file = this.files[0];
                if (!file) return;

                const ext = file.name.split('.').pop().toLowerCase();
                if (ext !== 'png' && ext !== 'jpg' && ext !== 'jpeg') {
                    alert('Invalid file format. Only PNG, JPG, and JPEG are allowed.');
                    return;
                }

                if (file.size > 2 * 1024 * 1024) {
                    alert('File size exceeds 2MB limit.');
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(event) {
                    $image_crop.croppie('bind', {
                        url: event.target.result
                    }).then(function() {
                        console.log('Croppie bind complete for', inputId);
                    });
                };
                reader.readAsDataURL(file);

                $('#uploadimageModal').addClass('zindex');
                $('#uploadimageModal').modal('show');
            });

            $('.imgRotate').on('click', function() {
                $image_crop.croppie('rotate', parseInt($(this).data('rotate')));
            });

            $('.crop_image').click(function() {
                $image_crop.croppie('result', {
                    type: 'canvas',
                    size: {
                        width: 1000,
                        height: 1000
                    }
                }).then(function(response) {
                    $(".crop_image").html('Uploading.....');
                    $(".crop_image").attr('disabled', true);

                    $.ajax({
                        url: "{{ route('UpdateCropImageUser') }}",
                        type: "POST",
                        data: {
                            "image": response,
                            "_token": "{{ csrf_token() }}"
                        },
                        success: function(data) {
                            $('#uploadimageModal').modal('hide');
                            $(currentPreviewId).attr('src',
                                "{{ asset('storage/Images/temp/') }}/" + data
                                .imageName);
                            $(currentFilenameInputId).val(data.imageName);

                            $(".crop_image").html('Save');
                            $(".crop_image").attr('disabled', false);
                            $('#uploadimageModal').removeClass('zindex');
                        }
                    });
                });
            });


            $.validator.addMethod("notOnlySpaces", function(value, element) {
                return $.trim(value).length > 0;
            }, "This field cannot be just spaces.");

            $('#contactForm').validate({
                ignore: ".ignore",
                rules: {
                    first_name: {
                        required: true,
                        maxlength: 50,
                        notOnlySpaces: true,
                    },
                    last_name: {
                        required: true,
                        maxlength: 50,
                        notOnlySpaces: true,
                    },
                    email: {
                        required: true,
                        notOnlySpaces: true,
                        email: true,
                    },
                    mobile_number: {
                        required: true,
                        maxlength: 10,
                        minlength: 10,
                        notOnlySpaces: true,
                    },
                    whatsapp_number: {
                        maxlength: 10,
                        minlength: 10,
                        notOnlySpaces: true,
                    },
                    business_name: {
                        required: true,
                        maxlength: 50,
                        notOnlySpaces: true,
                    },
                    business_address: {
                        required: true,
                        maxlength: 200,
                        notOnlySpaces: true,
                    },
                    pincode: {
                        required: true,
                        maxlength: 6,
                        minlength: 6,
                        notOnlySpaces: true,
                    },
                    state_id: {
                        required: true,
                    },
                    city_id: {
                        required: true,
                    },
                    business_logo_file: {
                        required: {
                            depends: function() {
                                return $('#business_logo_filename').val() == '';
                            }
                        }
                    },
                    audience_photo_file: {
                        required: {
                            depends: function() {
                                return $('#audience_photo_filename').val() == '';
                            }
                        }
                    },
                },
                messages: {
                    mobile_number: {
                        minlength: "Please enter exactly 10 digits.",
                        maxlength: "Please enter exactly 10 digits.",
                        digits: "Only numbers are allowed."
                    },
                    whatsapp_number: {
                        minlength: "Please enter exactly 10 digits.",
                        maxlength: "Please enter exactly 10 digits.",
                        digits: "Only numbers are allowed."
                    }
                },
                submitHandler: function(form) {

                    $("#contactFormSubmit").attr('disabled', true);

                    var formData = new FormData($("#contactForm")[0]);

                    $.ajax({
                        url: "{{ route('AddUpdateContact') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            $("#contactFormSubmit").attr('disabled', false);
                            if (response.status === 'success') {
                                $.notify(response.message, "success");
                                setTimeout(function() {
                                    window.location.href =
                                        "{{ route('audience') }}";
                                }, 1000);
                            } else {
                                $.notify(response.msg, "error");
                            }
                        },
                        error: function(jqXHR) {
                            $("#contactFormSubmit").attr('disabled', false);
                            if (jqXHR.status === 422) {
                                const errors = jqXHR.responseJSON.errors;
                                for (const [field, messages] of Object.entries(errors)) {
                                    $.notify(messages[0],
                                        "error");
                                }
                            } else {
                                $.notify(jqXHR.responseJSON.message || "An error occurred.",
                                    "error");
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection