@extends('admin/institute-management/institute-profile/index',['withoutCard' => true])

@section('main-content-tab')
    <div class="card mb-6">
        <div class="card-body">
            <h1 class="fs-18px fw-500 mb-0">Career</h1>
            <p class="fs-14 text-cs-gray mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur delectus fugit necessitatibus numquam quod voluptates.</p>
            {{--            <a href="{{route('institute.profile.teacher-management.create', $slug)}}" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);">--}}
            {{--                <i class="fa fa-pen"></i> Add Career--}}
            {{--            </a>--}}
            <button type="button" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);" data-bs-toggle="modal" data-bs-target="#addModal" id="faculty-modal"><i class="fa fa-pen"></i> Add Career</button>

        </div>
    </div>
    <div class="card mb-6">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h1 class="fs-18px fw-500 mb-0">Career</h1>
            {{--        <a href="{{route('institute.profile.career.create', $slug)}}" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);">--}}
            {{--            <i class="fa fa-pen"></i> Add Career--}}
            {{--        </a>--}}
            <button type="button" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);" data-bs-toggle="modal" data-bs-target="#addModal" id="faculty-modal"><i class="fa fa-pen"></i> Add Career</button>

        </div>
        <div class="card-body faculty-table-card">
            <table class="table table-row-bordered data-table">
                <thead>
                <tr>
                    <th class="text-center">SL.</th>
                    <th class="text-center">Title</th>
                    <th class="text-center">Sub Title</th>
                    <th class="text-center">Amount</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Actions</th>
                </tr>
                </thead>
                <tbody class="text-gray-600 fw-bold">

                </tbody>
            </table>
        </div>
    </div>
    {{--    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".modal" id="faculty-modal">Open Modal</button>--}}
    <div class="modal fade custom-modal" id="addModal">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h5 class="modal-title">Add Career Item</h5>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{route('institute.profile.career.store', $slug)}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form" enctype="multipart/form-data">
                        @csrf
                        <div class="px-lg-10 px-0">
                            <div class="row g-10">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="title" class="required">Title (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="title" name="title" placeholder="Enter Title (EN)" required>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="title_bn">Title (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="title_bn" name="title_bn" placeholder="Enter Title (BN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="sub_title">Sub Title (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="sub_title" name="sub_title" placeholder="Enter Sub Title (EN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="sub_title_bn">Sub Title (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="sub_title_bn" name="sub_title_bn" placeholder="Enter Sub Title (BN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="amount">Amount (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="amount" name="amount" placeholder="Enter Amount">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="amount_bn">Amount (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="amount_bn" name="amount_bn" placeholder="Enter Amount">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <label class="form-check-label mb-1" for="flexSwitchDefault">
                                        Status
                                    </label>
                                    <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                        <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" checked="checked"/>

                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center mt-10">
                                <button type="submit" class="btn btn-primary btn--primary rounded-btn">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" id="editModal">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h5 class="modal-title">Edit Career Item</h5>
                    <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" name="institute" class="form mb-15" method="POST" id="edit-form" enctype="multipart/form-data">
                        @csrf
                        @method("PUT")
                        <input type="hidden" value="{{$slug}}" name="slug_info"/>
                        <input type="hidden" name="id"/>
                        <div class="px-lg-10 px-0">
                            <div class="row g-10">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="title">Title (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="edittitle" name="title" placeholder="Enter Title (EN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="title_bn">Title (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="edittitle_bn" name="title_bn" placeholder="Enter Title (BN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="sub_title">Sub Title (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="editsub_title" name="sub_title" placeholder="Enter Sub Title (EN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="sub_title_bn">Sub Title (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="editsub_title_bn" name="sub_title_bn" placeholder="Enter Sub Title (BN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="amount">Amount (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="editamount" name="amount" placeholder="Enter Amount">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="amount_bn">Amount (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="editamount_bn" name="amount_bn" placeholder="Enter Amount">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <label class="form-check-label mb-1" for="flexSwitchDefault">
                                        Status
                                    </label>
                                    <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                        <input class="form-check-input radio-btn" id="editstatus" name="status" type="checkbox" value="1" checked="checked"/>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center mt-10">
                                <button type="submit" class="btn btn-primary btn--primary rounded-btn">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra-extra-css')
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel='stylesheet' type='text/css'>
    <style>
        a.badge.text-capitalize:hover {
            color: #fff;
        }
    </style>
@endsection

@section('extra-extra-script')
    <script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('js/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{asset('js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('js/jszip.min.js')}}"></script>
    <script src="{{asset('js/pdfmake.min.js')}}"></script>
    <script src="{{asset('js/vfs_fonts.js')}}"></script>
    <script src="{{asset('js/buttons.html5.min.js')}}"></script>
    <script>
        $('#edit-form').submit(function (event) {
            event.preventDefault();
            var formData = new FormData(this);
            var slug = $('input[name="slug_info"]').val();


            var id = $('input[name="id"]').val();
            var actionUrl = "{{ route('institute.profile.career.update', ['slug' => ':slug', 'id' => ':id']) }}";
            actionUrl = actionUrl.replace(':slug', slug).replace(':id', id);
            $.ajax({
                url: actionUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    location.reload();
                    $('#editModal').modal('hide');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    </script>
    <script>
        function loadEdit(id) {
            $("input[name='id']").val(id);
            $.ajax({
                url: '{{ url('get-career') }}?id=' + id,
                method: 'GET',
                success: function (returnData) {
                    console.log(returnData);
                    $("#edittitle").val(returnData.title);
                    $("#edittitle_bn").val(returnData.title_bn);
                    $("#editsub_title").val(returnData.sub_title);
                    $("#editsub_title_bn").val(returnData.sub_title_bn);
                    $("#editamount").val(returnData.amount);
                    $("#editamount_bn").val(returnData.amount_bn);
                    if (returnData.status == 1) {
                        $('#editstatus').prop('checked', true);
                    } else {
                        $('#editstatus').prop('checked', false);
                    }

                    $('#editModal').modal('show');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    </script>


    <script type="text/javascript">
        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [],
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                ajax: "{{ route('institute.profile.career', $slug) }}",
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4] // Column index which needs to export
                        }
                    }
                ],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'title', name: 'title'},
                    {data: 'sub_title', name: 'sub_title'},
                    {data: 'amount', name: 'amount'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
            });

        });
    </script>
    <script>
        $(document).ready(function(){
            $('.institute-profile-tab-career').addClass('active');
        });
    </script>
@endsection