@extends('layouts.app')
@section('title', __('purchase.order.order'))

        @section('content')
        <style>
            #itemsTable {
    width: 100%;
    table-layout: fixed;
}

/* Product column width */
#itemsTable th:nth-child(1),
#itemsTable td:nth-child(1) {
    width: 300px;
}

/* Normal inputs */
#itemsTable .form-control,
#itemsTable .form-select {
    height: 38px !important;
    box-sizing: border-box;
}

/* Select2 width */
#itemsTable .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Select2 height - same as input */
#itemsTable .select2-container .select2-selection--single {
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box;
}

/* Product text vertical alignment */
#itemsTable .select2-container .select2-selection--single
.select2-selection__rendered {
    line-height: 36px !important;
    height: 36px !important;
    padding-left: 12px;
    padding-right: 30px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dropdown arrow */
#itemsTable .select2-container .select2-selection--single
.select2-selection__arrow {
    height: 36px !important;
}

/* Prevent long product name from increasing width */
#itemsTable .select2-container,
#itemsTable .select2-selection {
    max-width: 100% !important;
    overflow: hidden;
}
#itemsTable .select2-container .select2-selection--single
.select2-selection__rendered {
    font-size: 13px !important;
}
#itemsTable .form-control,
#itemsTable .form-select,
#itemsTable textarea,
#itemsTable input {
    font-size: 13px !important;
}
        </style>
    <div class="page-wrapper">
    <div class="page-content">

        <div class="container-fluid px-4">
            
          <div class="row">
    <div class="col-12">

                    <h4 class="mb-3">Create Purchase Request</h4>

                    <form action="{{ route('purchase.request.store') }}" method="POST" id="purchaseForm">
                        @csrf

                        <!-- Top Card -->
                        <div class="card mb-3 shadow-sm">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label>Site</label>
                                       <x-dropdown-warehouse
    :warehouses="$sites"
    dropdownName="warehouse_id"
    selected=""
    :multiSelect="false"
    :enableToSelect="true"
    :showSelectOptionAll="false"
/>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Request Date</label>
                                        <input type="date" name="request_date" class="form-control" value="{{ date('Y-m-d') }}">
                                    </div>

                                    <div class="col-md-4">
                                        <label>Remarks</label>
                                        <input type="text" name="remarks" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Items -->
                        <div class="card shadow-sm">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <strong>Items</strong>
                                <button type="button" class="btn btn-primary btn-sm" onclick="addRow()">+ Add Item</button>
                            </div>

                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-bordered mb-0" id="itemsTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Product</th>
                                                <th>Qty</th>
                                                <th>Remark</th>
                                                <th>Unit</th>
                                                <th>Description</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                          
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="mt-3">
                            <button type="submit" class="btn btn-success" id="submitBtn">
    <span class="btn-text">Submit Purchase Request</span>
    <span class="spinner-border spinner-border-sm d-none" 
          id="btnLoader" role="status"></span>
</button>
                        </div>

                    </form>

                </div>
            </div>

        </div>

    </div>
</div>


@section('js')
<script>

let rowIndex = 1;

function addRow() {

    let table = document
        .getElementById('itemsTable')
        .getElementsByTagName('tbody')[0];

    let row = table.insertRow();

    row.innerHTML = `
        <td>
            <x-dropdown-product
                :products="$products"
                dropdownName="items[${rowIndex}][product_id]"
                selected=""
            />
        </td>

        <td>
            <input style="padding-top:0px;padding-right:0px;"
                type="number"
                name="items[${rowIndex}][qty]"
                class="form-control"
                min="1"
            >
        </td>

        <td>
            <textarea style="padding-top:2px;padding-right:2px;"
                rows="1"
                name="items[${rowIndex}][reason]"
                class="form-control"
            ></textarea>
        </td>

        <td>
            <input
                type="hidden"
                name="items[${rowIndex}][unit]"
                class="unit-id-field"
            >

            <input style="padding-top:0px;padding-right:0px;"
                type="text"
                class="form-control unit-field"
                readonly
            >
        </td>

        <td>
            <input style="padding-top:0px;padding-right:0px;"
                type="text"
                name="items[${rowIndex}][description]"
                class="form-control"
            >
        </td>

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

    // IMPORTANT:
    // Initialize Select2 on the newly created product dropdown
    let productSelect = row.querySelector('.product-select');

    if (productSelect) {
        $(productSelect).select2({
            width: '100%',
            placeholder: 'Choose Product',
            allowClear: true
        });
    }

    rowIndex++;
}


function fetchUnit(selectElement) {

    let selectedOption =
        selectElement.options[selectElement.selectedIndex];

    let unitId =
        selectedOption.getAttribute('data-unit-id');

    let unitName =
        selectedOption.getAttribute('data-unit-name');

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

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

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

    unitField.value = unitName || '';
    unitIdField.value = unitId || '';
}


function removeRow(button) {

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

    // Destroy Select2 before removing the row
    let productSelect = row.querySelector('.product-select');

    if (productSelect && $(productSelect).hasClass('select2-hidden-accessible')) {
        $(productSelect).select2('destroy');
    }

    row.remove();
}


$('#purchaseForm').on('submit', function () {

    $('#submitBtn').prop('disabled', true);

    $('#btnLoader').removeClass('d-none');

    $('.btn-text').text('Submitting...');

});


// Select2 for already existing product selects


</script>
@endsection