@extends('layouts.app')

@section('title', 'Purchase Request List')

@section('content')
<div class="page-wrapper">
    <div class="page-content">

        <div class="container-fluid px-4">

            <div class="d-flex justify-content-between mb-3">
                <h4>Purchase Request List</h4>
                <a href="{{ route('purchase.request.create') }}" class="btn btn-primary">
                    + Create PR
                </a>
            </div>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <div class="card shadow-sm">
                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>PR Number</th>
                                    <th>Date</th>
                                    <th>Requested By</th>
                                    <th>Items</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse($purchaseRequests as $key => $pr)
                                    <tr id="row-{{ $pr->id }}">
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $pr->pr_number }}</td>
                                  <td>{{ \Carbon\Carbon::parse($pr->request_date)->format('d-m-Y') }}</td>

                                        <td>
                                          {{ optional($pr->requester)->first_name . ' ' . optional($pr->requester)->last_name }}
                                        </td>

                                        <td>
                                            {{ $pr->items->count() }}
                                        </td>
<td id="status-{{ $pr->id }}">
    @if($pr->status == 'pending')
        <span class="badge bg-warning">Pending</span>
    @elseif($pr->status == 'approved')
        <span class="badge bg-success">Approved</span>
    @else
        <span class="badge bg-danger">Rejected</span>
    @endif
</td>

                                                                            <td>
    <button class="btn btn-sm btn-info"
        onclick="viewPR({{ $pr->id }})">
        View
    </button>

    <button class="btn btn-sm btn-danger"
        onclick="deletePR({{ $pr->id }})">
        Delete
    </button>
      @if($pr->status == 'approved')
        <button class="btn btn-sm btn-warning"
            onclick="openRFQModal({{ $pr->id }})">
            Send Quotation
        </button>
    @endif
</td>
    
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center">No Data Found</td>
                                    </tr>
                                @endforelse
                            </tbody>

                        </table>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>
<!-- View Modal -->
<div class="modal fade" id="prModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Purchase Request Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <div id="prDetails">
                    <!-- Data will come here -->
                </div>

                <hr>

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Qty</th>
                                <th>Unit</th>
                                <th>Remark</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody id="prItems"></tbody>
                    </table>
                </div>

            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="rfqModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5>Send RFQ to Vendor</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            

            <div class="modal-body">
            <div id="detail">
                
            </div>
                <!-- Vendor -->
                <div class="mb-3">
                    <label>Select Vendor</label>
                 <select id="vendor_id" class="form-control select2" multiple>
                        
                        @foreach($parties as $party)
                            <option value="{{ $party->id }}">
                                  {{ $party->first_name }} {{ $party->last_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Items -->
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Qty</th>
                             <th>Unit</th>
                             <th>Remark</th>
                             <th>Description</th>
                             <th>Action</th>
                        </tr>
                    </thead>
                  <tbody id="rfqItems"></tbody>

<button type="button" class="btn btn-primary btn-sm mt-2" onclick="addRFQRow()">
    + Add Item
</button>
                </table>

                <button class="btn btn-success" onclick="submitRFQ()">
                    Submit
                </button>

            </div>

        </div>
    </div>
</div>
@endsection
@section('js')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>

let currentPR = null;

function openRFQModal(id)
{
    currentPR = id;

    $('#vendor_id').val(null).trigger('change');

    fetch("{{ url('/purchase/request/details') }}/" + id)
        .then(res => res.json())
        .then(data => {
             document.getElementById('detail').innerHTML = `
            <p><strong>Site Name:</strong> ${data.warehouse ? data.warehouse.name : ''}</p>
                <p><strong>PR Number:</strong> ${data.pr_number}</p>
                <p><strong>Date:</strong> ${data.request_date}</p>
              <p>
<strong>Requested By:</strong> 
${data.requester 
    ? data.requester.first_name + ' ' + data.requester.last_name 
    : 'N/A'}
</p>
             
                <p><strong>Remarks:</strong> ${data.remarks ?? ''}</p>
            `;
            let rows = '';

            data.items.forEach(item => {

                let productName =
                    item.product ? item.product.name : '';

                let unitName =
                    item.product && item.product.unit
                        ? item.product.unit.name
                        : '';

                let unitId =
                    item.unit ||
                    (item.product ? item.product.base_unit_id : '');

                rows += `
                    <tr>

                        <td>
                            ${productName}

                            <input type="hidden"
                                   class="product"
                                   value="${item.product_id}">
                        </td>

                        <td style="padding-left:1px;padding-right:1px;">
                            <input type="number"
                                   style="padding-left:1px;padding-right:1px;"
                                   class="form-control qty"
                                   value="${item.quantity}"
                                   min="1">
                        </td>
                        <td>
                            <input type="hidden"
                                   class="unit-id"
                                   value="${unitId}">

                            <span class="unit">
                                ${unitName}
                            </span>
                        </td>
                        <td>
                            <textarea rows="1"
                                      class="form-control reason"
                                      style="padding-left:1px;padding-right:1px;">${item.reason || ''}</textarea>
                        </td>

                        

                        <td>
                            <textarea rows="1"
                                      class="form-control description"
                                      style="padding-left:1px;padding-right:1px;">${item.description || ''}</textarea>
                        </td>

                        <td>
                            <button type="button"
                                    class="btn btn-danger btn-sm"
                                    onclick="removeRow(this)">
                                X
                            </button>
                        </td>

                    </tr>
                `;
            });

            document.getElementById('rfqItems').innerHTML = rows;

            let modal = new bootstrap.Modal(
                document.getElementById('rfqModal')
            );

            modal.show();
        })
        .catch(error => {
            console.error(error);
            alert('Error loading PR details');
        });
}
function viewPR(id)
{
    fetch("{{ url('/purchase/request/details') }}/" + id)
        .then(response => {
            if (!response.ok) {
                throw new Error('Server error');
            }
            return response.json();
        })
        .then(data => {

            // Header
            document.getElementById('prDetails').innerHTML = `
            <p><strong>Site Name:</strong> ${data.warehouse ? data.warehouse.name : ''}</p>
                <p><strong>PR Number:</strong> ${data.pr_number}</p>
                <p><strong>Date:</strong> ${data.request_date}</p>
              <p>
<strong>Requested By:</strong> 
${data.requester 
    ? data.requester.first_name + ' ' + data.requester.last_name 
    : 'N/A'}
</p>
               <p>
    <strong>Status:</strong>
    <select class="form-control mt-1"
        onchange="updateStatus(${data.id}, this.value)">

        <option value="pending" ${data.status === 'pending' ? 'selected' : ''}>
            Pending
        </option>

        <option value="approved" ${data.status === 'approved' ? 'selected' : ''}>
            Approved
        </option>

        <option value="rejected" ${data.status === 'rejected' ? 'selected' : ''}>
            Rejected
        </option>

    </select>
</p>
                <p><strong>Remarks:</strong> ${data.remarks ?? ''}</p>
            `;

            // Items
            let rows = '';
            data.items.forEach(item => {
                rows += `
                    <tr>
                        <td>${item.product ? item.product.name : ''}</td>
                        <td>${item.quantity}</td>
                        <td>${item.product && item.product.unit ? item.product.unit.name : ''}</td>
                         <td>${item.reason || ''}</td>
                      
                        <td>${item.description ?? ''}</td>
                    </tr>
                `;
            });

            document.getElementById('prItems').innerHTML = rows;

            let modal = new bootstrap.Modal(document.getElementById('prModal'));
            modal.show();
        })
        .catch(error => {
            console.error(error);
            alert('Error loading data');
        });
}
</script>
<script>
function deletePR(id)
{
    if (!confirm('Are you sure you want to delete?')) return;

    console.log("Deleting ID:", id); 

    fetch("{{ route('purchase.request.delete') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: id })
    })
    .then(response => {
        console.log("Response:", response);
        return response.json();
    })
    .then(data => {
        console.log("Data:", data);

        alert(data.message);

        let row = document.getElementById('row-' + id);
        if (row) row.remove();
    })
    .catch(error => {
        console.error("Error:", error);
        alert('Something went wrong');
    });
}
function updateStatus(id, status)
{
    fetch("{{ route('purchase.request.updateStatus') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            id: id,
            status: status
        })
    })
    .then(res => res.json())
    .then(data => {

        // ✅ Update status badge
        let statusCell = document.getElementById('status-' + id);

        let badge = '';

        if(status === 'pending') {
            badge = `<span class="badge bg-warning">Pending</span>`;
        }
        else if(status === 'approved') {
            badge = `<span class="badge bg-success">Approved</span>`;
        }
        else {
            badge = `<span class="badge bg-danger">Rejected</span>`;
        }

        statusCell.innerHTML = badge;

        // ✅ 🔥 ADD BUTTON DYNAMICALLY
        let row = document.getElementById('row-' + id);
        let actionCell = row.querySelector('td:last-child');

        // remove old Send Quotation button (duplicate avoid)
        let oldBtn = actionCell.querySelector('.send-quotation-btn');
        if (oldBtn) oldBtn.remove();

        if(status === 'approved') {
            actionCell.insertAdjacentHTML('beforeend', `
                <button class="btn btn-sm btn-warning send-quotation-btn"
                    onclick="openRFQModal(${id})">
                    Send Quotation
                </button>
            `);
        }

        // modal close
        let modalEl = document.getElementById('prModal');
        let modal = bootstrap.Modal.getInstance(modalEl);
        modal.hide();

        alert(data.message);
    })
    .catch(err => {
        console.error(err);
        alert('Error updating status');
    });
}
function submitRFQ()
{
    let vendorIds = Array.from(
        document.getElementById('vendor_id').selectedOptions
    ).map(option => option.value);

    if (vendorIds.length === 0) {
        alert('Select at least one vendor');
        return;
    }

    let items = [];

    document.querySelectorAll('#rfqItems tr').forEach(row => {

        let product = row.querySelector('.product');
        let qty = row.querySelector('.qty');
        let reason = row.querySelector('.reason');
        let description = row.querySelector('.description');
        let unit = row.querySelector('.unit-id');

        if (!product || !qty) {
            return;
        }

        let productId = product.value || product.getAttribute('value');
        let quantity = qty.value;

        let reasonValue = reason ? reason.value : '';
        let descriptionValue = description ? description.value : '';
        let unitId = unit ? unit.value : '';

        if (productId && quantity) {

            items.push({
                product_id: productId,
                quantity: quantity,
                unit: unitId,
                reason: reasonValue,
                description: descriptionValue
            });
        }
    });

    if (items.length === 0) {
        alert('Please add at least one product');
        return;
    }

    console.log('Sending RFQ:', {
        pr_id: currentPR,
        vendor_ids: vendorIds,
        items: items
    });

    fetch("{{ route('rfq.store') }}", {
        method: 'POST',

        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },

        body: JSON.stringify({
            pr_id: currentPR,
            vendor_ids: vendorIds,
            items: items
        })
    })

    // IMPORTANT: Read response only ONCE
    .then(response => {

        return response.text().then(text => {

            console.log('HTTP STATUS:', response.status);
            console.log('RAW SERVER RESPONSE:', text);

            let data;

            try {
                data = JSON.parse(text);
            } catch (e) {

                throw new Error(
                    'Server returned invalid JSON:\n\n' + text
                );
            }

            if (!response.ok) {

                throw new Error(
                    data.message ||
                    data.error ||
                    'HTTP Error ' + response.status
                );
            }

            return data;
        });
    })

    .then(data => {

        console.log('RFQ RESPONSE:', data);

        if (!data.success) {

            alert(
                'RFQ Error:\n\n' +
                (data.message || 'Something went wrong')
            );

            return;
        }

        // ==========================================
        // SHOW VENDOR RESULT
        // ==========================================

        if (data.vendors && data.vendors.length > 0) {

            let result = 'RFQ Created Successfully\n\n';

            // data.vendors.forEach(function(vendor) {

            //     result +=
            //         'Vendor: ' +
            //         (vendor.vendor_name || '') +
            //         '\n';

            //     result +=
            //         'Mobile: ' +
            //         (vendor.mobile || '') +
            //         '\n';

            //     result +=
            //         'WhatsApp Status: ' +
            //         (vendor.whatsapp_status || '') +
            //         '\n';

            //     result +=
            //         'Quotation URL: ' +
            //         (vendor.quotation_url || '') +
            //         '\n';

            //     result +=
            //         'WhatsApp Response: ' +
            //         (vendor.whatsapp_response || '') +
            //         '\n\n';

            // });

           

            alert(result);
        }
        else {

            alert(
                data.message ||
                'RFQ created successfully'
            );
        }

        // ==========================================
        // CLOSE MODAL
        // ==========================================

        let modal = bootstrap.Modal.getInstance(
            document.getElementById('rfqModal')
        );

        if (modal) {
            modal.hide();
        }

        // ==========================================
        // REDIRECT
        // ==========================================

        setTimeout(function() {

            window.location.href =
                data.redirect ||
                "{{ route('create.quotation.list') }}";

        }, 1000);

    })

    .catch(error => {

        console.error('RFQ ERROR:', error);

        alert(
            'Error while creating RFQ\n\n' +
            error.message
        );
    });
}
function addRFQRow()
{
    let row = `
        <tr>

            <td>
                <select class="form-control product"
                        onchange="setRFQUnit(this)">

                    <option value="">Select Product</option>

                    @foreach($products as $product)
                        <option value="{{ $product->id }}"
                                data-unit-id="{{ $product->base_unit_id }}"
                                data-unit-name="{{ $product->unit->name ?? '' }}">
                            {{ $product->name }}
                        </option>
                    @endforeach

                </select>
            </td>

            <td style="padding-left:1px;padding-right:1px;">
                <input type="number"
                       style="padding-left:1px;padding-right:1px;"
                       class="form-control qty"
                       min="1">
            </td>
             <td>
                <input type="hidden" class="unit-id">

                <span class="unit"></span>
            </td>

            <td>
                <textarea class="form-control reason"
                          style="padding-left:1px;padding-right:1px;"
                          rows="1"></textarea>
            </td>

           

            <td>
                <textarea class="form-control description"
                          style="padding-left:1px;padding-right:1px;"
                          rows="1"></textarea>
            </td>

            <td>
                <button type="button"
                        class="btn btn-danger btn-sm"
                        onclick="removeRow(this)">
                    X
                </button>
            </td>

        </tr>
    `;

    document
        .getElementById('rfqItems')
        .insertAdjacentHTML('beforeend', row);
}

function removeRow(btn)
{
    btn.closest('tr').remove();
}
$('#rfqModal').on('hidden.bs.modal', function () {

    // ✅ Vendor dropdown reset
    $('#vendor_id').val(null).trigger('change');

    // ✅ Items table clear
    document.getElementById('rfqItems').innerHTML = '';

});
$(document).ready(function() {

    $('#rfqModal').on('shown.bs.modal', function () {

        $('#vendor_id').select2({
            dropdownParent: $('#rfqModal'),
            placeholder: "Select Vendors"
        });

    });

});
// Product change event


function setRFQUnit(select)
{
    let option = select.options[select.selectedIndex];

    let unitId = option.getAttribute('data-unit-id') || '';
    let unitName = option.getAttribute('data-unit-name') || '';

    let row = select.closest('tr');

    let unitIdField = row.querySelector('.unit-id');
    let unitField = row.querySelector('.unit');

    if (unitIdField) {
        unitIdField.value = unitId;
    }

    if (unitField) {
        unitField.textContent = unitName;
    }
}
</script>