@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" />
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/flatpickr/flatpickr.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>
                                <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 schedule-field schedule-field-{{$field}}">
                            <label for="field-{{$field}}" class="form-label">{{$props['title']}} {!!isset($props['required'])&&$props['required'] ? '<span class="text-danger">*</span>':''!!} </label>
                            @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')
                                    <input type="{{$props['type']}}" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}" {{isset($props['required'])&&$props['required']?'required':'' }} {!!isset($props['attributes']) ? $props['attributes']:'' !!}>
                                    @break
                                @case('date')
                                    <input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}" data-provide="datepicker" data-date-format="mm-dd-yyyy" data-date-autoclose="true" {{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'&&isset($item->{$field})?$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('radio')
                                    <div class="row ps-2">
                                    @foreach($props['values'] as $k => $v)
                                        <div class="form-check col-auto form-check-blue mb-2">
                                            <input class="form-check-input" type="radio" name="{{$field}}" value="{{$k}}" id="field-{{$field}}-{{$k}}" {{$mode=='edit' && isset($item->{$field}) && $k == $item->{$field} ? 'checked':''}}>
                                            <label class="form-check-label" for="field-{{$field}}-{{$k}}">{{$v}}</label>
                                        </div>
                                    @endforeach
                                    </div> 
                                    @break
                                @case('checkbox')
                                    <div class="row ps-2">
                                    @foreach($props['values'] as $k => $v)
                                        <div class="form-check col-auto form-check-blue mb-2">
                                            <input class="form-check-input" type="checkbox" name="{{$field}}[]" value="{{$k}}" id="field-{{$field}}-{{$k}}" {{$mode=='edit' && isset($item->{$field}) && in_array($k, $item->{$field}) ? 'checked':''}}>
                                            <label class="form-check-label" for="field-{{$field}}-{{$k}}">{{$v}}</label>
                                        </div>
                                    @endforeach
                                    </div> 
                                    @break
                                @case('multiselect')
                                    <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}}" {{$mode=='edit' && isset($item->{$field}) && in_array($k, $item->{$field}) ? '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' && in_array($k, $item->{$field}) ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('yesno')
                                    <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" {{$mode=='edit' && $item->{$field} == '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" {{$mode=='edit' && $item->{$field} == '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'&&isset($item->{$field})?$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('multiimage')
                                    <div class="mt-3" id="file_wrapper">
                                        <input type="file" name="{{$field}}[]" multiple class="dropify" 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 Reminder</button></div>
                                    <div id="approver-wrapper" class="row">
                                        <div class="col-md-12 mb-2">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <label>Time</label>
                                                </div>
                                                <div class="col-md-1">
                                                    <label>Days(0 for same day)</label>
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Before/After</label>
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Send To</label>
                                                </div>
                                                <div class="col-md-2 reminder-manager-header">
                                                    <label>Manager</label>
                                                </div>
                                                <div class="col-md-1">
                                                    <label>Check Submission</label>
                                                </div>
                                                <div class="col-md-1 reminder-checksubmission-days-header">
                                                    <label>Check Days</label>
                                                </div>
                                                <div class="col-1"></div>
                                            </div>
                                        </div>

                                        @if($mode=='edit')
                                            @foreach($item->{$field} as $map)
                                            @php
                                                $sendTo = $map->send_to ?? ((isset($map->manager) && $map->manager !== '' && $map->manager !== 'none') ? 'both' : 'rep');
                                                $managerLevels = ['l1', 'l2', 'l3', 'l4'];
                                                $managerValues = [];
                                                if (!empty($map->manager) && $map->manager !== 'none') {
                                                    $rawManager = is_array($map->manager)
                                                        ? $map->manager
                                                        : array_filter(array_map('trim', explode(',', strtolower($map->manager))));
                                                    $managerValues = array_values(array_intersect($rawManager, $managerLevels));
                                                }
                                                $selectedUsers = [];
                                                if (!empty($map->selected_users)) {
                                                    $selectedUsers = is_array($map->selected_users)
                                                        ? $map->selected_users
                                                        : array_values(array_filter(array_map('trim', explode(',', $map->selected_users))));
                                                }
                                            @endphp
                                            <div class="col-md-12 mb-5 reminder-row">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <input type="text" class="form-control 24hours-timepicker" name="reminder[time][]" value="{{$map->time}}" required>
                                                    </div>
                                                    <div class="col-md-1">
                                                        <input type="text" class="form-control" name="reminder[days][]" value="{{$map->days}}" required>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <select class="form-control" name="reminder[beore_or_after][]" required>
                                                            <option value="before" {{$map->beore_or_after=='before'?'selected':''}}>Before</option>
                                                            <option value="after" {{$map->beore_or_after=='after'?'selected':''}}>After</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <select class="form-control reminder-send-to" name="reminder[send_to][]" required>
                                                            <option value="rep" {{ $sendTo == 'rep' ? 'selected' : '' }}>Rep</option>
                                                            <option value="manager" {{ $sendTo == 'manager' ? 'selected' : '' }}>Managers</option>
                                                            <option value="both" {{ $sendTo == 'both' ? 'selected' : '' }}>Both</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-2 reminder-manager-field">
                                                        <select class="form-control select2-multiple reminder-manager-select" data-toggle="select2" data-width="100%" multiple="multiple" data-placeholder="Choose Managers / Users" {{ in_array($sendTo, ['manager', 'both']) ? '' : 'disabled' }}>
                                                            <optgroup label="Managers">
                                                                <option value="l1" {{ in_array('l1', $managerValues) ? 'selected' : '' }}>L1 Manager</option>
                                                                <option value="l2" {{ in_array('l2', $managerValues) ? 'selected' : '' }}>L2 Manager</option>
                                                                <option value="l3" {{ in_array('l3', $managerValues) ? 'selected' : '' }}>L3 Manager</option>
                                                                <option value="l4" {{ in_array('l4', $managerValues) ? 'selected' : '' }}>L4 Manager</option>
                                                            </optgroup>
                                                            @if(!empty($props['users']))
                                                            <optgroup label="Users">
                                                                @foreach($props['users'] as $uid => $ulabel)
                                                                <option value="{{$uid}}" {{ in_array($uid, $selectedUsers) ? 'selected' : '' }}>{{$ulabel}}</option>
                                                                @endforeach
                                                            </optgroup>
                                                            @endif
                                                        </select>
                                                        <input type="hidden" name="reminder[manager][]" class="reminder-manager-value" value="{{ implode(',', $managerValues) }}">
                                                        <input type="hidden" name="reminder[selected_users][]" class="reminder-selected-users-value" value="{{ implode(',', $selectedUsers) }}">
                                                    </div>
                                                    <div class="col-md-1">
                                                        <select class="form-control reminder-check-submission" name="reminder[checksubmission][]" required>
                                                            <option value="no" {{isset($map->checksubmission)&&$map->checksubmission=='no'?'selected':''}}>No</option>
                                                            <option value="yes" {{isset($map->checksubmission)&&$map->checksubmission=='yes'?'selected':''}}>Yes</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-1 reminder-checksubmission-days-field">
                                                        <input type="number" min="0" step="1" class="form-control reminder-checksubmission-days-input" name="reminder[checksubmission_days][]" value="{{ $map->checksubmission_days ?? '' }}" placeholder="Days" {{ isset($map->checksubmission) && $map->checksubmission == 'yes' ? 'required' : 'disabled' }}>
                                                    </div>
                                                    <div class="col-1">
                                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button>
                                                    </div>
                                                    <div class="col-10 mt-2">
                                                        <textarea name="reminder[message][]" class="form-control" placeholder="Enter Message" required>{{$map->message}}</textarea>
                                                    </div>
                                                    <div class="col-2 mt-2">
                                                        <input type="text" class="form-control" name="reminder[plan_date_field][]" value="{{isset($map->plan_date_field)?$map->plan_date_field:''}}" placeholder="Plan date field">
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        @endif
                                    </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 src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('assets/libs/flatpickr/flatpickr.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).'
            }
        });

        $('.24hours-timepicker').flatpickr({
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true
        });

        const MANAGER_LEVELS = ['l1', 'l2', 'l3', 'l4'];
        const domainUsers = @json($fields['reminders']['users'] ?? []);

        function escapeHtml(str) {
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;');
        }

        function getDomainUserOptionsHtml() {
            let html = '';
            Object.keys(domainUsers).forEach(function(id) {
                html += '<option value="' + escapeHtml(id) + '">' + escapeHtml(domainUsers[id]) + '</option>';
            });
            return html;
        }

        function getSelectedScheduleType() {
            return $('input[name="days_or_dates"]:checked').val() || 'days';
        }

        function toggleScheduleFields() {
            const type = getSelectedScheduleType();
            $('.schedule-field-days, .schedule-field-dates').hide();

            if (type === 'days') {
                $('.schedule-field-days').show();
            } else if (type === 'dates') {
                $('.schedule-field-dates').show();
            }
        }

        if ($('input[name="days_or_dates"]:checked').length === 0) {
            $('#field-days_or_dates-days').prop('checked', true);
        }
        toggleScheduleFields();
        $('input[name="days_or_dates"]').on('change', toggleScheduleFields);

        function syncManagerValue($row) {
            const values = $row.find('.reminder-manager-select').val() || [];
            const managers = values.filter(function(v) { return MANAGER_LEVELS.indexOf(v) !== -1; });
            const users = values.filter(function(v) { return MANAGER_LEVELS.indexOf(v) === -1; });
            $row.find('.reminder-manager-value').val(managers.join(','));
            $row.find('.reminder-selected-users-value').val(users.join(','));
        }

        function toggleManagerField($row) {
            const sendTo = $row.find('.reminder-send-to').val();
            const enabled = sendTo === 'manager' || sendTo === 'both';
            const $select = $row.find('.reminder-manager-select');
            $select.prop('disabled', !enabled);
            if ($select.data('select2')) {
                $select.trigger('change.select2');
            }
            if (!enabled) {
                $select.val([]).trigger('change');
                $row.find('.reminder-manager-value').val('');
                $row.find('.reminder-selected-users-value').val('');
            } else {
                syncManagerValue($row);
            }
        }

        function toggleCheckSubmissionField($row) {
            const enabled = $row.find('.reminder-check-submission').val() === 'yes';
            const $daysInput = $row.find('.reminder-checksubmission-days-input');
            $daysInput.prop('disabled', !enabled);
            if (enabled) {
                $daysInput.prop('required', true);
            } else {
                $daysInput.prop('required', false).val('');
            }
        }

        function initReminderRow($row) {
            $row.find('[data-toggle="select2"]').select2({ width: '100%' });
            toggleManagerField($row);
            toggleCheckSubmissionField($row);
        }

        function bindRemove() {
            $('.btn-remove').off('click').on('click', function(){
                $(this).closest('.reminder-row').remove();
            });
        }

        bindRemove();
        $('.reminder-row').each(function() {
            initReminderRow($(this));
        });

        $(document).on('change', '.reminder-send-to', function() {
            toggleManagerField($(this).closest('.reminder-row'));
        });

        $(document).on('change', '.reminder-manager-select', function() {
            syncManagerValue($(this).closest('.reminder-row'));
        });

        $(document).on('change', '.reminder-check-submission', function() {
            toggleCheckSubmissionField($(this).closest('.reminder-row'));
        });

        $('#btn-add-approver').click(function(){
            const userOptionsHtml = getDomainUserOptionsHtml();
            const rowHtml = `<div class="col-md-12 mb-5 reminder-row">
                <div class="row">
                    <div class="col-md-2">
                        <input type="text" class="form-control 24hours-timepicker" name="reminder[time][]" value="" required>
                    </div>
                    <div class="col-md-1">
                        <input type="text" class="form-control" name="reminder[days][]" value="" required>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control" name="reminder[beore_or_after][]" required>
                            <option value="before">Before</option>
                            <option value="after">After</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control reminder-send-to" name="reminder[send_to][]" required>
                            <option value="rep">Rep</option>
                            <option value="manager">Managers</option>
                            <option value="both">Both</option>
                        </select>
                    </div>
                    <div class="col-md-2 reminder-manager-field">
                        <select class="form-control select2-multiple reminder-manager-select" data-toggle="select2" data-width="100%" multiple="multiple" data-placeholder="Choose Managers / Users" disabled>
                            <optgroup label="Managers">
                                <option value="l1">L1 Manager</option>
                                <option value="l2">L2 Manager</option>
                                <option value="l3">L3 Manager</option>
                                <option value="l4">L4 Manager</option>
                            </optgroup>
                            <optgroup label="Users">${userOptionsHtml}</optgroup>
                        </select>
                        <input type="hidden" name="reminder[manager][]" class="reminder-manager-value" value="">
                        <input type="hidden" name="reminder[selected_users][]" class="reminder-selected-users-value" value="">
                    </div>
                    <div class="col-md-1">
                        <select class="form-control reminder-check-submission" name="reminder[checksubmission][]" required>
                            <option value="no" selected>No</option>
                            <option value="yes">Yes</option>
                        </select>
                    </div>
                    <div class="col-md-1 reminder-checksubmission-days-field">
                        <input type="number" min="0" step="1" class="form-control reminder-checksubmission-days-input" name="reminder[checksubmission_days][]" value="" placeholder="Days" disabled>
                    </div>
                    <div class="col-1">
                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button>
                    </div>
                    <div class="col-10 mt-2">
                        <textarea name="reminder[message][]" class="form-control" placeholder="Enter Message" required></textarea>
                    </div>
                    <div class="col-2 mt-2">
                        <input type="text" class="form-control" name="reminder[plan_date_field][]" value="" placeholder="Plan date field">
                    </div>
                </div>
            </div>`;
            const $row = $(rowHtml);
            $('#approver-wrapper').append($row);
            initReminderRow($row);
            bindRemove();
            $row.find('.24hours-timepicker').flatpickr({
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true
            });
        });

        $('#form-availiblity').on('submit', function() {
            $('.reminder-row').each(function() {
                const $row = $(this);
                if (!$row.find('.reminder-manager-select').prop('disabled')) {
                    syncManagerValue($row);
                } else {
                    $row.find('.reminder-manager-value').val('');
                    $row.find('.reminder-selected-users-value').val('');
                }
            });
        });
    });
</script>
@endsection