@extends('layouts.app')
@section('title')
    Purchase Requisition View
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('purchase_requisition.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card mb-3">
        <div class="card-body">
            <div class="row">

                <div class="col-lg-6 col-sm-6 col-12">
                    <div class="row align-items-center">
                        <label for="" class="form-label col-4">Category:</label>
                        <div class="col-6">
                            <select disabled name="category" id="categorySelect" onchange="handleCategoryChange()"
                                class="form-select" style="width: 100% !important;">

                                <option value="local" @selected($purchase_requisitions->category == 'local')>Local</option>
                                <option value="oversea" @selected($purchase_requisitions->category == 'oversea')>Oversea</option>
                            </select>
                        </div>
                    </div>
                </div>


                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="pr_no" class="form-label col-4">PR No.</label>
                        <div class="col-6">
                            <input type="text" name="pr_no" value="{{ $purchase_requisitions->pr_no }}" disabled
                                id="part_name" class="form-control rounded-4">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="" class="form-label col-4">Date :</label>
                        <div class="col-6">
                            <input type="text"
                                value="{{ \Carbon\Carbon::createFromFormat('d/m/Y', $purchase_requisitions->date)->format('d/m/Y') }}"
                                id="date" name="date" disabled class="form-control rounded-4">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="requested_by" class="form-label col-4">Requested By</label>
                        <div class="col-6">
                            <input type="text" readonly name="requested_by" id="requested_by"
                                class="form-control rounded-4" disabled
                                value="{{ $purchase_requisitions->user->user_name ?? '' }}">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="" class="form-label col-4">Department</label>
                        <div class="col-6">
                            <input type="text" readonly
                                value="{{ $purchase_requisitions->department->name ?? '' }}"disabled
                                class="form-control rounded-4">
                        </div>

                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="category" class="form-label col-4">Currency:</label>
                        <div class="col-6">
                            <select name="currency" id="currencyDropdown" class="form-select rounded-4"
                                style="width: 100% !important;">
                                <option value="-1">Select a Currency</option>
                                @foreach ($Currency as $item)
                                    <option value="{{ $item->id }}" @selected($item->id == $purchase_requisitions->currency_id)>{{ $item->symbol }} -
                                        {{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row d-flex flex-row-reverse">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="category" class="form-label col-4">Currency Rate(In MYR):</label>
                        <div class="col-6">
                            <input type="number" step="0.01" name="currency_rate" id="currency_rate"
                                class="form-control rounded-4" value="{{ $purchase_requisitions->currency_rate }}"
                                placeholder="Currecny Rate for Selected Currency ">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-sm-12 my-5">
                            <h3>Item List</h3>
                            <div class="table-responsive">
                                <table class="table table-bordered m-0" id="mainTable">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Part No.</th>
                                            <th>Part Name</th>
                                            <th>Description</th>
                                            <th>UOM</th>
                                            <th> UNIT Price (<span id="currencyUnitText">based currency</span>)</th>
                                            <th>Quantity (UNIT)</th>
                                            <th>Total Amount (<span id="currencyUnitText">based currency</span>)</th>
                                            <th>Required Date</th>
                                            <th>Purpose</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($purchase_requisition_details as $purchase_requisition_detail)
                                            <tr>
                                                <td>
                                                    {{ $loop->iteration }}
                                                </td>
                                                <td>
                                                    {{ $purchase_requisition_detail->product->part_no }}
                                                </td>
                                                <td>
                                                    {{ $purchase_requisition_detail->product->part_name }}
                                                </td>
                                                <td>
                                                    {{ $purchase_requisition_detail->description }}
                                                </td>
                                                <td>
                                                    {{ $purchase_requisition_detail->product->units->name }}
                                                </td>
                                                <td>
                                                    {{ $purchase_requisition_detail->price }}
                                                </td>
                                                <td>
                                                    {{ $purchase_requisition_detail->qty }}
                                                </td>
                                                <td>
                                                    {{ $purchase_requisition_detail->total }}
                                                </td>
                                                <td>

                                                    {{ $purchase_requisition_detail->required_date }}
                                                </td>
                                                <td>
                                                    {{ $purchase_requisition_detail->purpose }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="" class="form-label col-4">Total Amount (based currency)</label>
                        <div class="col-6">
                            <input type="text" id="total_based_currency" readonly name="total_based_currency"
                                placeholder="sum total amount (based currency)"
                                value="{{ $purchase_requisitions->total_based_currency }}" class="form-control rounded-4">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="" class="form-label col-4">Budget Amount (based currency)</label>
                        <div class="col-6">
                            <input type="number" step="0.01" id="budget_amount_based_currency"
                                name="budget_amount_based_currency" placeholder="Budget Amount (based currency)"
                                class="form-control rounded-4"
                                value="{{ $purchase_requisitions->budget_amount_based_currency }}">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="" class="form-label col-4">Grand Total</label>
                        <div class="col-6">
                            <input disabled type="text" id="grandtotal" value="{{ $purchase_requisitions->total }}"
                                readonly name="total" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="" class="form-label col-4">Budget Amount (MYR)</label>
                        <div class="col-6">
                            <input disabled type="text" id="grandtotal"
                                value="{{ $purchase_requisitions->budget_amount }}" name="budget_amount"
                                placeholder="sum total amount" class="form-control rounded-4">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="" class="form-label col-4">Existing/ Recommended supplier, if any:</label>
                        <div class="col-6">
                            <select disabled name="supplier_id" id="supplier_id" class="form-select"
                                style="width: 100% !important;">
                                <option value="{{ $purchase_requisitions->supplier_id }}" disabled selected>
                                    {{ $purchase_requisitions->supplier->name ?? '' }}</option>

                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="" class="form-label">Special Requirement</label>
                        <div class="col-8">
                            <textarea disabled id="special_requirement" name="special_requirement" placeholder="special_requirement"
                                class="form-control rounded-4 auto-resize" oninput="autoResizeTextarea(this)">{{ $purchase_requisitions->special_requirement }}</textarea>
                        </div>
                    </div>
                </div>

            </div>


            <br>
            <div class="row">
                <h5>VERIFICATION DETAILS</h5>
            </div>
            <br>
            <div class="row">
                <div class="table-responsive">
                    <table class="table table-bordered m-0" id="verificationTable">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>User Name</th>
                                <th>Designation</th>
                                <th>Department</th>
                                <th>Date Time</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($purchase_requisition_statuses as $verification_detail)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $verification_detail->user->user_name ?? '' }}</td>
                                    <td>{{ $verification_detail->department->name ?? '' }}</td>
                                    <td>{{ $verification_detail->designation->name ?? '' }}</td>
                                    <td>{{ $verification_detail->date }}</td>
                                    <td> {{ $verification_detail->status }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
    <!-- Include Bootstrap Datepicker CSS and JS -->
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            // Initialize Bootstrap Datepicker
            $('#date').datepicker({
                format: 'dd/mm/yyyy', // Date format
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom' // Ensures the date picker opens below the input
            });
        });

        function autoResizeTextarea(textarea) {
            const isDisabled = textarea.disabled;
            if (isDisabled) textarea.disabled = false;

            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';

            if (isDisabled) textarea.disabled = true;
        }

        document.addEventListener('DOMContentLoaded', function() {
            const textarea = document.getElementById('special_requirement');
            if (textarea) {
                autoResizeTextarea(textarea);
            }
        });

        function updateCurrencyUnitText() {
            const selectedText = $('#currencyDropdown option:selected').text();
            const symbol = selectedText.split('-')[0].trim();

            if (symbol === "Select a Currency" || symbol === "") {
                $('#currencyUnitText').text("based currency");
                $('#currencyUnitTex1').text("based currency");
            } else {
                $('#currencyUnitText').text(symbol);
                $('#currencyUnitText1').text(symbol);
            }
        }
        $('#currencyDropdown').on('change', updateCurrencyUnitText);
        $(document).ready(function () {
            updateCurrencyUnitText();
        });

    </script>
@endsection