@extends('layouts.frontapp')
@section('content')
<div class="mobile-container">
    <div class="container">
        <div class="row mb-4 mt-4">
            <div class="col-4 my-auto">
                <a href="{{ route('transaction') }}" class="mt-4 btn btn-danger"><i class="fa fa-chevron-left"></i> Kembali</a>
            </div>
            <div class="col-8">
                <a href="/"><img src="{{ asset('logo-ckb.png') }}" style="width: 100%" alt="LOGO CKB"></a>
            </div>
        </div>
        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <h5 class="mt-4">Laporan Harian</h5>
            </div>
            <div class="kt-portlet__body">
                <form action="{{ route('transaction.lists') }}" method="GET">
                    <div class="row">
                        <div class="col-6">
                            <label>Tgl Awal</label>
                            <input type="date" name="date_start" id="date_start" value="{{ $date_start }}" class="form-control">
                        </div>
                        <div class="col-6">
                            <label>Tgl Akhir</label>
                            <input type="date" name="date_end" id="date_end" value="{{ $date_end }}" class="form-control">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-success mt-3 btn-block">Cari</button>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-12">
                        <p><button id="share" type="button" class="btn btn-info btn-block mt-4">Bagikan Data Hari Ini</button></p>
                        <p class="result"></p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            {{-- <div class="table-responsive">
                <table class="table table-striped" id="kt-table">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>SPK</th>
                            <th>SA</th>
                            <th>No. Polisi</th>
                            <th>Warranty</th>
                            <th>Kategori</th>
                            <th>Pekerjaan</th>
                            <th>Qty</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($transaction_dealers as $transaction)
                        <tr>
                            <td>{{ date('d/m/Y', strtotime($transaction->date)) }}</td>
                            <td>{{ $transaction->spk }}</td>
                            <td>{{ $transaction->sa_name }}</td>
                            <td>{{ $transaction->police_number }}</td>
                            <td>{{ $transaction->warranty == 1 ? 'Ya' : 'Tidak' }}</td>
                            <td>{{ $transaction->category_name }}</td>
                            <td>{{ $transaction->workname }}</td>
                            <td>{{ $transaction->qty }}</td>
                            <td>
                                @if ($transaction->status == 1)
                                    <span class="badge badge-success">Closed</span>
                                @else 
                                    <button class="btn btn-sm btn-warning btn-bold" data-action="{{ route('transaction.update', $transaction->transaction_id) }}" data-url="{{ route('transaction.edit', $transaction->transaction_id) }}"  onclick="editTransaction({{ $transaction->transaction_id }})" id="editTransaction{{ $transaction->transaction_id }}">Edit</button>
                                    <br><br>
                                    <a class="btn btn-danger btn-sm btn-bold" href="{{ route('transaction.destroy', $transaction->transaction_id) }}"
                                        onclick="event.preventDefault();
                                                    document.getElementById('destroy-form').submit();">
                                        {{ __('Hapus') }}
                                    </a>
            
                                    <form id="destroy-form" action="{{ route('transaction.destroy', $transaction->transaction_id) }}" method="POST" class="d-none">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div> --}}
            @foreach ($transaction_dealers as $transaction)
            <div class="col-12">
                <div class="kt-portlet kt-portlet--mobile">
                    <div class="kt-portlet__body">
                        <div class="row">
                            <div class="col-6 text-left">
                                <b class="font-weight-bold text-info">{{ $transaction->spk }}</b>
                            </div>
                            <div class="col-6 text-right text-danger">
                                <small>{{ $transaction->warranty == 1 ? 'Ada' : 'Tidak Ada' }}</small><br>
                                <b class="font-weight-bold">Warranty</b>
                            </div>
                        </div><br>
                        <div class="row">
                            <div class="col-6 text-left text-dark">
                                <b class="font-weight-bold">{{ $transaction->sa_name }}</b><br>
                                <span class="kt-shape-font-color-4 text-dark">{{ $transaction->police_number }}</span>
                            </div>
                            <div class="col-6 text-right">
                                <b class="font-weight-bold text-primary">{{ $transaction->workname }}</b><br>
                                <b class="font-weight-bold text-dark">x{{ $transaction->qty }}</b>
                            </div>
                        </div>
                        <div class="kt-portlet__foot text-right mt-4" style="background: none !important; padding-right: 0 !important; padding-left: 0 !important; padding-bottom: 0; margin-bottom: 0;">
                            @if ($transaction->status == 1)
                                <span class="badge badge-success">Closed</span>
                            @else 
                                <button class="btn btn-sm btn-pill btn-outline-warning btn-bold" data-action="{{ route('transaction.update', $transaction->transaction_id) }}" data-url="{{ route('transaction.edit', $transaction->transaction_id) }}"  onclick="editTransaction({{ $transaction->transaction_id }})" id="editTransaction{{ $transaction->transaction_id }}">Edit</button>
                                <a class="btn btn-pill btn-outline-danger btn-sm btn-bold" href="{{ route('transaction.destroy', $transaction->transaction_id) }}"
                                    onclick="event.preventDefault();
                                                document.getElementById('destroy-form').submit();">
                                    {{ __('Hapus') }}
                                </a>
        
                                <form id="destroy-form" action="{{ route('transaction.destroy', $transaction->transaction_id) }}" method="POST" class="d-none">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="col-12 mb-3">
                <div class="card card-body">
                    <div class="row">
                        <div class="col-6 text-left">
                            <b>{{ date('d/m/Y', strtotime($transaction->date)) }}</b>
                        </div>
                        <div class="col-6 text-right">
                            <p>{{ $transaction->spk }}</p>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col">
                            <h5>{{ $transaction->workname }} | {{ $transaction->police_number }}</h5>
                            <b>{{ $transaction->sa_name }}</b><br>
                            <span>Warranty : <b>{{ $transaction->warranty == 1 ? 'YA' : 'TIDAK' }}</b></span>
                        </div>
                        <div class="col text-right">
                            <h3 class="font-weight-bold mb-4">1</h3>
                            @if ($transaction->status == 1)
                                <span class="badge badge-success">Closed</span>
                            @else 
                                <button class="btn btn-sm btn-warning btn-bold" data-action="{{ route('transaction.update', $transaction->transaction_id) }}" data-url="{{ route('transaction.edit', $transaction->transaction_id) }}"  onclick="editTransaction({{ $transaction->transaction_id }})" id="editTransaction{{ $transaction->transaction_id }}">Edit</button>
                                <a class="btn btn-danger btn-sm btn-bold" href="{{ route('transaction.destroy', $transaction->transaction_id) }}"
                                    onclick="event.preventDefault();
                                                document.getElementById('destroy-form').submit();">
                                    {{ __('Hapus') }}
                                </a>
        
                                <form id="destroy-form" action="{{ route('transaction.destroy', $transaction->transaction_id) }}" method="POST" class="d-none">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div> --}}
            @endforeach      
            <div class="col-12">
                {{ $transaction_dealers->appends(request()->except('page'))->links("vendor/pagination/bootstrap-4")}}
            </div>
        </div>
    </div>
</div>


<!--begin::Modal-->
<div class="modal fade" id="transactionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="transactionForm" data-form="store" class="kt-form">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalHeading"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    @csrf
                    @method('PUT')
                    <div class="kt-portlet__body">
                        <div class="form-group">
                            <label>SPK</label>
                            <input type="text" class="form-control" id="spk" name="spk" placeholder="SPK" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Tanggal</label>
                            <input type="date" class="form-control" id="date" name="date" placeholder="Tanggal" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>No. Polisi</label>
                            <input type="text" class="form-control" id="police_number" name="police_number" placeholder="No. Polisi" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Pekerjaan</label>
                            <select name="work_id" id="work_id" class="form-control">
                                @foreach ($works as $work)
                                <option value="{{ $work->id }}">{{ $work->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Qty</label>
                            <input type="number" class="form-control" id="qty" name="qty" placeholder="Qty" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Warranty</label>
                            <select name="warranty" id="warranty" class="form-control">
                                <option value="1">Ya</option>
                                <option value="0">Tidak</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Service Advisor</label>
                            <select name="sa_id" id="sa_id" class="form-control">
                                @foreach ($sas as $sa)
                                <option value="{{ $sa->id }}">{{ $sa->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!--end::Modal-->

<div id="shareThis" style="display: none;">
    @php
        $string = "*[Laporan Harian Mekanik ]*\n";
        $string .= "*". Auth::user()->dealer->name ."*\n";
        $string .= "*". $transaction_mechanics['today_date'] ."*\n\n\n";
        
        // Add KPI Achievement Information
        if($kpiData['has_target']) {
            $string .= "*=== KPI ACHIEVEMENT PROGRESS ===*\n";
            $string .= "*Target ". $kpiData['period'] .": ". number_format($kpiData['target']) ." Pekerjaan*\n";
            $string .= "*Pencapaian: ". number_format($kpiData['actual']) ." Pekerjaan*\n";
            $string .= "*Progress: ". $kpiData['percentage'] ."%*\n";
            
            // Add status message
            if($kpiData['status'] == 'exceeded') {
                $string .= "*Status: ✅ Target tercapai!*\n";
            } elseif($kpiData['status'] == 'good') {
                $string .= "*Status: 🔵 Performa baik*\n";
            } elseif($kpiData['status'] == 'fair') {
                $string .= "*Status: 🟡 Perlu peningkatan*\n";
            } elseif($kpiData['status'] == 'poor') {
                $string .= "*Status: 🔴 Perlu perbaikan*\n";
            } else {
                $string .= "*Status: ⚪ Belum ada data*\n";
            }
            $string .= "\n";
        }
        
        $overall_total = 0;
        
        // Debug: Check if data exists
        if (!empty($transaction_mechanics['data'])) {
            foreach ($transaction_mechanics['data'] as $shortname => $trx) {
                $string .= "*". $shortname ."*\n";
                $total_qty = 0;
                
                // Check if data array exists
                if (isset($trx['data']) && is_array($trx['data'])) {
                    foreach ($trx['data'] as $item) {
                        $parts = explode(':', $item);
                        if (count($parts) >= 2) {
                            $qty = intval($parts[1]);
                            $total_qty += $qty;
                        }
                        $string .= $item."\n";
                    }
                }
                
                $string .= "*TOTAL: ".$total_qty." Unit*\n\n";
                $overall_total += $total_qty;
            }
        } else {
            $string .= "*Tidak ada data transaksi hari ini*\n\n";
        }
        
        // Add overall summary
        $string .= "*=== RINGKASAN HARIAN ===*\n";
        $string .= "*Tanggal: ". $transaction_mechanics['today_date'] ."*\n";
        $string .= "*Dealer: ". Auth::user()->dealer->name ."*\n";
        $string .= "*Total Keseluruhan: ". $overall_total ." Unit*\n";
    @endphp
    {!! $string !!}
</div>

{{-- <div class="row">
    <div class="col-lg-5" style="width: 100%; text-align: center;">
        <div class="card">
            <div class="card-header">
                <h3>Transaksi</h3>
            </div>
            <div class="card-body">
                <form action="#">
                    <div class="form-group">
                        <label for="#">User</label>
                        <select name="#" id="#" class="form-control">
                            <option value="1" selected>User 1</option>
                            <option value="2">User 2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="#">SPK</label>
                        <input type="text" class="form-control" placeholder="SPK" name="spk">
                    </div>
                    <div class="form-group">
                        <label for="#">No. Polisi</label>
                        <input type="text" class="form-control" placeholder="No. Polisi" name="nopol">
                    </div>
                    <div class="form-group">
                        <label for="#">Garansi</label>
                        <input type="text" class="form-control" placeholder="Garansi" name="guarantee">
                    </div>
                    <div class="form-group">
                        <label for="#">Kategori Pekerjaan</label>
                        <select name="#" id="#" class="form-control">
                            <option value="1" selected>Cuci</option>
                            <option value="2">Kategori 2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="#">Pekerjaan</label>
                        <select name="#" id="#" class="form-control">
                            <option value="1" selected>Cuci</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="#">Qty</label>
                        <input type="number" class="form-control" placeholder="Quantity" name="quantity">
                    </div>
                    <button class="btn btn-primary">Simpan Perubahan</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header">
                <h3></h3>
            </div>
            <div class="card-body">

            </div>
        </div>
    </div>
</div> --}}
@endsection

@section('javascripts')
<script>
$("#kt-table").DataTable()

function precheck(id) {
    let url = $("#precheck"+id).attr("data-url")
    console.log(url)
    // window.open(url, "_blank")
}

function postcheck(id) {
    let url = $("#postcheck"+id).attr("data-url")
    console.log(url)
    // window.open(url, "_blank")
}

// Check if Web Share API is supported
function isWebShareSupported() {
    return navigator.share && typeof navigator.share === 'function';
}

// Fallback function for copying to clipboard
function copyToClipboard(text) {
    if (navigator.clipboard && window.isSecureContext) {
        // Use modern clipboard API
        return navigator.clipboard.writeText(text).then(() => {
            return true;
        }).catch(() => {
            return false;
        });
    } else {
        // Fallback for older browsers
        try {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            const successful = document.execCommand('copy');
            document.body.removeChild(textArea);
            return Promise.resolve(successful);
        } catch (err) {
            return Promise.resolve(false);
        }
    }
}

// Main share function
async function shareData() {
    const shareText = $("#shareThis").html();
    
    if (isWebShareSupported()) {
        // Use Web Share API
        try {
            await navigator.share({
                title: 'Laporan Harian Mekanik',
                text: shareText
            });
            console.log('Data berhasil dibagikan');
            showSuccessMessage('Data berhasil dibagikan!');
        } catch (err) {
            console.log('Share cancelled or failed:', err);
            // Fallback to clipboard
            await copyToClipboardFallback(shareText);
        }
    } else {
        // Fallback for unsupported browsers
        await copyToClipboardFallback(shareText);
    }
}

// Clipboard fallback function
async function copyToClipboardFallback(text) {
    const success = await copyToClipboard(text);
    
    if (success) {
        showSuccessMessage('Data berhasil disalin ke clipboard! Silakan paste di aplikasi yang diinginkan.');
    } else {
        showErrorMessage('Gagal menyalin data. Silakan copy manual dari bawah ini:');
        showManualCopy(text);
    }
}

// Show success message
function showSuccessMessage(message) {
    Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: message,
        timer: 3000,
        showConfirmButton: false
    });
}

// Show error message
function showErrorMessage(message) {
    Swal.fire({
        icon: 'warning',
        title: 'Perhatian',
        text: message,
        confirmButtonText: 'OK'
    });
}

// Show manual copy option
function showManualCopy(text) {
    const modal = `
        <div class="modal fade" id="manualCopyModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Copy Manual Data</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Silakan copy data di bawah ini:</p>
                        <textarea class="form-control" rows="15" readonly style="font-family: monospace; font-size: 12px;">${text}</textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                        <button type="button" class="btn btn-primary" onclick="copyFromTextarea()">Copy</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    $('#manualCopyModal').remove();
    
    // Add modal to body
    $('body').append(modal);
    $('#manualCopyModal').modal('show');
}

// Copy from textarea function
function copyFromTextarea() {
    const textarea = document.querySelector('#manualCopyModal textarea');
    textarea.select();
    textarea.setSelectionRange(0, 99999); // For mobile devices
    
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            showSuccessMessage('Data berhasil disalin!');
            $('#manualCopyModal').modal('hide');
        } else {
            showErrorMessage('Gagal menyalin data. Silakan copy manual.');
        }
    } catch (err) {
        showErrorMessage('Gagal menyalin data. Silakan copy manual.');
    }
}

// Share button click handler
const btn = $('#share');
const resultPara = $('.result');

btn.click(function() {
    shareData();
});

function editTransaction(id) {
    let form_action = $("#editTransaction"+id).attr("data-action")
    let edit_url = $("#editTransaction"+id).attr("data-url")
    $("#transactionModal").modal("show")
    $("#transactionForm").attr('action', form_action)
    $.get(edit_url, function(res) {
        $("#transactionForm select[name='sa_id'] option[value='"+ res.data.user_sa_id +"']").prop('selected', true);
        $("#transactionForm select[name='work_id'] option[value='"+ res.data.work_id +"']").prop('selected', true);
        $("#transactionForm select[name='dealer_id'] option[value='"+ res.data.dealer_id +"']").prop('selected', true);
        $("#transactionForm select[name='warranty'] option[value='"+ res.data.warranty +"']").prop('selected', true);
        $("#transactionForm input[name='spk']").val(res.data.spk)
        var d = new Date(res.data.date);
        var day = ("0" + d.getDate()).slice(-2);
        var month = ("0" + (d.getMonth() + 1)).slice(-2);

        var date = d.getFullYear()+"-"+(month)+"-"+(day) ;
        $("#transactionForm input[name='date']").val(date)
        $("#transactionForm input[name='police_number']").val(res.data.police_number)
        $("#transactionForm input[name='qty']").val(res.data.qty)
    })
}

$("#transactionForm").submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: $('#transactionForm').attr("action"),
        type: 'POST',
        data: $('#transactionForm').serialize(),
        success: function(res) {
            $("#transactionModal").modal("hide")
            $('#transactionForm').trigger("reset")
            if(res.status == 200) {      
                Swal.fire(
                    'Ubah Data',
                    'Data berhasil diubah'
                ).then((result) => {
                    document.location.reload()
                })
            }
        }
    })
})

</script>
@endsection