@push('title')
    Create Supplier
@endpush

<x-app-layout>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title mb-4">Add New Supplier</h5>
            <form action="{{ route('suppliers.store') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="name">Supplier Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required
                            value="{{ old('name') }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="phone">Supplier Phone</label>
                        <input type="text" class="form-control" id="phone" name="phone" value="{{ old('phone') }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="email">Supplier Email</label>
                        <input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="address">Supplier Address</label>
                        <input type="text" class="form-control" id="address" name="address"
                            value="{{ old('address') }}">
                    </div>

                    <!-- Supplier Representatives Section -->
                    <div class="col-md-12 mt-4 mb-3">
                        <div class="">
                            <h6 class="fw-bold mb-0">Supplier Representatives</h6>
                            <button type="button" class="btn btn-sm btn-secondary mt-3" id="addRep">
                                <i class='bx bx-plus-circle me-1'></i> Add Representative
                            </button>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div id="repsContainer">
                            <!-- Dynamic Rep Rows will be added here -->
                        </div>
                    </div>
                </div>

                <div class="row text-end mt-4">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary px-4">
                            Save
                        </button>
                        <a href="{{ route('suppliers') }}" class="btn btn-secondary px-4">
                            Cancel
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Template for Representation Row -->
    <template id="repRowTemplate">
        <div class="rep-row  mb-3">
            <div class="">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Rep Name <span class="text-danger">*</span></label>
                        <input type="text" name="reps[INDEX][name]" class="form-control" required
                            placeholder="Enter name">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">Rep Email</label>
                        <input type="email" name="reps[INDEX][email]" class="form-control" placeholder="Enter email">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Rep Phone</label>
                        <input type="text" name="reps[INDEX][phone]" class="form-control" placeholder="Enter phone">
                    </div>
                    <div class="col-md-2 text-end">

                        <button type="button" class="btn btn-icon btn-danger mr-1 mb-1  remove-rep">
                            <i class="bx bx-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>



    <style>
        .rep-row {
            transition: all 0.3s ease;
        }
    </style>
</x-app-layout>

<!-- Remove Rep Confirmation Modal -->
<div class="modal fade" id="removeRepModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-simple modal-enable-otp modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                <h3>Warning</h3>
                <p class="mb-2">Are you sure you want to remove this representative</p>
                <p class="mb-2">Representative Name :- <span id="repName"></span> </p>
                <p class="text-danger  mb-4"><strong>This action cannot be undone!</strong></p>

                <div class="d-flex justify-content-center gap-2">
                    <button type="button" id="confirmRemoveRep" class="btn btn-danger px-4">Delete
                        Representative</button>
                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        let repIndex = 0;
        let rowToRemove = null;

        function addRepRow() {
            const template = $('#repRowTemplate').html();
            const newRow = template.replace(/INDEX/g, repIndex);
            $('#repsContainer').append(newRow);
            repIndex++;
        }

        // Add initial row
        addRepRow();

        $('#addRep').on('click', function () {
            addRepRow();
        });

        $(document).on('click', '.remove-rep', function () {
            const row = $(this).closest('.rep-row');

            // Check if it's the only row
            if ($('.rep-row').length > 1) {
                rowToRemove = row;
                $('#removeRepModal').modal('show');
            } else {
                // Just clear the inputs if it's the last row
                row.find('input').val('');
            }
        });

        $('#confirmRemoveRep').on('click', function () {
            if (rowToRemove) {
                rowToRemove.addClass('animate__fadeOut');
                setTimeout(() => {
                    rowToRemove.remove();
                    rowToRemove = null;
                }, 500);
                $('#removeRepModal').modal('hide');
            }
        });

        // Status Alerts fade out
        setTimeout(() => {
            $(".alert").fadeOut(500);
        }, 5000);
    });
</script>