@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/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' : '' }}>
                                        @break

                                        @case('date')
    <input type="text" id="field-{{ $field }}" name="{{ $field }}"
        class="form-control datepicker"
        placeholder="Enter {{ $props['title'] }}"
        value="{{ $mode == 'edit' && !empty($item->{$field}) 
            ? \Carbon\Carbon::parse($item->{$field})->format('m/d/Y') 
            : '' }}"
        {{ isset($props['required']) && $props['required'] ? 'required' : '' }}>
@break

                                        @case('datetime')
                                            <input type="text" id="field-{{ $field }}" name="{{ $field }}"
                                                class="form-control datetimepicker" placeholder="Enter {{ $props['title'] }}"
                                                value="{{ $mode == 'edit' && isset($item->{$field}) ? $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')
                                            @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' : '' }}>
                                                <option value=""> -- Select {{ $props['title'] }} -- </option>
                                                @foreach ($props['values'] as $k => $v)
                                                    <option value="{{ $k }}"
                                                        {{ (string) $__selected === (string) $k ? 'selected="selected"' : '' }}>
                                                        {{ $v }}</option>
                                                @endforeach
                                            </select>
                                        @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('multiselect')
                                        @php
                                            $__selectedList = (isset($item->{$field}) && is_array($item->{$field}) && count($item->{$field}))
                                                ? $item->{$field}
                                                : ($props['default'] ?? []);
                                        @endphp
                                        <select class="form-control select2" data-toggle="select2" multiple data-width="100%" 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('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' ? $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('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('multicheckbox')
    <div class="row ps-2">
        @foreach($props['values'] as $k => $v)
            <div class="form-check col-md-3 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, (array)$item->{$field}) 
                        ? 'checked' : '' 
                    }}

                    {{ isset($props['required']) && $props['required'] ? 'required' : '' }}
                >

                <label class="form-check-label" for="field-{{ $field }}-{{ $k }}">
                    {{ $v }}
                </label>
            </div>
        @endforeach
    </div>
@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>Name</th>
                                                        <th>Weight</th>
                                                        <th>Target</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if ($mode == 'edit')
                                                        @foreach ($item->{$field} as $map)
                                                            <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 }}"
                                                                                {{ $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="weight[]" class="form-control"
                                                                        value="{{ isset($map->weight) ? $map->weight : 1 }}"></td>

                                                                <td><input type="number" name="metric_target[]" class="form-control"
                                                                        min="0" step="any" placeholder="Target"
                                                                        value="{{ $map->target ?? ($item->metric_target[$loop->index] ?? '') }}"></td>

                                                                <th><button type="button"
                                                                        class="btn btn-danger waves-effect waves-light btn-remove"><i
                                                                            class="mdi mdi-close"></i></button></th>
                                                            </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="weight[]" class="form-control"
                                                                    value="1"></td>

                                                            <td><input type="number" name="metric_target[]" class="form-control"
                                                                    min="0" step="any" placeholder="Target" value=""></td>

                                                            <th><button type="button"
                                                                    class="btn btn-danger waves-effect waves-light btn-remove"><i
                                                                        class="mdi mdi-close"></i></button></th>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        @break

                                        @case('milestonemapping')
                                            <div class="d-flex justify-content-end mb-3">
                                                <button type="button" class="btn btn-primary btn-sm" id="btn-add-milestone">
                                                    + Add Milestone
                                                </button>
                                            </div>

                                            <div id="milestone-container">

                                                @php
                                                    $milestoneCount = isset($item->target) ? count($item->target) : 1;
                                                @endphp

                                                @for ($i = 0; $i < $milestoneCount; $i++)
                                                    <div class="card milestone-card mb-4"
                                                        style="border:1px solid #cfe8ff; box-shadow: 0 8px 34px rgba(4, 4, 2, 0.18);">
                                                        <div class="card-body">

                                                            <input type="hidden" name="milestone_id[]"
                                                                value="{{ $item->milestone_id[$i] ?? '' }}">

                                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                                <h5 class="mb-0">Milestone {{ $i + 1 }}</h5>
                                                                <button type="button"
                                                                    class="btn btn-danger btn-sm btn-remove-milestone">
                                                                    <i class="mdi mdi-close"></i>
                                                                </button>
                                                            </div>

                                                            <div class="row g-3">
                                                                {{-- Target Title --}}
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Target Title</label>
                                                                    <input type="text" name="target_title[]" class="form-control"
                                                                        placeholder="Enter target title"
                                                                        value="{{ $item->target_title[$i] ?? '' }}">
                                                                </div>

                                                                {{-- Target --}}
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Target </label><span
                                                                        class="text-danger"> *</span>
                                                                    <input type="number" name="target[]" class="form-control"
                                                                        value="{{ $item->target[$i] ?? '' }}" required>
                                                                </div>

                                                                {{-- Repeat Target --}}
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Repeat Target</label>
                                                                    <select name="repeat_target[]" class="form-control">
                                                                        <option value="0" @if (($item->repeat_target[$i] ?? '0') == '0') selected @endif>No</option>
                                                                        <option value="1" @if (($item->repeat_target[$i] ?? '0') == '1') selected @endif>Yes</option>
                                                                    </select>
                                                                </div>

                                                                {{-- Roles --}}
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Roles</label><span
                                                                        class="text-danger"> *</span>
                                                                    <select name="roles[{{ $i }}][]"
                                                                        class="form-control select2" multiple required>
                                                                        @foreach ($props['roles'] ?? [] as $k => $v)
                                                                            <option value="{{ $k }}"
                                                                                @if (isset($item->roles[$i]) && in_array($k, $item->roles[$i])) selected @endif>
                                                                                {{ $v }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>

                                                                {{-- Reporting Roles --}}
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Reporting Roles</label><span
                                                                        class="text-danger"> *</span>
                                                                    <select name="reporting_roles[{{ $i }}][]"
                                                                        class="form-control select2" multiple required>
                                                                        @foreach ($props['roles'] ?? [] as $k => $v)
                                                                            <option value="{{ $k }}"
                                                                                @if (isset($item->reporting_roles[$i]) && in_array($k, $item->reporting_roles[$i])) selected @endif>
                                                                                {{ $v }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <hr class="my-4">

                                                            {{-- Notifications --}}
                                                            <h6 class="mb-3">Notifications</h6>
                                                            <div class="row g-3">
                                                                <div class="col-md-3">
                                                                    <div class="form-check mt-4">
                                                                        <input type="checkbox" class="form-check-input"
                                                                            name="user_notification[]"
                                                                            @if (!empty($item->user_notification[$i])) checked @endif>
                                                                        <label class="form-check-label">User Notification</label>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-3">
                                                                    <div class="form-check mt-4">
                                                                        <input type="checkbox" class="form-check-input"
                                                                            name="user_email[]"
                                                                            @if (!empty($item->user_email[$i])) checked @endif>
                                                                        <label class="form-check-label">User Email</label>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-3">
                                                                    <label class="form-label">Manager Notification</label>
                                                                    <select name="manager_notification[{{ $i }}][]"
                                                                        class="form-control select2" multiple>
                                                                        <option value="l1manager"
                                                                            @if (isset($item->manager_notification[$i]) && in_array('l1manager', $item->manager_notification[$i])) selected @endif>L1
                                                                            Manager</option>
                                                                        <option value="l2manager"
                                                                            @if (isset($item->manager_notification[$i]) && in_array('l2manager', $item->manager_notification[$i])) selected @endif>L2
                                                                            Manager</option>
                                                                    </select>
                                                                </div>

                                                                <div class="col-md-3">
                                                                    <label class="form-label">Manager Email</label>
                                                                    <select name="manager_email[{{ $i }}][]"
                                                                        class="form-control select2" multiple>
                                                                        <option value="l1manager"
                                                                            @if (isset($item->manager_email[$i]) && in_array('l1manager', $item->manager_email[$i])) selected @endif>L1
                                                                            Manager</option>
                                                                        <option value="l2manager"
                                                                            @if (isset($item->manager_email[$i]) && in_array('l2manager', $item->manager_email[$i])) selected @endif>L2
                                                                            Manager</option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <hr class="my-4">

                                                            {{-- Badge --}}
                                                            <h6 class="mb-3">Send Badge</h6>
                                                            <div class="row g-3 mb-3">
                                                                <div class="col-md-4">
                                                                    <label class="form-label">Send Badge</label>
                                                                    <select name="send_badge[{{ $i }}][]"
                                                                        class="form-control select2">
                                                                        <option value="">Select Badge</option>
                                                                        @foreach ($props['badges'] ?? [] as $k => $v)
                                                                            <option value="{{ $k }}"
                                                                                @if (isset($item->send_badge[$i]) && in_array($k, $item->send_badge[$i])) selected @endif>
                                                                                {{ $v }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <hr class="my-4">
                                                            <h6 class="mb-3">Send Appreciation</h6>

                                                            <div class="row g-3">
                                                                <div class="col-md-6">
                                                                    <label class="form-label">Appreciation Category</label>
                                                                    <select name="appreciation_category[]"
                                                                        class="form-control select2">
                                                                        <option value=""
                                                                            {{ empty($item->appreciation_category[$i]) ? 'selected' : '' }}>
                                                                            Select Category</option>
                                                                        @foreach ($props['appreciation_categories'] ?? [] as $k => $v)
                                                                            <option value="{{ $k }}"
                                                                                @if (($item->appreciation_category[$i] ?? '') == $k) selected @endif>
                                                                                {{ $v }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>

                                                                <div class="col-md-6">
                                                                    <label class="form-label">Message</label>
                                                                    <textarea name="appreciation_message[]" class="form-control">{{ $item->appreciation_message[$i] ?? '' }}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="row g-3">
                                                                <div class="col-md-12">
                                                                    <label class="form-label">Appreciation Image</label>
                                                                    <select name="appreciation_image[]"
                                                                        class="form-control select2-image">

                                                                        <option value="">Select Image</option>

                                                                        @foreach ($props['appreciation_image'] ?? [] as $id => $img)
                                                                            <option value="{{ $id }}"
                                                                                data-image="{{ $img['image'] }}"
                                                                                @if (($item->appreciation_image[$i] ?? '') == $id) selected @endif>
                                                                                {{ $img['title'] }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>

                                                                    <div class="image-preview-wrapper mt-2"
                                                                        style="position:relative;width:80px;height:80px;">
                                                                        <img class="appreciation_preview"
                                                                            src="{{ $item->appreciation_image[$i] ?? '' }}"
                                                                            style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #ddd;padding:3px;">
                                                                        <span class="preview_eye"
                                                                            style="position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.6);color:#fff;padding:4px;border-radius:4px;cursor:pointer;font-size:12px;">
                                                                            👁
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endfor
                                            </div>

                                            {{-- FULLSCREEN IMAGE MODAL --}}
                                            <div id="imagePreviewModal"
                                                style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;">
                                                <img id="fullscreen_image"
                                                    style="max-width:90%;max-height:90%;border-radius:6px;">
                                            </div>
                                        @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>
                                                    @if ($mode == 'edit')
                                                        @foreach (json_decode($item->{$field}) as $i => $map)
                                                            <tr>
                                                                <td>
                                                                    <select class="form-control" name="combined_metrics[type][]"
                                                                        required>
                                                                        <option value=""> -- Select Type -- </option>
                                                                        <option value="prescribers"
                                                                            {{ $map->type == 'prescribers' ? 'selected' : '' }}>
                                                                            Prescribers (no of)</option>
                                                                        <option value="unique_new"
                                                                            {{ $map->type == 'unique_new' ? 'selected' : '' }}>
                                                                            Unique New Prescribers (launch)</option>
                                                                        <option value="combination"
                                                                            {{ $map->type == 'combination' ? 'selected' : '' }}>
                                                                            Combination (Total)</option>
                                                                        <option value="mtd"
                                                                            {{ $map->type == 'mtd' ? 'selected' : '' }}>MTD Value
                                                                        </option>
                                                                        <option value="ytd"
                                                                            {{ $map->type == 'ytd' ? 'selected' : '' }}>YTD Value
                                                                        </option>
                                                                        <option value="unit_for_ranking"
                                                                            {{ $map->type == 'unit_for_ranking' ? 'selected' : '' }}>
                                                                            Units For Ranking</option>
                                                                        <option value="active_user"
                                                                            {{ $map->type == 'active_user' ? 'selected' : '' }}>
                                                                            Active Users</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 }}"
                                                                                {{ isset($map->fields) && is_array($map->fields) && in_array($k, $map->fields) ? '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>
                                                                <th><button type="button"
                                                                        class="btn btn-danger waves-effect waves-light btn-remove"><i
                                                                            class="mdi mdi-close"></i></button></th>
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                </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%
        }
    </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 type="text/javascript">
function toggleUserAttributesField() {
    var show = $('#field-show_user_attributes').val() === 'yes';
    var $field = $('#field-user_attributes');
    $field.closest('.mb-3').toggle(show);
    if (show && $field.length) {
        if ($field.hasClass('select2-hidden-accessible')) {
            $field.select2('destroy');
        }
        $field.select2({ width: '100%' });
    }
}

$(document).ready(function() {
    $('#field-show_user_attributes').on('change', toggleUserAttributesField);

    $('.datepicker').flatpickr({
        dateFormat: "m/d/Y"
    });

    $('.datetimepicker').flatpickr({
        enableTime: true,
        dateFormat: "m/d/Y H:i"
    });

    if ($('#field-send_time').length) {
        $('#field-send_time').flatpickr({
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true
        });
    }

    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"]').length) {
        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);
    }

    @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="weight[]" class="form-control" value="1"></td>
            <td><input type="number" name="metric_target[]" class="form-control" min="0" step="any" placeholder="Target" value=""></td>
            <th><button type="button" class="btn btn-danger btn-remove"><i class="mdi mdi-close"></i></button></th>
        </tr>`);

        initMetricSelect2($('table#table-metrics tbody tr').last());

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

        $('.cust-date').flatpickr();

    });

    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="unit_for_ranking">Unit For Ranking</option>
                    <option value="active_user">Active User</option>
                </select>
            </td>
            <td><input type="text" name="combined_metrics[title][${comcount}]" class="form-control"></td>
            <td>
                <select class="form-control select2-multiple" data-toggle="select2" multiple 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>
            <th><button type="button" class="btn btn-danger btn-remove"><i class="mdi mdi-close"></i></button></th>
        </tr>`);

        // ✅ FIX: ONLY this (no direct select2 call)
        initializeSelect2();

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

        $('.cust-date').flatpickr();

        comcount++;
    });

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

    @endif

});
</script>

    <script>
        $(document).ready(function() {

            // Initialize Select2 on page load
            initializeSelect2();

            // Load preview for existing milestones
            $('.select2-image').each(function() {
                updatePreview(this);
            });

            $('.milestone-card').each(function() {
                validateAppreciation($(this));
            });

        });


        /* --------------------------
        METRIC SELECT2 (Choose Metric mapping rows)
        ---------------------------*/
        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
                });
            });
        }

        /* --------------------------
        SELECT2 INITIALIZATION
        ---------------------------*/
       function initializeSelect2() {

    // destroy existing select2 on elements we reinitialize
    $('[data-toggle="select2"], .select2, .select2-image').each(function () {
        if ($(this).hasClass('select2-hidden-accessible')) {
            $(this).select2('destroy');
        }
    });

    // normal select2
    $('[data-toggle="select2"], .select2').select2({
        width: '100%'
    });

    // image select2
    $('.select2-image').select2({
        width: '100%',
        templateResult: formatImage,
        templateSelection: formatImage,
        escapeMarkup: function(m) {
            return m;
        }
    });

    initMetricSelect2();
    toggleUserAttributesField();
}


        /* --------------------------
        SELECT2 IMAGE TEMPLATE
        ---------------------------*/
        function formatImage(option) {

            if (!option.id) return option.text;

            let img = $(option.element).data('image');

            if (!img) return option.text;

            return $(
                '<span style="display:flex;align-items:center;">' +
                '<img src="' + img +
                '" style="width:40px;height:40px;object-fit:cover;margin-right:8px;border-radius:4px;">' +
                '<span>' + option.text + '</span>' +
                '</span>'
            );

        }


        /* --------------------------
        UPDATE PREVIEW IMAGE
        ---------------------------*/
        function updatePreview(select) {

            let img = $(select).find('option:selected').data('image');
            let preview = $(select)
                .closest('.milestone-card')
                .find('.image-preview-wrapper');

            if (img) {
                preview.show();
                preview.find('img').attr('src', img);
            } else {
                preview.hide();
                preview.find('img').attr('src', '');
            }

        }

        function validateAppreciation(wrapper) {

    let category = wrapper.find('select[name="appreciation_category[]"]').first().val();
    let message = (wrapper.find('textarea[name="appreciation_message[]"]').first().val() || '').trim();
    let image = wrapper.find('select[name="appreciation_image[]"]').first().val();

    if (category) {
        wrapper.find('textarea[name="appreciation_message[]"]').prop('required', true);
        wrapper.find('select[name="appreciation_image[]"]').prop('required', true);
    } else {
        wrapper.find('textarea[name="appreciation_message[]"]').prop('required', false);
        wrapper.find('select[name="appreciation_image[]"]').prop('required', false);
    }

}

        $(document).on('change input',
            '[name="appreciation_category[]"], [name="appreciation_image[]"], [name="appreciation_message[]"]',
            function() {

                let wrapper = $(this).closest('.milestone-card');

                validateAppreciation(wrapper);

            });


        /* --------------------------
        DROPDOWN CHANGE
        ---------------------------*/
        $(document).on('change', '.select2-image', function() {
            updatePreview(this);
        });


        /* --------------------------
        FULLSCREEN PREVIEW
        ---------------------------*/
        $(document).on('click', '.preview_eye', function() {

            let img = $(this)
                .closest('.image-preview-wrapper')
                .find('.appreciation_preview')
                .attr('src');

            if (img) {
                $('#fullscreen_image').attr('src', img);
                $('#imagePreviewModal').css('display', 'flex');
            }

        });

        $('#imagePreviewModal').on('click', function() {
            $(this).hide();
        });


        /* --------------------------
        ADD NEW MILESTONE WITH PROPER INDEX
        ---------------------------*/
        /* --------------------------
        ADD NEW MILESTONE WITH PROPER INDEX
        ---------------------------*/
        $(document).on('click', '#btn-add-milestone', function() {

            let container = $('#milestone-container');
            let clone = $('.milestone-card:first').clone();

            // Clear values
            clone.find('input[type=number]').val('');
            clone.find('input[name="target_title[]"]').val('');
            clone.find('textarea').val('');
            clone.find('input[type=checkbox]').prop('checked', false);
            clone.find('select[name="repeat_target[]"]').val('0');

            // ❌ REMOVE REQUIRED ATTRIBUTES (FIX)
clone.find('[name="appreciation_category[]"]').prop('required', false);
clone.find('[name="appreciation_message[]"]').prop('required', false);
clone.find('[name="appreciation_image[]"]').prop('required', false);

            // IMPORTANT: clear milestone id
            clone.find('input[name="milestone_id[]"]').val('');

            // Clear select2 selections
            clone.find('select').each(function() {
                if ($(this).attr('name') === 'repeat_target[]') {
                    $(this).val('0');
                } else if ($(this).hasClass('select2-image')) {
                    $(this).val('').trigger('change');
                } else if ($(this).attr('name').includes('appreciation_category')) {
                    $(this).val('').trigger('change');
                } else {
                    $(this).val(null).trigger('change');
                }
            });

            // Clear image preview
            clone.find('.appreciation_preview').attr('src', '');

            // Append clone
            container.append(clone);

            // Reindex all milestones
            container.find('.milestone-card').each(function(index) {

                // Update milestone title
                $(this).find('h5').text('Milestone ' + (index + 1));

                $(this).find('input, select, textarea').each(function() {

                    let name = $(this).attr('name');

                    if (name) {
                        name = name.replace(/\[\d+\]/, `[${index}]`);
                        $(this).attr('name', name);
                    }

                });

            });

            // Destroy old select2 before reinit
            clone.find('.select2').removeClass('select2-hidden-accessible').next('.select2').remove();
            clone.find('.select2-image').removeClass('select2-hidden-accessible').next('.select2').remove();

            initializeSelect2();

        });


        /* --------------------------
        REMOVE MILESTONE AND REINDEX
        ---------------------------*/
        $(document).on('click', '.btn-remove-milestone', function() {

            let container = $('#milestone-container');

            if (container.find('.milestone-card').length > 1) {

                $(this).closest('.milestone-card').remove();

                // Reindex remaining milestones
                container.find('.milestone-card').each(function(index) {

                    // Update milestone title
                    $(this).find('h5').text('Milestone ' + (index + 1));

                    $(this).find('input, select, textarea').each(function() {

                        let name = $(this).attr('name');

                        if (name) {
                            name = name.replace(/\[\d+\]/, `[${index}]`);
                            $(this).attr('name', name);
                        }

                    });

                });

            }



        });
    </script>

    
    <script>
        $(document).ready(function () {

            function toggleCustomDates() {
                let period = $('#field-period').val();

                if (period === 'custom') {
                    $('#field-custom_start_date').closest('.col-md-6').show();
                    $('#field-custom_end_date').closest('.col-md-6').show();

                    // ✅ make required
                    $('#field-custom_start_date').attr('required', true);
                    $('#field-custom_end_date').attr('required', true);

                } else {
                    $('#field-custom_start_date').closest('.col-md-6').hide();
                    $('#field-custom_end_date').closest('.col-md-6').hide();

                    // ❌ remove required
                    $('#field-custom_start_date').removeAttr('required');
                    $('#field-custom_end_date').removeAttr('required');

                    // Optional: clear values
                    $('#field-custom_start_date').val('');
                    $('#field-custom_end_date').val('');
                }
            }

            // Run on page load (edit mode support)
            toggleCustomDates();

            // On change
            $('#field-period').on('change', function () {
                toggleCustomDates();
            });

        });
    </script>
@endsection