@include('admin.layouts.header')
<div class="container-fluid pt-4 px-4">
    @if ($message = Session::get('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fa fa-exclamation-circle me-2"></i> {{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif


    <div class="row g-4">
        <div class="col-sm-12 col-xl-6">
            <div class="bg-light rounded h-100 p-4">
                <h6 class="mb-4">Add New Member in Our Team</h6>
                <form action="{{ route('admin.save-board-of-directors') }}" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="form-floating mb-3">
                        <input type="text" name="name" class="form-control" id="name">
                        <label for="name">Name <span class="text-danger">* </span>
                        </label>

                        @if ($errors->has('Name'))
                            <span class="text-danger">{{ $errors->first('Name') }}</span>
                        @endif
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" name="designation" class="form-control" id="designation">
                        <label for="designation">Designation <span class="text-danger">* </span>
                        </label>

                        @if ($errors->has('designation'))
                            <span class="text-danger">{{ $errors->first('designation') }}</span>
                        @endif

                    </div>

                    <div class="mb-3">
                        <label for="image" class="form-label">Image <span class="text-danger">* </span>
                        </label>

                        @if ($errors->has('Image'))
                            <span class="text-danger">{{ $errors->first('Image') }}</span>
                        @endif
                        <input type="file" name="image" class="form-control" id="image" aria-describedby="link">
                    </div>

                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-12">
                <div class=" bg-light text-center rounded p-4">
                    <div class="row g-3 mb-3">
                        <div class="col-sm-6 col-md-3 d-flex align-items-center mb-0">
                            <h6 class="text-start">Our Team</h6>
                        </div>
                    </div>
                    <style>
                        th {
                            white-space: nowrap
                        }

                    </style>
                    <div class="table-responsive">
                        <table class="table text-start align-middle table-bordered table-hover mb-0">
                            <thead>
                                <tr class="text-dark">
                                    <th scope="col">Name</th>
                                    <th scope="col">Designation</th>
                                    <th scope="col">image</th>
                                    <th scope="col" style="width: 5rem;">Update</th>
                                    <th scope="col" style="width: 5rem;">Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($board_of_directors as $board_of_director)
                                    <tr>
                                        <td>{{ $board_of_director->name }}</td>
                                        <td>{{ $board_of_director->designation }}</td>
                                        <td>
                                            <img loading="lazy"  style="width: 5rem;"
                                                src="{{ url(env('EXT') . 'project/public/uploads/board of directors/' . $board_of_director->image) }}"
                                                alt="" srcset="">
                                        </td>
                                        {{-- <td>
                                            <button class="btn btn-sm btn-primary me-2" data-bs-toggle="modal"
                                                data-bs-target="#BoardOfDirectorsUpdateModal"
                                                onclick="updateBoardOfDirectors()">Update</button>
                                        </td> --}}
                                        <td>
                                        <a class="btn btn-info" href="{{route('Edit.board',$board_of_director->id)}}"> Update </a>
                                    </td>
                                        <td>
                                            <a class="btn btn-danger" href="{{route('delete.ourteam',$board_of_director->id)}}"> Delete </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="BoardOfDirectorsDeleteModal" tabindex="-1"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title" id="exampleModalLabel">Are You sure ?</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <form action="{{ route('admin.delete-board-of-directors') }}" method="post"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" id="boardOfDirectorsId" name="boardOfDirectorsId">
                                <button type="submit" class="btn btn-primary">Confirm Delete</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="BoardOfDirectorsUpdateModal" tabindex="-1"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title" id="exampleModalLabel">Are You sure ?</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <form action="{{ route('admin.update-board-of-directors') }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="modal-body">
                                <div class="form-floating mb-3">
                                    <input type="text" name="name" class="form-control" id="update_name">
                                    <label for="update_name">Name <span class="text-danger">* </span>
                                    </label>

                                </div>
                                <div class="form-floating mb-3">
                                    <input type="text" name="designation" class="form-control"
                                        id="update_designation">
                                    <label for="update_designation">Designation <span class="text-danger">* </span>
                                    </label>

                                </div>
                                {{-- <div class="form-floating mb-3">
                                    <input type="text" name="other_designation" class="form-control"
                                        id="update_other_designation">
                                    <label for="update_other_designation">Other Designation</label>
                                </div>
                                <div class="form-floating mb-3">
                                    <input type="text" name="other_company" class="form-control"
                                        id="update_other_company">
                                    <label for="update_other_company">Other Company</label>
                                </div> --}}
                                <div class="mb-3">
                                    <label for="update_update_image" class="form-label">Image <span
                                            class="text-danger">* </span>
                                    </label>

                                    <input type="file" name="update_image" class="form-control" id="update_image"
                                        aria-describedby="link">
                                   </div>

                                <div class="mb-3">
                                    <input type="hidden" id="update_board_of_directors_id"
                                        name="update_board_of_directors_id">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary">Confirm Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <script>
                function getBoardOfDirectorsId(id) {
                    document.querySelector('#boardOfDirectorsId').value = id;
                }

                function updateBoardOfDirectors(id) {

                    console.log(id)
                    $.ajax({
                        type: 'GET',
                        url: '' + '/admin/get-single-board-of-directors/' + id,
                        dataType: 'json',
                        success: function(data) {
                            document.querySelector('#update_name').value = data.name;
                            document.querySelector('#update_designation').value = data.designation;
                            document.querySelector('#update_image').value = data.image;
                           // document.querySelector('#update_other_company').value = data.other_company;
                            document.querySelector('#update_board_of_directors_id').value = data.id;
                        }
                    });
                }
            </script>
        </div>
    </div>
</div>
@include('admin.layouts.footer')