@extends('Admin.Layout.Master')

@section('css')
    <style type="text/css">

    </style>
@endsection

@section('content-header')
    <div class="header py-1">
        <div class="container-fluid">
            <div class="header-body ">
                <div class="row">
                    <div class="col-lg-6 col-7 text-primary text-left">
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                            <ol class="breadcrumb breadcrumb-links">
                                <li class="breadcrumb-item">
                                    <a href="#"><i class="fas fa-home text-primary"></i>
                                        Master
                                    </a>
                                </li>
                                <li class="breadcrumb-item"><a href="#">Service</a></li>
                                <li class="breadcrumb-item"><a href="#">Document Mapping</a></li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-6 col-5 text-right">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('content')
    <form id="main-form" action="{{ !$id ? url($url) : url($url . '/' . $id) }}" method="post" enctype="multipart/form-data">
        @csrf
        @if ($id)
            @method('put')
        @endif

        <div class="card card-body">
            <div class="row m-0">
                <div class="col-md-3 text-right">
                    <label class="form-control-label"> Category : <span class="text-danger">*</span></label>
                </div>
                <div class="col-md-6">
                    <select class="form-control form-control-sm"
                            id="entity_id"
                            name="entity_id"
                            required
                            onchange="get_mapped_document(this.value)"
                            >
                        <option value="">Select Entity</option>
                        @if(count($entity_types))
                            @foreach($entity_types as $entity_type)
                                <option value="{{ $entity_type->uid }}">
                                    {{ $entity_type->entity_type_name}}
                                </option>
                            @endforeach
                        @endif   
                    </select>
                </div>
            </div>

            <div class="row m-0 mt-3">
                <div class="col-md-12">
                    <table id="document_table" class="table table-striped table-bordered">
                        <thead>
                            <th class="p-1">Sr</th>
                            <th class="p-1">Document Name</th>
                            <th class="p-1">Document Details</th>
                            <th class="p-1">Document Required</th>
                            <th class="p-1">Document Format</th>
                            <th class="p-1 text-center">
                                <button type="button" class="btn btn-sm btn-success px-2 py-1" onclick="addRow()">
                                    <i class="fas fa-plus-circle"></i>  
                                </button>
                            </th>
                        </thead>
                        <tbody id="tbody">
                            
                        </tbody>
                    </table>
                </div>
            </div>

        </div> <!--CARD-->


        <div class="card p-0 mt--4 p-0">
            <div class="card-body p-2 text-center">
                <button type="submit" name="button_type" value="SAVE" class="btn btn-primary btn-sm">Save</button>
                <a href="{{ url($service_url) }}" class="btn btn-danger btn-sm">Cancel</a>
            </div>
        </div>

    </form>
@endsection


@push('footer_scripts_after_init')
    <script>

        function addRow() {
            trs=formatData(1);
        }

        function removeRow(rowId,document_id=null) {
            if(document_id){
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Content-Type': 'application/json',
                    },
                    type: "POST",
                    url: "{{ url('admin/master/service/document-mapping/delete-mapped-document') }}",
                    data: JSON.stringify({'document_id':document_id}),
                    success: function(data) {
                        if(data['status']==0){
                            alert(data['message']);
                        }
                    },
                    error : function(jqXHR, textStatus, errorThrown) {
                        console.error('Error:', textStatus, errorThrown);
                    }
                });
            }
            $('#tr_particular_row_' + rowId).remove();
        }

        function get_mapped_document(entity_id){
            var service_id = ''
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json',
                },
                type: "POST",
                url: "{{ url('admin/master/service/document-mapping/get-mapped-document') }}",
                data: JSON.stringify({'service_id':service_id,'entity_id':entity_id}),
                success: function(data) {
                    $('#tbody').empty();
                    if(data['status']==0){
                        addRow();
                        alert(data['message']);
                    }else{
                        trs=formatData(data['data'].length,data['data']);
                    }
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    console.error('Error:', textStatus, errorThrown);
                }
            });
        }

        function formatData(total_records,data=null){
            var tbody = $("#tbody");
            var rowCount = tbody.find('tr').length; 
            if(rowCount>1){
                var lastTdValue = $('#document_table tbody tr:last td:first').html();
                rowCount = parseInt(lastTdValue, 10);
            }

            var temp = '';
            for (var i = 0; i < total_records; i++) {
                temp += '<tr id="tr_particular_row_' + (rowCount + 1) + '">' +
                            '<td class="p-1">' + (rowCount + 1) + '</td>' +
                            '<td class="p-1">' +
                                '<input type="text" class="form-control form-control-sm" ' +
                                        'id="name_' + (rowCount + 1) + '" ' +
                                        'name="name[]" ' +
                                        'value="' + (data ? data[i]['name'] : "") + '"'+
                                        'required'+
                                        '>'+
                                        
                            '</td>' +
                            '<td class="p-1">' +
                                '<textarea class="form-control form-control-sm" ' +
                                        'id="description_' + (rowCount + 1) + '" ' +
                                        'name="description[]"'+
                                        'required'+
                                        '>' + (data ? data[i]['description'] : "") + '</textarea>' +
                            '</td>' +
                            '<td class="p-1">' +
                                '<input type="number" class="form-control form-control-sm" ' +
                                        'id="total_number_' + (rowCount + 1) + '" ' +
                                        'name="total_number[]" ' +
                                        'value="' + (data ? data[i]['total_number'] : "1") + '"'+
                                        'required'+
                                        '>'+
                            '</td>' +
                            '<td class="p-1">' +
                                '<input type="text" class="form-control form-control-sm" ' +
                                        'id="format_' + (rowCount + 1) + '" ' +
                                        'name="format[]" ' +
                                        'value="' + (data ? data[i]['format'] : "") + '"'+
                                        'placeholder="pdf,jpeg,jpg"'+
                                        'required'+
                                        '>'+
                            '</td>' +
                            '<td class="p-1 text-center">' +
                                '<button type="button" class="btn btn-sm btn-danger px-2 py-1" ' +
                                    'onclick="removeRow(' + (rowCount + 1) + ', \'' + (data ? data[i]['uid'] : null) + '\')">' +
                                    '<i class="fas fa-minus-square"></i>' +
                                '</button>' +
                            '</td>'
                        '</tr>';
                rowCount++;
            }
            $('#tbody').append(temp);
        }

    </script>
@endpush