@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">Edit Committee</h3>
                        <div id="items-table">
                            <form action="{{ route('commeety.update', $committee->id) }}" 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" value="{{ $committee->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">{{ $committee->description }}</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">
                                                @foreach ($committee->committee_details as $index => $detail)
                                                    <tr id="row_{{ $index }}">
                                                        <td>{{ $index + 1 }}</td>
                                                        <td><input type="number" name="details[{{ $index }}][order]" class="form-control" value="{{ $index + 1 }}" readonly></td>
                                                        <td>
                                                            <select name="details[{{ $index }}][member_id]" class="form-control" required>
                                                                @foreach ($members as $member)
                                                                    <option value="{{ $member->id }}" {{ $member->id == $detail->member_id ? 'selected' : '' }}>{{ $member->full_name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <select name="details[{{ $index }}][designation_id]" class="form-control" required>
                                                                @foreach ($designation as $desig)
                                                                    <option value="{{ $desig->id }}" {{ $desig->id == $detail->designation_id ? 'selected' : '' }}>{{ $desig->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-light btn-sm removeRow" data-row-id="{{ $index }}">
                                                                <i class="fa fa-trash"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </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="{{ $committee->publish_date }}" 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->id == $committee->session_id ? 'selected' : '' }}>{{ $session->session }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="border p-2">
                                                <input type="checkbox" name="is_active" value="1" id="is_active_checkbox" {{ $committee->is_active ? 'checked' : '' }}>
                                                <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">Update</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