@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
    @if ($message = Session::get('error'))
        <div class="alert alert-danger 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 Investor Relation Officer</h6>
                <form action="{{ route('admin.save-investor-relation') }}" 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="form-floating mb-3">
                        <input type="text" name="telephone_no" class="form-control" id="telephone_no">
                        <label for="telephone_no">Telephone No</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" name="mobile_no" class="form-control" id="mobile_no">
                        <label for="mobile_no">Mobile No</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" name="email_1" class="form-control" id="email_1">
                        <label for="email_1">Email Primary</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" name="email_2" class="form-control" id="email_2">
                        <label for="email_2">Email Secondary</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" name="fax" class="form-control" id="fax">
                        <label for="fax">Fax</label>
                    </div>

                    <div class="mb-3">
                        <label for="image" class="form-label">Image <span class="text-danger">* </span>
                        </label>
                        <input type="file" name="image" class="form-control" id="image" aria-describedby="link">
                        @if ($errors->has('image'))
                            <span class="text-danger">{{ $errors->first('image') }}</span>
                        @endif
                    </div>
                    <div class="mb-3">
                        <label for="address" class="form-label">Address </label>
                        <textarea class="form-control" style="height: 100px;" id="address" name="address"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </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">Investor Relation Officers</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">image</th>
                                <th scope="col">Designation</th>
                                <th scope="col">Telephone No</th>
                                <th scope="col">Mobile No</th>
                                <th scope="col">Email primary</th>
                                <th scope="col">Email secondary</th>
                                <th scope="col">Fax</th>
                                <th scope="col">Address</th>
                                <th scope="col" style="width: 5rem;">Update</th>
                                <th scope="col" style="width: 5rem;">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($investor_relations as $investor_relation)
                                <tr>
                                    <td>{{ $investor_relation->name }}</td>
                                    <td>
                                        <img style="width: 5rem;"
                                            src="{{ url(env('EXT') . 'uploads/investor relations/' . $investor_relation->image) }}"
                                            alt="" srcset="">
                                    </td>
                                    <td>{{ $investor_relation->designation }}</td>
                                    <td>{{ $investor_relation->telephone_no }}</td>
                                    <td>{{ $investor_relation->mobile_no }}</td>
                                    <td>{{ $investor_relation->email_1 }}</td>
                                    <td>{{ $investor_relation->email_2 }}</td>
                                    <td>{{ $investor_relation->fax }}</td>
                                    <td>{{ $investor_relation->address }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary me-2" data-bs-toggle="modal"
                                            data-bs-target="#investorRelationUpdateModal"
                                            onclick="updateInvestorRelation()">Update</button>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#investorRelationDeleteModal"
                                            onclick="getInvestorRelationId()">Delete</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="investorRelationDeleteModal" 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-investor-relation') }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="investorRelationId" name="investorRelationId">
                            <button type="submit" class="btn btn-primary">Confirm Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="investorRelationUpdateModal" 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-investor-relation') }}" 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="telephone_no" class="form-control" id="update_telephone_no">
                                <label for="update_telephone_no">Telephone No</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="text" name="mobile_no" class="form-control" id="update_mobile_no">
                                <label for="update_mobile_no">Mobile No</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="text" name="email_1" class="form-control" id="update_email_1">
                                <label for="update_email_1">Email Primary</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="text" name="email_2" class="form-control" id="update_email_2">
                                <label for="update_email_2">Email Secondary</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="text" name="fax" class="form-control" id="update_fax">
                                <label for="update_fax">Fax</label>
                            </div>

                            <div class="mb-3">
                                <label for="image" class="form-label">Image <span class="text-danger">* </span>
                                </label>
                                <input type="file" name="image" class="form-control" id="image"
                                    aria-describedby="link">
                               
                            </div>
                            <div class="mb-3">
                                <label for="update_address" class="form-label">Address </label>
                                <textarea class="form-control" style="height: 100px;" id="update_address" name="address"></textarea>
                            </div>
                            <div class="mb-3">
                                <input type="hidden" id="update_investor_relation_id"
                                    name="update_investor_relation_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 getInvestorRelationId(id) {
                document.querySelector('#investorRelationId').value = id;
            }

            function updateInvestorRelation(id) {

                $.ajax({
                    type: 'GET',
                    url: '' + '/admin/get-single-investor-relation/' + id,
                    dataType: 'json',
                    success: function(data) {
                        document.querySelector('#update_investor_relation_id').value = data.id;
                        document.querySelector('#update_name').value = data.name;
                        document.querySelector('#update_designation').value = data.designation;
                        document.querySelector('#update_telephone_no').value = data.telephone_no;
                        document.querySelector('#update_mobile_no').value = data.mobile_no;
                        document.querySelector('#update_email_1').value = data.email_1;
                        document.querySelector('#update_email_2').value = data.email_2;
                        document.querySelector('#update_fax').value = data.fax;
                        document.querySelector('#update_address').value = data.address;
                    }
                });

            }
        </script>
    </div>


</div>
@include('admin.layouts.footer')