@extends('layouts.adminlte')

@section('title', 'PENAWARAN PROJECT')
@section('page_title', 'PENAWARAN PROJECT')

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Halaman Penawaran</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('master_project.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i>Kembali
                </a>
                <button class="btn btn-outline-success btn-sm" id="btnApproveClient">
                    <i class="fas fa-check me-1"></i>Setujui Client
                </button>
                <button class="btn btn-primary btn-sm" id="btnSaveQuotation">
                    <i class="fas fa-floppy-disk me-1"></i>Save Penawaran
                </button>
            </div>
        </div>
        <div class="card-body">
            <div id="projectInfo" class="mb-3 text-muted">Loading project info...</div>
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">No Penawaran</label>
                    <input type="text" class="form-control" id="quotationNumber" readonly />
                </div>
                <div class="col-md-3">
                    <label class="form-label">Tanggal Penawaran</label>
                    <input type="date" class="form-control" id="quotationDate" />
                </div>
                <div class="col-md-3">
                    <label class="form-label">Valid Until</label>
                    <input type="date" class="form-control" id="quotationValidUntil" />
                </div>
                <div class="col-md-3">
                    <label class="form-label">Status Penawaran</label>
                    <select class="form-select" id="quotationStatus">
                        <option value="draft">Draft</option>
                        <option value="sent">Sent</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>
                <div class="col-md-12">
                    <label class="form-label">Subject</label>
                    <input type="text" class="form-control" id="quotationSubject" />
                </div>
                <div class="col-md-12">
                    <label class="form-label">Notes</label>
                    <textarea class="form-control" id="quotationNotes" rows="3"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Item Penawaran</h3>
            <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddItem">
                <i class="fas fa-plus me-1"></i>Tambah Item
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered align-middle" id="quotationItemsTable">
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th style="width:120px">Qty</th>
                            <th style="width:120px">Unit</th>
                            <th style="width:160px">Unit Price</th>
                            <th style="width:180px">Total</th>
                            <th style="width:80px">#</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="text-end mt-2 fw-semibold">
                Grand Total: <span id="quotationGrandTotal">0</span>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            const projectId = {{ (int) $projectId }};
            const dataUrl = `{{ url('/master-project/penawaran') }}/${projectId}/data`;
            const saveUrl = `{{ url('/master-project/penawaran') }}/${projectId}/save`;
            const approveUrl = `{{ url('/master-project/penawaran') }}/${projectId}/approve`;

            function recalcRow($tr) {
                const qty = Number($tr.find('.q-item-qty').val() || 0);
                const price = Number($tr.find('.q-item-price').val() || 0);
                const total = qty * price;
                $tr.find('.q-item-total').val(total.toFixed(2));
            }

            function recalcGrandTotal() {
                let grand = 0;
                $('#quotationItemsTable tbody tr').each(function () {
                    grand += Number($(this).find('.q-item-total').val() || 0);
                });
                $('#quotationGrandTotal').text(grand.toLocaleString('id-ID'));
            }

            function addItemRow(item = null) {
                const row = `
                    <tr>
                        <td><input type="text" class="form-control q-item-description" value="${item?.description || ''}" /></td>
                        <td><input type="number" class="form-control q-item-qty" min="0.001" step="0.001" value="${item?.qty ?? 1}" /></td>
                        <td><input type="text" class="form-control q-item-unit" value="${item?.unit || ''}" /></td>
                        <td><input type="number" class="form-control q-item-price" min="0" step="0.01" value="${item?.unit_price ?? 0}" /></td>
                        <td><input type="text" class="form-control q-item-total" value="${item?.total_price ?? 0}" readonly /></td>
                        <td><button type="button" class="btn btn-sm btn-outline-danger btn-remove-item">Hapus</button></td>
                    </tr>
                `;
                $('#quotationItemsTable tbody').append(row);
                const $last = $('#quotationItemsTable tbody tr').last();
                recalcRow($last);
                recalcGrandTotal();
            }

            function collectItems() {
                return $('#quotationItemsTable tbody tr').map(function () {
                    return {
                        description: ($(this).find('.q-item-description').val() || '').toString().trim(),
                        qty: Number($(this).find('.q-item-qty').val() || 0),
                        unit: ($(this).find('.q-item-unit').val() || '').toString().trim(),
                        unit_price: Number($(this).find('.q-item-price').val() || 0),
                    };
                }).get().filter((x) => x.description && x.qty > 0);
            }

            function loadData() {
                $.getJSON(dataUrl).done((resp) => {
                    const project = resp?.data?.project || {};
                    const q = resp?.data?.quotation || {};
                    $('#projectInfo').text(`${project.code_project || '-'} - ${project.project_name || '-'} | Status Project: ${project.project_status || '-'} | Client: ${project.customer_name || '-'}`);
                    $('#quotationNumber').val(q.quotation_number || '');
                    $('#quotationDate').val(q.quotation_date || '');
                    $('#quotationValidUntil').val(q.valid_until || '');
                    $('#quotationSubject').val(q.subject || '');
                    $('#quotationNotes').val(q.notes || '');
                    $('#quotationStatus').val(q.status || 'draft');
                    $('#quotationItemsTable tbody').empty();
                    (q.items || []).forEach((it) => addItemRow(it));
                    if (!(q.items || []).length) addItemRow();
                    recalcGrandTotal();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load data penawaran', 'error');
                });
            }

            $('#btnAddItem').on('click', () => addItemRow());
            $('#quotationItemsTable').on('click', '.btn-remove-item', function () {
                $(this).closest('tr').remove();
                recalcGrandTotal();
            });
            $('#quotationItemsTable').on('input', '.q-item-qty, .q-item-price', function () {
                recalcRow($(this).closest('tr'));
                recalcGrandTotal();
            });

            $('#btnSaveQuotation').on('click', function () {
                const payload = {
                    quotation_date: $('#quotationDate').val(),
                    valid_until: $('#quotationValidUntil').val(),
                    subject: ($('#quotationSubject').val() || '').toString().trim(),
                    notes: ($('#quotationNotes').val() || '').toString().trim(),
                    status: $('#quotationStatus').val(),
                    items: collectItems(),
                };
                if (!payload.items.length) {
                    Swal.fire('Warning', 'Item penawaran wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: saveUrl,
                    type: 'POST',
                    contentType: 'application/json',
                    processData: false,
                    data: JSON.stringify(payload),
                }).done((resp) => {
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                    loadData();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error');
                });
            });

            $('#btnApproveClient').on('click', function () {
                Swal.fire({
                    title: 'Setujui penawaran oleh client?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, approve',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.post(approveUrl)
                        .done((resp) => {
                            Swal.fire('Success', resp?.message || 'Approved', 'success');
                            loadData();
                        })
                        .fail((xhr) => {
                            Swal.fire('Error', xhr.responseJSON?.message || 'Approve failed', 'error');
                        });
                });
            });

            loadData();
        });
    </script>
@endpush