@extends('frontend.organization.organization_layouts')
@push('style')
    <style>
        .profile-container {
            /*  max-width: 1000px; */
            margin: 30px;
            background: #ffffff;
            padding: 30px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-radius: 10px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

        }

        .section-title {
            font-size: 1.8rem;
            font-weight: bold;
            color: #267bbd;
            margin-bottom: 25px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            font-weight: 600;
            color: #333;
        }

        .form-control {
            width: 100%;
            /*   padding: 10px 12px; */
            border: 1px solid #ccc;
            border-radius: 6px;
            /*    font-size: 14px; */
        }

        .form-control:focus {
            border-color: #267bbd;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .btn-submit {
            background-color: #267bbd;
            color: white;
            font-weight: bold;
            padding: 12px 30px;
            border: none;
            border-radius: 30px;
            transition: background-color 0.3s;
        }

        .btn-submit:hover {
            background-color: #1f5e88;
        }

        @media (max-width: 767px) {
            .profile-container {
                width: 100% !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 15px !important;
            }
        }

        @media (max-width: 767px) {
            .table-responsive table thead {
                display: none;
            }

            .table-responsive table tbody tr {
                display: block;
                margin-bottom: 15px;
                border: 1px solid #ddd;
                border-radius: 8px;
                padding: 10px;
            }

            .table-responsive table tbody tr td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 6px 10px;
                border: none;
            }

            .table-responsive table tbody tr td::before {
                content: attr(data-label);
                font-weight: 600;
                flex: 1;
                color: #267bbd;
            }
        }
    </style>
@endpush

@section('member-content')
    <div class="profile-container">
        <h4 class="section-title">Committee information</h4>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form action="{{ route('organization.commeety_store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label class="form-label">Committee Title</label>
                        <input type="text" name="title" class="form-control" placeholder="Enter committee title"
                            required value="{{ old('title')}}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="editor" class="form-control"></textarea>
                    </div>

                    <hr>
                    <h4 class="section-title" style="font-size: 1.4rem">Committee Members</h4>
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle mb-0">
                            <thead class="table-light custom-table-header">
                                <tr>
                                    <th>#</th>
                                    <th>Order</th>
                                    <th colspan="2">Member Photo</th>
                                    <th>Member Name</th>
                                    <th>Designation</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="committeeDetailsBody"></tbody>
                        </table>
                    </div>
                    <div class="text-center mb-3">
                        <button type="button" id="addMoreRow" class="btn btn-sm btn-success">+ Add Member</button>
                    </div>

                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label">Publish Date</label>
                        <input type="date" name="publish_date" class="form-control"
                            value="{{ old('publish_date') }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Session</label>
                        <input type="text" name="session" class="form-control"
                            value="{{ old('session') }}" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Committee Photo (Cover)</label> <br>
                        <input type="file" name="photo" class="form-control">
                    </div>

                    <hr>
                    <div class="form-group text-center mt-4">
                        <button type="submit" class="btn btn-submit">Save Committee</button>
                    </div>

                </div>
            </div>

        </form>
    </div>
@endsection

@push('script')
    <script src="https://cdn.tiny.cloud/1/5826xqjwothghh0q84bdrrurjpdyii6tkx1lxqdemxlwruxq/tinymce/6/tinymce.min.js">
    </script>
    <script>
        tinymce.init({
            selector: '#editor',
            height: 200,
            menubar: false,
            plugins: 'link image code lists',
            toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | code',
        });

        $(document).ready(function() {
            let rowIndex = 1;

            function updateOrders() {
                $('#committeeDetailsBody tr').each(function(i) {
                    $(this).find('td:first').text(i + 1);
                    $(this).find('input[name$="[order]"]').val(i + 1);
                });
            }

            function addRow() {
                rowIndex++;
                $('#committeeDetailsBody').append(`
                    <tr id="row_${rowIndex}">
                        <td>${rowIndex}</td>
                        <td><input type="number" name="details[${rowIndex}][order]" class="form-control"></td>
                        <td colspan="2"><input type="file" name="details[${rowIndex}][member_photo]" class="form-control"></td>
                        <td><input type="text" name="details[${rowIndex}][member_name]" class="form-control" placeholder="Member Name" required></td>
                        <td><input type="text" name="details[${rowIndex}][designation]" class="form-control" placeholder="Designation" required></td>
                        <td><button type="button" class="btn btn-light btn-sm removeRow" data-row-id="${rowIndex}">
                            <i class="fa fa-trash text-danger"></i></button></td>
                    </tr>`);
                updateOrders();
            }

            $('#addMoreRow').click(addRow);

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