@extends('admin.layouts.layouts')

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

@section('content')
    {{-- Reason Modal --}}
    <div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelledby="reasonModalLabel" aria-hidden="true"
        data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="max-width: 550px;">
            <div class="modal-content border-0 shadow-lg rounded-3">
                <div class="modal-header bg-primary text-white py-2">
                    <h5 class="modal-title" id="reasonModalLabel">
                        Free Asset Allocation
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fa fa-times"></i></span>
                    </button>
                </div>
                <form method="POST" id="reason-form">
                    @csrf
                    <input type="hidden" id="employee_asset_id" name="employee_asset_id" value="">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="reason" class="form-label">Reason</label>
                                    <textarea name="reason" id="reason" class="form-control" rows="5" placeholder="Enter Reason"
                                        data-parsley-required="true" data-parsley-required-message="Please enter reason."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-sm btn-danger">
                            <i class="fa fa-times" aria-hidden="true"></i> Cancel
                        </button>
                        <button type="submit" id="submit-btn" class="btn btn-sm btn-primary">
                            <i class="fa fa-save"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <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">
                            <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>
                        </tbody>
                    </table>
                </div>
            </div>

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

    <div class="card mt-4">
        <div class="card-header">
            <h3 class="card-title mb-0">Employee Asset List</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="table-responsive">
                    <div class="col-md-12">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Category</th>
                                    <th>Asset</th>
                                    <th>Serial No.</th>
                                    <th>Generated Code</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($employeeAssets) > 0)
                                    @foreach ($employeeAssets as $asset)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $asset->assetCategory->name ?? '' }}</td>
                                            <td>{{ $asset->asset->name ?? '' }}</td>
                                            <td>{{ $asset->assetInventoryItem->serial_no ?? '' }}</td>
                                            <td>{{ $asset->assetInventoryItem->code ?? '' }}</td>
                                            <td>
                                                <a href="javascript:void(0);" class="btn btn-xs btn-primary btn-free"
                                                    title="Free Asset" data-id="{{ $asset->id }}">
                                                    Free Asset
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </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');
                    }
                });
            });

            // Function for open free asset allocation modal
            $(document).on('click', '.btn-free', function() {
                const id = $(this).data('id');
                const $form = $('#reason-form').trigger('reset').parsley().reset();
                $('#employee_asset_id').val(id);
                $('#reasonModal').modal('show');
            });

            // Initialized parsley validation for reason form
            $('#reasonModal #reason-form').parsley();

            // Function for free asset & save reason data
            $('#reasonModal #reason-form').on("submit", function(e) {
                e.preventDefault();

                const $form = $(this);
                const $btn = $('#submit-btn').prop('disabled', true).html(
                    '<i class="fa fa-save"></i> Saving...');

                if (!$form.parsley().isValid()) {
                    return $btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save');
                }

                $.ajax({
                    type: "POST",
                    url: "{{ route('employee-asset.free') }}",
                    data: $form.serialize(),
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    success: function(res) {
                        if (res.success) {
                            $form.trigger("reset");
                            $('#reasonModal').modal("hide");
                            toastr.success(res.message);
                            setTimeout(() => location.reload(), 1200);
                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function() {
                        toastr.error("An error occurred while saving data.");
                    },
                    complete: function() {
                        $btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save');
                    }
                });
            });
        });
    </script>
@endsection