@extends('layouts.app')
@section('title', $page_title)

{{-- Include global DataTable styling --}}
@include('components.datatable-styles')

@push('scripts')
<script>
$(document).ready(function() {
   loadSendingServerAttributes($('#sending_server_type').val(), 'edit', 0);
   $('#test-mail-connection-btn').on('click', function() {
     var $btn = $(this);
     var $result = $('#test-mail-connection-result');
     var data = {
       _token: $('input[name="_token"]').val(),
       type: $('#sending_server_type').val(),
       from_name: $('input[name="from_name"]').val(),
       from_email_part1: $('input[name="from_email_part1"]').val(),
       from_email_part2: $('select[name="from_email_part2"]').val()
     };
     $('#sending-attributes').find('input, select').each(function() {
       var $el = $(this);
       var n = $el.attr('name');
       if (n && data[n] === undefined) {
         if ($el.attr('type') === 'checkbox' || $el.attr('type') === 'radio') {
           if ($el.is(':checked')) data[n] = $el.val() || '1';
         } else {
           data[n] = $el.val();
         }
       }
     });
     $result.empty().removeClass('d-none');
     $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1" role="status"></span>{{ __("app.test_connection") }}');
     $.ajax({
       url: '{{ route("settings.test_mail_connection") }}',
       method: 'POST',
       data: data,
       success: function(r) {
         if (r.success) {
           $result.html('<div class="alert alert-success alert-dismissible fade show" role="alert"><i class="bi bi-check-circle-fill me-2"></i><strong>{{ __("app.connection_success") }}</strong><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
         } else {
           showTestConnectionError($result, r.message || '{{ __("app.connection_failed") }}');
         }
       },
       error: function(xhr) {
         var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : '{{ __("app.connection_failed") }}';
         showTestConnectionError($result, msg);
       },
       complete: function() {
         $btn.prop('disabled', false).html('<i class="bi bi-link-45deg me-1"></i>{{ __("app.test_connection") }}');
       }
     });
   });
   function showTestConnectionError($container, message) {
     var copyTxt = '{{ __("app.copy") }}';
     var copiedTxt = '{{ __("app.saved") }}';
     var html = '<div class="alert alert-danger alert-dismissible fade show d-flex align-items-start" role="alert">';
     html += '<i class="bi bi-exclamation-triangle-fill me-2 flex-shrink-0"></i><div class="flex-grow-1">';
     html += '<strong class="test-connection-error-text">' + $('<div/>').text(message).html() + '</strong>';
     html += '<div class="mt-2"><button type="button" class="btn btn-sm btn-outline-danger test-connection-copy-btn" data-copied="' + $('<div/>').text(copiedTxt).html() + '"><i class="bi bi-clipboard me-1"></i>' + $('<div/>').text(copyTxt).html() + '</button></div>';
     html += '</div><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>';
     $container.html(html);
     $container.find('.test-connection-copy-btn').on('click', function() {
       var el = $(this);
       var text = $container.find('.test-connection-error-text').text();
       if (navigator.clipboard && navigator.clipboard.writeText) {
         navigator.clipboard.writeText(text).then(function() { el.html('<i class="bi bi-check me-1"></i>' + el.data('copied')).prop('disabled', true); });
       } else {
         var ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select();
         document.execCommand('copy'); document.body.removeChild(ta);
         el.html('<i class="bi bi-check me-1"></i>' + el.data('copied')).prop('disabled', true);
       }
     });
   }
});
</script>
@endpush

@section('styles')
<style type="text/css">
   .div-webhook-url,.process-reports-div{
      display: none !important;
   }
   .select2-container {
    z-index: 10 !important;
   }
   .sending-server-type-select-icon { font-size: 1.1rem; opacity: 0.92; line-height: 1; flex-shrink: 0; }

   /* Settings: professional tab bar + panels */
   .settings-page-header {
     border-bottom: 1px solid var(--bs-border-color);
     padding-bottom: 1rem;
     margin-bottom: 1.25rem;
   }
   .settings-tabs-wrap {
     border: 1px solid var(--bs-border-color);
     border-radius: 0.375rem;
     padding: 0.2rem;
     background: var(--bs-tertiary-bg);
     margin-bottom: 1.25rem;
   }
   .settings-tabs-wrap .settings-nav-pills {
     gap: 0.2rem;
     row-gap: 0.25rem;
   }
   /* Compact tab size (~listing / toolbar buttons, 0.75rem) */
   .settings-tabs-wrap .settings-nav-pills .nav-link {
     border-radius: 0.25rem;
     font-size: 0.75rem !important;
     font-weight: 600;
     line-height: 1.35;
     padding: 0.3rem 0.65rem;
     color: var(--bs-body-color);
     border: 1px solid transparent;
     display: inline-flex;
     align-items: center;
     transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
   }
   .settings-tabs-wrap .settings-nav-pills .nav-link i {
     font-size: 0.85em;
   }
   .settings-tabs-wrap .settings-nav-pills .nav-link:hover:not(.active) {
     background: rgba(var(--bs-primary-rgb), 0.08);
     color: var(--bs-primary);
   }
   .settings-tabs-wrap .settings-nav-pills .nav-link.active {
     background: var(--bs-primary);
     color: #fff;
     border-color: var(--bs-primary);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   }
   .settings-tabs-wrap .settings-nav-pills .nav-link.active i {
     opacity: 1;
   }
   .settings-tabs-wrap .settings-nav-pills .nav-link.active .badge {
     background-color: rgba(255, 255, 255, 0.28) !important;
     color: #fff;
   }
   .settings-tab-pane {
     min-height: 12rem;
   }
   .settings-form-footer {
     border-top: 1px solid var(--bs-border-color);
     margin-top: 1.5rem;
     padding-top: 1.25rem;
     background: linear-gradient(to bottom, transparent, var(--bs-tertiary-bg));
     border-radius: 0 0 0.375rem 0.375rem;
     margin-left: -1rem;
     margin-right: -1rem;
     margin-bottom: -1rem;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-bottom: 1rem;
   }
   @media (max-width: 575.98px) {
     .settings-tabs-wrap .settings-nav-pills .nav-link {
       padding: 0.28rem 0.55rem;
     }
   }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card custom-card dash-analytics-card">
            <div class="card-body">
                <!-- Page Header -->
                <div class="row settings-page-header">
                    <div class="col-12">
                        <h5 class="fw-semibold mb-1">{{ __('app.application_settings') }}</h5>
                        <p class="mb-0 small text-muted">{{ __('app.application_settings_description') }}</p>
                    </div>
                </div>

                <div class="settings-tabs-wrap">
                <ul class="nav nav-pills settings-nav-pills mb-0" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-general-tab" data-bs-toggle="pill" data-bs-target="#pills-general" type="button" role="tab" aria-controls="pills-general" aria-selected="true">
                            <i class="bi bi-gear me-1"></i>{{__('app.general')}}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-mail-tab" data-bs-toggle="pill" data-bs-target="#pills-mail" type="button" role="tab" aria-controls="pills-mail" aria-selected="false">
                            <i class="bi bi-envelope me-1"></i>{{__('app.mail')}}
                            @if(empty($settings->from_name) || empty($settings->from_email))
                            <span class="badge bg-danger ms-1 rounded-pill align-middle" style="font-size: 0.55rem; padding: 0.1em 0.35em;">!</span>
                            @endif
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-tracking-tab" data-bs-toggle="pill" data-bs-target="#pills-tracking" type="button" role="tab" aria-controls="pills-tracking" aria-selected="false">
                            <i class="bi bi-graph-up-arrow me-1"></i>{{__('app.tracking')}}
                        </button>
                    </li>
                </ul>
                </div>

                <form id="settings-form" method="POST" action="{{ route('settings.update', config('custom.app_id')) }}" class="needs-validation" novalidate enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active settings-tab-pane" id="pills-general" role="tabpanel" aria-labelledby="pills-general-tab">

                        <div class="mb-3 pb-3 border-bottom">
                            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.basic_information') }}</div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2">{{__('app.application_cron')}}
                                            <i class="bi bi-copy text-primary" onclick="copyShortcode('{{ \App\Http\Helper\Helper::getCronCommand() }}')" style="cursor: pointer !important;" title="{{__('app.copy')}}" role="button" tabindex="0"></i>
                                        </label>
                                        <input type="text" class="form-control" value="{{ \App\Http\Helper\Helper::getCronCommand() }}" id="shortcode-textbox" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="settings-app-name">{{__('app.app_name')}} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="settings-app-name" placeholder="{{__('app.app_name')}}" aria-label="{{__('app.app_name')}}" value="{{ $settings->app_name ?? '' }}" name="app_name" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="settings-app-url">{{__('app.app_url')}} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="settings-app-url" placeholder="{{__('app.app_url')}}" value="{{ $settings->app_url ?? '' }}" name="app_url" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="settings-license-key">{{__('app.license_key')}}</label>
                                        <input type="text" class="form-control" id="settings-license-key" value="{{ $settings->license_key ?? '' }}" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3 mb-0">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="settings-server-ip">{{__('app.server_ip')}}</label>
                                        <input type="text" class="form-control" id="settings-server-ip" value="{{$_SERVER['SERVER_ADDR']}}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="settings-app-version">{{__('app.application_version')}}</label>
                                        <input type="text" class="form-control" id="settings-app-version" value="{{ $settings->current_version ?? '' }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3 pb-3 border-bottom">
                            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.configuration') }}</div>
                            <div class="row mb-0">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="activity_log_retention">{{__('app.activity_log_retention')}}
                                            <a tabindex="-1" role="button"
                                            data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.activity_log_retention')}}"
                                            data-bs-content="{{__('app.activity_log_retention_help')}}" data-bs-custom-class="header-primary">
                                                <i class="bi bi-question-circle text-primary"></i>
                                            </a>
                                        </label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="activity_log_retention" name="activity_log_retention" value="{{ json_decode($settings->attributes)->activity_log_retention ?? config('custom.activity_log_retention') }}" min="1" required>
                                            <div class="input-group-text">
                                                <span class="text-muted"><i>{{__('app.days')}}</i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="max_allowed_file_size">{!! \App\Http\Helper\Helper::getMaxFileSize() !!}</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="max_allowed_file_size" name="max_allowed_file_size" value="{{ \App\Http\Helper\Helper::parseSizeToMb(json_decode($settings->attributes)->max_file_size ?? 2) }}" min="1" required>
                                            <div class="input-group-text">
                                                <span class="text-muted"><i>MB</i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-0">
                            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.file_uploads') }}</div>
                            <div class="row mb-0">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="file-login-page-logo">{{__('app.login_page_logo')}} <small>(.png)</small></label>
                                        <input class="form-control" name="file_login_page_logo" type="file" id="file-login-page-logo" accept=".png,image/png">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="file-application-logo">{{__('app.application_logo')}} <small>(.png)</small></label>
                                        <input class="form-control" name="file_application_logo" type="file" id="file-application-logo" accept=".png,image/png">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="file-favicon">{{__('app.favicon')}} <small>(.ico) (50x50)</small></label>
                                        <input class="form-control" name="file_favicon" type="file" id="file-favicon" accept=".ico">
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                        
                        <div class="tab-pane fade settings-tab-pane" id="pills-mail" role="tabpanel" aria-labelledby="pills-mail-tab">
                            <div class="mb-3 pb-3 border-bottom">
                                <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.mail') }}</div>
                                <p class="mb-0 small text-muted">{{ __('app.system_emails_note') }}</p>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="sending_server_type">{{__('app.delivery_server')}}
                                            <a tabindex="-1" role="button"
                                            data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="{{__('app.delivery_server')}}"
                                            data-bs-content="{{__('app.delivery_server_setting_help')}}" data-bs-custom-class="header-primary">
                                                <i class="bi bi-question-circle text-primary"></i>
                                            </a>
                                        </label>
                                        <div class="d-flex gap-2 align-items-center flex-wrap">
                                            <select name="type" id="sending_server_type" class="form-select" style="max-width: 280px;"
                                                data-select2-width="280px"
                                                data-sending-server-action="edit"
                                                data-sending-server-id="0">
                                                @include('includes.sending_server_type_options', ['selectedType' => old('type', $settings->sending_type ?? null)])
                                            </select>
                                            <button type="button" id="test-mail-connection-btn" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-link-45deg me-1"></i>{{ __('app.test_connection') }}
                                            </button>
                                            <div id="test-mail-connection-result" class="small mt-1 w-100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="settings-from-name">{{__('app.from_name')}} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="settings-from-name" placeholder="{{__('app.from_name')}}" value="{{ $settings->from_name ?? '' }}" name="from_name" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2">{{__('app.from_email')}} <span class="text-danger">*</span>
                                            <a href="{{route('sending_domains.index')}}" tabindex="-1">
                                                <i class="bi bi-plus-circle text-primary"></i>
                                            </a>
                                        </label>
                                        <div class="input-group">
                                            <div style="width: 35%;">
                                                <input type="text" name="from_email_part1" class="form-control" placeholder="{{__('app.from_email_example')}}" value="{{strstr($settings->from_email, '@', true)}}" required>
                                            </div>
                                            <span class="input-group-text">@</span>
                                            @php
                                            $from_email_domain = '';
                                            if(!empty($settings->from_email))
                                            $from_email_domain = explode('@', $settings->from_email)[1];
                                            @endphp
                                            <select name="from_email_part2" class="form-select" required>
                                                <option value="">{{__('app.select_domain')}}</option>
                                                @foreach(\App\Models\SendingDomain::getSendingDomains() as $sending_domain)
                                                <option value="{{ $sending_domain->domain }}" {{ ($from_email_domain == $sending_domain->domain) ? 'selected="selected"' : '' }}>{{ $sending_domain->domain }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <div id="sending-attributes"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tab-pane fade settings-tab-pane" id="pills-tracking" role="tabpanel" aria-labelledby="pills-tracking-tab">
                            <div class="mb-3 pb-3 border-bottom">
                                <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.tracking') }}</div>
                                <p class="mb-0 small text-muted">{{ __('app.settings_tracking_help') }}</p>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    @if(!file_exists(config('custom.path_maxmind_geo_db')))
                                    <div class="alert alert-danger">
                                        {!! str_replace('[path]', config('custom.path_maxmind_geo_db'), __('app.geo_file_missing_msg')) !!}
                                        <br>
                                        {!! str_replace('[path]', config('custom.path_maxmind_geo_db'), __('app.geo_file_download_msg')) !!}
                                    </div>
                                    @endif
                                </div>
                            </div>
                            
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label fw-semibold mt-2" for="settings-tracking">{{__('app.tracking')}}
                                            <a tabindex="-1" role="button"
                                            data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="{{__('app.tracking')}}"
                                            data-bs-content="{{__('app.settings_tracking_help')}}" data-bs-custom-class="header-primary">
                                                <i class="bi bi-question-circle text-primary"></i>
                                            </a>
                                        </label>
                                        <select name="tracking" id="settings-tracking" class="form-select">
                                            <option value="enabled" {{ ($settings->tracking == 'enabled') ? 'selected' : '' }}>{{ __('app.enabled') }}</option>
                                            <option value="disabled" {{ ($settings->tracking == 'disabled') ? 'selected' : '' }}>{{ __('app.disabled') }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                        <!-- Action Buttons -->
                    <div class="settings-form-footer">
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary btn-loading">
                                    <i class="bi bi-check-circle me-1"></i>{{__('app.update')}}
                                </button>
                            </div>
                        </div>
                    </div>
                    </div>
                    
                </form>
            </div>
        </div>
    </div>
</div>
@endsection