@extends('layouts.admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">

<style>
    .form-group {
        margin-bottom: 3px;
    }

    #unitname {
        position: relative;
        top: 11px;
    }

    #btn_loading {
        display: none;
    }
</style>
@endpush

@section('content')
<section class="content">
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">Outlet Requisition Edit</h3>
                    </div>
                    <div class="card-body">
                        <!-- Search Form -->
                        <form id="searchForm" class="form-horizontal" method="GET" action="{{ route('inventory.outletRequestEdit') }}">
                            @csrf
                            <div class="row">
                                <!-- Request Type -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="req_type">Request Type: <span class="text-danger">*</span></label>
                                        <select id="req_type" name="req_type" class="form-control form-control-sm" required>
                                            <option value="sale">Sale Product</option>
                                            <option value="combo">Combo Product</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- Date -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="reciDate">Date:</label>
                                        <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                            <input type="text" name="reciDate" id="reciDate" class="form-control form-control-sm datetimepicker-input" data-target="#reservationdate" value="{{ $reciDate }}" placeholder="Enter Date" required>
                                            <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Outlet -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="outlet_id">Outlet: <span class="text-danger">*</span></label>
                                        <select id="outlet_id" name="outlet_id" class="form-control form-control-sm select2" required>
                                            <option value="">Select Outlet</option>
                                            @foreach($outlet as $v)
                                            <option value="{{ $v->id }}" {{ $v->id == auth()->user()->outlet_id ? 'selected' : '' }}>{{ $v->outlet_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <!-- Category -->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="cat_id">Category</label>
                                        <select id="cat_id" name="cat_id" class="form-control form-control-sm">
                                            <option value="">Select Category</option>
                                            @foreach($categories as $v)
                                            <option value="{{ $v->id }}" {{ $cat_id == $v->id ? 'selected' : '' }}>{{ $v->cat_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <!-- Search Button -->
                                <div class="col-md-1">
                                    <label class="d-block text-white">.</label>
                                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                                </div>
                            </div>
                        </form>


                            <table class="table table-sm mt-3">
                                <thead>
                                    <tr>
                                        <th>Sl</th>
                                        <th>Date</th>
                                        <th>Product</th>
                                        <th>Unit</th>
                                        <th>Req Qty.</th>
                                        <th>Price</th>
                                        <th>Req.Edit Qty.</th>
                                        <th>Outlet</th>
                                        <th style="width:90px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($products as $index => $pro)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ date('d-m-Y', strtotime($pro->req_date)) }}</td>
                                        <td>{{ $pro->product_name }}</td>
                                        <td>{{ $pro->unit_name }}</td>
                                        <td>{{ $pro->req_qty }}</td>
                                        <td>{{ $pro->unitprice }}</td>
                                        <td><input type="text" class="receiveQty form-control form-control-sm text-center" style="width: 80px;" name="receiveQty[]" step="any" value="{{ $pro->req_qty }}"></td>
                                        <td>{{ $pro->outlet_name }}</td>
                                        <td>
                                            <button type="button" data-reqid="{{$pro->id}}" class="update_req btn btn-primary btn-xs">Update</button>
                                            <button type="button" data-reqid="{{$pro->id}}" class="del_req btn btn-danger btn-xs">x</button>
                                        </td>

                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>
<script>
    $(function() {
        // Initialize datetimepicker
        $('#reservationdate').datetimepicker({
            format: 'DD-MM-YYYY'
        });

        // Initialize Select2
        $('.select2').select2();

        $(".update_req").click(function () {
            let receiveQty = $(this).closest("tr").find(".receiveQty").val();

            let reqid = $(this).data("reqid");

            if (reqid && receiveQty > 0) {

                let route = "{{ route('inventory.outletRequestupdate') }}";

                $.get( route, { reqid: reqid, receiveQty: receiveQty } )
                .done(function( data ) {

                    if(data){

                    alert('Requisition Qty Update Successfully!');

                }else{
                    alert('Requisition Not Update!');
                }

                });


            } else {
                alert("Invalid input or missing request ID.");
            }
        });


        $(".del_req").click(function () {

            let selec = this;

            let receiveQty = parseFloat($(this).closest("tr").find(".receiveQty").val());

            let reqid = $(this).data("reqid");

            if (reqid && receiveQty > 0) {

                if (confirm('Are you sure you want to delete this record?')) {

                    let route = "{{ route('inventory.outletRequestDelete') }}";

                    $.get(route, { reqid: reqid, receiveQty: receiveQty })
                        .done(function (data) {
                            if(data){

                            $(selec).closest("tr").remove();
                            alert('Requisition Qty deleted successfully!');
                        }else{
                            alert("Requisition Not deleted!");
                        }
                        })
                        .fail(function () {
                            alert('Failed to delete the record. Please try again.');
                        });
                }

            } else {
                alert("Invalid input or missing request ID.");
            }
        });


        // Handle receiveQty input changes
        $(".receiveQty").keyup(function() {
            const rcvQty = parseFloat($(this).val());
            const reqQty = parseFloat($(this).data("req"));
            const pendingQty = parseFloat($(this).data("reqpending"));

            if (rcvQty < 0 || rcvQty > reqQty || (pendingQty && rcvQty > pendingQty)) {
                alert('Please enter a valid amount!');
                $(this).val('');
            } else {
                const remainingQty = pendingQty ? pendingQty - rcvQty : reqQty - rcvQty;
                $(this).closest('tr').find('.prndingQty').val(remainingQty);
            }
        });
    });
</script>
@endpush