@php $pageName = "institution";
$subpageName = "institution"; @endphp



@extends('layouts.app')



@section('content')

    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4 class="fw-bold">Institution Manager</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-divide mb-0">
                            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="#">Institution Manager</a></li>

                            <li class="breadcrumb-item active" aria-current="page">Institution</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- /product list -->
        @if (session('message_success'))
            <p class="alert alert-success" align="center" style="color:green"><b>{{session('message_success')}}</b></p>
        @endif

        @if (session('message_error'))
            <p class="alert alert-danger" align="center" style="color: red">{{session('message_error')}}</p>
        @endif
        <!-- /product list -->
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                <div class="search-set">
                    <h3>New Institution </h3>
                </div>
                <a data-bs-toggle="modal" data-bs-target="#bs-example-modal-lg" type="button" class="btn btn-info"
                    data-bs-placement="top" data-bs-custom-class="tooltip-info" title="Add New Institution"
                    style="float: right"><i class="fe fe-plus"></i> Add New Institution</a>
            </div>

            <div class="card-body">

                <div class="tab-content">
                    <div class="tab-pane show active text-muted" id="home-center" role="tabpanel">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table" id="myTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Abbreviation</th>
                                                <th>Fullname</th>
                                                <th>Classification</th>
                                                <th>Category</th>
                                                <th>Action</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if($list)
                                                @foreach($list as $institution)
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td>{{ $institution->abbreviation }}</td>
                                                        <td>{{ $institution->name }}</td>
                                                        <td>{{ $institution->classification->name ?? 'N/A' }}</td>
                                                        <td>{{ $institution->category->name ?? 'N/A' }}</td>
                                                        <td>
                                                            <a class="edit-institution-btn btn btn-warning" data-bs-toggle="modal"
                                                                data-bs-target="#bs-example-modal-lg2"
                                                                data-url="{{ route('institution-id', $institution->id) }}"
                                                                data-bs-placement="top" data-bs-custom-class="tooltip-warning"
                                                                title="Edit Institution"><i class="tf-icons ti ti-edit"
                                                                    style="color: white"></i> Edit</a>
                                                            <a class="contact-person-btn btn btn-primary" data-bs-toggle="modal"
                                                                data-bs-target="#cp-example-modal-lg2"
                                                                data-url="{{ route('contact-person', $institution->id) }}"
                                                                data-bs-placement="top" data-bs-custom-class="tooltip-primary"
                                                                title="Contact Person"><i class="tf-icons ti ti-user"
                                                                    style="color: white"></i> Contact Person</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('institution.institution-modal');
    @include('institution.edit-institution-modal');
    @include('institution.contact-person');
@endsection



@section('scripts')
    <script>
        $(document).ready(function () {
            $(document).on('change', '.classification_name', function () {
                var class_id = $(this).val();
                var form = $(this).closest('form');
                var categorySelect = form.find('.category_name');
                var op = '';

                $.ajax({
                    type: 'get',
                    url: '{!! URL::to('findCategoryData') !!}',
                    data: { 'id': class_id },
                    success: function (data) {
                        op += '<option value="" selected disabled>--Choose Category--</option>';
                        for (var i = 0; i < data.length; i++) {
                            op += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        }
                        categorySelect.html(op);
                    }
                });
            });
        });

        $('#bs-example-modal-lg').on('shown.bs.modal', function () {
            if (typeof flatpickr !== "undefined") {
                flatpickr("#flatpickr-date", {
                    dateFormat: "Y-m-d",
                    allowInput: true,
                    minDate: "today"
                });
            }
        });

        $('#cp-example-modal-lg2').on('shown.bs.modal', function () {
            if (typeof flatpickr !== "undefined") {
                flatpickr("#flatpickr-date", {
                    dateFormat: "Y-m-d",
                    allowInput: true,
                    minDate: "today"
                });
            }
        });
    </script>
    <script>
        $(document).ready(function () {
            $('body').on('click', '.edit-institution-btn', function (e) {
                e.preventDefault();
                var userUrl = $(this).data('url');
                if (userUrl) {
                    $.get(userUrl, function (data) {
                        $('#institutionID').val(data.id);
                        $('#instname').val(data.name);
                        $('#instabbr').val(data.abbreviation);
                        $('#instcat').val(data.category_id);
                        $('#instclass').val(data.classification_id);
                        $('#instgps').val(data.gps);
                        $('#instloc').val(data.location);
                        $('#instemail').val(data.email);
                        $('#insttel').val(data.telephone);
                    });
                }
            });
        });
    </script>

    <script>
        let currentRequest;

        $('body').on('click', '.contact-person-btn', function (e) {
            e.preventDefault();

            if (currentRequest) {
                currentRequest.abort();
            }

            $('#institutionId').val('');
            $('#personName').val('');
            $('#personDesignation').val('');
            $('#personEmail').val('');
            $('#personPhone').val('');

            let userUrl = $(this).data('url');

            currentRequest = $.get(userUrl, function (data) {

                $('#institutionId').val(data.id || '');
                $('#personName').val(data.contact_person?.name || '');
                $('#personDesignation').val(data.contact_person?.designation || '');
                $('#personEmail').val(data.contact_person?.email || '');
                $('#personPhone').val(data.contact_person?.telephone || '');

            });
        });
    </script>

@endsection