@extends('admin.layouts.masterlayout')

@section('title', "Setting")
@section('head_title', "Setting")

@section('content')
<!-- dashboard-body part -->
<div class="dashboard-body-content">
    <div class="dashboard-breadcrumb-section">
        <h2>Settings</h2>
    </div>
    <div class="setting-profile-flex">
        <div class="setting-profile-box">
            <div class="setting-profile-bg">
                <div class="setting-profile-bg-position">
                    <img src="{{ asset('assets/img/profile-image-bg.png') }}" alt="">
                </div>
                <img src="{{ (!empty($user->profile)) ? asset($user->profile) : '' }}" alt="user img" class="profile-img" onerror="this.src='{{ asset('assets') }}/img/dashboard/user-image.png'">
            </div>
            <h2>{{ $user->name }}</h2>
            <p>{{ $role }}</p>
            <div class="setting-profile-tab">
                <div class="nav flex-column nav-pills me-3" role="tablist">
                    <a href="#profile-tab" class="nav-link active" data-bs-toggle="pill" data-tab="my-profile">My Profile</a>
                    <a href="#password-tab" class="nav-link" data-bs-toggle="pill" data-tab="change-password"> Change Password</a>
                    @if ($role == 'Superadmin')
                    <a href="#email-tab" class="nav-link" data-bs-toggle="pill" data-tab="email-templates"> Email Templates</a>
                    <a href="#general-setting-tab" class="nav-link" data-bs-toggle="pill" data-tab="general-setting"> General Setting</a>
                    <a href="#feedback-prompt-tab" class="nav-link" data-bs-toggle="pill" data-tab="feedback-prompt"> Feedback Prompt</a>
                    @endif
                    <a href="javascript:void(0)" class="nav-link" data-tab="log-out"> Log Out</a>
                </div>
            </div>
        </div>
        <div class="setting-profile-right-flex">
            <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="profile-tab" role="tabpanel">
                </div>

                <div class="tab-pane fade" id="password-tab">
                </div>

                @if ($role == 'Superadmin')
                <div class="tab-pane fade" id="email-tab">
                    <div class="setting-profile-width max-w-100">
                        <div class="setting-profile-card-header">
                            <div class="setting-profile-title">
                                <h2>Email templates</h2>
                            </div>
                        </div>
                        <div class="setting-profile-card-body setting-profile-card-body-main">

                            <div class="setting-profile-tab p-0">
                                <div class="nav flex-column nav-pills">
                                    @foreach ($email_templates_array as $t_key => $template)
                                    <a href="javascript:void(0)" class="nav-link email-template-link" data-template-name="{{ $t_key }}"> {{ ucfirst(str_replace('_', ' ', $t_key)) }}</a>
                                    @endforeach
                                </div>
                            </div>
                            <div class="setting-email-flex">
                                <div class="tab-content">
                                    <div class="tab-pane fade show active tab-email-content">

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="general-setting-tab">
                    <div class="setting-profile-width">
                        <div class="setting-profile-card-header">
                            <div class="setting-profile-title">
                                <h2>General Setting</h2>
                            </div>
                        </div>
                        <div class="setting-profile-card-body">
                            <form id="frm_general_setting" class="w-100" method="POST">
                                <div class="backend-error-div"></div>
                                @csrf
                                <div class="mb-4">
                                    <label for="fix_commissions">Fix Commissions</label>
                                    <div class="auth-input-position">
                                        <div class="form-control d-flex align-items-center py-0 overflow-hidden pe-0">
                                            <input type="text" name="fix_commissions" id="fix_commissions" placeholder="Enter Your Fix Commissions" class="border-0 bg-transparent w-100 flex-1 py-3 " value="{{ $fix_commission->value }}">
                                            <span class="d-flex align-items-center justify-content-center pr-box">
                                                %
                                            </span>
                                        </div>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/commision.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <!-- USE FOR FUTURE -->
                                <!-- <div class="mb-4">
                                    <label for="booking_cancellation_limit">Booking Cancellation Limit</label>
                                    <div class="auth-input-position">
                                        <div class="form-control d-flex align-items-center py-0 overflow-hidden pe-0">
                                            <input type="text" name="booking_cancellation_limit" id="booking_cancellation_limit" placeholder="Enter Your Booking Cancellation Limit" class="border-0 bg-transparent w-100 flex-1 py-3 " value="{{ $booking_cancellation_limit->value }}">
                                            <span class="d-flex align-items-center justify-content-center pr-box">
                                                Hours
                                            </span>
                                        </div>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/clock.png') }}" alt="">
                                        </div>
                                    </div>
                                </div> -->
                                <div class="mb-4">
                                    <label for="refund_request_limit">Refund Request Limit</label>
                                    <div class="auth-input-position">
                                        <div class="form-control d-flex align-items-center py-0 overflow-hidden pe-0">
                                            <input type="text" name="refund_request_limit" id="refund_request_limit" placeholder="Enter Your Refund Request Limit" class="border-0 bg-transparent w-100 flex-1 py-3" value="{{ $refund_request_limit->value }}">
                                            <span class="d-flex align-items-center justify-content-center pr-box">
                                                Days
                                            </span>
                                        </div>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/clock.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="nearby_search_range">Nearby Search Range</label>
                                    <div class="auth-input-position">
                                        <div class="form-control d-flex align-items-center py-0 overflow-hidden pe-0">
                                            <input type="text" name="nearby_search_range" id="nearby_search_range" placeholder="Enter Your Nearby Search Range" class="border-0 bg-transparent w-100 flex-1 py-3" value="{{ $nearby_search_range->value }}">
                                            <span class="d-flex align-items-center justify-content-center pr-box">
                                                KM
                                            </span>
                                        </div>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/Shop-location.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="no_show_policy">No-Show Policy</label>
                                    <div class="auth-input-position">
                                        <div class="form-control d-flex align-items-center py-0 overflow-hidden pe-0">
                                            <input type="text" name="no_show_policy" id="no_show_policy" placeholder="Enter Your No-Show Policy" class="border-0 bg-transparent w-100 flex-1 py-3" value="{{ $no_show_policy->value }}">
                                            <span class="d-flex align-items-center justify-content-center pr-box">
                                                Days
                                            </span>
                                        </div>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/clock.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="no_show_policy">Refer Discount</label>
                                    <div class="auth-input-position">
                                        <div class="form-control d-flex align-items-center py-0 overflow-hidden pe-0">
                                            <input type="text" name="refer_discount" id="refer_discount" placeholder="Enter Your refer discount" class="border-0 bg-transparent w-100 flex-1 py-3" value="{{ $refer_discount->value }}">
                                            <span class="d-flex align-items-center justify-content-center pr-box">
                                                %
                                            </span>
                                        </div>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/commision.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="no_show_policy">Support Email</label>
                                    <div class="auth-input-position">
                                        <div class="form-control d-flex align-items-center py-0 overflow-hidden pe-0">
                                            <input type="email" name="support_email" id="support_email" placeholder="Enter Your refer discount" class="border-0 bg-transparent w-100 flex-1 py-3" value="{{ $support_email->value }}">
                                            <span class="d-flex align-items-center justify-content-center pr-box">
                                                @
                                            </span>
                                        </div>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/mail.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex gap-3 submit-container">
                                    <button type="submit" href="javascript:void(0)" class="ct-btn btn-tattoo-save"> <span>Save</span> </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="feedback-prompt-tab">
                    <div class="setting-profile-width max-w-100">
                        <div class="setting-profile-card-header w-100 d-flex align-items-center justify-content-between gap-2 flex-wrap">
                            <div class="setting-profile-title">
                                <h2>Feedback Prompts</h2>
                            </div>
                            <div class="px-4">
                                <a href="javascript:void(0)" id="add_prompts" class="ct-btn text-center add-ct-btn d-block">Add Prompts</a>
                            </div>
                        </div>
                        <div class="px-2 pb-2">
                            <div class="ct-dashboard-table-container">
                                <div class="card p-0 border-0 shadow-none">
                                    <div class="table-responsive">
                                        <table class="table mb-0" id="prompt-setting">
                                            <thead>
                                                <tr>
                                                    <th>Text</th>
                                                    <th>Action</th>
                                                </tr>

                                            </thead>
                                            <tbody> </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <div class="tab-pane fade" id="log-tab">
                    Log Out
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="logout-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal body -->
            <div class="modal-body text-center">
                <div>
                    <img src="{{ asset('assets/img/logout-image.png') }}" alt="">
                </div>
                <h2>Are You Sure You Want Log Out?</h2>
                <p>Your data will be safe. Once you log in, you can view your data.</p>
            </div>
            <!-- Modal footer -->
            <div>
                <div class="d-flex gap-3 submit-container justify-content-center mt-0">
                    <button class="ct-outline-btn" data-bs-dismiss="modal">Cancel</button>
                    <a href="{{ route('admin.logout') }}" class="ct-btn">Log Out</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal add-prompt-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-0">
            <div class="modal-header px-4 py-3 d-flex align-items-center justify-content-between gap-2">
                <h2 class="mb-0 h5">Add Prompts</h2>
                <div data-bs-dismiss="modal">
                    <img src="{{ asset('assets/img/model-close.png') }}" alt="" class="model-close-b">
                </div>
            </div>
            <form id="frm-add-prompt" method="POST">
                <div class="modal-body p-4">
                    @csrf
                    <div class="backend-error-div"></div>
                    <div class="w-100">
                        <label for="message" class="w-100 text-start">Prompt Text</label>
                        <textarea name="prompt_text" id="message" rows="4" placeholder="Enter Your Text" class="form-control text-start textarea-model"></textarea>
                    </div>
                </div>
                <!-- Modal footer -->
                <div>
                    <div class="d-flex gap-3 submit-container justify-content-center mt-0 pb-4 px-4">
                        <a class="ct-outline-btn" data-bs-dismiss="modal">Cancel</a>
                        <button type="submit" class="ct-btn btn-prompt-save"><span>Save</span></a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal edit-prompt-modal">
    <div class="modal-dialog modal-dialog-centered edit-prompt-dialog">

    </div>
</div>


@endsection
@section('script')
<script src="{{ asset('assets/js/ckeditor.js') }}"></script>
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    $(document).ready(function() {
        load_profile();

        $('.nav-link').click(function(e) {
            var tab = $(this).attr('data-tab');

            if (tab == 'my-profile') {
                load_profile();
            } else if (tab == 'change-password') {
                load_change_password();
            } else if (tab == 'email-templates') {
                $(".email-template-link:eq(0)").click();
            } else if (tab == 'log-out') {
                $("#logout-modal").modal("show");
            }

        });

        // jQuery validation for profile update form
        $("#frm_general_setting").validate({
            rules: {
                fix_commissions: {
                    required: true,
                    min: 1,
                    max: 100,
                },
                booking_cancellation_limit: {
                    required: true,
                    min: 1,
                    max: 500,
                },
                refund_request_limit: {
                    required: true,
                    min: 1,
                    max: 500,
                },
                nearby_search_range: {
                    required: true,
                    min: 1,
                    max: 500,
                },
                no_show_policy: {
                    required: true,
                    min: 1,
                    max: 100,
                },
                refer_discount: {
                    required: true,
                    min: 1,
                    max: 100,
                },
                support_email : {
                    required: true,
                    email: true,
                }
            },
            errorPlacement: function(error, element) {
                error.insertAfter($(element).parents('.auth-input-position').find('.auth-input-icon'));
            },
            submitHandler: function(form, event) {
                event.preventDefault();

                $('.btn-tattoo-save').attr('disabled');
                $('.btn-tattoo-save').addClass('loader-active');

                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.setting.save-general-settings') }}",
                    data: $(form).serialize(),
                    success: function(response) {
                        $('.btn-tattoo-save').removeAttr('disabled');
                        $('.btn-tattoo-save').removeClass('loader-active');

                        if (response.status == true) {
                            custom_message('success', response.message);
                        } else {
                            if (typeof response.errors !== 'undefined' && response.errors !== null) {
                                display_error(response.errors, 'frm_general_setting');
                            } else {
                                custom_message('error', response.message);
                            }
                        }
                    }
                });
            }
        });

        $('#add_prompts').click(function(e) {
            $(".add-prompt-modal").modal('show');
        });

        $("#frm-add-prompt").validate({
            rules: {
                prompt_text: {
                    required: true,
                    minlength: 1,
                    maxlength: 500,
                },
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },
            submitHandler: function(form, event) {
                event.preventDefault();

                $('.btn-prompt-save').attr('disabled');
                $('.btn-prompt-save').addClass('loader-active');

                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.setting.add-prompt') }}",
                    data: $(form).serialize(),
                    success: function(response) {
                        $('.btn-prompt-save').removeAttr('disabled');
                        $('.btn-prompt-save').removeClass('loader-active');

                        if (response.status == true) {
                            custom_message('success', response.message);
                            $(".add-prompt-modal").modal('hide');
                            dt_prompt_text.ajax.reload(); // reload roles table
                        } else {
                            if (typeof response.errors !== 'undefined' && response.errors !== null) {
                                display_error(response.errors, 'frm-add-prompt');
                            } else {
                                custom_message('error', response.message);
                                $(".add-prompt-modal").modal('hide');
                                dt_prompt_text.ajax.reload(); // reload roles table
                            }
                        }
                    }
                });
            }
        });
    });

    const dt_prompt_text = $('#prompt-setting').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        ordering: false,
        ajax: "{{ route('admin.setting.get-prompt-data') }}", // Make sure the route is correctly defined
        columns: [{
                data: 'prompt_text',
                name: 'prompt_text'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]

    });

    function load_profile() {
        $.ajax({
            type: "POST",
            url: "{{ route('admin.setting.load-my-profile') }}",
            success: function(response) {
                $('#profile-tab').html(response);
            }
        });
    }

    function load_change_password() {
        $.ajax({
            type: "POST",
            url: "{{ route('admin.setting.change-password') }}",
            success: function(response) {
                $('#password-tab').html(response);
            }
        });
    }

    $(document).on('click', '.btn-profile-cancel', function() {
        load_profile();
    });

    $(document).on('click', '.edit-prompt', function() {
        var prompt_id = $(this).attr("data-prompt-id");

        if (prompt_id != "" || prompt_id != 0) {
            $.ajax({
                type: "POST",
                url: "{{ route('admin.setting.load-edit-prompt-modal') }}",
                data: {
                    prompt_id: prompt_id
                },
                success: function(response) {
                    $('.edit-prompt-dialog').html(response);
                    $('.edit-prompt-modal').modal('show');
                }
            });
        }

    });

    $(document).on('click', '.tattoo-delete-btn', function() {
        var prompt_id = $(this).attr("data-deleted-id");

        if (prompt_id != "" || prompt_id != 0) {
            $('.tattoo-delete-btn').attr('disabled');
            $('.tattoo-delete-btn').addClass('loader-active');

            $.ajax({
                type: "POST",
                url: "{{ route('admin.setting.delete-prompt') }}",
                data: {
                    prompt_id: prompt_id
                },
                success: function(response) {

                    $('.tattoo-delete-modal').modal('hide');
                    $('.tattoo-delete-btn').removeAttr('disabled');
                    $('.tattoo-delete-btn').removeClass('loader-active');

                    dt_prompt_reload(1);

                    if (response.status == true) {
                        custom_message('success', response.message);
                    } else {
                        custom_message('error', response.message);
                    }
                }
            });
        } else {
            custom_message('error', "Prompt isn't found");
        }

    });

    $(document).on('click', '.delete-prompt', function() {
        var prompt_id = $(this).attr("data-prompt-id");
        $(".tattoo-delete-btn").attr('data-deleted-id', prompt_id);
        $('.tattoo-delete-modal').modal('show');

    });

    $(document).on('click', '.email-template-link', function() {
        var template_name = $(this).attr('data-template-name')
        $('.email-template-link').removeClass('active');
        $(this).addClass('active');

        $.ajax({
            type: "POST",
            url: "{{ route('admin.setting.load-email-templates') }}",
            data: {
                template_name: template_name
            },
            success: function(response) {
                $('.tab-email-content').html(response);
            }
        });
    });

    $('.add-prompt-modal').on('shown.bs.modal', function(e) {
        $('#frm-add-prompt')[0].reset();
        $('#frm-add-prompt').find('.backend-error-div').html('');
        $('.btn-prompt-save').removeAttr('disabled');
        $('.btn-prompt-save').removeClass('loader-active');
    });

    function dt_prompt_reload(full_reload = 0) {
        if (full_reload == 0) {
            dt_prompt_text.ajax.reload();
        } else {
            dt_prompt_text.ajax.reload(null, false);
        }
    }
</script>
@endsection