@extends('layouts.app')
@section('title', trans('menu.profile_title'))

@section('content')
    <div class="content">
        <x-content.header title="{{ __('title.setup_company_information') }}" />

        <form name="company-profile" action="{{ route('settings.profile.update') }}" method="POST">

            <div class="flex flex-col gap-4 mb-8">
                <div class="flex gap-4 flex-col lg:flex-row">

                    <div class="form-group-file w-full border-custom-grey-200 p-[32px] pb-24">
                        <h3 class="!py-0 text-lg font-semibold leading-[10px]">{{ __('label.super_admin') }}</h3>

                        <p class="text-custom-grey-500 text-sm pb-2">{{ trans('title.company_information') }}</p>

                        <hr class="mb-1 border-custom-grey-100">

                        <div class="form_group flex flex-col lg:flex-row lg:justify-between lg:items-start gap-2 lg:gap-0">
                            <label class="form-label text-sm-semibold w-full lg:w-1/2" for="email">Email</label>
                            <input class="form-input text-md-regular text-custom-grey-500 w-full lg:w-[63.5%]" disabled
                                name="email" id="email" type="email"
                                value="{{ $admins->pluck('email')->implode(', ') }}">
                        </div>
                        <hr class="mt-1 border-custom-grey-100">
                    </div>

                    <div class="form-group-file w-full lg:w-[40%] justify-center border-custom-grey-200 py-12 lg:py-0">

                        <div class="flex items-center justify-center custom-dropify-wrapper">
                            <input id="logo" type="file" name="logo" class="dropify cropper"
                                data-default-file="{{ getMediaUrl($settings, 'logo') }}"
                                data-allowed-file-extensions="jpg jpeg png gif"
                                data-uri="{{ route('settings.profile.logo.upload') }}" />
                        </div>

                        <div class="flex flex-col gap-1">
                            <span
                                class="text-xs-regular text-custom-grey-600 text-center">{{ trans('forms.recommended_140_transparent_background') }}</span>
                            <button type="button" class="btn btn-info btn-rounded btn-sm btn-upload mt-4 hidden">
                                    <i class="mdi mdi-pencil"></i> {{ trans('forms.change_logo_title') }}
                                </button>
                        </div>
                    </div>
                </div>


                <div class="form-group-file w-full border-custom-grey-200 px-7 pb-8 pt-5">
                    <h3 class="!py-0 text-lg font-semibold">{{ __('label.outgoing_email_settings') }}</h3>
                    <hr class="mb-1 border-custom-grey-100">
                    <div
                        class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-start gap-2 lg:gap-0">
                        <label class="form-label text-sm-semibold w-full lg:w-1/2" for="outgoing_email">{{ __('label.standard_afzenderadres') }}</label>
                        <input class="form-input text-md-regular text-custom-grey-500 w-full lg:w-1/2" name="outgoing_email" id="outgoing_email" type="email"
                             value="{{ $settings->outgoing_email }}">
                    </div>

                    <hr class="mt-1 border-custom-grey-100">
                </div>


                <div class="form-group-file w-full border-custom-grey-200 px-7 pb-8 pt-5">
                    <h3 class="!py-0 text-lg font-semibold">{{ __('forms.lbl_country_settings') }}</h3>
                    <hr class="mb-1 border-custom-grey-100">
                    <div
                        class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-start gap-2 lg:gap-0">
                        <label class="form-label text-sm-semibold w-full lg:w-1/2" for="country_id">{{ __('label.country') }}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <select name="country_id" id="country_id" class="pd-dropdown text-md-regular text-custom-grey-500">
                                <option value="">{{ __('lbl_select_country') }}</option>
                                @foreach ($countries as $country)
                                    @php $selected = ""; @endphp

                                    @if ($country->id == $settings->country_id)
                                        @php $selected = "selected='selected'"; @endphp
                                    @endif
                                    <option {{ $selected }} value="{{ $country->id }}">
                                        {{ $country->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div
                        class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-start gap-2 lg:gap-0">
                        <label class="form-label text-sm-semibold w-full lg:w-1/2" for="timezone_id">{{ __('label.time_zone') }}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <select name="timezone_id" id="timezone_id" class="pd-dropdown text-md-regular text-custom-grey-500"
                                data-placeholder="{{ __('forms.lbl_select_time_zone') }}">
                                @foreach ($timezones as $timezone)
                                    <optgroup label="{{ $timezone->name }}">
                                        @foreach ($timezone->childs as $zone)
                                            @php $selected = ""; @endphp
                                            @if ($zone->id == $settings->timezone_id)
                                                @php $selected = "selected='selected'"; @endphp
                                            @endif
                                            <option {{ $selected }} value="{{ $zone->id }}">
                                                {{ $zone->name }}
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div
                        class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-start gap-2 lg:gap-0">
                        <label class="form-label text-sm-semibold w-full lg:w-1/2" for="language_id">{{ trans('forms.language') }}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <select name="language_id" id="language_id" class="pd-dropdown text-md-regular text-custom-grey-500">
                                <option value="">{{ trans('forms.select_language') }}</option>
                                @foreach ($languages as $language)
                                    @php $selected = ""; @endphp

                                    @if ($language->id == $settings->language_id)
                                        @php $selected = "selected='selected'"; @endphp
                                    @endif
                                    <option {{ $selected }} value="{{ $language->id }}">
                                        {{ $language->english }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <hr class="mt-1 border-custom-grey-100">
                </div>

                <div class="form-group-file w-full border-custom-grey-200 px-7 pb-8 pt-5">
                    <h3 class="!py-0 text-lg font-semibold">{{ __('label.display_settings') }}</h3>
                    <hr class="mb-1 border-custom-grey-100">

                    <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-start gap-2 lg:gap-0">
                        <label class="form-label text-sm-semibold w-full lg:w-1/2" for="date_formats">{{ __('label.date_format') }}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <select name="date_format" id="date_formats" class="pd-dropdown text-md-regular text-custom-grey-500">
                                @foreach ($date_formats as $date_format)
                                    @php $selected = ""; @endphp
                                    @if ($date_format == $settings->date_format)
                                        @php $selected = "selected='selected'"; @endphp
                                    @endif
                                    <option {{ $selected }} value="{{ $date_format }}">
                                        {{ $date_format }}
                                    </option>
                                @endforeach
                            </select>

                        </div>
                    </div>

                    <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-start gap-2 lg:gap-0">
                        <label class="form-label text-sm-semibold w-full lg:w-1/2" for="time_format_12">{{ __('label.time_format') }}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <div class="flex justify-start items-center gap-2">
                                <div class="w-4 h-4">
                                    <input type="radio" name="time_format" id="time_format_12" value="h:i a" {{ $settings->time_format == 'h:i a' ? 'checked' : '' }} />
                                </div>
                                <label for="time_format_12" class="m-0">12 - {{ trans('forms.lbl_hours') }}</label>
                            </div>

                            <div class="flex justify-start items-center gap-2">
                                <div class="w-4 h-4">
                                    <input type="radio" name="time_format" id="time_format_24" value="H:i" {{ $settings->time_format == 'H:i' ? 'checked' : '' }}>
                                </div>
                                <label for="time_format_24" class="m-0">24 - {{ trans('forms.lbl_hours') }}</label>
                            </div>
                        </div>

                    </div>

                    <hr class="mt-1 border-custom-grey-100">

                </div>


                <div class="form-group-file w-full border-custom-grey-200 px-7 pb-8 pt-5">
                    <h3 class="!py-0 text-lg font-semibold">{{ __('label.notification_settings') }}</h3>
                    <hr class="mb-1 border-custom-grey-100">

                    <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-start gap-2 lg:gap-0">
                        <label class="form-label text-sm-semibold w-full lg:w-1/2" for="push_notification_enable">{{ __('label.push_notification') }}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <div class="flex justify-start items-center gap-2">
                                <div class="w-4 h-4">
                                    <input type="hidden" name="push_notification_enable" value="0">
                                    <input type="checkbox" name="push_notification_enable" id="push_notification_enable" value="1" {{ $settings->push_notification_enable ? 'checked' : '' }} />
                                </div>
                                <label for="push_notification_enable" class="m-0"> {{ trans('forms.lbl_enabled') }}</label>
                            </div>

                            <div id="configurable-checkbox" class="flex justify-start items-center gap-2 {{ $settings->push_notification_enable ? 'visible' : 'hidden' }}">
                                <div class="w-4 h-4">
                                    <input type="hidden" name="push_notification_configurable" value="0">
                                    <input type="checkbox" name="push_notification_configurable" value="1"
                                                    {{ $settings->push_notification_configurable ? 'checked' : '' }}>
                                </div>
                                <label for="time_format_24" class="m-0">{{ trans('forms.lbl_configurable') }}</label>
                            </div>
                        </div>

                    </div>

                    <hr class="mt-1 border-custom-grey-100">

                </div>

                <div class="form-group-file w-full border-custom-grey-200 px-7 pb-8 pt-5">
                    <h3 class="!py-0 text-lg font-semibold">{{ __('label.company_information') }}</h3>
                    <hr class="mb-1 border-custom-grey-100">

                    <div class="profile-feed mt-4">

                        <div class="repeater">

                            <div data-repeater-list="locations" >
                                @forelse ($locations as $key => $location)
                                    @include('locations.locations', [
                                        'location' => $location,
                                    ])
                                @empty
                                    @include('locations.locations', [
                                        'location' => new App\Models\Location(),
                                    ])
                                @endforelse
                            </div>

                            <div class="lg:pt-8">
                                <button data-repeater-create type="button"
                                    class="flex items-center gap-2 text-custom-orange-500 text-sm-semibold btn-location">
                                    <x-svg-icon icon='icon-add' /> {{ trans('forms.add_location') }}
                                </button>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="flex items-center gap-3 mt-4">
                    <button type="submit" class="btn-primary-base text-md-semibold btn-save">
                        {{ trans('forms.lbl_save') }}
                    </button>
                    <a href="{{ route('settings.profile') }}"
                        class="btn-tertiary-base text-md-semibold">{{ trans('forms.lbl_cancel') }}</a>
                </div>

            </div>
        </form>
    </div>
@stop

@section('footer-script')
    <script type="text/javascript">
        $("input[type='file']").on('change', function() {
            $(".btn-upload").removeClass("hidden");
        });

        $(".btn-save").on("click", function(event) {
            event.preventDefault();
            let form = $(this).parents('form');
            PDRequest({
                type: "PUT",
                url: form.prop("action"),
                data: form.serialize(),
                event: event
            }).then((response) => {
                window.location = "{{ route('settings.profile') }}";
            });
        });

        $('input[name="push_notification_enable"]').change(function() {
            if ($(this).is(':checked')) {
                $('#configurable-checkbox').show();
            } else {
                $('#configurable-checkbox').hide();
                $('input[name="push_notification_configurable"]').prop('checked', false);
            }
        });

        drEvent.on('dropify.beforeClear', function(event, element) {
            if (confirm("{{ trans('forms.do_you_really_want_delete') }}")) {
                return PDRequest({
                    type: "POST",
                    url: "{{ route('settings.profile.logo.remove') }}"
                }).then(function(response) {
                    window.location = "";
                    return $(".btn-upload").addClass("hidden");
                });;
            } else {
                return false;
            }
        });

        // $("body").on("click", ".delete-location", function(event) {
        // 	event.preventDefault();

        //     if($(this).data('uri') !== ""){
        //         PDRemove({
        //             url : $(this).data('uri')
        //         });
        //     }
        // });
    </script>
    <!-- End custom js for this page-->

@stop