@extends('layout')
@section('title', 'Create Broker')
@section('content')
    <!-- Row 1 -->
    <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($broker->id) ? 'Edit Broker' : 'Create Broker' }}</h5>
                        </div>
                        <a href="{{ url('/admin/broker') }}" class="btn btn-primary">Back</a>
                    </div>
                    <form method="POST" enctype="multipart/form-data"
                        action="{{ isset($broker->id) ? url('/api/superadmin/broker/update/') : url('/api/superadmin/broker/create') }}">
                        @csrf
                        @if (isset($broker->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>
                                {{-- <input type="file" name="image" accept=".png, .jpg, .jpeg"> --}}

                                <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($broker->image) }});">

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

                        <input type="hidden" name="id"
                            value="{{ old('id', $broker->id ?? '') }}"class="form-control" />

                        <div class="row pb-3">
                            <div class="col-md-6 col-12 mb-3">
                                <label for="name" class="form-label">Broker Name *</label>
                                <input type="text" name="name" value="{{ old('name', $broker->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">Broker Rating *</label>
                                <input type="text" name="rating" value="{{ old('rating', $broker->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">Broker Introduction *</label>
                                <textarea id="introduction" name="introduction" class="form-control" rows="5">{{ old('introduction', $broker->introduction ?? '') }}</textarea>
                                @error('introduction')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="signup_link" class="form-label">Broker Signup Link *</label>
                                <input type="text" name="signup_link"
                                    value="{{ old('signup_link', $broker->signup_link ?? '') }}" class="form-control"
                                    id="signup_link" />
                                @error('signup_link')
                                    <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="year_est" class="form-label">Year Established *</label>
                                <input type="text" name="year_established"
                                    value="{{ old('year_established', $broker->year_established ?? '') }}"
                                    class="form-control" id="year_est" />
                                @error('year_established')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="min_deposit" class="form-label">Minimum Deposit *</label>
                                <select name="min_deposit" class="form-control" id="min_deposit">
                                    @foreach ($account as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('min_deposit', $broker->min_deposit ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('min_deposit')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="segregated_accounts" class="form-label">Segregated Accounts
                                    *</label>
                                <input type="text" name="segregated_account"
                                    value="{{ old('segregated_account', $broker->segregated_account ?? '') }}"
                                    class="form-control" id="segregated_accounts" />
                                @error('segregated_account')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="regulation" class="form-label">Regulation</label>
                                <select id="regulation" name="regulation[]" class="form-control" multiple>
                                    @foreach ($regulators as $option)
                                        <option value="{{ $option['value'] }}"
                                            @if ($broker->regulations->pluck('name')->contains($option['value'])) selected @endif>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach

                                </select>
                                {{-- <select name="regulation" class="form-control" id="regulation">
                                    @foreach ($regulators as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('regulation', $broker->regulation ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('regulation')
                                    <span class="text-danger">{{ $message }}</span> --}}
                                {{-- @enderror --}}
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="pamm" class="form-label">PAMM *</label>
                                <input type="text" name="PAMM" value="{{ old('PAMM', $broker->PAMM ?? '') }}"
                                    class="form-control" id="pamm" />
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="free_education" class="form-label">Free Education *</label>
                                <input type="text" name="free_education"
                                    value="{{ old('free_education', $broker->free_education ?? '') }}"
                                    class="form-control" id="free_education" />
                                @error('free_education')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="website" class="form-label">Website *</label>
                                <input type="text" name="website"
                                    value="{{ old('website', $broker->website ?? '') }}" class="form-control"
                                    id="website" />
                                @error('website')
                                    <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', $broker->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="country" class="form-label">Country *</label>
                                <input type="text" name="country"
                                    value="{{ old('country', $broker->country ?? '') }}" class="form-control"
                                    id="country" />
                                @error('country')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <label for="leverage" class="form-label">Leverage *</label>
                                <select name="leverage" class="form-control" id="leverage">
                                    @foreach ($leverage as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('leverage', $broker->leverage ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('leverage')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

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

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

                            <div class="col-md-6 col-12 mb-3">
                                <label for="social_trading" class="form-label">Social Trading *</label>
                                <input type="text" name="social_trading"
                                    value="{{ old('social_trading', $broker->social_trading ?? '') }}"
                                    class="form-control" id="social_trading" />
                                @error('social_trading')
                                    <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', $broker->video_link ?? '') }}" class="form-control"
                                    id="video_link" placeholder="Enter video link" />
                                @error('video_link')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="account_link" class="form-label">Account Link</label>
                                <input type="url" name="account_link"
                                    value="{{ old('account_link', $broker->account_link ?? '') }}" class="form-control"
                                    id="account_link" placeholder="Enter account link" />
                                @error('account_link')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="deposit_withdrawal_method" class="form-label">Deposit/Withdrawal *</label>
                                {{-- <input type="text" name="deposit_withdrawal_method"
                                    value="{{ old('deposit_withdrawal_method', $broker->deposit_withdrawal_method ?? '') }}"
                                    class="form-control" id="deposit_withdrawal_method" /> --}}

                                <select name="deposit_withdrawal_method" class="form-control"
                                    id="deposit_withdrawal_method">
                                    @foreach ($deposit_method as $option)
                                        <option value="{{ $option['value'] }}"
                                            {{ old('deposit_withdrawal_method', $broker->deposit_withdrawal_method ?? '') == $option['value'] ? 'selected' : '' }}>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('deposit_withdrawal_method')
                                    <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($broker->pros) && count($broker->pros) > 0)
                                        @foreach ($broker->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($broker->cons) && count($broker->cons) > 0)
                                        @foreach ($broker->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">
                                <label class="form-label">Review</label>
                                <textarea id="content-editor" name="review" rows="7" class="form-control">{{ old('review', $broker->review ?? '') }}</textarea>
                                @error('review')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- <div class="col-md-12 col-12 mb-3">
                                <label for="review" class="form-label">Review *</label>

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


                            <div class="col-md-12 col-12 mb-3">
                                <div class="faqWrapper">
                                    <div id="faq-container">
                                        @if (isset($broker->faqs) && count($broker->faqs) > 0)
                                            @foreach ($broker->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-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($broker->images) && count($broker->images) > 0)
                                            @foreach ($broker->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($broker->headings) && count($broker->headings) > 0)
                                            @foreach ($broker->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($broker->id) ? 'Update' : 'Create' }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection