@extends('layouts.sale')

@section('content')
    <div class="content-wrapper" ng-app="tutapos">
        <!-- Content Header (Page header) -->
        <section class="content-header m-3">
            <h1>New Installation</h1>
        </section>
        <!-- Main content -->
        <section class="content" id="receivingContent">
            <div class="row">
                <div class="col-xs-12">
                    <!-- First Card: Installation Details -->
                    <div class="box box-success">
                        <div class="box-header">
                            <h3 class="box-title">Installation Details</h3>
                        </div>
                        <div class="box-body">
                            @include('partials.flash')
                            <div class="row" ng-controller="SearchItemCtrl">
                                <div class="col-sm-12">
                                    <form id="myForm" action="/Backoffice/submit-installation" method="POST">
                                        <div class="row justify-content-center py-4 px-2">
                                            <!-- Installation No. Field -->
                                            <div class="col-sm-3 text-center">
                                                <div class="form-group mb-3">
                                                    <label for="invoice" class="control-label d-block mb-2">Installation
                                                        No.</label>
                                                    <input type="text" name="invoice_no"
                                                        class="form-control text-center mx-auto" id="invoice"
                                                        value="{{ $action == 'add' ? $invoice : $receiving->invoice_no }}"
                                                        readonly />
                                                </div>
                                            </div>

                                            <!-- Assigned To Field -->
                                            <div class="col-sm-3 text-center">
                                                <div class="form-group mb-3">
                                                    <label for="staff_id" class="control-label d-block mb-2">Assigned
                                                        To</label>
                                                    <select id="staff_dropdown"
                                                        class="form-control select2 text-center mx-auto" name="staff_id"
                                                        required>
                                                        <option value="">Select Staff</option>
                                                        @foreach ($staffs as $staff)
                                                            <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <!-- Centered Add Button -->
                                                <div class="d-flex justify-content-center mt-2">
                                                    <a class="btn btn-success" href="/employees" target="_blank">
                                                        <i class="fa fa-plus"></i>&nbsp; {{ __('Add') }}
                                                    </a>
                                                </div>
                                            </div>

                                            <!-- Customer Field -->
                                            <div class="col-sm-3 text-center">
                                                <div class="form-group mb-3">
                                                    <label for="customer_id"
                                                        class="control-label d-block mb-2">Customer</label>
                                                    <select id="customer_dropdown"
                                                        class="form-control select2 text-center mx-auto" name="customer_id"
                                                        required>
                                                        <option value="">Select Customer</option>
                                                        @foreach ($customers as $customer)
                                                            <option value="{{ $customer->id }}">{{ $customer->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <!-- Centered Add Button -->
                                                <div class="d-flex justify-content-center mt-2">
                                                    <a class="btn btn-success" href="/Backoffice/leads" target="_blank">
                                                        <i class="fa fa-plus"></i>&nbsp; {{ __('Add') }}
                                                    </a>
                                                </div>
                                            </div>

                                            {{-- Installation Date --}}

                                            <div class="col-md-3 offset-md-4 text-center">
                                                <div class="form-group">
                                                    <label for="installation_date">Installation Date</label>
                                                    <input type="date" name="installation_date" class="form-control"
                                                        id="installation_date">
                                                </div>
                                            </div>

                                            <input type="hidden" name="meter_id" id="hidden_meter_id">
                                            <input type="hidden" name="starting_value" id="hidden_starting_value">

                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Second Card: Product Selection -->
                    <div class="box box-success">
                        <div class="box-header">
                            <h3 class="box-title">Product Selection</h3>
                        </div>
                        <div class="box-body">
                            {{-- <div class=" text-center mb-4">
                                <span style="font-size:18px;">Kindly add the products needed for the new customer installation</span>
                            </div> --}}

                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th class="hidden-xs" width="20%">Category Type</th>
                                        <th width="30%">Product Name</th>
                                        <th width="15%">Quantity</th>
                                        {{-- <th width="20%">Installation Date</th> --}}
                                        <th width="10%">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="stock_table"></tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="6" class="text-center">
                                            <a href="#" data-toggle="modal" data-target="#add_installation_products"
                                                class="btn " style="background-color: #0c3d55; color:white">
                                                <i class="fa fa-plus"></i> {{ __('Add Products') }}
                                            </a>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>

                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <button id="submitinstallationBtn" type="button"
                                        class="btn btn-success btn-lg pull-right">
                                        <i class="fa fa-save"></i> Save Installation
                                    </button>
                                </div>
                            </div>

                            <!-- Product Modal -->
                            <div class="modal fade" id="add_installation_products" tabindex="-1" role="dialog"
                                aria-labelledby="myModalLabel">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">
                                                {{ __('Installation Item Details') }}</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-12 col-md-4">
                                                    <div class="form-group">
                                                        <label for="category_id">Category</label>
                                                        <select class="form-control" name="category_id" id="category_id">
                                                            <option value="" selected>Select Category</option>
                                                            @foreach ($categories as $category)
                                                                <option value="{{ $category->id }}"
                                                                    data-name="{{ $category->name }}">
                                                                    {{ $category->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-4">
                                                    <div class="form-group">
                                                        <label for="item_id">Product</label>
                                                        <select class="form-control" name="item_id" id="item_id">
                                                            <option value="" selected>Select Item</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-4">
                                                    <div class="form-group">
                                                        <label for="item_quantity">Quantity</label>
                                                        <input type="number" name="item_quantity" class="form-control"
                                                            id="item_quantity" placeholder="{{ __('Qty') }}"
                                                            required>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- <div class="row">
                                                <div class="col-12 col-md-4 offset-md-4">
                                                    <div class="form-group">
                                                        <label for="installation_date">Installation Date</label>
                                                        <input type="date" name="installation_date" class="form-control" id="installation_date">
                                                    </div>
                                                </div>
                                            </div> --}}

                                            <hr>
                                            <div class="text-center mt-3">
                                                <button id="add_stock_item" class="btn btn-success">
                                                    <i class="fa fa-plus"></i> Add Item
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Meter Selection Modal -->
                            <div class="modal fade" id="selectMeterModal" tabindex="-1" role="dialog">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title">Select Meter & Initial Reading</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group">
                                                <label for="meter_id">Available Meters</label>
                                                <select class="form-control select2" id="meter_id_select" style="width: 100%;">
                                                    <option value="">Select Meter</option>
                                                    @foreach ($unassigned_meters as $meter)
                                                        <option value="{{ $meter->id }}">{{ $meter->meter_number }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="starting_value">Initial Reading</label>
                                                <input type="number" step="0.01" class="form-control" id="starting_value_input" placeholder="0.00">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                            <button type="button" id="confirmMeterBtn" class="btn btn-success">Confirm & Save Installation</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </section>
    </div>
@endsection

@section('script')
    <script type="text/javascript" src="{{ asset('js/angular.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/recevings.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#category_id').on('change', function() {
                var categoryId = $(this).val();

                $.ajax({
                    url: '/get-items',
                    type: 'GET',
                    data: {
                        category_id: categoryId
                    },
                    success: function(response) {
                        $('#item_id').empty();
                        $('#item_id').append($('<option>', {
                            value: '',
                            text: 'Select Item'
                        }));

                        $.each(response.items, function(index, item) {
                            $('#item_id').append($('<option>', {
                                value: item.id,
                                text: item.name,
                                'data-name': item.name
                            }));
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });

            $('#add_stock_item').on('click', function() {
                var category_id = $('#category_id').val();
                var category_name = $('#category_id option:selected').data('name');
                var item_id = $('#item_id').val();
                var item_name = $('#item_id option:selected').data('name');
                var quantity = $('#item_quantity').val();
                // var installation_date = $('#installation_date').val();

                if (category_id == "" || item_id == "" || quantity == "") {
                    alert("Please fill all required fields");
                    return;
                }


                        var rowCount = $('#stock_table tr').length + 1;
                        var newRow = '<tr>' +
                            '<td>' + rowCount + '</td>' +
                            '<td style="display:none">' + category_id + '</td>' +
                            '<td class="hidden-xs">' + category_name + '</td>' +
                            '<td style="display:none">' + item_id + '</td>' +
                            '<td>' + item_name + '</td>' +
                          
                            '<td>' + quantity + '</td>' +
                            // '<td>' + (installation_date || 'Not specified') + '</td>' +
                            '<td>' +
                            '<button class="btn btn-xs btn-danger remove-item"><i class="fa fa-trash"></i></button>' +
                            // '<input type="hidden" name="items[' + rowCount + '][category_id]" value="' + category_id + '">' +
                            // '<input type="hidden" name="items[' + rowCount + '][item_id]" value="' + item_id + '">' +
                            // '<input type="hidden" name="items[' + rowCount + '][quantity]" value="' + quantity + '">' +
                            // '<input type="hidden" name="items[' + rowCount + '][installation_date]" value="' + installation_date + '">' +
                            '</td>' +
                            '</tr>';

                $('#stock_table').append(newRow);
                $("#add_installation_products").modal('hide');

                // Reset form fields
                $('#category_id').val('');
                $('#item_id').empty().append('<option value="">Select Item</option>');
                $('#item_quantity').val('');
                // $('#installation_date').val('');
            });


      

            // Remove item from table
            $(document).on('click', '.remove-item', function() {
                $(this).closest('tr').remove();
                // Renumber rows
                $('#stock_table tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            });
            $('#submitinstallationBtn').click(function() {
                // Check for required fields
                var staff_id = $('#staff_dropdown').val();
                var customer_id = $('#customer_dropdown').val();
                var installation_date = $('#installation_date').val();

                if (staff_id == "" || customer_id == "") {
                            $.notify({ message: "Please select both staff and customer." }, { type: 'danger' });

                            return;
                        }

                        

                        if ($('#stock_table tr').length === 0) {
                            $.notify({ message: "Please add at least one product before submitting the request." }, { type: 'danger' });
                            return;
                        }

     
                var formData = {};

                $('#stock_table tr').each(function(index) {
                    var category_id = $(this).find('td:eq(1)').text();
                    var item_id = $(this).find('td:eq(3)').text();
                    var quantity = $(this).find('td:eq(5)').text();


                    formData['item_' + (index + 1)] = {
                        category_id: category_id,
                        item_id: item_id,
                        quantity: quantity
                    };
                });

                $.each(formData, function(key, value) {
                    $('#myForm').append($('<input>', {
                        type: 'hidden',
                        name: 'formData[' + key + '][category_id]',
                        value: value.category_id
                    }));
                    $('#myForm').append($('<input>', {
                        type: 'hidden',
                        name: 'formData[' + key + '][item_id]',
                        value: value.item_id
                    }));
                    $('#myForm').append($('<input>', {
                        type: 'hidden',
                        name: 'formData[' + key + '][quantity]',
                        value: value.quantity
                    }));

                });



                // Instead of direct submit, show the meter selection modal
                $('#selectMeterModal').modal('show');
            });

            $('#confirmMeterBtn').click(function() {
                var meter_id = $('#meter_id_select').val();
                var starting_value = $('#starting_value_input').val();

                if (meter_id == "") {
                    alert("Please select a meter.");
                    return;
                }

                if (starting_value == "") {
                    alert("Please enter the initial reading.");
                    return;
                }

                $('#hidden_meter_id').val(meter_id);
                $('#hidden_starting_value').val(starting_value);

                // Collect and append stock item data again before submission
                // (Redoing it here to ensure it's up-to-date)
                $('#myForm').find('input[name^="formData"]').remove();
                
                var formData = {};
                $('#stock_table tr').each(function(index) {
                    var category_id = $(this).find('td:eq(1)').text();
                    var item_id = $(this).find('td:eq(3)').text();
                    var quantity = $(this).find('td:eq(5)').text();

                    formData['item_' + (index + 1)] = {
                        category_id: category_id,
                        item_id: item_id,
                        quantity: quantity
                    };
                });

                $.each(formData, function(key, value) {
                    $('#myForm').append($('<input>', {
                        type: 'hidden',
                        name: 'formData[' + key + '][category_id]',
                        value: value.category_id
                    }));
                    $('#myForm').append($('<input>', {
                        type: 'hidden',
                        name: 'formData[' + key + '][item_id]',
                        value: value.item_id
                    }));
                    $('#myForm').append($('<input>', {
                        type: 'hidden',
                        name: 'formData[' + key + '][quantity]',
                        value: value.quantity
                    }));
                });

                // Submit the form
                $('#myForm').submit();
            });

        });
    </script>
@endsection