@include('components/header')
@include('components/sidebar')
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Form List</h2>
        <div class="viewAll mr-4">
            <a href="/admin_dashboard" class="viewAllBtn">
                
                <button class="btn btn-danger mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back</button>
        </a>
        <a  class="btn btn-primary" data-toggle="modal" data-target="#role">
        <svg class="mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>Add Form</a>
    </div>
</div>
<div class="layout-px-spacing layout-top-spacing">
        <div class="modal-footer">
        </div>
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-one widget-table-two">
                <div class="widget-content">
                    <div class="widget-tableContent">
                        <div class="table-responsive">
                            <table class="table table-striped dt-table-hover">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="th-content text-center">Form ID</div>
                                        </th>
                                        <th>
                                            <div class="th-content text-center">Form Name</div>
                                        </th>
                                        <th>
                                            <div class="th-content text-center">Action</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $i=0; @endphp
                                    @foreach($form as $r)
                                    <tr>
                                        @php $i=$i+1; @endphp
                                        @for($i=$i;$i<=count($form);$i++)
                                        <td>
                                            <div class="td-content text-center">
                                                <span class="text-black">{{$i}}</span>
                                            </div>
                                        </td>
                                        @break
                                        @endfor
                                        <td>
                                            <div class="td-content text-center">
                                                <span class="text-black">{{$r->form_name}}</span>
                                            </div>
                                        </td>
                                        <td class="td-content text-center">
                                            <div>
                                                <a href="javascript:void(0);" data-id="{{$r->id}}" data-name="{{$r->form_name}}" class="edit"  data-toggle="modal" data-target="#edit">
                                                    <img src="design/img/edit.svg" />
                                                </a>
                                                <a href="javascript:void(0);" data-id="{{$r->id}}" class="delete"  data-toggle="modal" data-target="#delete">
                                                    <img src="design/img/delete.svg" />
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Model for add form -->
<div class="modal fade" id="role" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <center>
            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                <div class="media-body text-start">
                    <h5><b>Add New Form</b></h5>
                </div>
            </div>
            </center>
            <div class="modal-body">
                <form class="form-group mb-0" method="post" action="form_management">
                    {{@csrf_field()}}
                    <input type="text" name="form" id="enter_form" class ="form-control text" placeholder="Enter Form Name">
                    <p class="text-danger" id="error_msg"></p>
                    <div class="text-end">
                        <input type="submit" name="wish" value="Submit" id="add_form" class="btn btn-success">
                        <input type="reset" data-dismiss="modal" value="Cancel" id="cancel_formPopup" class="btn btn-primary ml-2">
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <center>
            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                <div class="media-body text-start">
                    <h5><b>Are You Sure You Want To Delete This Form ?</b></h5>
                </div>
            </div>
            </center>
            <div class="modal-body">
                <form class="form-group mb-0" method="post" action="delete">
                    {{@csrf_field()}}
                    <input type="hidden" name="id" id="delete_id" value="">
                    <div class="text-end">
                        <input type="submit" name="wish" value="Delete" class="btn btn-success">
                        <input type="reset" data-dismiss="modal" value="Cancel" class="btn btn-primary ml-2">
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <center>
            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                <div class="media-body text-start">
                    <h5><b>Edit Form Name</b></h5>
                </div>
            </div>
            </center>
            <div class="modal-body">
                <form class="form-group mb-0" method="post" action="edit_form">
                    {{@csrf_field()}}
                    <input type="hidden" name="id" id="hidden_id" value="">
                    <input type="text" id="enter_edit_form" name="form" class ="form-control text" placeholder="Enter Form Name">
                    <p class="text-danger" id="error_msg2"></p>
                    <div class="text-end">
                        <input type="submit" name="wish" id="edit_form" value="Submit" class="btn btn-success">
                        <input type="reset" data-dismiss="modal" id="edit_form_cancel" value="Cancel" class="btn btn-primary ml-2">
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
@if(session('done'))
<script type="text/javascript">
swal.fire({
title: '@php echo session("done")@endphp',
type: 'success',
padding: '2em'
})
</script>
@elseif(session('edit'))
<script type="text/javascript">
swal.fire({
title: '@php echo session("edit")@endphp',
type: 'success',
padding: '2em'
})
</script>
@elseif(session('delete'))
<script type="text/javascript">
swal.fire({
title: '@php echo session("delete")@endphp',
type: 'success',
padding: '2em'
})
</script>
@elseif(session('error'))
<script type="text/javascript">
swal.fire({
title: '@php echo session("error")@endphp',
type: 'warning',
padding: '2em'
})
</script>
@endif
@include('components/footer')
<script>
$('.edit').click(function(){
    var value = $(this).data("id");
    var name = $(this).data("name");
    $("#hidden_id").val(value);
    $("#enter_edit_form").val(name);
});
$('.delete').click(function(){
    var value = $(this).data("id");
    $("#delete_id").val(value);
});
$("#add_form").on('click',function(event){
    if($("#enter_form").val() ==''){
        $("#error_msg").text('This field is required*');
        event.preventDefault();
    }
});
$("#cancel_formPopup").on('click',function(){
    $("#enter_form").val('')
    $("#error_msg").text('');
});
$("#edit_form").on('click',function(event){
    if($("#enter_edit_form").val() ==''){
        $("#error_msg2").text('This field is required*');
        event.preventDefault();
    }
});

$("#edit_form_cancel").on('click',function(){
     $("#error_msg2").text('');
});
</script>