@extends('layouts.adminlte')
@section('title','Produk Sewa IT')

@section('content')
<style>
    .remind-tag {
        background: #ffe8a1;
        color: #6c4a00;
        border: 1px solid #ffd666;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
    }
    .po-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 6px;
        background: #e9f5ff;
        border: 1px solid #b6dcff;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
    }
    .po-copy {
        color: #0d6efd;
    }
</style>
<div id="updateNoticeSewa" class="alert alert-success" style="display:none; position: fixed; top: 70px; right: 20px; z-index: 1051;">
    Update berhasil
</div>
<button class="btn btn-primary mb-2" id="btnTambah">Tambah</button>
<a href="{{ route('produk-sewa-it.export') }}" class="btn btn-success mb-2">Export Excel</a>
<a href="{{ route('produk-sewa-it.export-pdf') }}" class="btn btn-outline-secondary mb-2" target="_blank">Export PDF</a>

<table class="table table-bordered" id="tableSewa" width="100%">
    <thead>
        <tr>
            <th class="d-none">ID</th>
            <th>Aksi</th>
            <th>ID Customer</th>
            <th>Nama Produk</th>
            <th>Status</th>
            <th>Comment</th>
            <th>No PO</th>
            <th>URL Link</th>
            <th>Dokumen Pendukung</th>
            <th>Start</th>
            <th>End</th>
            <th>Reminder</th>
        </tr>
    </thead>
</table>

<div class="modal fade" id="modalForm">
    <div class="modal-dialog">
        <form id="formSewa">
            @csrf
            <input type="hidden" name="id_sewa_it" id="id_sewa_it">
            <div class="modal-content">
                <div class="modal-header"><h5>Produk Sewa IT</h5></div>
                <div class="modal-body">
                    <select class="form-control mb-2" name="id_customer" id="id_customer_select" required></select>
                    <input class="form-control mb-2" name="nama_produk" placeholder="Nama Produk">
                    <input class="form-control mb-2" name="status" placeholder="Status">
                    <textarea class="form-control mb-2" name="comment" placeholder="Comment"></textarea>
                    <input class="form-control mb-2" name="no_transaksi_po" placeholder="No PO">
                    <input class="form-control mb-2" name="url_link" placeholder="URL Link">
                    <input class="form-control mb-2" type="file" name="dokumen_pendukung" id="dokumen_pendukung">
                    <div id="dokumenWrap" class="mb-2" style="display:none;">
                        <a href="#" id="dokumenLink" target="_blank" class="btn btn-outline-primary btn-sm">Preview Dokumen</a>
                    </div>
                    <input class="form-control mb-2" type="date" name="start_date">
                    <input class="form-control mb-2" type="date" name="end_date">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    let table = $('#tableSewa').DataTable({
        ajax: {
            url: "{{ route('produk-sewa-it.data') }}",
            dataSrc: 'data'
        },
        columns: [
            { data: 'id_sewa_it' },
            { data: 'id_sewa_it', render: function (data) {
                return `
                    <button class="btn btn-warning btn-sm edit" data-id="${data}">Edit</button>
                    <button class="btn btn-danger btn-sm delete" data-id="${data}">Hapus</button>
                `;
            }, orderable: false, searchable: false },
            { data: 'id_customer', render: function (data, type, row) {
                return row.customer_label ? `${data} - ${row.customer_label}` : (data || '');
            }},
            { data: 'nama_produk' },
            { data: 'status' },
            { data: 'comment' },
            { data: 'no_transaksi_po', render: function (data) {
                if (!data) return '';
                let escaped = String(data).replace(/"/g, '&quot;');
                return `
                    <span class="po-tag" data-po="${escaped}" title="Double click to copy">
                        ${data}
                        <i class="far fa-copy po-copy" aria-hidden="true"></i>
                    </span>
                `;
            }},
            { data: 'url_link', render: function (data) {
                if (!data) return '';
                return `<a href="${data}" target="_blank">Buka Link</a>`;
            }},
            { data: 'dokumen_pendukung_url', render: function (data) {
                if (!data) return '';
                return `<button class="btn btn-sm btn-outline-primary preview-dokumen" data-url="${data}">Preview</button>`;
            }},
            { data: 'start_date' },
            { data: 'end_date' },
            { data: 'reminder_level', render: function (data, type, row) {
                if (!data || row.days_left === null) return '';
                return `<span class="remind-tag">Soon Expire (H-${data})</span>`;
            }}
        ],
        columnDefs: [
            { targets: 0, visible: false },
            { targets: 1, width: '120px' },
        ]
    });

    $('#btnTambah').click(function () {
        $('#formSewa')[0].reset();
        $('#id_sewa_it').val('');
        $('#dokumen_pendukung').val('');
        $('#dokumenWrap').hide();
        $('#dokumenLink').attr('href', '#');
        $('#id_customer_select').val(null).trigger('change');
        $('#modalForm').modal('show');
    });

    function initCustomerSelect() {
        if ($('#id_customer_select').hasClass('select2-hidden-accessible')) {
            $('#id_customer_select').select2('destroy');
        }
        $('#id_customer_select').select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: 'ID Customer',
            allowClear: true,
            dropdownParent: $('#modalForm'),
            ajax: {
                url: "{{ route('produk-sewa-it.customer-options') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { q: params.term || '' };
                },
                processResults: function (data) {
                    return { results: data.results || [] };
                },
                cache: true
            }
        });
    }
    initCustomerSelect();

    $('#formSewa').submit(function (e) {
        e.preventDefault();
        $.ajax({
            url: "{{ route('produk-sewa-it.store') }}",
            type: "POST",
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function () {
                $('#modalForm').modal('hide');
                table.ajax.reload();
            }
        });
    });

    $(document).on('click', '.edit', function () {
        let id = $(this).data('id');
        $.get("{{ url('master/produk-sewa-it/edit') }}/" + id, function (res) {
            $('#id_sewa_it').val(res.id_sewa_it);
            if (res.id_customer) {
                let label = res.customer_label
                    ? `${res.id_customer} - ${res.customer_label}`
                    : String(res.id_customer);
                let option = new Option(label, res.id_customer, true, true);
                $('#id_customer_select').append(option).trigger('change');
            } else {
                $('#id_customer_select').val(null).trigger('change');
            }
            $('[name=nama_produk]').val(res.nama_produk);
            $('[name=status]').val(res.status);
            $('[name=comment]').val(res.comment);
            $('[name=no_transaksi_po]').val(res.no_transaksi_po);
            $('[name=url_link]').val(res.url_link);
            $('#dokumen_pendukung').val('');
            if (res.dokumen_pendukung_url) {
                $('#dokumenLink').attr('href', res.dokumen_pendukung_url);
                $('#dokumenWrap').show();
            } else {
                $('#dokumenWrap').hide();
                $('#dokumenLink').attr('href', '#');
            }
            $('[name=start_date]').val(res.start_date);
            $('[name=end_date]').val(res.end_date);
            $('#modalForm').modal('show');
        });
    });

    $(document).on('click', '.delete', function () {
        if (!confirm('Hapus data?')) return;
        $.ajax({
            url: "{{ url('master/produk-sewa-it/delete') }}/" + $(this).data('id'),
            type: "DELETE",
            data: { _token: "{{ csrf_token() }}" },
            success: function () {
                table.ajax.reload();
            }
        });
    });

    $(document).on('dblclick', '#tableSewa tbody td', function (e) {
        e.stopPropagation();
        let cell = table.cell(this);
        let rowData = table.row(this).data();
        let colIndex = cell.index().column;
        if (colIndex === 0 || colIndex === 1 || colIndex === 11 || colIndex === 8) return;
        let oldValue = cell.data();
        if ($(this).find('.edit-cell').length) return;

        let editor;
        if (colIndex === 5) {
            $(this).html(`<textarea class="form-control form-control-sm edit-cell" rows="2">${oldValue || ''}</textarea>`);
        } else if (colIndex === 9 || colIndex === 10) {
            let dateValue = oldValue ? String(oldValue).substring(0, 10) : '';
            $(this).html(`<input type="date" class="form-control form-control-sm edit-cell" value="${dateValue}">`);
        } else if (colIndex === 7) {
            $(this).html(`<input type="url" class="form-control form-control-sm edit-cell" value="${oldValue || ''}">`);
        } else {
            $(this).html(`<input type="text" class="form-control form-control-sm edit-cell" value="${oldValue || ''}">`);
        }

        editor = $(this).find('.edit-cell');
        editor.focus().select();

        function saveValue() {
            let newValue = editor.val();
            cell.data(newValue).draw(false);

            let field = [
                'id_sewa_it',
                null,
                'id_customer',
                'nama_produk',
                'status',
                'comment',
                'no_transaksi_po',
                'url_link',
                null,
                'start_date',
                'end_date',
                null
            ][colIndex];
            if (!field) {
                cell.data(oldValue).draw(false);
                return;
            }

            $.post("{{ route('produk-sewa-it.store') }}", {
                _token: "{{ csrf_token() }}",
                id_sewa_it: rowData.id_sewa_it,
                [field]: newValue
            }).done(function () {
                $('#updateNoticeSewa').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
            }).fail(function () {
                cell.data(oldValue).draw(false);
            });
        }

        editor.on('blur', saveValue);
        editor.on('keydown', function(e){
            if(e.key === 'Enter' && this.tagName !== 'TEXTAREA'){
                e.preventDefault();
                saveValue();
            }
        });
    });

    function copyText(text) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            return navigator.clipboard.writeText(text);
        }
        return new Promise(function (resolve) {
            const temp = $('<textarea>').val(text).appendTo('body').select();
            document.execCommand('copy');
            temp.remove();
            resolve();
        });
    }

    $(document).on('dblclick', '.po-tag', function (e) {
        e.preventDefault();
        e.stopPropagation();
        const po = $(this).data('po') || '';
        if (!po) return;
        copyText(po).then(function () {
            $('#updateNoticeSewa').text('No PO disalin').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
        });
    });

    $(document).on('click', '.po-copy', function (e) {
        e.preventDefault();
        e.stopPropagation();
        const po = $(this).closest('.po-tag').data('po') || '';
        if (!po) return;
        copyText(po).then(function () {
            $('#updateNoticeSewa').text('No PO disalin').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
        });
    });

    $(document).on('click', '.preview-dokumen', function () {
        let url = $(this).data('url') || '';
        if (!url) return;
        $('#previewDokumenIframe').attr('src', url);
        $('#modalPreviewDokumen').modal('show');
    });

    $('#modalPreviewDokumen').on('hidden.bs.modal', function () {
        $('#previewDokumenIframe').attr('src', '');
    });
});
</script>
@endpush

<div class="modal fade" id="modalPreviewDokumen">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Preview Dokumen Pendukung</h5>
            </div>
            <div class="modal-body">
                <iframe id="previewDokumenIframe" src="" style="width:100%;height:70vh;border:1px solid #dee2e6;"></iframe>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>