@extends('adminlte::page')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Site Settings</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item">CMS Settings</li>
                    <li class="breadcrumb-item active">Site Settings</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Update Site Settings</h3>
                    </div>
                    <div class="card-body">
                        <form id="site_settings_form" action="{{ route('admin.saveSiteSettings') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="row">
                                <!-- Site Logo -->
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="site_logo">Site Logo <span class="text-danger">*</span></label>
                                        <input type="file" name="site_logo" id="site_logo" class="form-control-file"
                                            onchange="showPreview(event, 'siteLogoPreview')">
                                        <small id="siteLogoErr" class="text-danger"></small>
                                        <!-- <div class="mt-3">
                                            <img id="siteLogoPreview" src="@if($data && $data->site_logo) {{ asset('storage/distribution/images/website_images/' . basename($data->site_logo)) }} @endif" alt="Site Logo Preview" style="max-width: 200px; cursor: pointer;" onclick="openModal('siteLogoPreview', 'Site Logo Preview')">
                                        </div> -->
                                        <div class="mt-3 preview-container">
                                            <img id="siteLogoPreview"
                                                src="@if($data && $data->site_logo) {{ asset('storage/distribution/images/website_images/' . basename($data->site_logo)) }} @endif"
                                                alt="Site Logo Preview" class="img-preview"
                                                onclick="openModal('siteLogoPreview', 'Site Logo Preview')">
                                        </div>
                                    </div>
                                </div>

                                <!-- Footer Logo -->
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="footer_logo">Footer Logo <span class="text-danger">*</span></label>
                                        <input type="file" name="footer_logo" id="footer_logo" class="form-control-file"
                                            onchange="showPreview(event, 'footerLogoPreview')">
                                        <small id="footerLogoErr" class="text-danger"></small>
                                        <div class="mt-3 preview-container">
                                            <img id="footerLogoPreview"
                                                src="@if($data && $data->footer_logo) {{ asset($data->footer_logo) }} @else {{ asset('images/no-image.png') }} @endif"
                                                alt="Footer Logo Preview" class="img-preview"
                                                onclick="openModal('footerLogoPreview', 'Footer Logo Preview')">
                                        </div>
                                    </div>
                                </div>

                                <!-- Modal Structure -->
                                <div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog"
                                    aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="imagePreviewModalLabel"></h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body text-center">
                                                <img id="modalImage" src="" alt="Image Preview" class="img-fluid">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Copyright Text -->
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="copyright_text">Copyright Text <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="copyright_text" id="copyright_text"
                                            class="form-control" placeholder="Enter Copyright Text"
                                            value="{{ old('copyright_text', optional($data)->copy_right) }}">
                                        <small id="copyrightTextErr" class="text-danger"></small>
                                    </div>
                                </div>

                                <!-- Privacy Policy -->
                                <!-- <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="privacy_policy">Privacy Policy Content <span
                                                class="text-danger">*</span></label>
                                        <textarea name="privacy_policy" id="privacy_policy"
                                            class="form-control summernote"
                                            placeholder="Enter Privacy Policy Content">{!! old('privacy_policy', optional($data)->privacy_policy) !!}</textarea>
                                        <small id="privacyPolicyErr" class="text-danger"></small>
                                    </div>
                                </div> -->

                                <!-- Terms & Conditions -->
                                <!-- <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="terms_conditions">Terms & Conditions Content <span
                                                class="text-danger">*</span></label>
                                        <textarea name="terms_conditions" id="terms_conditions"
                                            class="form-control summernote"
                                            placeholder="Enter Terms & Conditions">{!! old('terms_conditions', optional($data)->terms_condition) !!}</textarea>
                                        <small id="termsConditionsErr" class="text-danger"></small>
                                    </div>
                                </div> -->

                                <!-- Browser Cache Management -->
                                <!-- <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="browser_cache_management">Browser Cache Management Content <span
                                                class="text-danger">*</span></label>
                                        <textarea name="browser_cache_management" id="browser_cache_management"
                                            class="form-control summernote"
                                            placeholder="Enter Browser Cache Management Content">{!! old('browser_cache_management', optional($data)->browser_cache_management) !!}</textarea>
                                        <small id="browserCacheManagementErr" class="text-danger"></small>
                                    </div>
                                </div> -->


                                <!-- // --- Technical support Contact Info: ----// -->
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="support_phone">Technical Support Phone</label>
                                        <input type="text" name="support_phone" id="support_phone" class="form-control"
                                            placeholder="Enter the Phone Number"
                                            value="{{ old('support_phone', optional($data)->support_phone) }}">
                                        <small id="supportPhoneErr" class="text-danger"></small>
                                    </div>
                                </div>

                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="support_email">Technical Support Email</label>
                                        <input type="email" name="support_email" id="support_email" class="form-control"
                                            placeholder="Enter the Email"
                                            value="{{ old('support_email', optional($data)->support_email) }}">
                                            <small id="supportEmailErr" class="text-danger"></small>
                                    </div>
                                </div>

                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="technical_privacy_status">Visibility Status</label>
                                        <select name="visibility_status" id="technical_privacy_status"
                                            class="form-control">
                                            <option disabled selected>--- Select Status ----</option>
                                            <option value="1" {{ $data && $data->visibility_status == 1 ? 'selected' :
                                                '' }}>Show</option>
                                            <option value="0" {{ $data && $data->visibility_status == 0 ? 'selected' :
                                                '' }}>Hide</option>
                                        </select>
                                        <small id="supportStatusErr" class="text-danger"></small>
                                    </div>
                                </div>





                            </div>

                            <div class="modal-footer justify-content-between">
                                <button type="reset" class="btn btn-secondary">Reset</button>
                                <button type="submit" class="btn btn-primary"><span>Save Settings</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@stop

@section('js')
<script>

  
   $(document).ready(function() {
       // $('.summernote').summernote({
       //     height: 300,
       //     placeholder: 'Enter content here...'
       // });
       const brandTextColors = ['#002B10', '#FFFFFF', '#E1F5E1', '#FFFEE0', '#CAE9F5', '#FFC201', '#000000', '#6B6A6A', '#EFEDE3'];
       const brandTextColorNames = ['Tolly Green', 'White', 'Light Green', 'Pastel Yellow', 'Light Blue', 'Gold', 'Black', 'Grey', 'Off White'];

       const summernoteConfig = {
           toolbar: [
               ['style', ['style']],
               ['font', ['bold', 'italic', 'underline', 'clear']],
               ['fontsize', ['fontsize']],
               ['color', ['color']],
               ['para', ['ul', 'ol', 'paragraph']],
               ['insert', ['link']],
               ['view', ['codeview']]
           ],
           fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48'],
           colors: [brandTextColors],
           colorsName: [brandTextColorNames],
           colorButton: {
               foreColor: '#002B10',
               backColor: '#FFFFFF'
           },
           height: 250,
           callbacks: {
               onPaste: function (e) {
                   var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                   e.preventDefault();
                   document.execCommand('insertText', false, bufferText);
               }
           }
       };

       $('.summernote').summernote(summernoteConfig);
   });
</script>
@stop

@section('css')
<style>
    .preview-container {
        background-color: #d6d6d6;
        /* deep ash background */
        border: 1px solid #bbb;
        border-radius: 8px;
        padding: 12px;
        width: 100%;
        max-width: 240px;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
    }

    .img-preview {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        user-select: none;
        pointer-events: none;
    }
</style>
@stop