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

@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/flatpickr/flatpickr.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" action="{{ $form_action ?? url()->current() }}" 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')
                            @php
                                $showIfAttr = '';
                                if (!empty($props['showIf']) && is_array($props['showIf'])) {
                                    foreach ($props['showIf'] as $sk => $sv) {
                                        $showIfAttr = 'data-show-if-field="'.e($sk).'" data-show-if-value="'.e($sv).'"';
                                        break;
                                    }
                                }
                            @endphp
                            <div id="wrap-{{$field}}" class="col-md-{{isset($props['fullwidth'])?'12':'6'}} mb-3 field-wrap" data-field="{{$field}}" {!! $showIfAttr !!}>
                            <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' && isset($item->{$field})?$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="{{isset($item->{$field})?$item->{$field}:''}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    @break
                                @case('date')
                                    <input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control datepicker" placeholder="Enter {{$props['title']}}" value="{{isset($item->{$field})?$item->{$field}:''}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    @break
                                @case('select')
                                    @php
                                        $__selected = (isset($item->{$field}) && $item->{$field} !== '' && $item->{$field} !== null)
                                            ? $item->{$field}
                                            : ($props['default'] ?? null);
                                    @endphp
                                    <select class="form-control" id="field-{{$field}}" name="{{$field}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        @if($field !== 'default_interval')
                                        <option value=""> -- Select {{$props['title']}} -- </option>
                                        @endif
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{ (string)$__selected === (string)$k ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('multiselect')
                                    @php
                                        $__selectedList = (isset($item->{$field}) && is_array($item->{$field}) && count($item->{$field}))
                                            ? $item->{$field}
                                            : ($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}}" {{is_array($__selectedList) && in_array($k, $__selectedList) ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('color')
                                    @php
                                        $colorVal = isset($item->{$field}) ? (string) $item->{$field} : '';
                                        $pickerVal = (preg_match('/^#[0-9A-Fa-f]{6}$/', $colorVal)) ? $colorVal : '#ffffff';
                                    @endphp
                                    <div class="d-flex align-items-center">
                                        <input type="color" class="form-control form-control-color me-2" style="width:50px;padding:2px" value="{{ $pickerVal }}" oninput="document.getElementById('field-{{$field}}').value = this.value">
                                        <input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="#RRGGBB" value="{{ $colorVal }}">
                                    </div>
                                    @break
                                @case('image')
                                    <div class="mt-3">
                                        <input type="file" name="{{$field}}" class="dropify" data-default-file="{{isset($item->{$field}) && $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('rank_roles')
                                    <div><button type="button" class="btn btn-info btn-xs float-end" id="btn-add-rank-role">Add Rank Role</button></div>
                                    <table class="table mb-0" id="table-rank-roles">
                                        <thead>
                                        <tr>
                                            <th>Title</th>
                                            <th>Role</th>
                                            <th>Limit</th>
                                            <th>Sort Order</th>
                                            <th>Delete</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                    @php
                                        $rankRoles = ($mode == 'edit' && isset($item->{$field}) && is_array($item->{$field})) ? $item->{$field} : [];
                                    @endphp
                                    @if(count($rankRoles) > 0)
                                        @foreach($rankRoles as $map)
                                        @php
                                            $map = is_object($map) ? $map : (object) $map;
                                        @endphp
                                        <tr>
                                            <td><input type="text" name="rank_roles[title][]" class="form-control" value="{{ $map->title ?? '' }}" required></td>
                                            <td>
                                                <select class="form-control rank-role-select" name="rank_roles[role][]" required>
                                                    <option value=""> -- Select Role -- </option>
                                                    @foreach($props['roles'] as $k => $v)
                                                    <option value="{{$k}}" {{isset($map->role) && $map->role == $k ? 'selected="selected"':''}}>{{$v}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="number" name="rank_roles[limit][]" class="form-control" value="{{ $map->limit ?? 10 }}" min="1"></td>
                                            <td><input type="number" name="rank_roles[sort_order][]" class="form-control" value="{{ $map->sort_order ?? 0 }}"></td>
                                            <td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></td>
                                        </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td><input type="text" name="rank_roles[title][]" class="form-control" value="" required></td>
                                            <td>
                                                <select class="form-control rank-role-select" name="rank_roles[role][]" required>
                                                    <option value=""> -- Select Role -- </option>
                                                    @foreach($props['roles'] as $k => $v)
                                                    <option value="{{$k}}">{{$v}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="number" name="rank_roles[limit][]" class="form-control" value="10" min="1"></td>
                                            <td><input type="number" name="rank_roles[sort_order][]" class="form-control" value="0"></td>
                                            <td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></td>
                                        </tr>
                                    @endif
                                        </tbody>
                                    </table>
                                    @break
                                @case('mapping')
                                    <div><button type="button" class="btn btn-info btn-xs float-end" id="btn-add-mapping">Add Mapping</button></div>
                                    <table class="table mb-0" id="table-metrics">
                                        <thead>
                                        <tr>
                                            <th>Metric</th>
                                            <th>Display</th>
                                            <th>Sort Order</th>
                                            <th>Weight</th>
                                            <th>Delete</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                    @php
                                        $metricRows = ($mode == 'edit' && isset($item->{$field}) && is_array($item->{$field})) ? $item->{$field} : [];
                                    @endphp
                                    @if(count($metricRows) > 0)
                                        @foreach($metricRows as $map)
                                        @php
                                            $map = is_object($map) ? $map : (object) $map;
                                        @endphp
                                        <tr>
                                            <td>
                                                <select class="form-control metric-select" name="metric[]" required>
                                                    <option value=""> -- Select Metric -- </option>
                                                    @foreach($props['metrics'] as $k => $v)
                                                    <option value="{{$k}}" {{isset($map->metric) && $map->metric == $k ? 'selected="selected"':''}}>{{$v}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="text" name="display_unit[]" class="form-control" value="{{ $map->display ?? '' }}"></td>
                                            <td><input type="number" name="metric_sort_order[]" class="form-control" value="{{ $map->sort_order ?? 0 }}"></td>
                                            <td><input type="number" name="weight[]" class="form-control" value="{{ $map->weight ?? 1 }}"></td>
                                            <td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></td>
                                        </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td>
                                                <select class="form-control metric-select" name="metric[]" required>
                                                    <option value=""> -- Select Metric -- </option>
                                                    @foreach($props['metrics'] as $k => $v)
                                                    <option value="{{$k}}">{{$v}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="text" name="display_unit[]" class="form-control" value=""></td>
                                            <td><input type="number" name="metric_sort_order[]" class="form-control" value="0"></td>
                                            <td><input type="number" name="weight[]" class="form-control" value="1"></td>
                                            <td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></td>
                                        </tr>
                                    @endif
                                        </tbody>
                                    </table>
                                    @break
                                @case('combined_metrics')
                                    <div><button type="button" class="btn btn-info btn-xs float-end" id="btn-add-metric">Add Metric</button></div>
                                    <table class="table mb-0" id="table-combined">
                                        <thead>
                                        <tr>
                                            <th width="10%">Type</th>
                                            <th width="10%">Title</th>
                                            <th width="65%">Include Metrics</th>
                                            <th width="8%">List View?</th>
                                            <th width="7%">Delete?</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                    @php
                                        $combinedRows = [];
                                        if ($mode == 'edit' && isset($item->{$field})) {
                                            $decoded = is_array($item->{$field}) ? $item->{$field} : json_decode($item->{$field});
                                            $combinedRows = is_array($decoded) ? $decoded : [];
                                        }
                                    @endphp
                                    @foreach($combinedRows as $i => $map)
                                        @php
                                            $map = is_object($map) ? $map : (object) $map;
                                            $mapFields = isset($map->fields) && is_array($map->fields) ? $map->fields : [];
                                        @endphp
                                        <tr>
                                            <td>
                                                <select class="form-control" name="combined_metrics[type][]" required>
                                                    <option value=""> -- Select Type -- </option>
                                                    <option value="prescribers" {{isset($map->type) && $map->type == 'prescribers' ? 'selected':''}}>Prescribers (no of)</option>
                                                    <option value="unique_new"  {{isset($map->type) && $map->type == 'unique_new' ? 'selected':''}}>Unique New Prescribers (launch)</option>
                                                    <option value="combination" {{isset($map->type) && $map->type == 'combination' ? 'selected':''}}>Combination (Total)</option>
                                                    <option value="mtd" {{isset($map->type) && $map->type == 'mtd' ? 'selected':''}}>MTD Value</option>
                                                    <option value="ytd" {{isset($map->type) && $map->type == 'ytd' ? 'selected':''}}>YTD Value</option>
                                                    <option value="financial_ytd" {{isset($map->type) && $map->type == 'financial_ytd' ? 'selected':''}}>Financial YTD Value</option>
                                                    <option value="overall_metrics" {{isset($map->type) && $map->type == 'overall_metrics' ? 'selected':''}}>Overall Metrics</option>
                                                    <option value="unit_for_ranking" {{isset($map->type) && $map->type == 'unit_for_ranking' ? 'selected':''}}>Units For Ranking</option>
                                                    <option value="active_user" {{isset($map->type) && $map->type == 'active_user' ? 'selected':''}}>Active Users</option>
                                                    <option value="mtd_comparison" {{isset($map->type) && $map->type == 'mtd_comparison' ? 'selected':''}}>MTD Comparison</option>
                                                </select>
                                            </td>
                                            <td><input type="text" name="combined_metrics[title][]" class="form-control" value="{{isset($map->title)?$map->title:''}}"></td>
                                            <td><select class="form-control select2-multiple" data-toggle="select2" data-width="100%" multiple="multiple" data-placeholder="Choose Metrics" name="combined_metrics[fields][{{$i}}][]">
                                                    <option value=""> -- Select Multiple Metrics -- </option>
                                                    @foreach($fields['metrics']['metrics'] as $k => $v)
                                                    <option value="{{$k}}" {{in_array($k, $mapFields) ? 'selected="selected"':''}}>{{$v}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><select name="combined_metrics[list_view][]" class="form-control">
                                                <option value="no" {{isset($map->list_view)&&$map->list_view=='no'?'selected':''}}>No</option>
                                                <option value="yes" {{isset($map->list_view)&&$map->list_view=='yes'?'selected':''}}>Yes</option>
                                            </select></td>
                                            <td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></td>
                                        </tr>
                                    @endforeach
                                        </tbody>
                                    </table>
                                    @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%}
    #wrap-leaderboard_team_ids, #wrap-view_mode { display: none; }
</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="{{ URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.datepicker').flatpickr({
            dateFormat: "m/d/Y"
        });

        function initMetricSelect2($context) {
            ($context || $('#table-metrics')).find('select.metric-select').each(function() {
                let $select = $(this);
                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }
                $select.select2({
                    width: '100%',
                    placeholder: '-- Select Metric --',
                    allowClear: true
                });
            });
        }

        function initRankRoleSelect2($context) {
            ($context || $('#table-rank-roles')).find('select.rank-role-select').each(function() {
                let $select = $(this);
                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }
                $select.select2({
                    width: '100%',
                    placeholder: '-- Select Role --',
                    allowClear: true
                });
            });
        }

        $('[data-toggle="select2"]').not('#field-leaderboard_team_ids').select2();
        initMetricSelect2();
        initRankRoleSelect2();
        $('.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.'
            }
        });

        function setWrapRequired($wrap, show) {
            $wrap.find('input, select, textarea').each(function() {
                var $el = $(this);
                if (show) {
                    if ($el.data('was-required')) {
                        $el.attr('required', 'required');
                    }
                } else {
                    if ($el.is('[required]')) {
                        $el.data('was-required', true);
                    }
                    $el.removeAttr('required');
                }
            });
        }

        function initTeamsSelect2() {
            var $sel = $('#field-leaderboard_team_ids');
            if (!$sel.length || !$('#wrap-leaderboard_team_ids').is(':visible')) {
                return;
            }
            if ($sel.hasClass('select2-hidden-accessible')) {
                $sel.select2('destroy');
            }
            $sel.select2({
                width: '100%',
                placeholder: 'Choose Teams',
                allowClear: true
            });
        }

        function toggleLeaderboardTypeFields() {
            var type = $('#field-leaderboard_roles_type').val() || 'roles';
            var isTeam = type === 'team';
            $('#wrap-leaderboard_team_ids').toggle(isTeam);
            $('#wrap-view_mode').toggle(isTeam);
            $('#wrap-rank_roles').toggle(!isTeam);
            setWrapRequired($('#wrap-leaderboard_team_ids'), isTeam);
            setWrapRequired($('#wrap-view_mode'), isTeam);
            setWrapRequired($('#wrap-rank_roles'), !isTeam);
            if (isTeam) {
                initTeamsSelect2();
            }
        }
        $('#field-leaderboard_roles_type').on('change', toggleLeaderboardTypeFields);
        toggleLeaderboardTypeFields();

        function toggleUserAttributesField() {
            var show = $('#field-show_user_attributes').val() === 'yes';
            $('#field-user_attributes').closest('.mb-3').toggle(show);
        }
        toggleUserAttributesField();
        $('#field-show_user_attributes').on('change', toggleUserAttributesField);

        function bindRemoveButtons() {
            $('.btn-remove').off('click').on('click', function() {
                $(this).closest('tr').remove();
            });
        }

        bindRemoveButtons();

        $('#btn-add-rank-role').click(function(){
            $('table#table-rank-roles tbody').append(`<tr>
                <td><input type="text" name="rank_roles[title][]" class="form-control" value="" required></td>
                <td>
                    <select class="form-control rank-role-select" name="rank_roles[role][]" required>
                        <option value=""> -- Select Role -- </option>
                        @if(isset($fields['rank_roles']['roles']))
                        @foreach($fields['rank_roles']['roles'] as $k => $v)
                        <option value="{{$k}}">{{$v}}</option>
                        @endforeach
                        @endif
                    </select>
                </td>
                <td><input type="number" name="rank_roles[limit][]" class="form-control" value="10" min="1"></td>
                <td><input type="number" name="rank_roles[sort_order][]" class="form-control" value="0"></td>
                <td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></td>
            </tr>`);
            initRankRoleSelect2($('table#table-rank-roles tbody tr').last());
            bindRemoveButtons();
        });

        @if(isset($fields['metrics']))
        $('#btn-add-mapping').click(function(){
            $('table#table-metrics tbody').append(`<tr>
                <td>
                    <select class="form-control metric-select" name="metric[]" required>
                        <option value=""> -- Select Metric -- </option>
                        @foreach($fields['metrics']['metrics'] as $k => $v)
                        <option value="{{$k}}">{{$v}}</option>
                        @endforeach
                    </select>
                </td>
                <td><input type="text" name="display_unit[]" class="form-control" value=""></td>
                <td><input type="number" name="metric_sort_order[]" class="form-control" value="0"></td>
                <td><input type="number" name="weight[]" class="form-control" value="1"></td>
                <td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></td>
            </tr>`);
            initMetricSelect2($('table#table-metrics tbody tr').last());
            bindRemoveButtons();
        });

        let comcount = 100;
        $('#btn-add-metric').click(function(){
            $('table#table-combined tbody').append(`<tr>
                <td>
                    <select class="form-control" name="combined_metrics[type][${comcount}]" required>
                        <option value=""> -- Select Type -- </option>
                        <option value="prescribers">Prescribers (no of)</option>
                        <option value="unique_new">Unique New Prescribers (launch)</option>
                        <option value="combination">Combination (Total)</option>
                        <option value="mtd">MTD Value</option>
                        <option value="ytd">YTD Value</option>
                        <option value="financial_ytd">Financial YTD Value</option>
                        <option value="overall_metrics">Overall Metrics</option>
                        <option value="unit_for_ranking">Units For Ranking</option>
                        <option value="active_user">Active Users</option>
                        <option value="mtd_comparison">MTD Comparison</option>
                    </select>
                </td>
                <td><input type="text" name="combined_metrics[title][${comcount}]" class="form-control" value=""></td>
                <td><select class="form-control select2-multiple" data-toggle="select2" data-width="100%" multiple="multiple" data-placeholder="Choose Metrics" name="combined_metrics[fields][${comcount}][]">
                        <option value=""> -- Select Multiple Metrics -- </option>
                        @foreach($fields['metrics']['metrics'] as $k => $v)
                        <option value="{{$k}}">{{$v}}</option>
                        @endforeach
                    </select>
                </td>
                <td><select name="combined_metrics[list_view][${comcount}]" class="form-control">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select></td>
                <td><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></td>
            </tr>`);
            $('[data-toggle="select2"]').select2();
            bindRemoveButtons();
            comcount++;
        });
        @endif
    });
</script>
@endsection