@extends('layouts.master')
@section('title')
Pickup Confirmation Form
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet">
<!-- Sweet Alert css-->
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
@endsection
@section('content')
<style>


.choices__inner {
    --vz-bg-opacity: 1;
    background-color: #FFF !important;
    border: var(--vz-border-width) solid var(--vz-input-border-custom) !important;
    border-radius: var(--vz-border-radius) !important;
}
.dateNow{
    --vz-bg-opacity: 1;
    background-color: rgba(var(--vz-light-rgb), var(--vz-bg-opacity)) !important;
    padding: 8px;
    display: flex
}
.floating-alert {
    position: fixed;
    bottom: 20px; /* Position it 20px from the bottom */
    left: 90%; /* Position it in the center horizontally */
    transform: translateX(-50%); /* Center it horizontally */
    z-index: 1000;
    width: 300px;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    text-align: center; /* Center text within the <strong> tag */
}

.floating-alert.hide {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

#error-alert.show {
    display: block !important;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#error-alert.hide {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.choices {
    margin-bottom: 0 !important;
}
/* Pagination style */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    color: black;
    float: left;
    padding: 4px 12px;
    text-decoration: none;
    border: 1px solid #e2e2e2;
    margin: 0 4px;
    border-radius: 500px;
}

.pagination a.active {
    background-color: #e2e2e2;
    color: #000;
}

.pagination a:hover {
    background-color: #e2e2e2;
}

.spinner {
    border-top-color: rgba(255, 255, 255, 0.5) !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}
.modal-header {
    padding: var(--vz-modal-header-padding) !important;
    background: #f6f6f6 !important
}
.texttitle{
    text-transform: uppercase !important;
    font-size: 15px !important;
    font-weight: 500
}
.column1{
    width:100px; 
    display: inline-block
}
.column2{
    width:10px; 
    display: inline-block
}
.column3{
    font-weight: 500
}
    
</style>

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">Pickup Confirmation Form</h4>
        </div>
    </div>
</div>

<div class="alert alert-danger alert-solid floating-alert hide" role="alert" id="error-alert">
    <strong> Customer cannot be Empty</strong>
</div>


<div class="row justify-content-center">
    <div class="col-xxl-8">
        <div class="card live-preview ribbon-box right" style="background:#fff9f9">
            
            <form class="" method="POST" action="{{route('pickups.sub_collection')}}" id="collection-form">
                @csrf
                <div class="card-body p-4" hidden>
                    <div class="row">
                        <!--  START :: Customer  -->
                        <div class="col-lg-4 col-sm-6" style="background:#ebebeb; border-radius:10px; padding:10px 20px">
                            <div class="texttitle">Customer</div>
                            <div>{{ $pickup['PickUpHeader']['AcCustomerID'] }}</div>
                            <div>{{ $pickup['PickUpHeader']['AcCustomerName'] }}</div>
                        </div>
                        <!-- End :: Customer  -->
                        <!--  START :: Salesman  -->
                        <div class="col-sm-6 ms-auto">
                            <div class="texttitle">Salesman</div>
                            <div>{{ $pickup['PickUpHeader']['AcSalesmanID'] }} - {{ $pickup['PickUpHeader']['AcSalesmanName'] }}</div>
                             <div class="row" hidden>
                                <div class="col-lg-12">
                                    <div>
                                        <label for="choices-customer">Salesman</label>
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="AcSalesmanID" value="{{ $pickup['PickUpHeader']['AcSalesmanID'] }}" name="AcSalesmanID" maxlength="12" placeholder="Registration No" readonly />
                                        <div class="invalid-feedback">
                                            Please enter a registration no
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="AcSalesmanName" value="{{ $pickup['PickUpHeader']['AcSalesmanName'] }}" name="AcSalesmanName" maxlength="12" placeholder="GST No" readonly />
                                        <div class="invalid-feedback">
                                            Please enter a GST no
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End :: Salesman  -->
                    </div>
                </div>
               
                
                <div class="card-body p-4 border-top">
                    <div class="row g-3" style="background-color: rgba(33, 37, 41, 0.05); border-radius:5px; padding: 5px 5px 10px 5px">
                        <!-- ******************************** START :: Payment Details ******************************** -->
                        <div class="col-lg-4 col-sm-6">
                            <div class="row mb-3">
                                <div class="col-lg-12">
                                    <!--  START :: Customer  -->
                                    <div class="texttitle mb-2"><u>Customer</u></label></div>
                                    <div class="mb-1">
                                        <span class="column3">{{ $pickup['PickUpHeader']['AcCustomerID'] }} - {{ $pickup['PickUpHeader']['AcCustomerName'] }}</span>
                                    </div>
                                    <!-- End :: Customer  -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="texttitle mb-2 d-flex">
                                        <u>Payment Details</u>
                                        <div class="mb-1">
                                        <span class="column3" style="margin-left:10px">
                                            @if($pickup['PickUpHeader']['PaymentStatus'] == 'Partially Paid')
                                                <span class="badge bg-success-subtle text-danger text-uppercase">Partially Paid</span>
                                            @elseif($pickup['PickUpHeader']['PaymentStatus'] == 'Unpaid')
                                                <span class="badge bg-danger-subtle text-danger text-uppercase">Unpaid</span>
                                            @else
                                                <span class="badge bg-danger-subtle text-success text-uppercase">Full Paid</span>
                                            @endif
                                        </span>
                                        <input name="invoice_no" type="hidden" value="{{ $pickup['PickUpHeader']['AcCusSalesOrderMID'] }}">
                                    </div>
                                    </div>
                                    
                                    <div class="mb-1">
                                        <span class="column1">Total Amount</span>
                                        <span class="column2">:</span>
                                        <span class="column3">{{ $pickup['PickUpHeader']['DocumentFinalAmount'] }}</span>
                                    </div>
                                    <div class="mb-1">
                                        <span class="column1">Total Received</span>
                                        <span class="column2">:</span>
                                        <span class="column3">{{ $pickup['PickUpHeader']['TotalPaymentReceived'] }}</span>
                                    </div>
                                    <div class="mb-1">
                                        <span class="column1">Balance</span>
                                        <span class="column2">:</span>
                                        <span class="column3">{{ $pickup['PickUpHeader']['DocumentFinalAmount'] - $pickup['PickUpHeader']['TotalPaymentReceived'] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- ******************************** END :: Payment Details ******************************** -->
                        <!-- ******************************** START :: Sales Order Details ******************************** -->
                        <div class="col-sm-6 ms-auto">
                            <div class="texttitle mb-2"><u>Sales Order Details</u></div>
              
                            <div class="mb-1">
                                <span class="column1">Sales Order No</span>
                                <span class="column2">:</span>
                                <span class="column3">{{ $pickup['PickUpHeader']['AcCusSalesOrderMID'] }}</span>
                                <input name="invoice_no" type="hidden" value="{{ $pickup['PickUpHeader']['AcCusSalesOrderMID'] }}">
                            </div>
                            <div class="mb-1">
                                <span class="column1">Document Date</span>
                                <span class="column2">:</span>
                                <span class="column3">{{ $pickup['PickUpHeader']['DocumentDate'] }}</span>
                            </div>
                            <div class="mb-1">
                                <span class="column1">Salesman</span>
                                <span class="column2">:</span>
                                <span class="column3">{{ $pickup['PickUpHeader']['AcSalesmanID'] }} - {{ $pickup['PickUpHeader']['AcSalesmanName'] }}</span>
                            </div>
                            <div class="mb-1" style="display: none">
                                <span class="column1">Delivery Date</span>
                                <span class="column2">:</span>
                                <span class="column3">{{ $pickup['PickUpHeader']['DeliveryDate'] }}</span>
                            </div>
                            <div class="mb-1">
                                <span class="column1">Collection Date</span>
                                <span class="column2">:</span>
                                <span class="column3">{{ Carbon\Carbon::now()->format('Y-m-d') }}</span>
                                <input type="hidden" class="form-control bg-light " id="collection_date" name="collection_date" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}">
                            </div>
                            <!-- <div class="mb-1">
                                <span class="column1" style="margin-top:8px">Collection Date</span>
                                <span class="column3">
                                    <input type="text" class="form-control bg-light " id="collection_date" name="collection_date" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" readonly>
                                </span>
                            </div>  -->
                            <div class="mb-1">
                                <span class="column1" style="margin-top:8px">Remark</span>
                                <span class="column3">
                                    <textarea rows="3" class="form-control bg-light" id="document_remark" name="document_remark" @if($RemainingQuantity<=0) readonly @endif></textarea>
                                </span>
                            </div>
                        </div>
                        <!-- ******************************** END :: Sales Order Details ******************************** -->
                    </div>
                </div>

                <!-- ******************************** START :: Remark ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed" style="display: none">
                    <div class="row">
                        <div class="col-lg-12 col-sm-6">
                            <div class="col-lg-12">
                                <div>
                                    <label for="document_remark">Remark</label>
                                </div>
                                <div class="mb-1">
                                    <input type="text" class="form-control bg-light" id="document_remark" name="document_remark" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: Remark ******************************** -->

                <!-- ******************************** START :: Ship Via ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed" style="display: none">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label for="ship_from_location">Ship From</label>
                            </div>
                            <div class="mb-1">
                                <select class="form-select bg-light " required aria-label="select example" onchange="changeOrderLocation(this.value);" id="ship_from_location" name="ship_from_location" readonly>
                                    @foreach($locations as $location)
                                    @if($location->AcLocationID==$location_id)
                                    <option value="{{ $location->AcLocationID }}" selected>{{ $location->AcLocationID }} - {{ $location->AcLocationDesc }}</option>
                                    @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Example invalid select feedback</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: Ship Via ******************************** -->
               
               
                <!-- ******************************** START :: Product Detail ******************************** -->
                <div class="card-body border-top border-top-dashed p-4">
                    <div class="table-responsive">
                        @if($RemainingQuantity > 0)
                        <table class="invoice-table table table-borderless mb-0">
                            <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col" style="width: 20px;">#</th>
                                    <th scope="col">Description</th>
                                    <th scope="col" style="text-align: center; vertical-align: middle;">Collect</th>
                                    <th scope="col">Serial No.</th>
                                    <th scope="col" style="width: 40px;" class="text-end">Quantity</th>
                                </tr>
                            </thead>
             
                            <tbody>
                                @php($count_item = 0)
                                @foreach($pickup['PickUpDetails'] as $stock)
                                @if($stock['RemainingQuantity'] > 0)
                                                                <tr>
                                    <td>
                                        {{ $count_item }}
                                        <input type="hidden" name="stock-id-{{ $stock['ItemNo']}}" value="{{ $stock['AcStockID']}}">
                                        <input type="hidden" name="stock-uom-{{ $stock['ItemNo']}}" value="{{ $stock['AcStockUOMID']}}">
                                    </td>
                                    <td>
                                        <div style="word-wrap: break-word; width: 300px;">{{ $stock['AcStockID']}} - {{ $pickup_stock[$stock['AcStockID']] }}</div>
                                    </td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input type="checkbox" value="1" name="collect-item-{{ $stock['ItemNo']}}" id="collect-item-{{ $stock['ItemNo']}}" onclick="checkToCollectItem(this);">
                                    </td>
                                    <td>
                                        @if($stock['RemainingQuantity'] == 1)
                                        <input class="form-control bg-light" style="width:300px; border: 2px solid #bababa" readonly placeholder="Enter Serial No." name="serial-number-{{$stock['ItemNo']}}" type="text"/>
                                        @else

                                        @for ($i = 0; $i < $stock['RemainingQuantity']; $i++)
                                            <input class="form-control bg-light mb-2" style="width:300px; border: 2px solid #bababa" readonly placeholder="Enter Serial No." name="serial-number-{{$stock['ItemNo']}}-{{$i+1}}" type="text"/>
                                        @endfor

                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <input class="form-control" name="stock-quantity-{{ $stock['ItemNo']}}" value="{{ $stock['RemainingQuantity']}}" type="hidden"/>
                                        <select class="form-select bg-light mt-2" style="width:inherit" name="selected-stock-quantity-{{ $stock['ItemNo']}}" onchange="showSerialNo(this)">
                                            @for($qty=1; $qty<=$stock['RemainingQuantity']; $qty++)
                                                <option value="{{ $qty }}" @if($stock['RemainingQuantity'] == $qty) selected @endif>{{ $qty }}</option>
                                            @endfor
                                        </select>
                                    </td>
                                </tr>
                                @endif
                                @endforeach

                            </tbody>
                        </table>
                        @else
                        <div class="simpleBadgeBottom">
                            <div class="alert alert-success">
                                All items have been collected!
                            </div>
                        </div>
                        @endif

                    </div>
                    <!-- ******************************** END :: Product Detail ******************************** -->
                    <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                        @if($pickupModal->status != 1)
                        <button type="button" class="btn btn-sm btn-info" onclick="validateform();"><i class="ri-printer-line align-bottom me-1"></i> Save Order</button>
                        @endif
                        @if($pickupModal->status == 1)
                        @if (!empty($qrcode))
                        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#modalQR">EInvoice QR</button>
                        @endif
                        @endif
                    </div>
                </div>
                
                
            </form>

            {{-- Modal QR --}}
            <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalQR" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">EInvoice QR</h5>
                            <button type="button" id="btnCloseSelectStockModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <!-- <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small> -->
                        <div class="modal-body pb-0" style="margin: 0 auto">
                            <h5 class="mb-3">
                                Scan the QR for EInvoice request
                            </h5>
                            <div style="text-align:center" class="mb-5">
                                {!! $qrcode !!}
                            </div>
                            <div class="modal-footer" style="padding-right: 0">
                                
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            {{-- End Modal QR --}}
        </div>
    </div>
</div>

@endsection
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/invoicecreate.init.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/sweetAlert.js') }}"></script>

<script>
    function checkToCollectItem(checkbox){

        let checxboxId = checkbox.id;
        let itemNo = checxboxId.replace('collect-item-','');
        let serialInputName = 'serial-number-' + itemNo;

        if (checkbox.checked) {
            document.querySelectorAll(`input[name^="${serialInputName}"]`).forEach(input => {
                input.removeAttribute('readonly');
            });
        } else {

            document.querySelectorAll(`input[name^="${serialInputName}"]`).forEach(input => {
                input.setAttribute('readonly', true);
                input.value = '';
            });
        }
        
    }

    function showSerialNo(selectElement){
        let selectName = selectElement.name;
        let itemNo = selectName.replace('selected-stock-quantity-','');
        let selectedQty = parseInt(selectElement.value);
        let serialInputName = 'serial-number-' + itemNo;

        document.querySelectorAll(`input[name^="${serialInputName}"]`).forEach(input => {
            input.style.display = 'none';
            input.value = '';
        });

        for(let i=1; i<=selectedQty; i++){
            let inputToShow = document.querySelector(`input[name="${serialInputName}-${i}"]`);
            if(inputToShow){
                inputToShow.style.display = 'block';
            }
        }
    }

    function validateform(){
        let collectedItems = document.querySelectorAll('input[type="checkbox"][id^="collect-item-"]:checked');

        if (collectedItems.length === 0) {
            Swal.fire({
                        icon: 'error',
                        title: 'Failed to submit.',
                        text: 'Please select at least one item to collect.',
                    });
            return;
        }

        for (let checkbox of collectedItems) {
            let itemNo = checkbox.id.replace('collect-item-', '');
            let selectedQty = parseInt(document.querySelector(`select[name="selected-stock-quantity-${itemNo}"]`).value);
            let serialInputs = [];
            for (let i = 1; i <= selectedQty; i++) {
                let input = document.querySelector(`input[name="serial-number-${itemNo}-${i}"]`);
                if (input) serialInputs.push(input);
            }

            if (serialInputs.length === 0) {
                let input = document.querySelector(`input[name="serial-number-${itemNo}"]`);
                if (input) serialInputs.push(input);
            }

            for (let input of serialInputs) {
                if (input.style.display !== 'none' && input.value.trim() === '') {
                    input.focus();
                    Swal.fire({
                        icon: 'error',
                        title: 'Missing Serial No.',
                        text: 'Please enter serial number for collected item.',
                    });
                    return;
                }
            }
        }
        // document.getElementById('collection-form').submit();
        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to submit the collection?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, submit',
            cancelButtonText: 'No, cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('collection-form').submit();
            }
        });

    }
</script>
@endsection