@extends('layout')
@section('title', 'Create Indicator')
@section('content')
    <!-- Custom CSS for styling -->


    <div class="row">
        <div class="col-lg-12 d-flex align-items-stretch">
            <div class="card w-100">
                <div class="card-body">
                    <div class="d-sm-flex d-block align-items-center justify-content-between mb-9">
                        <div class="mb-3 mb-sm-0">
                            <h5 class="card-title fw-semibold">
                                {{ isset($indicator->id) ? 'Edit Indicator' : 'Create Indicator' }}</h5>
                        </div>
                        <a href="{{ url('/admin/indicator') }}" class="btn btn-primary">Back</a>
                    </div>
                    <form method="POST" enctype="multipart/form-data"
                        action="{{ isset($indicator->id) ? url('/api/superadmin/indicator/update/') : url('/api/superadmin/indicator/create') }}">
                        @csrf
                        @if (isset($indicator->id))
                            @method('PUT')
                        @endif


                        <div class="row pb-3">
                            <div class="col-md-6 col-12 mb-3">
                                <label for="image" class="form-label">Image</label>
                                <div class="avatar-upload">
                                    <div class="avatar-edit">
                                        <input type='file' name="image" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                        <label for="imageUpload">
                                            <i class="fas fa-pencil-alt"></i> </label>
                                    </div>
                                    <div class="avatar-preview">
                                        <div id="imagePreview"
                                            style="background-image: url({{ asset($indicator->image) }});">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="id"
                            value="{{ old('id', $indicator->id ?? '') }}"class="form-control" />
                        <div class="row pb-3">
                            <div class="col-md-6 col-12 mb-3">
                                <label for="name" class="form-label">Name *</label>
                                <input type="text" name="name" value="{{ old('name', $indicator->name ?? '') }}"
                                    class="form-control" id="name" />
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="rating" class="form-label"> Rating *</label>
                                <input type="text" name="rating" value="{{ old('rating', $indicator->rating ?? '') }}"
                                    class="form-control" id="numberInput" oninput="validateInput(this)" />
                                @error('rating')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 col-12 mb-3">
                                <label for="intro" class="form-label">Introduction *</label>
                                <textarea id="content-editor" name="introduction" rows="7" class="form-control">{{ old('introduction', $indicator->introduction ?? '') }}</textarea>

                                {{-- <textarea id="introduction" name="introduction" class="form-control" rows="5">{{ old('introduction', $indicator->introduction ?? '') }}</textarea> --}}
                                @error('introduction')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>



                            <div class="col-12">
                                <div class="mt-3 mb-md-4 mb-sm-2">
                                    <h3 class="card-title fw-semibold">Summary</h3>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="accuracy" class="form-label">Accuracy *</label>
                                <input type="text" name="accuracy"
                                    value="{{ old('accuracy', $indicator->accuracy ?? '') }}" class="form-control"
                                    id="accuracy" />
                                @error('accuracy')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="min_deposit" class="form-label">Profability *</label>
                                <input type="text" name="profability"
                                    value="{{ old('profability', $indicator->profability ?? '') }}" class="form-control"
                                    id="profability" />
                                @error('profability')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="max_drawdown" class="form-label">Max Drawdown
                                    *</label>
                                <input type="text" name="max_drawdown"
                                    value="{{ old('max_drawdown', $indicator->max_drawdown ?? '') }}" class="form-control"
                                    id="max_drawdown" />
                                @error('max_drawdown')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="avg_drawdown" class="form-label">Average Drawdown *</label>
                                <input type="text" name="avg_drawdown"
                                    value="{{ old('avg_drawdown', $indicator->avg_drawdown ?? '') }}" class="form-control"
                                    id="avg_drawdown" />
                                @error('avg_drawdown')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="drawdown_duration" class="form-label">Drawdown Duration
                                    *</label>
                                <input type="text" name="drawdown_duration"
                                    value="{{ old('drawdown_duration', $indicator->drawdown_duration ?? '') }}"
                                    class="form-control" id="drawdown_duration" />
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="annualized_return" class="form-label">Annualized Return
                                    *</label>
                                <input type="text" name="annualized_return"
                                    value="{{ old('annualized_return', $indicator->annualized_return ?? '') }}"
                                    class="form-control" id="annualized_return" />
                                @error('annualized_return')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="sharpe_ratio" class="form-label">Sharpe Ratio *</label>
                                <input type="text" name="sharpe_ratio"
                                    value="{{ old('sharpe_ratio', $indicator->sharpe_ratio ?? '') }}"
                                    class="form-control" id="sharpe_ratio" />
                                @error('sharpe_ratio')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="profit_factor" class="form-label">Profit Factor *</label>
                                <input type="text" name="profit_factor"
                                    value="{{ old('profit_factor', $indicator->profit_factor ?? '') }}"
                                    class="form-control" id="profit_factor" />
                                @error('profit_factor')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="win_rate" class="form-label">Win Rate *</label>
                                <input type="text" name="win_rate"
                                    value="{{ old('win_rate', $indicator->win_rate ?? '') }}" class="form-control"
                                    id="win_rate" />
                                @error('win_rate')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="visit_now" class="form-label">Visit Now *</label>
                                <input type="text" name="visit_now"
                                    value="{{ old('visit_now', $indicator->visit_now ?? '') }}" class="form-control"
                                    id="visit_now" />
                                @error('visit_now')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="video_link" class="form-label">Video Link (Paste your video ID)</label>
                                <input type="text" name="video_link"
                                    value="{{ old('video_link', $indicator->video_link ?? '') }}" class="form-control"
                                    id="video_link" />
                                @error('video_link')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="platform" class="form-label">Platform *</label>
                                <select name="platform" class="form-control" id="platform">
                                    @foreach ($platform as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('platform', $indicator->platform ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('platform')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="type" class="form-label">Type *</label>
                                <select name="type" class="form-control" id="type">
                                    @foreach ($type as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('type', $indicator->type ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('type')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="author" class="form-label">Author *</label>
                                <select name="author" class="form-control" id="author">
                                    @foreach ($author as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('type', $indicator->author ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('author')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>



                            <div class="col-md-6 col-12 mb-3">
                                <label for="popularity" class="form-label">Popularity</label>
                                <select name="popularity" class="form-control" id="popularity">
                                    @foreach ($popularity as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('type', $indicator->popularity ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('popularity')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="type" class="form-label">Market *</label>
                                <select name="market" class="form-control" id="market">
                                    @foreach ($market as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('market', $indicator->market ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('market')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            <div class="col-md-6 col-12 mb-3">
                                <label for="function" class="form-label">Function *</label>
                                <select name="function" class="form-control" id="function">
                                    @foreach ($function as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('function', $indicator->function ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('function')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            <div class="col-md-6 col-12 mb-3">
                                <label for="complexity" class="form-label">Complexity *</label>
                                <select name="complexity" class="form-control" id="complexity">
                                    @foreach ($complexity as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('complexity', $indicator->complexity ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('complexity')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="source" class="form-label">Source *</label>
                                <select name="source" class="form-control" id="source">
                                    @foreach ($source as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('source', $indicator->source ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('source')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="trading_style" class="form-label">Trading Style *</label>
                                <select name="trading_style" class="form-control" id="trading_style">
                                    @foreach ($trading_style as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('trading_style', $indicator->trading_style ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('trading_style')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            <div class="col-md-6 col-12 mb-3">
                                <label for="customization" class="form-label">Customization *</label>
                                <select name="customization" class="form-control" id="customization">
                                    @foreach ($customization as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('customization', $indicator->customization ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('customization')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            <div class="col-md-6 col-12 mb-3">
                                <label for="performance" class="form-label">Performance *</label>
                                <select name="performance" class="form-control" id="performance">
                                    @foreach ($performance as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('performance', $indicator->performance ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('performance')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="price" class="form-label">Price *</label>
                                <select name="price" class="form-control" id="price">
                                    @foreach ($price as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('price', $indicator->price ?? '') == $option['value'] ? 'selected' : '' }}>

                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('price')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="signup_link" class="form-label">Signup Link *</label>
                                <input type="text" name="signup_link"
                                    value="{{ old('signup_link', $indicator->signup_link ?? '') }}" class="form-control"
                                    id="signup_link" />
                                @error('signup_link')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-12 col-12 mb-3">
                                <label for="pros" class="form-label">Pros</label>
                                <div id="pros-container">
                                    @if (isset($indicator->pros) && count($indicator->pros) > 0)
                                        @foreach ($indicator->pros as $pro)
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" name="pro[]"
                                                    value="{{ $pro->text }}" placeholder="Enter a pros">
                                                <button class="btn btn-danger remove" type="button">-</button>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" name="pro[]"
                                                placeholder="Enter a pros">
                                            <button class="btn btn-success add-more" type="button">+</button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-12 col-12 mb-3">
                                <label for="cons" class="form-label">Cons</label>
                                <div id="cons-container">
                                    @if (isset($indicator->cons) && count($indicator->cons) > 0)
                                        @foreach ($indicator->cons as $con)
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" name="con[]"
                                                    value="{{ $con->text }}" placeholder="Enter a cons">
                                                <button class="btn btn-danger remove" type="button">-</button>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" name="con[]"
                                                placeholder="Enter a cons">
                                            <button class="btn btn-success add-more-cons" type="button">+</button>
                                        </div>
                                    @endif
                                </div>
                            </div>




                            <div class="col-md-12 col-12 mb-3">
                                <div class="faqWrapper">
                                    <div id="faq-container">
                                        @if (isset($indicator->faqs) && count($indicator->faqs) > 0)
                                            @foreach ($indicator->faqs as $index => $faq)
                                                <div class="faq-item">
                                                    <div class="d-flex justify-content-between px-3 py-2 my-2 rounded"
                                                        style="background-color:#f5f5f5">
                                                        <label for="faq" class="form-label mt-2">Faq
                                                            {{ $index == 0 ? '' : $index + 1 }}</label>
                                                        @if ($index != 0)
                                                            <button class="btn btn-danger remove-faq" type="button"><span
                                                                    class="pe-1">-</span> Remove</button>
                                                        @endif
                                                    </div>
                                                    <div class="input-group mb-3">
                                                        <input type="text" class="form-control"
                                                            name="faqs[{{ $index }}][title]"
                                                            value="{{ $faq->title }}" placeholder="Enter a title">
                                                    </div>
                                                    <textarea id="faq-editor-{{ $index }}" placeholder="Enter a description"
                                                        name="faqs[{{ $index }}][description]" class="form-control">{{ old('description', $faq->description ?? '') }}</textarea>
                                                </div>
                                            @endforeach
                                        @else
                                            <label for="faq" class="form-label mt-2">Faq</label>
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" name="faqs[0][title]"
                                                    placeholder="Enter a title">
                                            </div>
                                            <textarea id="faq-editor-0" placeholder="Enter a description" name="faqs[0][description]" class="form-control">{{ old('description', $faq->description ?? '') }}</textarea>
                                        @endif
                                    </div>
                                    <div>
                                        <button class="btn btn-success add-more-faq mt-3" type="button"><span
                                                class="pe-1">+</span> Add More</button>
                                    </div>
                                </div>
                            </div>



                            <div class="col-md-12 col-12 mb-3">
                                <div class="tabWrapper">
                                    <div id="tab-container">
                                        @if (isset($indicator->tabs) && count($indicator->tabs) > 0)
                                            @foreach ($indicator->tabs as $index => $tab)
                                                <div class="tab-item">
                                                    <div class="d-flex justify-content-between px-3 py-2 my-2 rounded"
                                                        style="background-color:#f5f5f5">
                                                        @if ($index == 0)
                                                            <label for="Tab" class="form-label mt-2">Tab</label>
                                                        @else
                                                            <label for="Tab" class="form-label mt-2">Tab
                                                                {{ $index + 1 }}</label>
                                                            <button class="btn btn-danger remove-tab" type="button"><span
                                                                    class="pe-1">-</span> Remove</button>
                                                        @endif
                                                    </div>
                                                    <div class="input-group mb-3">
                                                        <input type="text" class="form-control"
                                                            name="tabs[{{ $index }}][title]"
                                                            value="{{ $tab->title }}" placeholder="Enter a name">
                                                    </div>
                                                    <div class="input-group mb-3">
                                                        <input type="text" class="form-control"
                                                            name="tabs[{{ $index }}][heading]"
                                                            value="{{ $tab->heading }}" placeholder="Enter a heading">
                                                    </div>
                                                    <textarea id="tabs-editor-{{ $index }}" placeholder="Enter a description"
                                                        name="tabs[{{ $index }}][description]" class="form-control">{{ old('description', $tab->description ?? '') }}</textarea>
                                                </div>
                                            @endforeach
                                        @else
                                            <label for="tab" class="form-label mt-2">Tab</label>
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" name="tabs[0][title]"
                                                    placeholder="Enter a name">
                                            </div>
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" name="tabs[0][heading]"
                                                    placeholder="Enter a heading">
                                            </div>
                                            <textarea id="tabs-editor-0" placeholder="Enter a description" name="tabs[0][description]" class="form-control">{{ old('description', $tab->description ?? '') }}</textarea>
                                        @endif
                                    </div>
                                    <div>
                                        <button class="btn btn-success add-more-tab mt-3" type="button"><span
                                                class="pe-1">+</span> Add More</button>
                                    </div>
                                </div>
                            </div>

                            {{-- 
                            <div class="col-12 mb-3">
                                <div class="faqWrapper">
                                    <label for="" class="form-label mt-2 ">Additional Images</label>
                                    <div class="row" id="additional-images-container">
                                        @if (isset($indicator->images) && count($indicator->images) > 0)
                                            @foreach ($indicator->images as $image)
                                                <div class="col-md-3 col-12">
                                                    <div class="image-upload-section">
                                                        <div class="image-preview">
                                                            <img src="{{ asset($image->image) }}" alt="avatar"
                                                                style="width: 100%; height: 100%; object-fit: cover;">
                                                        </div>
                                                        <input type="file" name="additional_images[]"
                                                            class="additional-image-upload" accept=".png, .jpg, .jpeg"
                                                            style="display: none;" />
                                                        <input type="hidden" name="existing_images[]"
                                                            value="{{ $image->image }}">
                                                        <div style="margin-top:10px; ">

                                                            <button type="button"
                                                                class="btn btn-primary change-additional-image">Change
                                                                Image</button>
                                                            <button type="button"
                                                                class="btn btn-danger remove-additional-image">Remove</button>
                                                        </div>
                                                    </div>

                                                </div>
                                            @endforeach
                                        @else
                                            <div class="col-md-3 col-12">
                                                <div class="image-upload-section">
                                                    <div class="image-preview">
                                                        <img src="{{ asset('images/logoo.jpg') }}" alt="avatar"
                                                            style="width: 100%; height: 100%; object-fit: cover;">
                                                    </div>
                                                    <input type="file" name="additional_images[]"
                                                        class="additional-image-upload" accept=".png, .jpg, .jpeg"
                                                        style="display: none;" value="" />
                                                    <div style="margin-top:10px; ">

                                                        <button type="button"
                                                            class="btn btn-primary change-additional-image">Change
                                                            Image</button>
                                                        <button type="button"
                                                            class="btn btn-danger remove-additional-image">Remove</button>
                                                    </div>
                                                </div>
                                            </div>

                                        @endif

                                    </div>

                                    <div>
                                        <button class="btn btn-success mt-3 pe-1" id="add-image"
                                            type="button"><span>+</span> Add More</button>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="col-md-12 col-12 mb-3">
                                <div class="faqWrapper">
                                    <div id="heading-container">
                                        @if (isset($indicator->headings) && count($indicator->headings) > 0)
                                            @foreach ($indicator->headings as $index => $heading)
                                                <div class="heading-item">
                                                    <div class="d-flex justify-content-between px-3 py-2 my-2 rounded"
                                                        style="background-color:#f5f5f5">
                                                        <label for="heading" class="form-label mt-2">Heading
                                                            {{ $index + 1 }}</label>
                                                        @if ($index != 0)
                                                            <button class="btn btn-danger remove-heading"
                                                                type="button"><span class="pe-1">-</span>
                                                                Remove</button>
                                                        @endif
                                                    </div>

                                                    <div class="input-group mb-3">
                                                        <input type="text" class="form-control"
                                                            name="headings[{{ $index }}][title]"
                                                            value="{{ $heading->title }}" placeholder="Enter a title">
                                                    </div>
                                                    <!-- Unique ID for each textarea -->
                                                    <textarea id="content-editor-{{ $index }}" placeholder="Enter a description"
                                                        name="headings[{{ $index }}][description]" class="form-control">{{ old('description', $heading->description ?? '') }}</textarea>
                                                </div>
                                            @endforeach
                                        @else
                                            <label for="heading" class="form-label mt-2">Heading </label>
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" name="headings[0][title]"
                                                    placeholder="Enter a title">
                                            </div>
                                            <!-- Initial textarea ID -->
                                            <textarea id="content-editor-0" placeholder="Enter a description" name="headings[0][description]"
                                                class="form-control"></textarea>
                                        @endif
                                    </div>
                                    {{-- <div>
                                        <button class="btn btn-success add-more-heading mt-3" type="button"><span
                                                class="pe-1">+</span> Add More</button>
                                    </div> --}}
                                </div>
                            </div>
                        </div>

                        <button type="submit"
                            class="btn btn-primary py-8 fs-4 mb-4 rounded-2">{{ isset($indicator->id) ? 'Update' : 'Create' }}</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>

    <!-- Include Dropzone JS -->
@endsection