@extends('backend.layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    <div class="left-card">
                        <h3 class="mb-2">New Committee</h3>
                        <div id="items-table">
                            <form action="{{ route('commeety.store') }}" method="POST" enctype="multipart/form-data"
                                id="ajax_form_data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="mb-4">
                                            <input type="text" name="title" placeholder="Enter title here"
                                                class="w-full text-2xl border p-2 rounded form-control custom-form"
                                                required>
                                        </div>
                                        <div class="mb-4">
                                            <textarea id="editor" name="description" class="w-full border p-2 rounded h-60 form-control custom-form"></textarea>
                                        </div>
                                        <hr>
                                        <h4 class="font-bold mb-2">Committee Details</h4>

                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Order</th>
                                                    <th>Member</th>
                                                    <th>Designation</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="committeeDetailsBody"></tbody>
                                        </table>
                                        <div class="text-center">
                                            <button type="button" id="addMoreRow" class="btn btn-sm btn-success mb-3">
                                                Add More
                                            </button>
                                        </div>

                                    </div>
                                    <div class="col-md-4">
                                        <div class="space-y-4">
                                            <div class="border p-2">
                                                <h4 class="font-bold mb-2">Publish Date</h4>
                                                <input type="date" name="publish_date"
                                                    class="w-full border p-1 rounded form-control custom-form"
                                                    value="{{ date('Y-m-d') }}" required>
                                            </div>
                                            <div class="border p-2">
                                                <h4 class="font-bold mb-2">Session</h4>
                                                <select name="session_id" class="form-control" required>
                                                    <option value="">Select Session</option>
                                                    @foreach ($sessions as $session)
                                                        <option value="{{ $session->id }}">{{ $session->session }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="border p-2">
                                                <input type="checkbox" name="is_active" value="1"
                                                    id="is_active_checkbox">
                                                <label for="is_active_checkbox" class="form-label fw-medium text-dark">Is
                                                    Active</label>
                                            </div>
                                            <div class="border p-2 rounded">
                                                <button type="submit"
                                                    class="bg-purple-700 text-white px-4 py-2 rounded btn btn-primary form-control custom-form">Publish</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
<script>
    tinymce.init({
        selector: '#editor',
        height: 300,
        menubar: false,
        plugins: 'link image code lists',
        toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | code',
    });

    $(document).ready(function () {
        const members = @json($members);
        const designations = @json($designation);
        let rowIndex = 0;

        function createMemberOptions() {
            let options = '<option value="">Select Member</option>';
            members.forEach(member => {
                options += `<option value="${member.id}">${member.full_name}</option>`;
            });
            return options;
        }

        function createDesignationOptions() {
            let options = '<option value="">Select Designation</option>';
            designations.forEach(desig => {
                options += `<option value="${desig.id}">${desig.name}</option>`;
            });
            return options;
        }

        function updateOrders() {
            $('#committeeDetailsBody tr').each(function (index) {
                // Update visible order number
                $(this).find('td:first').text(index + 1);
                // Update hidden input name and value
                $(this).find('input[name$="[order]"]').val(index + 1);
            });
        }

        function addRow() {
            rowIndex++;
            const rowHtml = `
                <tr id="row_${rowIndex}">
                    <td>${rowIndex}</td>
                    <td><input type="number" name="details[${rowIndex}][order]" class="form-control" readonly></td>
                    <td>
                        <select name="details[${rowIndex}][member_id]" class="form-control" required>
                            ${createMemberOptions()}
                        </select>
                    </td>
                    <td>
                        <select name="details[${rowIndex}][designation_id]" class="form-control" required>
                            ${createDesignationOptions()}
                        </select>
                    </td>
                    <td>
                        <button type="button" class="btn btn-light btn-sm removeRow" data-row-id="${rowIndex}">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;
            $('#committeeDetailsBody').append(rowHtml);
            updateOrders(); // re-number after adding
        }

        // Initial row
        addRow();

        // Add more row
        $('#addMoreRow').click(function () {
            addRow();
        });

        // Remove row and reorder
        $(document).on('click', '.removeRow', function () {
            const rowId = $(this).data('row-id');
            $(`#row_${rowId}`).remove();
            updateOrders();
        });
    });
</script>
@endpush