@extends('pages.layout')
@section('title', 'Settings')
@section('content')
    <style>
        #settings-form .error {
            color: red;
        }

        .main-content {
            margin-left: 18%;
            margin-top: 7%;
        }
    </style>
    <div class="main-content">

        <div class="page-header no-gutters has-tab">
            <div class="d-md-flex m-b-15 align-items-center justify-content-between">
                <div class="media align-items-center m-b-15">
                    <div class="m-l-15">
                        <h4 class="m-b-0">Settings</h4>
                    </div>
                </div>
            </div>

        </div>
        <div class="tab-content m-t-15">
            <div class="card">
                <div class="card-body">
                    <form id="settings-form" action="{{ route('admin.create.settings') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="font-weight-semibold">Title</label>
                                    <input type="text" class="form-control" id="" placeholder="Title"
                                        value="{{ $settings->title ?? '' }}" name="title">
                                </div>
                                @error('title')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="font-weight-semibold">Email Address</label>
                                    <input type="text" class="form-control" placeholder="Email Address"
                                        value="{{ $settings->email ?? '' }}" name="email">
                                </div>
                                @error('email')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="font-weight-semibold">Database Backup Email Address</label>
                                    <input type="text" class="form-control"
                                        placeholder="Enter Database Backup Email Address"
                                        value="{{ $settings->database_backup_email ?? '' }}" name="database_backup_email">
                                </div>
                                @error('database_backup_email')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="font-weight-semibold">Contact Number</label>
                                    <input type="text" min="0" maxlength="10" minlength="10"
                                        class="form-control mb-2" name="contact_number" id="contact"
                                        placeholder="Contact Number"
                                        onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                        value="{{ $settings->contact_number ?? '' }}" name="contact_number">
                                </div>
                                @error('cuntact_number')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="font-weight-semibold">Logo</label>
                                    <input type="file" accept=".png, .jpg, .jpeg, .gif" onchange="imageValidation(this)"
                                        accept="image/*" class="form-control" id="logoInput" name="logo">
                                    <span class="imageValidation text-danger"></span>
                                    <img id="logoPreview"
                                        src="{{ isset($settings->logo) && file_exists(public_path('uploads/setting/' . $settings->logo)) ? asset('uploads/setting/' . $settings->logo) : '' }}"
                                        alt="Logo Preview"
                                        style="{{ isset($settings->logo) && file_exists(public_path('uploads/setting/' . $settings->logo)) ? 'display: block;' : 'display: none;' }} margin-top: 10px; width: 250px; height: 100px !important;border-radius:50%">
                                </div>
                                @error('logo')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="font-weight-semibold">Favicon</label>
                                    <input type="file" accept=".png, .jpg, .jpeg, .gif" onchange="imageValidation(this)"
                                        class="form-control" accept="image/*" id="faviconInput" name="favicon">
                                    <span class="imageValidation text-danger"></span>

                                    <img id="faviconPreview"
                                        src="{{ isset($settings->logo) && file_exists(public_path('uploads/setting/' . $settings->favicon)) ? asset('uploads/setting/' . $settings->favicon) : '' }}"
                                        alt="Favicon Preview"
                                        style="{{ isset($settings->favicon) && file_exists(public_path('uploads/setting/' . $settings->favicon)) ? 'display: block;' : 'display: none;' }} margin-top: 10px; width: 32px; height: 32px">
                                </div>
                                @error('favicon')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-4">
                                <div class="form-group">
                                    <label class="font-weight-semibold">App Slider Images</label>
                                    <input type="file" accept=".png, .jpg, .jpeg, .gif"
                                        onchange="multipleImageValidation(this)" accept="image/*" class="form-control"
                                        id="appSliderInput" name="app_slider[]" multiple>
                                    <div id="validationMessages"></div>
                                    <img id="appSliderPreview"
                                        src="{{ isset($settings->app_slider) && file_exists(public_path('uploads/setting/' . $settings->app_slider)) ? asset('uploads/setting/' . $settings->app_slider) : '' }}"
                                        alt="appSliderPreview"
                                        style="{{ isset($settings->app_slider) && file_exists(public_path('uploads/setting/' . $settings->app_slider)) ? 'display: block;' : 'display: none;' }} margin-top: 10px; width: 100px; height: auto;">
                                </div>
                                @error('app_slider')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="font-weight-semibold">About Us</label>
                                    <textarea class="form-control" rows="15" id="aboutus_text" name="aboutus_text" placeholder="About Us">{{ $settings->aboutus_text ?? '' }}</textarea>
                                </div>
                                @error('about_us')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="font-weight-semibold">Privacy Policy</label>
                                    <textarea class="form-control" rows="15" id="privacy_policy" name="privacy_policy"
                                        placeholder="Privacy Policy">{{ $settings->privacy_policy ?? '' }}</textarea>
                                </div>
                                @error('privacy_policy')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="font-weight-semibold">Terms & Conditions</label>
                                    <textarea class="form-control" rows="15" id="terms_conditions" name="terms_conditions"
                                        placeholder="Terms & Conditions">{{ $settings->terms_conditions ?? '' }}</textarea>
                                </div>
                                @error('terms_conditions')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="anticon anticon-save"></i>
                            <span>Save</span>
                        </button>
                    </form>
                </div>
            </div>

        </div>
    @stop
    @section('js')
        <script>
            $(document).ready(function() {
                $('#settings-form').validate({
                    rules: {
                        title: {
                            required: true,
                            minlength: 2
                        },
                        email: {
                            required: true,
                            email: true
                        }
                        cuntact_number: {
                            required: true,
                            number: true
                        },
                        logo: {
                            extension: "jpg|jpeg|png"
                        },
                        favicon: {
                            extension: "ico"
                        }
                    },
                    messages: {
                        title: {
                            required: "Please enter a title",
                            minlength: "Title must be at least 2 characters long"
                        },
                        email: {
                            required: "Please enter an email address",
                            email: "Please enter a valid email address"
                        }
                    },
                    errorPlacement: function(error, element) {
                        error.appendTo(element.closest('.form-group'));
                    }
                });
            });
        </script>
        <script>
            $(document).ready(function() {
                function previewImage(input, previewElementId) {
                    const file = input.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            $(`#${previewElementId}`).attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(file);
                    } else {
                        $(`#${previewElementId}`).attr('src', '#').hide();
                    }
                }

                $('#logoInput').on('change', function() {
                    previewImage(this, 'logoPreview');
                    const file = this.files[0];
                    if (file) {
                        const validTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
                        if (!validTypes.includes(file.type)) {
                            alert("Only PNG, JPEG, JPG or GIF files are allowed.");
                            $(this).val('');
                            $('#logoPreview').hide();
                        }
                    }
                });

                $('#faviconInput').on('change', function() {
                    previewImage(this, 'faviconPreview');
                    const file = this.files[0];
                    if (file) {
                        const validTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
                        if (!validTypes.includes(file.type)) {
                            alert("Only PNG, JPEG, JPG or GIF files are allowed.");
                            $(this).val('');
                            $('#faviconPreview').hide();
                        }
                    }
                });
            });
        </script>
    @endsection