@extends("admin.layout.app",["page_title" => "Admin | Watermark "])
@push('style')
    <link href="{{ asset('admin-assets/css/quill.snow.css') }}" rel="stylesheet">
    <style>
        .custom-file {
            position: relative;
            display: inline-block;
            width: 100%;
            height: calc(1.5em + 0.75rem + 2px);
            margin-bottom: 0;
        }
        .custom-file-input {
            position: relative;
            z-index: 2;
            width: 100%;
            height: calc(1.5em + 0.75rem + 2px);
            margin: 0;
            overflow: hidden;
            opacity: 0;
        }

        .custom-file-label {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1;
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.375rem 0.75rem;
            overflow: hidden;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        .custom-file-input:lang(en) ~ .custom-file-label::after {
            content: "Browse";
        }
        .custom-file-label::after
        {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 3;
            display: block;
            height: calc(1.5em + 0.75rem);
            padding: 0.375rem 0.75rem;
            line-height: 1.5;
            color: #495057;
            content: "Browse";
            background-color: #e9ecef;
            border-left: inherit;
            border-radius: 0 0.25rem 0.25rem 0;
        }
    </style>
@endpush
@section('admin-content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center">
                <h4 class="mb-sm-0 font-size-18"></h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item "><a
                                href="{{route('admin.dashboard')}}">{{__('admin.dashboard')}}</a></li>
                        <li class="breadcrumb-item active">{{__('admin.watermark')}}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="main-title mb-0">
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between custom-heading">
                                    <h3 class="text-black">{{__('admin.watermark')}}</h3>
                                    <div style="float: right;display: flex">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <div class="card overflow-hidden">
                            <div class="bg-success bg-soft">
                                <div class="row">
                                    <div class="col-7">
                                        <div class="text-black p-3">
                                            <h2 class="text-black">Edit Watermark</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="information-wrapper">
                                <div class="row">
                                    <div class="col-12 custom-12">
                                        <div class="card">
                                            <form action="{{ route('admin.watermark.edit', $setting->id) }}"  id ="watermarkForm" method="POST" enctype="multipart/form-data">
                                                @csrf
                                                <div class="card-body">
                                                    <div class="mb-3">
                                                        <input type="checkbox" name="watermark[watermark]" id="watermark_watermark" arie-describedby="watermark_watermark_help"  value="1" @checked($setting->watermark)>
                                                        <label for="watermark_watermark">{{ __('admin.watermark')}}</label>
                                                        <br>
                                                        <small id="watermark_watermark_help" class="form-text text-muted">{{ __('admin.watermark_enable')}}</small>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="watermark_watermarkposition">{{ __('admin.watermark_position')}}</label>
                                                        <select name="watermark[watermarkposition]" id="watermark_watermarkposition" class="form-control">
                                                            <option value="left" @selected($setting->watermark_position == "left")>Left</option>
                                                            <option value="right" @selected($setting->watermark_position == "right")>Right</option>                                                           
                                                         </select>                                                        
                                                    </div>                                                       
                                                    <div class="mb-3">                                                           
                                                        <label for="watermark_watermarkoffsetX">{{ __('admin.watermarkoffsetX')}}</label>                                                           
                                                        <input type="number" name="watermark[watermarkoffsetX]" id="watermark_watermarkoffsetX"
                                                            class="form-control" arie-describedby="watermark_watermarkoffsetX_help" value="{{ $setting->watermark_offset_x }}" required>
                                                        <small id="watermark_watermarkoffsetX_help" class="form-text text-muted">{{ __('admin.watermarkoffsetX_help') }}</small>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="watermark_watermarkoffsetY">{{ __('admin.watermarkoffsetY')}}</label>
                                                        <input type="number" name="watermark[watermarkoffsetY]" id="watermark_watermarkoffsetY"
                                                            class="form-control" arie-describedby="watermark_watermarkoffsetY_help" value="{{ $setting->watermark_offset_y }}" required>
                                                        <small id="watermark_watermarkoffsetY_help" class="form-text text-muted">{{ __('admin.watermarkoffsetY_help') }}</small>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="watermark_uploadedFile">PNG File</label>
                                                        <div class="custom-file">
                                                            <input type="file" id="watermark_uploadedFile" name="watermark[uploadedFile]" lang="en" accept="image/png" aria-describedby="watermark_uploadedFile_help" class="custom-file-input">
                                                            <label for="watermark_uploadedFile" class="custom-file-label"></label>
                                                        </div>
                                                        <small id="watermark_uploadedFile_help" class="form-text text-muted">{{ __('admin.uploadedFile_help') }}</small>
                                                    </div>
                                                </div>
                                                <div class="card-footer">
                                                    <button type="submit" class="btn btn-success">Save</button>
                                                    <a href="{{ route('admin.dashboard') }}" class="btn btn-danger">Cancel</a>
                                                </div>
                                            </form>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                        </div>                        
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="card ms-4">
                                <div class="card-header">
                                    watermark
                                </div>
                                <div class="card-body">
                                    @if($setting->watermark == 1 && $setting->watermarkFile)
                                        <img src="{{ $setting->watermarkFile->content }}" height="100px" alt="watermark-img">
                                    @elseif($setting->watermark == 1)
                                        <p>{{ __('admin.image_not_uploaded')}}</p>
                                    @else
                                        <p>{{ __('admin.watermark_not_enabled')}}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="card me-4">
                                <div class="card-header">
                                    Preview
                                </div>
                                <div class="card-body">
                                    @if($setting->watermark == 1)
                                        <img src="{{ route('admin.watermark.preview') }}" alt="watermark-img">
                                    @else
                                        <img src="{{ asset('admin-assets/default-image/example.jpg') }}" alt="preview-img">
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
   

@endsection

@push('script')
        <script>
            $(document).ready(function (){
                $('#watermarkForm').validate({
                    rules: {
                        "watermark[watermarkposition]": { 
                            required: true,
                        },
                        "watermark[watermarkoffsetX]": { 
                            required: true,
                            digits: true,
                        },
                        "watermark[watermarkoffsetY]": { 
                            required: true,
                            digits: true,
                        },
                        "watermark[uploadedFile]": {
                            extension: "png"
                        },
                    },
                    onkeyup: false,
                    onfocusout: false,
                    onclick: false,
                    submitHandler: function (form) {
                        $(form).find(':input[type=submit]').prop('disabled', true)
                        form.submit();
                    },
                    messages: {
                        "watermark[watermarkposition]": {
                            required: "Select the watermark Position",
                        },
                        "watermark[watermarkoffsetX]": {
                            required: "Offset X is required",
                            digits: "Only numbers allowed",
                        },
                        "watermark[watermarkoffsetY]": {
                            required: "Offset X is required",
                            digits: "Only numbers allowed",
                        },
                        "watermark[uploadedFile]": {
                            extension: "Only PNG files are allowed"
                        },
                    },
                    showErrors: function(errorMap, errorList) {
                        if (errorList.length) {
                            flasher.error(errorList[0].message); // show first error
                        }
                    },
                });
            });

        </script>
@endpush