@extends('layout.master')

@section('title', 'Tetapan Pengenalan')

@push('css')
<style>
    .ql-container.ql-snow .ql-editor {
        background-color: #919191ff;
    }

</style>
@endpush

@section('content')

<div class="page-header">
    <h5 class="page-title">Tetapan Pengenalan</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Web</li>
            <li class="breadcrumb-item active">Tetapan Pengenalan</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <form action="javascript:void(0)" enctype="multipart/form-data" class="form-horizontal" method="POST" id="form">
                    @csrf
                    <div class="card-body">
                        <input name="pengenalan" type="hidden" id="pengenalan" autocomplete="off">

                        <div id="editor" style="color:black;">
                            <p></p>
                        </div>

                        <div class="row mt-5">
                            <div class="col-lg-6">
                                <label for="bgImageInput" class="form-label fw-bold">Imej Laman Utama</label>
                                <input type="file" autocomplete="off" class="form-control" name="bgImage" id="bgImageInput" accept="image/*">
                                <div class="mt-1 small">Muat naik fail imej baru untuk menukar latar belakang laman utama.</div>
                                <small>Format : (.png), (.jpg), (.jpeg), (.webp), (.gif) | Saiz max: 200MB</small>
                            </div>
                        </div>
                        <div class="row mt-5">
                            <!-- Image Preview -->
                            <div class="col-md-4">    
                                @php
                                    $bgImagePath = $cms->where('type', 'pengenalan-bgimage')->value('content');
                                    $bgColor = $cms->where('type', 'pengenalan-overlay-color')->value('content') ?? '#000000';
                                    $bgOpacity = $cms->where('type', 'pengenalan-overlay-opacity')->value('content') ?? '0';
                                @endphp
                                <div id="bg-image-preview-container" class="{{ $bgImagePath ? '' : 'd-none' }} mb-2">
                                    <div class="position-relative d-inline-block shadow-sm" style="border-radius: 12px; overflow: hidden; cursor: zoom-in;" onclick="window.open($('#bg-preview').attr('src'), '_blank')">
                                        <img id="bg-preview" src="{{ $bgImagePath ? asset('storage/' . $bgImagePath) : '' }}" style="max-height: 150px; display: block;"  alt="Preview">
                                        <div id="bg-preview-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: {{ $bgColor }}; opacity: {{ $bgOpacity }}; pointer-events: none;"></div>
                                    </div>
                                    <div id="preview-label" class="mt-1 italic">
                                        {{ $bgImagePath ? 'Imej Semasa (Klik untuk besarkan)' : 'Imej Baru Dipilih' }}
                                    </div>
                                </div>
                            </div>
                            <!-- Overlay & Opacity -->
                            <div class="col-md-8">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label fw-bold">Warna Overlay</label>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="color" class="form-control form-input-color" id="overlayColor" name="overlayColor" value="{{ $bgColor }}" title="Pilih Warna Overlay">
                                        <button type="button" class="btn btn-outline-secondary btn-sm" id="resetOverlayBtn">Reset</button>
                                    </div>
                                    <div class="mt-1">Warna untuk lapisan di atas imej latar.</div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label class="form-label fw-bold">Kelegapan (Opacity): <span id="opacityValue">{{ $bgOpacity }}</span></label>
                                    <input type="range" class="form-range" min="0" max="1" step="0.05" id="overlayOpacity" name="overlayOpacity" value="{{ $bgOpacity }}">
                                    <div class="mt-1">0 (Tiada Warna) - 1 (Penuh Warna).</div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="card-footer text-center">
                        <button class="btn btn-primary" type="submit" id="save-btn"><i class="fa fa-save me-1"></i> Simpan</button>
                        <a href="{{ route('laman_utama') }}" class="btn btn-outline-danger">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script type="text/javascript">

    toolbarOptions = [
        ['undo' , 'redo' ],
        [{ size: [ 'small', false, 'large', 'huge' ]}],
        ['bold', 'italic', 'underline'],
        [{list: 'bullet'}],
        [{ 'color': [] }, { 'background': [] }],
        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]
    ];

    var icons = Quill.import("ui/icons");
    icons["undo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
    <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
    </svg>`;
    icons["redo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon>
    <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path>
    </svg>`;

    var quill = new Quill('#editor', {
        modules: {
            toolbar: toolbarOptions
        },
        theme: 'snow'
    });

    quill.history.undo();
    quill.setContents({!! $pengenalan !!});

    // Background Image Preview
    $("#bgImageInput").on("change", function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $("#bg-preview").attr("src", e.target.result);
                $("#bg-image-preview-container").removeClass("d-none");
                $("#preview-label").text("Imej Baru Dipilih (Belum Disimpan)");
            }
            reader.readAsDataURL(file);
        }
    });

    // Update Overlay Preview
    function updateOverlayPreview() {
        const color = $("#overlayColor").val();
        const opacity = $("#overlayOpacity").val();
        $("#opacityValue").text(opacity);
        $("#bg-preview-overlay").css({
            "background-color": color,
            "opacity": opacity
        });
    }

    $("#overlayColor, #overlayOpacity").on("input", updateOverlayPreview);

    // Reset overlay functionality
    $("#resetOverlayBtn").click(function() {
        $("#overlayColor").val("#000000");
        $("#overlayOpacity").val("0").trigger('input');
    });

    $("#form").submit(function(e) {
        $("#pengenalan").val(JSON.stringify(quill.getContents()));

        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('pengurusan_web.pengenalan_store') }}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            beforeSend: function(){
                $("#save-btn").html('<i class="fa fa-spinner fa-spin me-1"></i> Menyimpan...');
                $("#save-btn").attr("disabled", true);
            },
            success: (data) => {
                $("#save-btn").html('<i class="fa fa-save me-1"></i> Simpan');
                $("#save-btn").attr("disabled", false);

                Swal.fire({
                    icon: 'success',
                    text: 'Kandungan Pengenalan Telah Berjaya Diubah',
                    showConfirmButton: true,
                })
            },
            error: function(data){
                console.log(data);
            }
        });
    });
</script>
@endsection