@extends('admin.layouts.layouts')

@section('title', 'Employee Asset')

@section('content')
   <div class="page-header">
        <h3 class="page-title">{{ $employeeDetail->employee_name }}'s Asset</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('employee-master.index') }}">Employee Master</a></li>
                <li class="breadcrumb-item" aria-current="page">{{ $employeeDetail->employee_name }}'s Asset</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <form method="POST" action="{{ route('employee-asset.update', $employeeDetail->id) }}" id="employeeAssetForm">
            @csrf
            <input type="hidden" name="employee_master_id" id="employee_master_id" value="{{ $employeeDetail->id ?? '' }}">

            <div class="card-body">
                <div class="col-md-12">
                    <table class="table table-bordered" id="employeeAssetTable">
                        <thead>
                            <tr>
                                <th>Asset Category</th>
                                <th>Asset</th>
                                <th>Serial No</th>
                                <th>Generated Code</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="employeeAssetContainer">
                            @forelse($employeeAssets as $empAsset)
                                <tr class="employee-asset-row">
                                    <td>
                                        <select name="asset_category_id[]" class="form-control asset-category"
                                            data-parsley-required
                                            data-parsley-required-message="Please select asset category"
                                            data-selected="{{ $empAsset->asset_category_id }}">
                                            <option value="">Select Asset Category</option>
                                            @foreach ($assetCategories as $key => $assetCategory)
                                                <option value="{{ $key }}" {{ $empAsset->asset_category_id == $key ? 'selected' : '' }}>
                                                    {{ $assetCategory }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="asset_id[]" class="form-control asset"
                                            data-parsley-required
                                            data-parsley-required-message="Please select asset"
                                            data-selected="{{ $empAsset->asset_id }}">
                                            <option value="">Select Asset</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select name="serial_no[]" class="form-control serial-no"
                                            data-parsley-required
                                            data-parsley-required-message="Please select serial no"
                                            data-selected="{{ $empAsset->assetInventoryItem?->serial_no }}">
                                            <option value="">Select Serial No</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control generated-code" value="{{ $empAsset->code }}" readonly>
                                    </td>
                                    <td>
                                        @if($loop->first)
                                            <button type="button" class="btn btn-sm btn-primary" id="addAssetInventoryItem">
                                                <i class="fa fa-plus"></i> Add
                                            </button>
                                        @else
                                            <button type="button" class="btn btn-danger btn-sm remove-row">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr class="employee-asset-row">
                                    <td>
                                        <select name="asset_category_id[]" class="form-control asset-category" data-parsley-required data-parsley-required-message="Please select asset category">
                                            <option value="">Select Asset Category</option>
                                            @foreach ($assetCategories as $key => $assetCategory)
                                                <option value="{{ $key }}">{{ $assetCategory }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="asset_id[]" class="form-control asset" data-parsley-required data-parsley-required-message="Please select asset">
                                            <option value="">Select Asset</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select name="serial_no[]" class="form-control serial-no" data-parsley-required data-parsley-required-message="Please select serial no">
                                            <option value="">Select Serial No</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control generated-code" readonly>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-primary" id="addAssetInventoryItem"><i class="fa fa-plus"></i> Add</button>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>

                    </table>
                </div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-primary" id="updateEmployeeAsset">Update</button>
            </div>
        </form>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var getAssetByAssetCategory = "{{ route('get-asset') }}";
        var getAssetInventoryItems = "{{ route('get-asset-inventory-item') }}";
        var employeeId = $('#employee_master_id').val();
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#addAssetInventoryItem').on('click', function () {
                addRow();
            });

            function addRow() {
                let rowHtml = `
                    <tr class="employee-asset-row">
                        <td>
                            <select name="asset_category_id[]" class="form-control asset-category"
                                data-parsley-required data-parsley-required-message="Please select asset category">
                                <option value="">Select Asset Category</option>
                                @foreach ($assetCategories as $key => $assetCategory)
                                    <option value="{{ $key }}">{{ $assetCategory }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <select name="asset_id[]" class="form-control asset"
                                data-parsley-required data-parsley-required-message="Please select asset">
                                <option value="">Select Asset</option>
                            </select>
                        </td>
                        <td>
                            <select name="serial_no[]" class="form-control serial-no"
                                data-parsley-required data-parsley-required-message="Please select serial no">
                                <option value="">Select Serial No</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" class="form-control generated-code" readonly>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm remove-row"><i class="fa fa-trash"></i></button>
                        </td>
                    </tr>`;
                $('#employeeAssetContainer').append(rowHtml);
            }

            // Remove row
            $(document).on('click', '.remove-row', function () {
                $(this).closest('tr').remove();
                refreshSerialOptions();
            });

            // Load assets when category changes
            $(document).on('change', '.asset-category', function () {
                let $row = $(this).closest('tr');
                let categoryId = $(this).val();
                let $assetSelect = $row.find('.asset');

                $assetSelect.html('<option value="">Select Asset</option>');
                $row.find('.serial-no').html('<option value="">Select Serial No</option>');
                $row.find('.generated-code').val('');

                if (categoryId) {
                    $.get(getAssetByAssetCategory, { asset_category_id: categoryId }, function (data) {
                        $.each(data, function (i, asset) {
                            $assetSelect.append('<option value="' + asset.id + '">' + asset.name + '</option>');
                        });
                    });
                }
            });

            // Load serials when asset changes
            $(document).on('change', '.asset', function () {
                let $row = $(this).closest('tr');
                let assetId = $(this).val();
                let $serialSelect = $row.find('.serial-no');

                $serialSelect.html('<option value="">Select Serial No</option>');
                $row.find('.generated-code').val('');

                if (assetId) {
                    $.get(getAssetInventoryItems, { asset_id: assetId, employee_id: employeeId }, function (serials) {
                        $.each(serials, function (i, item) {
                            $serialSelect.append(
                                `<option value="${item.serial_no}" data-code="${item.code}">${item.serial_no}</option>`
                            );
                        });
                        refreshSerialOptions(); // filter out already selected
                    });
                }
            });

            // Update generated code on serial change
            $(document).on('change', '.serial-no', function () {
                let $row = $(this).closest('tr');
                $row.find('.generated-code').val($(this).find(':selected').data('code') || '');
                refreshSerialOptions();
            });

            // Refresh serial dropdowns (prevent duplicates across rows)
            function refreshSerialOptions() {
                let selected = [];
                $('.serial-no').each(function () {
                    let val = $(this).val();
                    if (val) selected.push(val);
                });

                $('.serial-no').each(function () {
                    let currentVal = $(this).val();
                    $(this).find('option').each(function () {
                        let optVal = $(this).val();
                        $(this).toggle(optVal === "" || optVal === currentVal || !selected.includes(optVal));
                    });
                });
            }

            // Preload existing employee assets (edit mode)
            $('#employeeAssetContainer').find('tr').each(function () {
                loadAssetsAndSerials($(this));
            });

            function loadAssetsAndSerials($row) {
                let categoryId    = $row.find('.asset-category').attr('data-selected') || $row.find('.asset-category').val();
                if (!categoryId) return;

                let selectedAsset  = $row.find('.asset').attr('data-selected') || $row.find('.asset').val();
                let selectedSerial = $row.find('.serial-no').attr('data-selected') || $row.find('.serial-no').val();

                $.get(getAssetByAssetCategory, { asset_category_id: categoryId }, function (assets) {
                    let $assetSelect = $row.find('.asset');
                    $assetSelect.html('<option value="">Select Asset</option>');

                    $.each(assets, function (i, asset) {
                        let selected = (asset.id == selectedAsset) ? 'selected' : '';
                        $assetSelect.append(`<option value="${asset.id}" ${selected}>${asset.name}</option>`);
                    });

                    if (selectedAsset) {
                        $.get(getAssetInventoryItems, { asset_id: selectedAsset, employee_id: employeeId }, function (serials) {
                            let $serialSelect = $row.find('.serial-no');
                            $serialSelect.html('<option value="">Select Serial No</option>');

                            $.each(serials, function (i, item) {
                                $serialSelect.append(`<option value="${item.serial_no}" data-code="${item.code}">${item.serial_no}</option>`);
                            });

                            if (selectedSerial) {
                                $serialSelect.val(selectedSerial);
                                let selectedOption = $serialSelect.find(':selected');
                                $row.find('.generated-code').val(selectedOption.data('code') || '');
                            }

                            refreshSerialOptions();
                        });
                    }
                });
            }

            $('#employeeAssetForm').on('submit', function (e) {
                e.preventDefault();

                const $form = $(this);
                const $btn = $('#updateEmployeeAsset');
                const id = $('#id').val();

                let url = "{{ route('employee-asset.update') }}";

                if (!$form.parsley().validate()) return;

                $btn.prop('disabled', true).html(`
                    <span class="spinner-border spinner-border-sm" role="status"></span> Updating
                `);

                // Clear old validation
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('.invalid-feedback').remove();

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.success) {
                            toastr.success(data.message);
                            // optional redirect or reload
                            setTimeout(function() {
                                window.location.reload();
                            }, 3000);
                            // window.location.href = "{{ route('employee-master.index') }}";
                        } else {
                            toastr.error(data.message || 'Something went wrong.');
                            $btn.prop('disabled', false).html('Update');
                        }
                    },
                    error: function (xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function (key, messages) {
                                let $input = $(`[name="${key}"]`);
                                if (!$input.length) {
                                    // handle array fields like asset_id[0]
                                    $input = $(`[name="${key.replace('.', '\\[')}\\]"]`);
                                }
                                $input.addClass('is-invalid');
                                $input.after(`<div class="invalid-feedback">${messages[0]}</div>`);
                            });
                        }
                        $btn.prop('disabled', false).html('Update');
                    }
                });
            });
        });
    </script>
@endsection