@extends('layouts.master')
@section('title')
@lang('Title')
@endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/assets/sweetalert2/sweetalert2.min.css') }}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
<style>
    .pac-container {
        z-index: 100000 !important;
    }
</style>
@endsection
@section('content')
<div class="page-header">
    <h1>Settings</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
            <li class="breadcrumb-item active">Edit</li>
        </ol>
    </div>
</div><!-- End Page Title -->

<div class="row">
    <div class="col-lg-12">
        <!-- general form elements disabled -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Settings</h5>
                <!-- will be used to show any messages -->
                @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>
                @endif

                <form enctype="multipart/form-data" class="needs-validation-settings" role="form" id="settings_edit" method="post"
                    name="settings_edit" action="{{ route('settings.update', ['setting' => $settings->id]) }}" novalidate>
                    @method('PUT')
                    {{ csrf_field() }}
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <div class="row mb-3">
                        <label for="name" class="col-sm-2 col-form-label"
                            class="col-sm-2 col-form-label">Name</label>
                        <div class="col-sm-10">
                            <input name="name" id="name" type="text" class="form-control" value="{{ $settings->name }}"
                                placeholder="settings Name" required>
                            @if ($errors->has('name'))
                            <div class="alert alert-danger">
                                {{ $errors->first('name') }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="value" class="col-sm-2 col-form-label"
                            class="col-sm-2 col-form-label">Meta Title</label>
                        <div class="col-sm-10">
                            <input name="value" id="value" type="text" class="form-control" value="{{ $settings->value }}"
                                placeholder="Meta Title">
                            @if ($errors->has('value'))
                            <div class="alert alert-danger">
                                {{ $errors->first('value') }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <!-- /.card-body -->
                    <div id="display_settings"></div>
                    <div class="card-footer">
                        <button type="submit" name="task_submit" id="task_submit"
                            class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    $("#formFile").change(function() {
        var file = this.files[0];

        if (file) {
            var fileType = file.type;
            var validImageTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
            if ($.inArray(fileType, validImageTypes) < 0) {
                $("#fileError").text("Only image files (JPG, PNG, GIF, WEBP) are allowed.").show();
                $("#previewContainer").hide();
                this.value = ""; // Reset file input
                return;
            }
            var reader = new FileReader();
            reader.onload = function(e) {
                $("#imagePreview").attr("src", e.target.result);
                $("#previewContainer").show();
                $("#fileError").hide();
            };
            reader.readAsDataURL(file);
        }
    });

    $('#is_parent').change(function() {
        if ($(this).is(':checked')) {
            $(this).val(1); // Set value to 1 if checked
        } else {
            $(this).val(0); // Set value to 0 if unchecked
        }
        var is_checked = $('#is_parent').prop('checked');
        // alert(is_checked);
        if (is_checked) {
            $('#parent_cat_div').addClass('d-none');

            $("#parent_id option:selected").remove();
        } else {
            $('#parent_cat_div').removeClass('d-none');
        }
    })
</script>
<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
        'use strict'
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.querySelectorAll('.needs-validation-settings')
        // Loop over them and prevent submission
        Array.prototype.slice.call(forms)
            .forEach(function(form) {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>
@endsection