@php
    use App\Enums\ConfigurationTypeEnum;
    use App\Helpers\CurrencyHelper;
@endphp
@section('title', trans('admin.update_configuration'))
@extends('setting.navigation')

@section('setting_breadcrumb')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.settings'), 'url' => route('admin.settings')],
            ['data' => trans('admin.configuration_list'), 'url' => route('admin.configuration.index')],
            ['data' => trans('admin.edit_configuration'), 'url' => null],
        ],
    ])
@endsection

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css') }}" />
    <link rel="stylesheet"
        href="{{ asset('admin_assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/jquery-timepicker/jquery-timepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/pickr/pickr-themes.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/pickr/pickr-themes.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/quill/typography.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/quill/katex.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/quill/editor.css') }}" />
@endsection

@section('setting_content')
    <form class="row needs-validation" action="{{ route('admin.configuration.edit', $data->id) }}" method="POST" novalidate
        enctype="multipart/form-data">
        @CSRF
        <input type="hidden" name="configuration_id" value="{{ $data->id }}">
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ trans('admin.update_configuration') }}</h5>
                    </div>
                    <div class="card-body">
                        @CSRF
                        <input type="hidden" name="id" value="{{ $data->id }}">
                        <x-input-component divClass="col-md-12" :label="trans('admin.name')" id="name" type="text"
                            :placeholder="trans('admin.please_enter_name')" name="name" :value="$data->name" addAttribute="required" />

                        <x-input-component divClass="col-md-12" :label="trans('admin.config_type')" id="type" type="text"
                            name="type" :value="$data->type->value" addAttribute="disabled" />

                        <x-textarea-component divClass="col-md-12 mb-3" :label="trans('admin.description')" id="description"
                            name="description" :value="$data->description" addAttribute="required" />

                        @include('layouts._save_form')
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="card">
                    <h5 class="card-header">
                        <span class="float-start">{{ trans('admin.config_value') }}</span>
                        @if ($data->type->type() == ConfigurationTypeEnum::TYPE_LIST)
                            <span class="btn btn-primary btn-icon rounded-pill float-end create-new-data"><i
                                    class="text-white ti ti-plus"></i></span>
                        @endif
                    </h5>
                    <div class="card-body">
                        @if ($data->type->type() == ConfigurationTypeEnum::TYPE_LIST)
                            <div class="table-responsive text-nowrap">
                                <table class="table table-bordered text-center">
                                    <thead>
                                        <tr>
                                            <th><strong>{{ trans('admin.name') }}</strong></th>
                                            <th><strong>{{ trans('admin.action') }}</strong></th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-body">
                                        @if (is_array(json_decode($data->value)))
                                            @foreach (json_decode($data->value) as $value)
                                                <tr>
                                                    <td>
                                                        <input class="form-control" type="text" name="value[]"
                                                            value="{{ $value }}" required autocomplete="off">
                                                    </td>
                                                    <td>
                                                        <a
                                                            class="btn btn-icon btn-danger text-white rounded-pill delete-item"><i
                                                                class="text-white ti ti-trash"></i></a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_ENUM)
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="basic-default-hub">{{ trans('admin.time_zone') }}</label>
                                <div class="input-group input-group-merge">
                                    <select id="selectTimezone" class="select2 form-select form-select-lg"
                                        data-placeholder="{{ trans('admin.search...') }}" name="value">
                                        @foreach ($data->type->enum()::cases() as $value)
                                            <option value="{{ $value->value }}" @selected($data->value == $value->value)>
                                                {{ $value->name() }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_TIME)
                            <div class="mb-3 row">
                                <label for="form-label" class="form-label">{{ trans('admin.time') }}</label>
                                <div class="col-md-10">
                                    <input class="form-control" type="text" name="value" placeholder="HH:mm"
                                        value="{{ $data->value }}" id="html5-time-input" data-timepicker required
                                        autocomplete="off" />
                                </div>
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_DATE)
                            <div class="mb-3 row">
                                <label class="form-label">{{ trans('admin.date') }}</label>
                                <input type="text" class="form-control" placeholder="DD/MM/YYYY" data-bs-datepicker=true
                                    name="value" value="{{ $data->value }}" required autocomplete="off" />
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_DATE_TIME)
                            <div class="mb-3 row">
                                <label class="form-label">{{ trans('admin.date_time') }}</label>
                                <input type="text" class="form-control" placeholder="DD/MM/YYYY HH:MM"
                                    data-datetimepicker=true name="value" value="{{ $data->value }}" required
                                    autocomplete="off" />
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_LONG_TEXT || $data->type->type() == ConfigurationTypeEnum::TYPE_TEXT || $data->type->type() == ConfigurationTypeEnum::TYPE_RICH_TEXT)
                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs mb-3" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#tab_en" role="tab">English</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#tab_ar" role="tab">العربية</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#tab_hi" role="tab">हिन्दी</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#tab_ur" role="tab">اردو</a>
                                    </li>
                                </ul>
                                <div class="tab-content border p-3 rounded">
                                    @foreach(['en' => 'English', 'ar' => 'العربية', 'hi' => 'हिन्दी', 'ur' => 'اردو'] as $locale => $name)
                                        <div class="tab-pane {{ $locale == 'en' ? 'active' : '' }}" id="tab_{{ $locale }}" role="tabpanel">
                                            @if($data->type->type() == ConfigurationTypeEnum::TYPE_RICH_TEXT)
                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label">{{ trans('admin.config_value') . ' (' . $name . ')' }}</label>
                                                    <div class="quill-editor" id="quill_{{ $locale }}" data-target="value_{{ $locale }}">
                                                        {!! $data->{'value_' . $locale} !!}
                                                    </div>
                                                    <input type="hidden" id="value_{{ $locale }}" name="value_{{ $locale }}" value="{{ $data->{'value_' . $locale} }}">
                                                </div>
                                            @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_LONG_TEXT)
                                                <x-textarea-component divClass="col-md-12 mb-3" :label="trans('admin.config_value') . ' (' . $name . ')'" 
                                                    id="value_{{ $locale }}" name="value_{{ $locale }}"
                                                    :value="$data->{'value_' . $locale}" />
                                            @else
                                                <x-input-component type="text" divClass="col-md-12 mb-3" :label="trans('admin.config_value') . ' (' . $name . ')'" 
                                                    id="value_{{ $locale }}" name="value_{{ $locale }}"
                                                    :value="$data->{'value_' . $locale}" />
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_TIMEZONE)
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="basic-default-hub">{{ trans('admin.time_zone') }}</label>
                                <div class="input-group input-group-merge">
                                    <select id="selectTimezone" class="select2 form-select form-select-lg"
                                        data-placeholder="{{ trans('admin.search...') }}" name="value">
                                        @foreach (\App\Helpers\TimezoneHelper::getAll() as $key => $value)
                                            <option value="{{ $key }}" @selected($data->value == $key)>
                                                {{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_CURRENCY)
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="basic-default-hub">{{ trans('admin.currency') }}</label>
                                <div class="input-group input-group-merge">
                                    <select id="selectTimezone" class="select2 form-select form-select-lg"
                                        data-placeholder="{{ trans('admin.search...') }}" name="value">
                                        @foreach (CurrencyHelper::getAllCodes() as $currencyCode)
                                            <option value="{{ $currencyCode }}" @selected($data->value == $currencyCode)>
                                                {{ CurrencyHelper::getCurrencyName($currencyCode) }}
                                                ({{ CurrencyHelper::getCurrencySymbol($currencyCode) }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_FILE)
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="file">{{ trans('admin.file') }}</label>
                                <div class="input-group">
                                    <input class="form-control" type="file" id="formFile" name="value"
                                        accept="@php echo implode(",",\App\Enums\FileTypeEnum::IMAGE->getMimeTypes()) @endphp" />
                                </div>
                            </div>
                            @if ($data->value)
                                <div class="col-md-12 mb-3">
                                    <img class="img-fluid rounded mb-4"
                                        src="{{ $data->value ? route('stream_file', $data->value) : '' }}" height="200"
                                        width="200" alt="{{ $data->type->name() }}">
                                </div>
                            @endif
                            {{-- Boolean select component --}}
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_BOOLEAN)
                            <div class="col-md-12 mb-3">
                                <label class="form-label"
                                    for="basic-default-hub">{{ trans('admin.config_value') }}</label>
                                <div class="input-group input-group-merge">
                                    <select class="select2 form-select form-select-lg"
                                        data-placeholder="{{ trans('admin.search...') }}" name="value">
                                        <option value="1" @selected($data->value === '1')>{{ trans('admin.yes') }}
                                        </option>
                                        <option value="0" @selected($data->value === '0')>{{ trans('admin.no') }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        @elseif($data->type->type() == ConfigurationTypeEnum::TYPE_COLOR)
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="image">{{ trans('admin.color') }}</label>
                                <div class="classic col col-sm-3 col-lg-2">
                                    <div id="color-picker-classic"></div>
                                </div>
                                <input type="hidden" id="color_hidden" name="value"
                                    value="{{ old('color', $data->value) }}">
                            </div>
                        @else
                            @php $groupText = "" @endphp
                            @if ($data->type->type() == ConfigurationTypeEnum::TYPE_PERCENTAGE)
                                @php $groupText = "%" @endphp
                            @endif
                            <x-input-component divClass="col-md-12" :label="trans('admin.config_value')" id="value" type="text"
                                name="value" :value="$data->value" :groupText="$groupText" />
                        @endif
                        @include('layouts._save_form')
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <x-create-update-date-component :createdAt="$data->created_at" :createdBy="$data->created_by" :updatedAt="$data->updated_at"
                    :updatedBy="$data->updated_by" />
            </div>
        </div>
    </form>
@endsection

@section('vendor-script')
    @include('layouts._form_validation_script')
    <script src="{{ asset('admin_assets/vendor/libs/moment/moment.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/jquery-timepicker/jquery-timepicker.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/pickr/pickr.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/flatpickr/ar.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/pickr/pickr.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/quill/quill.js') }}"></script>

@endsection

@section('page-script')
    <script>
        datePickerInitialization($("[data-bs-datepicker]"));

        flatPickerInitialization($("[data-datetimepicker]"), false, 'd/m/Y H:i');

        flatPickerInitialization($("[data-timepicker]"), true, 'H:i');

        $('.create-new-data').on('click', function() {
            const cloneTrRow =
                `<tr>
                    <td>
                        <input class="form-control" type="text" name="value[]" value="" required>
                    </td>
                    <td>
                        <a class="btn btn-icon btn-danger text-white rounded-pill delete-item"><i class="text-white ti ti-trash"></i></a>
                    </td>
                </tr>`;
            $('.table-body').append(cloneTrRow);
        });

        $(document).on('click', '.delete-item', function() {
            $(this).closest('tr').remove();
        })

        $('.select2').select2({
            placeholder: '{{ trans('admin.search...') }}',
            language: {
                searching: function() {
                    return "{{ $placeholder ?? trans('admin.search...') }}";
                },
                noResults: function() {
                    return "{{ trans('admin.no_results_found') }}";
                }
            },
        });

        var colorInputHidden = $("#color_hidden");

        const classicPicker = document.querySelector('#color-picker-classic');
        if (classicPicker) {
            // ... (existing pickr logic)
        }

        // Initialize Quill Editors
        $('.quill-editor').each(function() {
            var editorId = $(this).attr('id');
            var targetId = $(this).data('target');
            var quill = new Quill('#' + editorId, {
                modules: {
                    toolbar: [
                        [{ font: [] }, { size: [] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ color: [] }, { background: [] }],
                        [{ script: 'super' }, { script: 'sub' }],
                        [{ header: '1' }, { header: '2' }, 'blockquote', 'code-block'],
                        [
                            { list: 'ordered' },
                            { list: 'bullet' },
                            { indent: '-1' },
                            { indent: '+1' }
                        ],
                        [{ direction: 'rtl' }, { align: [] }],
                        ['link', 'image', 'video', 'formula'],
                        ['clean']
                    ]
                },
                theme: 'snow'
            });

            quill.on('text-change', function() {
                $('#' + targetId).val(quill.root.innerHTML);
            });
        });
    </script>
@endsection