@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" onclick="submitForm()"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            
                            {{-- Alert Messages --}}
                            @if ($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                            
                            <div class="row">
                                {{-- Vendor Selection --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="vendor_ids" class="form-control-label">Vendor</label>
                                        <select name="vendor_ids[]" id="vendor_ids" class="form-control select-multiple" multiple="multiple" style="width: 100%;">
                                            @foreach ($vendors as $vendor)
                                                <option value="{{ $vendor->idvendor }}" {{ in_array($vendor->idvendor, old('vendor_ids', [])) ? 'selected' : '' }}>
                                                    {{ $vendor->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="form-check mt-2">
                                            <input class="form-check-input" type="checkbox" id="selectAll">
                                            <label class="form-check-label" for="selectAll">
                                                Select All
                                            </label>
                                        </div>
                                        <p class='text-secondary text-xs pt-1 px-1'>*) Kosongkan jika ingin mengirim ke semua vendor</p>
                                    </div>
                                </div>

                                {{-- Pesan (Quill Editor) --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="pesan" class="form-control-label">Pesan <span class="text-danger">*</span></label>
                                        <div id="editor-container" style="height: 250px;"></div>
                                        <input type="hidden" name="pesan" id="pesan">
                                    </div>
                                </div>

                                {{-- Tanggal Awal --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="tanggal_awal" class="form-control-label">Tanggal Awal <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control" id="tanggal_awal" name="tanggal_awal" 
                                               value="{{ old('tanggal_awal', date('Y-m-d')) }}" required>
                                    </div>
                                </div>

                                {{-- Tanggal Akhir --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="tanggal_akhir" class="form-control-label">Tanggal Akhir <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control" id="tanggal_akhir" name="tanggal_akhir" 
                                               value="{{ old('tanggal_akhir', date('Y-m-d')) }}" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    var quill;
    
    $(document).ready(function() {
        // Initialize Select2
        $('#vendor_ids').select2({
            placeholder: 'Pilih Vendor...',
            allowClear: true
        });

        // Select All functionality
        $('#selectAll').change(function() {
            if ($(this).is(':checked')) {
                $('#vendor_ids option').prop('selected', true);
                $('#vendor_ids').trigger('change');
            } else {
                $('#vendor_ids option').prop('selected', false);
                $('#vendor_ids').trigger('change');
            }
        });

        // Update selectAll checkbox when individual selections change
        $('#vendor_ids').on('change', function() {
            var allSelected = $('#vendor_ids option').length === $('#vendor_ids option:selected').length;
            $('#selectAll').prop('checked', allSelected);
        });

        // Initialize Quill Editor
        quill = new Quill('#editor-container', {
            theme: 'snow',
            placeholder: 'Tulis pesan broadcast...',
            modules: {
                toolbar: {
                    container: [
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        ['link', 'image'],
                        [{ 'color': [] }, { 'background': [] }],
                        ['clean']
                    ],
                    handlers: {
                        image: imageHandler
                    }
                }
            }
        });

        // Set old value if exists
        @if(old('pesan'))
            quill.root.innerHTML = {!! json_encode(old('pesan')) !!};
        @endif

        // Validate tanggal_akhir >= tanggal_awal
        $('#tanggal_awal, #tanggal_akhir').on('change', function() {
            var tanggalAwal = $('#tanggal_awal').val();
            var tanggalAkhir = $('#tanggal_akhir').val();
            
            if (tanggalAwal && tanggalAkhir && tanggalAkhir < tanggalAwal) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Tanggal akhir tidak boleh lebih kecil dari tanggal awal',
                    confirmButtonColor: '#028284'
                });
                $('#tanggal_akhir').val(tanggalAwal);
            }
        });
    });
    
    // Custom image handler for Quill
    function imageHandler() {
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();

        input.onchange = async () => {
            const file = input.files[0];
            if (file) {
                // Validate file size (max 5MB)
                if (file.size > 5 * 1024 * 1024) {
                    Swal.fire({
                        icon: 'error',
                        title: 'File terlalu besar',
                        text: 'Ukuran gambar maksimal 5MB',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                // Validate file type
                if (!file.type.match('image.*')) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Format tidak valid',
                        text: 'Hanya file gambar yang diperbolehkan',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                // Show loading
                Swal.fire({
                    title: 'Mengupload gambar...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Create form data
                const formData = new FormData();
                formData.append('image', file);

                try {
                    const response = await fetch('{{ route("trbrod.upload-image") }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    });

                    const result = await response.json();

                    if (result.success) {
                        Swal.close();
                        
                        // Insert image into editor
                        const range = quill.getSelection(true);
                        quill.insertEmbed(range.index, 'image', result.url);
                        quill.setSelection(range.index + 1);
                        
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: 'Gambar berhasil diupload',
                            timer: 1500,
                            showConfirmButton: false
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal upload',
                            text: result.message || 'Terjadi kesalahan saat mengupload gambar',
                            confirmButtonColor: '#028284'
                        });
                    }
                } catch (error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan: ' + error.message,
                        confirmButtonColor: '#028284'
                    });
                }
            }
        };
    }
    
    // Submit form function
    function submitForm() {
        var pesanContent = quill.root.innerHTML;
        
        // Check if content is empty (only contains <p><br></p> or empty)
        if (pesanContent === '<p><br></p>' || pesanContent.trim() === '' || quill.getText().trim() === '') {
            Swal.fire({
                icon: 'error',
                title: 'Pesan tidak boleh kosong',
                text: 'Silakan isi pesan broadcast terlebih dahulu.',
                confirmButtonColor: '#028284'
            });
            return false;
        }
        
        // Set hidden input value
        $('#pesan').val(pesanContent);
        
        // Submit the form
        document.getElementById('{{ $dmenu }}-form').submit();
    }
</script>
@endpush

@push('addjs')
<style>
    .ql-editor {
        min-height: 200px;
    }
    .ql-container {
        font-size: 14px;
    }
    /* Hide original select element border when using Select2 */
    select.select-multiple {
        border: none !important;
    }
    
    /* Select2 Multiple Selection Styling */
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #d2d6da;
        border-radius: 0.5rem;
        padding: 6px 8px;
        min-height: 42px;
    }
    
    .select2-container--default .select2-selection--multiple:focus,
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #028284;
        box-shadow: 0 0 0 2px rgba(2, 130, 132, 0.1);
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #028284;
        border: none;
        color: #fff;
        border-radius: 4px;
        padding: 4px 8px 4px 24px;
        position: relative;
        margin: 2px 4px 2px 0;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        font-weight: bold;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #ffcccc;
    }
    
    /* Remove inner border from search input */
    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 0;
    }
</style>
@endpush