@extends('layouts.app')

@section('sidebar')
@include('sidebar')
@stop
@section('content')
<div class="m-content">
    <div class="m-portlet m-portlet--full-height ">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        Nominees
                    </h3>
                </div>
            </div>
        </div>
        <div class="m-portlet__body">
            @if(Session::has('success'))
            <div class="alert alert-success">
                {!! Session::get('success') !!}
            </div>
            @endif

            <!--begin: Search Form -->
            <div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
                <div class="row align-items-center">
                    <div class="col-xl-8 order-2 order-xl-1">
                        <div class="form-group m-form__group row align-items-center">
                            <div class="col-md-4">
                                <div class="m-input-icon m-input-icon--left">
                                    <input type="text" class="form-control m-input" placeholder="Search..." id="general-search">
                                    <span class="m-input-icon__icon m-input-icon__icon--left">
                                        <span>
                                            <i class="la la-search"></i>
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="m-form__group m-form__group--inline">
                                    <div class="m-form__label">
                                        <label>Relationship:</label>
                                    </div>
                                    <div class="m-form__control">
                                        @php
                                            $relationship =  ['Grand-Father','Grand-Mother','Son','Daughter','Father','Mother','Brother','Sister','Grand-Son','Grand-Daughter']
                                        @endphp
                                        <select class="form-control m-bootstrap-select" id="document_type">
                                            <option value="">All</option>
                                            @foreach ($relationship as $relationshi)
                                                <option value="{{$relationshi}}">{{$relationshi}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="d-md-none m--margin-bottom-10"></div>
                            </div>
                            <div class="col-md-4">
                                <div class="m-form__group m-form__group--inline">
                                    <div class="m-form__label">
                                        <label class="m-label m-label--single">Status:</label>
                                    </div>
                                    <div class="m-form__control">
                                        <select class="form-control m-bootstrap-select" id="document_status">
                                            <option value="">All</option>
                                            <option value="Pending">Pending</option>
                                            <option value="Accepted">Accepted</option>
                                            <option value="Rejected">Rejected</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="d-md-none m--margin-bottom-10"></div>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
            </div>

            <!--end: Search Form -->

            <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="user-document-list">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Client Name</th>
                        <th>Client Document</th>
                        
                        <th>Date Of Birth</th>
                        <th>Full Name</th>
                        <th>Relationship</th>
                        <th>Document</th>
                        <th>Status</th>
                        <th>Date Of Submit</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('script')
{{ Html::script('custom/eModal/eModal.js') }}
{{ Html::script('custom/datatables/datatables.bundle.js') }}
<script type="text/javascript">

    (function($){
        var table = '';
            

		$(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            

            $('#user-document-list').each(function() {
                table = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/nominees",
                        "type": "GET"
                    },
                    "order": [[ 0, "desc" ]],
                    "dom":
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'p>>",
                    "aoColumns": [
                        { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'name', name: 'name'},
                        { data: 'client_document', name: 'client_document'},
                        
                        { data: 'DOB', name: 'DOB'},
                        { data: 'fullname', name: 'fullname'},
                        { data: 'relationships', name: 'relationships'},
                        { data: 'document', name: 'document'},
                        { data: 'status', name: 'status'},
                        { data: 'created_at', name: 'created_at'},
                        { data: 'action', name: 'action', orderable: false, searchable: false },
                    ]
                });
            });

            
                    

		});

        // Search Start

        // Status type Vise Search
        $('#document_status').on('change', function () {
                table.column(7).search($(this).val()).draw();
        });

        // Document type vise search
        $('#document_type').on('change', function () {
            table.column(5).search($(this).val()).draw();
        });

        $('#document_status, #document_type').selectpicker();

        // General search after 3 character entered
        $("#general-search")
        .unbind() // Unbind previous default bindings
        .bind("keyup", function(e) { // Bind our desired behavior
            var data = $(this).val();
            // If the length is 3 or more characters, or the user pressed ENTER, search
            if(data.length >= 3 || e.keyCode == 13 || e.keyCode == 8){
                table.search(data).draw();
            }
            // Ensure we clear the search if they backspace far enough
            if(this.value.length == 0) {
                table.search("").draw();
            }
        });

        // Search End

        function saveNominees() {
            $('#nominees-form').submit();
        }

        $(document).on('click', 'a.nominees-approv', function(event){
                event.preventDefault(); // Prevent default anchor behavior
            
                var id = $(this).attr('data-id');
                var secret = $(this).attr('secret-id');
                var url = base_url + "/nominees/action/" + id + "/" + secret;
            
                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function(response) {
                        // If the response contains error
                        if (response.error) {
                            swal({
                                title: "Error",
                                text: response.error + ": " + response[0],
                                icon: "error"
                            });
                        } else {
                            // If no error, proceed with opening the modal
                            var options = {
                                url: url,
                                title: 'Nominee Details',
                                size: 'md',
                                buttons: [
                                    { text: 'Cancel', style: 'btn btn-secondary', close: true },
                                    { text: 'Submit', style: 'btn btn-primary', close: false, click: saveNominees }
                                ]
                            };
                            eModal.ajax(options);
                        }
                    },
                    error: function(xhr) {
                        // Handle the error response
                        var response = JSON.parse(xhr.responseText);
                        swal({
                            title: "Error",
                            text: response.error + ": " + response[0],
                            icon: "error"
                        });
                    }
                });
            });


	})(jQuery);
    eModal.setModalOptions({ backdrop: 'static', keyboard: false });
</script>
@endsection