@extends('layouts.vertical', ["page_title"=> "Add & Edit Products"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/select2/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/multiselect/multiselect.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/libs/dropify/dropify.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">   
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success mt-3">
        {{ session()->get('message') }}
    </div>
@endif
    <div class="row mt-3">
        <div class="col-xl-12">
            <div class="card">
                <form method="post" id="form-availiblity" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h4 class="page-title">Add / Edit {{$title}}</h4>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="float-end">
                                <a href="{{$base_url}}s" class="btn btn-dark waves-effect waves-light">Back</a>
                                @if($mode=='edit' && isset($item->is_personalized) && $item->is_personalized == 'yes' )
                                    <a href="/formpersonalizations?form={{$item->id}}" class="btn btn-dark waves-effect waves-light">Personalisations</a>
                                @endif
                                <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                            </div>
                        </div>
                        @foreach($fields as $field => $props)
                            @if($props['type'] != 'hidden')
                            <div class="col-md-{{isset($props['fullwidth'])?'12':'6'}} mb-3">
                            @if(empty($props['hide_label']))
                            <label for="field-{{$field}}" class="form-label">{{$props['title']}} {!!isset($props['required'])&&$props['required'] ? '<span class="text-danger">*</span>':''!!} </label>
                            @endif
                            @endif
                            @switch($props['type'])
                                @case('hidden')
                                    <input type="{{$props['type']}}" id="field-{{$field}}" name="{{$field}}" value="{{$mode=='edit'?($item->{$field} ?? ''):''}}">
                                    @break
                                @case('text')
                                @case('email')
                                @case('number')
                                @case('tel')
                                @case('date')
                                    <input type="{{$props['type']}}" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'?($item->{$field} ?? ''):''}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    @break
                                @case('textarea')
                                    <textarea id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" {{isset($props['required'])&&$props['required']?'required':'' }}>{{$mode=='edit'?($item->{$field} ?? ''):''}}</textarea>
                                    @break
                                @case('select')
                                    <select class="form-control" id="field-{{$field}}" name="{{$field}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        <option value=""> -- Select {{$props['title']}} -- </option>
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{$mode=='edit' && ($item->{$field} ?? '') == $k ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('multiselect')
                                    @php
                                        $multiSelected = [];
                                        if (is_object($item ?? null) && isset($item->{$field}) && is_array($item->{$field})) {
                                            $multiSelected = $item->{$field};
                                        } elseif ($mode !== 'edit' && isset($props['default']) && is_array($props['default'])) {
                                            $multiSelected = $props['default'];
                                        }
                                    @endphp
                                    <select class="form-control select2-multiple" data-toggle="select2" data-width="100%" multiple="multiple" data-placeholder="Choose {{$props['title']}}" id="field-{{$field}}" name="{{$field}}[]" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        <option value=""> -- Select {{$props['title']}} -- </option>
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{ in_array($k, $multiSelected) ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('bigmultiselect')
                                    <select multiple="multiple" class="bigmultiselect multi-select" id="field-{{$field}}" name="{{$field}}[]" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{$mode=='edit' && isset($item->{$field}) && in_array($k, $item->{$field}) ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('yesno')
                                    @php
                                        $yesnoDefault = $props['default'] ?? 'no';
                                        $yesnoValue = $mode === 'edit'
                                            ? ($item->{$field} ?? $yesnoDefault)
                                            : $yesnoDefault;
                                    @endphp
                                    <div>
                                        <div class="form-check mb-2 form-check-success form-check-inline">
                                            <input class="form-check-input" type="radio" name="{{$field}}" id="field-{{$field}}-yes" value="yes" {{ $yesnoValue === 'yes' ? 'checked' : '' }} {{isset($props['required'])&&$props['required']?'required':'' }}>
                                            <label class="form-check-label" for="field-{{$field}}-yes">Yes</label>
                                        </div>
                                        <div class="form-check mb-2 form-check-danger form-check-inline">
                                            <input class="form-check-input" type="radio" name="{{$field}}" id="field-{{$field}}-no" value="no" {{ $yesnoValue === 'no' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="field-{{$field}}-no">No</label>
                                        </div>
                                    </div>                                    
                                    @break
                                @case('image')
                                    <div class="mt-3" id="file_wrapper">
                                        <input type="file" name="{{$field}}" class="dropify" data-default-file="{{$mode=='edit'?($item->{$field} ?? ''):''}}" data-allowed-file-extensions="png jpg jpeg gif" />
                                        <p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
                                    </div>
                                    @break
                                @case('file')
                                    <div class="mt-3" id="file_wrapper">
                                        <input type="file" name="{{$field}}" class="dropify" data-default-file="{{$mode=='edit'?($item->{$field} ?? ''):''}}" data-allowed-file-extensions="png jpg jpeg gif mp4 pdf mp3 zip" />
                                        <p class="text-muted text-center mt-2 mb-0">1GB Max File size</p>
                                    </div>
                                    @break
                                @case('mapping')
                                    <div class="col-md-12"><button type="button" class="btn btn-info btn-xs float-end" id="btn-add-approver">Add Approver</button></div>
                                    
                                    <div id="approver-wrapper" class="row">
                                        @if($mode=='edit')
                                            @foreach(($item->{$field} ?? []) as $map)
                                                <div class="col-md-6 mb-2">
                                                <div class="row">
                                                    <div class="col-10">
                                                    <select class="form-control" name="workflow_approvers[]" required>
                                                        <option value=""> -- Select Metric -- </option>
                                                        @foreach($props['approvers'] as $k => $v)
                                                        <option value="{{$k}}" {{$map == $k ? 'selected="selected"':''}}>{{$v}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                    <div class="col-2">
                                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        @else
                                            <div class="col-md-6 mb-2">
                                                <div class="row">
                                                    <div class="col-10">
                                                        <select class="form-control" name="workflow_approvers[]" required>
                                                            <option value=""> -- Select Metric -- </option>
                                                            @foreach($props['approvers'] as $k => $v)
                                                            <option value="{{$k}}">{{$v}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-2">
                                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    @break
                                @case('email_notifications')
                                    @php
                                        $emailRules = $mode === 'edit'
                                            ? ($item->email_notification_rules ?? [])
                                            : [];
                                        if (is_string($emailRules) && $emailRules !== '') {
                                            $emailRules = json_decode($emailRules, true) ?: [];
                                        }
                                        if (!is_array($emailRules) || count($emailRules) === 0) {
                                            $emailRules = [[
                                                'enabled' => 'yes',
                                                'manager_levels' => [],
                                                'role_ids' => [],
                                                'selected_users' => [],
                                                'condition' => '',
                                                'subject' => '',
                                                'body' => '',
                                            ]];
                                        }
                                        $emailNotificationEnabled = $mode === 'edit'
                                            ? (($item->email_notification ?? 'no') === 'yes')
                                            : false;
                                    @endphp
                                    <div id="email-notification-rules-panel" class="{{ $emailNotificationEnabled ? '' : 'd-none' }}">
                                    <div class="col-md-12">
                                        <p class="text-muted small mb-2">
                                            Configure emails sent on form submission. Select L1–L4 managers, roles, and/or individual users.
                                            Use JSON conditions (same format as Auto Approve Condition). Placeholders:
                                            <code>{RECIPIENT_NAME}</code>, <code>{FORM_NAME}</code>, <code>{USER_NAME}</code>.
                                        </p>
                                        <button type="button" class="btn btn-info btn-xs float-end" id="btn-add-email-rule">Add Email Rule</button>
                                    </div>
                                    <div id="email-notification-rules-wrapper" class="col-md-12">
                                        @foreach($emailRules as $ruleIndex => $rule)
                                            @php
                                                $rule = (array) $rule;
                                                $ruleEnabled = ($rule['enabled'] ?? 'yes') === 'no' ? 'no' : 'yes';
                                                $ruleManagerLevels = (array) ($rule['manager_levels'] ?? []);
                                                $ruleRoleIds = (array) ($rule['role_ids'] ?? []);
                                                $ruleSelectedUsers = (array) ($rule['selected_users'] ?? []);
                                                $ruleCondition = $rule['condition'] ?? '';
                                                if (is_array($ruleCondition)) {
                                                    $ruleCondition = json_encode($ruleCondition, JSON_PRETTY_PRINT);
                                                }
                                            @endphp
                                            <div class="card border mb-3 email-notification-rule" data-rule-index="{{ $ruleIndex }}">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5 class="card-title mb-0">Email Rule <span class="rule-number">{{ $ruleIndex + 1 }}</span></h5>
                                                        <button type="button" class="btn btn-danger btn-sm btn-remove-email-rule">
                                                            <i class="mdi mdi-close"></i> Remove
                                                        </button>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12 mb-3">
                                                            <label class="form-label">Enabled</label>
                                                            <div>
                                                                <div class="form-check form-check-inline form-check-success">
                                                                    <input class="form-check-input" type="radio" name="email_notification_rules[{{ $ruleIndex }}][enabled]" value="yes" {{ $ruleEnabled === 'yes' ? 'checked' : '' }}>
                                                                    <label class="form-check-label">Yes</label>
                                                                </div>
                                                                <div class="form-check form-check-inline form-check-danger">
                                                                    <input class="form-check-input" type="radio" name="email_notification_rules[{{ $ruleIndex }}][enabled]" value="no" {{ $ruleEnabled === 'no' ? 'checked' : '' }}>
                                                                    <label class="form-check-label">No</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Notify Manager Levels</label>
                                                            <select class="form-control select2-multiple email-rule-managers" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[{{ $ruleIndex }}][manager_levels][]" data-placeholder="Choose manager levels">
                                                                @foreach($props['manager_levels'] as $levelKey => $levelLabel)
                                                                    <option value="{{ $levelKey }}" {{ in_array($levelKey, $ruleManagerLevels, true) ? 'selected' : '' }}>{{ $levelLabel }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Notify Roles</label>
                                                            <select class="form-control select2-multiple email-rule-roles" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[{{ $ruleIndex }}][role_ids][]" data-placeholder="Choose roles">
                                                                @foreach($props['roles'] as $roleId => $roleName)
                                                                    <option value="{{ $roleId }}" {{ in_array($roleId, $ruleRoleIds, true) ? 'selected' : '' }}>{{ $roleName }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Notify Users</label>
                                                            <select class="form-control select2-multiple email-rule-users" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[{{ $ruleIndex }}][selected_users][]" data-placeholder="Choose users">
                                                                @foreach(($props['users'] ?? []) as $userId => $userLabel)
                                                                    <option value="{{ $userId }}" {{ in_array($userId, $ruleSelectedUsers, true) ? 'selected' : '' }}>{{ $userLabel }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-12 mb-3">
                                                            <label class="form-label">Condition (JSON)</label>
                                                            <textarea class="form-control font-monospace" rows="4" name="email_notification_rules[{{ $ruleIndex }}][condition]" placeholder='{"AND":[{"attribute":"field_code","operator":"eq","value":"Yes"}]}'>{{ $ruleCondition }}</textarea>
                                                            <small class="text-muted">Leave empty to always send when enabled. Operators: exists, has_value, eq, neq, gt, lt, gte, lte, includes.</small>
                                                        </div>
                                                        <div class="col-md-12 mb-3">
                                                            <label class="form-label">Email Subject</label>
                                                            <input type="text" class="form-control" name="email_notification_rules[{{ $ruleIndex }}][subject]" value="{{ $rule['subject'] ?? '' }}" placeholder="Submission alert for {RECIPIENT_NAME}">
                                                        </div>
                                                        <div class="col-md-12 mb-3">
                                                            <label class="form-label">Email Body</label>
                                                            <textarea class="form-control" rows="5" name="email_notification_rules[{{ $ruleIndex }}][body]" placeholder="Dear {RECIPIENT_NAME},&#10;&#10;{USER_NAME} has submitted {FORM_NAME}.">{{ $rule['body'] ?? '' }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <template id="email-notification-rule-template">
                                        <div class="card border mb-3 email-notification-rule" data-rule-index="__INDEX__">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <h5 class="card-title mb-0">Email Rule <span class="rule-number">__NUMBER__</span></h5>
                                                    <button type="button" class="btn btn-danger btn-sm btn-remove-email-rule">
                                                        <i class="mdi mdi-close"></i> Remove
                                                    </button>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12 mb-3">
                                                        <label class="form-label">Enabled</label>
                                                        <div>
                                                            <div class="form-check form-check-inline form-check-success">
                                                                <input class="form-check-input" type="radio" name="email_notification_rules[__INDEX__][enabled]" value="yes" checked>
                                                                <label class="form-check-label">Yes</label>
                                                            </div>
                                                            <div class="form-check form-check-inline form-check-danger">
                                                                <input class="form-check-input" type="radio" name="email_notification_rules[__INDEX__][enabled]" value="no">
                                                                <label class="form-check-label">No</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label class="form-label">Notify Manager Levels</label>
                                                        <select class="form-control select2-multiple email-rule-managers" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[__INDEX__][manager_levels][]" data-placeholder="Choose manager levels">
                                                            @foreach($props['manager_levels'] as $levelKey => $levelLabel)
                                                                <option value="{{ $levelKey }}">{{ $levelLabel }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label class="form-label">Notify Roles</label>
                                                        <select class="form-control select2-multiple email-rule-roles" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[__INDEX__][role_ids][]" data-placeholder="Choose roles">
                                                            @foreach($props['roles'] as $roleId => $roleName)
                                                                <option value="{{ $roleId }}">{{ $roleName }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label class="form-label">Notify Users</label>
                                                        <select class="form-control select2-multiple email-rule-users" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[__INDEX__][selected_users][]" data-placeholder="Choose users">
                                                            @foreach(($props['users'] ?? []) as $userId => $userLabel)
                                                                <option value="{{ $userId }}">{{ $userLabel }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                        <label class="form-label">Condition (JSON)</label>
                                                        <textarea class="form-control font-monospace" rows="4" name="email_notification_rules[__INDEX__][condition]" placeholder='{"AND":[{"attribute":"field_code","operator":"eq","value":"Yes"}]}'></textarea>
                                                        <small class="text-muted">Leave empty to always send when enabled.</small>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                        <label class="form-label">Email Subject</label>
                                                        <input type="text" class="form-control" name="email_notification_rules[__INDEX__][subject]" placeholder="Submission alert for {RECIPIENT_NAME}">
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                        <label class="form-label">Email Body</label>
                                                        <textarea class="form-control" rows="5" name="email_notification_rules[__INDEX__][body]" placeholder="Dear {RECIPIENT_NAME},&#10;&#10;{USER_NAME} has submitted {FORM_NAME}."></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    </div>
                                    @break
                            @endswitch
                            @if($props['type'] != 'hidden')
                            </div>
                            @endif
                        @endforeach
                        
                        <div class="col-md-12 mb-3">
                            <div class="float-end">
                                <a href="{{$base_url}}s" class="btn btn-dark waves-effect waves-light">Back</a>
                                <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                            </div>
                        </div>
                    </div>
                </div> <!-- end card-body -->
                </form>
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>
</div>
<style type="text/css">
    .ms-container {max-width: 100%}
</style>
@endsection

@section('script')
<script src="{{asset('assets/libs/select2/select2.min.js')}}"></script>
<script src="{{asset('assets/libs/multiselect/multiselect.min.js')}}"></script>
<script src="{{asset('assets/libs/multiselect/jquery.quicksearch.js')}}"></script>
<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('[data-toggle="select2"]').select2();
        $('.dropify').dropify({
            messages: {
                'default': 'Drag and drop a file here or click',
                'replace': 'Drag and drop or click to replace',
                'remove': 'Remove',
                'error': 'Ooops, something wrong appended.'
            },
            error: {
                'fileSize': 'The file size is too big (500MB max).'
            }
        });

        $('#btn-add-approver').click(function(){
            $('#approver-wrapper').append(`<div class="col-md-6 mb-2">
                                                <div class="row">
                                                    <div class="col-10">
                                                        <select class="form-control" name="workflow_approvers[]" required>
                                                            <option value=""> -- Select Metric -- </option>
                                                            @foreach($fields['workflow_approvers']['approvers'] ?? [] as $k => $v)
                                                            <option value="{{$k}}">{{$v}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-2">
                                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button>
                                                    </div>
                                                </div>
                                            </div>`);

            $('.btn-remove').unbind();
            $('.btn-remove').click(function(){
                $(this).parent().parent().remove();
            });
            $('.cust-date').unbind();
            $('.cust-date').flatpickr();
        });

        function renumberEmailRules() {
            $('#email-notification-rules-wrapper .email-notification-rule').each(function(index) {
                $(this).attr('data-rule-index', index);
                $(this).find('.rule-number').text(index + 1);
                $(this).find('[name^="email_notification_rules["]').each(function() {
                    const name = $(this).attr('name');
                    if (!name) {
                        return;
                    }
                    $(this).attr('name', name.replace(/email_notification_rules\[\d+\]/, 'email_notification_rules[' + index + ']'));
                });
            });
        }

        function initEmailRuleSelects($container) {
            $container.find('.email-rule-managers, .email-rule-roles, .email-rule-users').each(function() {
                if (!$(this).hasClass('select2-hidden-accessible')) {
                    $(this).select2({ width: '100%' });
                }
            });
        }

        initEmailRuleSelects($('#email-notification-rules-wrapper'));

        function toggleEmailNotificationPanel() {
            const enabled = $('input[name="email_notification"]:checked').val() === 'yes';
            $('#email-notification-rules-panel').toggleClass('d-none', !enabled);
        }

        toggleEmailNotificationPanel();
        $('input[name="email_notification"]').on('change', toggleEmailNotificationPanel);

        function toggleUserAttributesField() {
            const show = $('input[name="show_user_attributes"]:checked').val() !== 'no';
            $('#field-user_attributes').closest('.mb-3').toggle(show);
        }
        toggleUserAttributesField();
        $('input[name="show_user_attributes"]').on('change', toggleUserAttributesField);

        $(document).on('click', '.btn-remove-email-rule', function() {
            $(this).closest('.email-notification-rule').remove();
            renumberEmailRules();
        });

        $('#btn-add-email-rule').click(function() {
            const template = $('#email-notification-rule-template').html();
            const index = $('#email-notification-rules-wrapper .email-notification-rule').length;
            const html = template
                .replace(/__INDEX__/g, index)
                .replace(/__NUMBER__/g, index + 1);
            const $rule = $(html);
            $('#email-notification-rules-wrapper').append($rule);
            initEmailRuleSelects($rule);
            renumberEmailRules();
        });

    });
</script>
@endsection