@extends('voyager::master')

@section('page_title', __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <link rel="stylesheet" href="{{asset('css/selectize.css')}}">

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }
    </style>
    <style>
        .panel .mce-panel {
            border-left-color: #fff;
            border-right-color: #fff;
        }

        .panel .mce-toolbar,
        .panel .mce-statusbar {
            padding-left: 20px;
        }

        .panel .mce-edit-area,
        .panel .mce-edit-area iframe,
        .panel .mce-edit-area iframe html {
            padding: 0 10px;
            min-height: 350px;
        }

        .mce-content-body {
            color: #555;
            font-size: 14px;
        }

        .panel.is-fullscreen .mce-statusbar {
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 200000;
        }

        .panel.is-fullscreen .mce-tinymce {
            height: 100%;
        }

        .panel.is-fullscreen .mce-edit-area,
        .panel.is-fullscreen .mce-edit-area iframe,
        .panel.is-fullscreen .mce-edit-area iframe html {
            height: 100%;
            position: absolute;
            width: 99%;
            overflow-y: scroll;
            overflow-x: hidden;
            min-height: 100%;
        }

        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }

        .img-wrap {
            position: relative;
        }

        .image-div {
            position: relative;
        }
        .img-wrap .remove {
            position: absolute;
            top: 2px;
            left: 20px;
            z-index: 100;
        }

        .custom-select {
            position: relative;
            width: 100%;
        }

        .selected-option {
            border: 1px solid #ccc;
            padding: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            background-color: #fff;
        }

        .selected-option img {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .dropdown-options {
            display: none;
            position: relative;
            background: #fff;
            border: 1px solid #ccc;
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .dropdown-options li {
            padding: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .dropdown-options li img {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .dropdown-options li:hover {
            background-color: #f1f1f1;
        }

        .dropdown-options li.selected {
            background-color: #e9ecef;
        }
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content container-fluid">
        <form class="form-edit-add" role="form"
              action="@if(!is_null($dataTypeContent->getKey())){{ route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) }}@else{{ route('voyager.'.$dataType->slug.'.store') }}@endif"
              method="POST" enctype="multipart/form-data" autocomplete="off">
            <!-- PUT Method if we are editing -->
            @if(isset($dataTypeContent->id))
                {{ method_field("PUT") }}
            @endif
            {{ csrf_field() }}

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-bordered">
                    {{-- <div class="panel"> --}}
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $key => $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @php
                            $dataTypeRows = $dataType->{(!is_null($dataTypeContent->getKey()) ? 'editRows' : 'addRows' )};
                        @endphp

                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <i class="voyager-character"></i> {{ __('voyager::seeders.data_rows.title') }}
                            </h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>

                        <div class="panel-body">

                            <div class="form-group">
                                <label for="name">{{ __('voyager::seeders.data_rows.title') }}</label>

                                @include('voyager::multilingual.input-hidden-bread-edit-add', [
                                        'isModelTranslatable' => true,
                                        'dataTypeContent'  => $dataTypeContent,
                                        'row' => $dataTypeRows->where('field','title')->first()
                                    ])

                                <input type="text" class="form-control" id="title" name="title" placeholder="{{ __('voyager::seeders.data_rows.title') }}"
                                       value="{{ old('title', $dataTypeContent->title ?? '') }}">

                                @error('title')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="icon">{{ __('voyager::seeders.data_rows.icon') }}</label>

                                <!-- Hidden input to store the selected icon -->
                                <input type="hidden" name="icon" id="icon" value="{{ old('icon', $dataTypeContent->icon) }}" required />

                                <!-- Custom dropdown for icons -->
                                <div class="custom-select">
                                    <div class="selected-option">
                                        @if(old('icon', $dataTypeContent->icon))
                                            <img src="{{ Voyager::image( old('icon', $dataTypeContent->icon) ) }}" alt="Selected Icon" />
                                        @else
                                            <span>Select an icon</span>
                                        @endif
                                    </div>
                                    <ul class="dropdown-options">
                                        <li data-value="">
                                            <span>No icon</span>
                                        </li>
                                        @foreach(\App\Models\Service::$icons as $icon)
                                            <li data-value="{{ $icon }}" class="{{ old('icon', $dataTypeContent->icon) == $icon ? 'selected' : '' }}">
                                                <img src="{{ Voyager::image( $icon ) }}" alt="Icon">
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>

                                @error('icon')
                                <div class="text-danger error-message">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <button type="submit" class="btn btn-primary pull-right save">
                {{ __('voyager::generic.save') }}
            </button>
        </form>
        <div style="display:none">
            <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
            <input type="hidden" id="upload_type_slug" value="{{ $dataType->slug }}">
        </div>
    </div>
@stop

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const customSelect = document.querySelector('.custom-select');
            const selectedOption = customSelect.querySelector('.selected-option');
            const dropdownOptions = customSelect.querySelector('.dropdown-options');
            const hiddenInput = document.querySelector('#icon');

            // Toggle dropdown visibility
            selectedOption.addEventListener('click', () => {
                dropdownOptions.style.display = dropdownOptions.style.display === 'block' ? 'none' : 'block';
            });

            // Handle option selection
            dropdownOptions.addEventListener('click', (e) => {
                const selectedItem = e.target.closest('li');
                if (selectedItem) {
                    const value = selectedItem.dataset.value;

                    // Update selected option display
                    if (value) {
                        selectedOption.innerHTML = `<img src="https://{{env('OSS_DOMAIN')}}/${value}" alt="Selected Icon"> ${value}`;
                    } else {
                        selectedOption.innerHTML = '<span>Select an icon</span>';
                    }

                    // Update hidden input value
                    hiddenInput.value = value;

                    // Highlight selected option
                    dropdownOptions.querySelectorAll('li').forEach(li => li.classList.remove('selected'));
                    selectedItem.classList.add('selected');

                    // Hide dropdown
                    dropdownOptions.style.display = 'none';
                }
            });

            // Close dropdown if clicked outside
            document.addEventListener('click', (e) => {
                if (!customSelect.contains(e.target)) {
                    dropdownOptions.style.display = 'none';
                }
            });
        });
    </script>

    <script>
        $('document').ready(function () {
            @if ($isModelTranslatable)
            $('.side-body').multilingual({"editing": true});
            @endif
        });
    </script>
@stop