@extends('layouts.app')

@section('title', 'Forms List')

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Forms</h1>
        <!--<div class="row">
            <div class="col-md-6">
                <a href="{{ route('forms.create') }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-plus"></i> Add New
                </a>
            </div>
            <div class="col-md-6">
                <a href="#" class="btn btn-sm btn-success">
                    <i class="fas fa-check"></i> Export To Excel
                </a>
            </div>
        </div>-->
    </div>

    {{-- Alert Messages --}}
    @include('common.alert')

    <div class="row">
        <div class="col-md-6">
            <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search" action="{{ route('forms.index') }}" method="get">
                <div class="input-group mb-3">
                    <input type="text" name="search" class="form-control" placeholder="Search...">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-search fa-sm"></i>
                        </button>
                    </div>
                </div>
            </form>
            <a href="{{ route('forms.index') }}" class="btn btn-primary">Clear</a>
        </div>

        <div class="col-md-6 text-right">
            <a href="{{ route('forms.create')}}" class="btn btn-primary">Add Form</a>
        </div>
    </div>

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">All Forms</h6>

        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Form Name</th>
                            <th>Form Category</th>
                            <th>Description</th>
                            <th>Is Approved?</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(count($forms)>0)
                        @foreach ($forms as $form)
                        <tr>
                            <td>{{ $form->id }}</td>
                            <td>{{ $form->form_name }}</td>
                            <td>{{ $form->formCategory->form_category_name }}</td>
                            <td>{{ $form->description }}</td>
                            <td data-label="approvedStatus">
                                @php
                                if ($form->is_approved==1){
                                $approveStatus = 'Approved';
                                $approveStatusBtnClass = 'success';
                                $updateapproveStatus = 0;
                                }else{
                                $approveStatus = 'Disapproved';
                                $approveStatusBtnClass = 'danger';
                                $updateapproveStatus = 1;
                                }
                                @endphp
                                <button class="btn btn-{{$approveStatusBtnClass}} update-form-approve-status" data-form-id="{{$form->id}}" data-form-new-approve-status="{{$updateapproveStatus}}">{{$approveStatus}}</button>
                            </td>
                            <td style="display: flex">
                                <a href="{{ route('forms.edit', ['form' => $form->id]) }}" class="btn btn-primary m-2">
                                    <i class="fa fa-pen"></i>
                                </a>

                                <!--<form action="{{ route('forms.destroy', $form->id) }}" method="post" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger m-2"><i class="fas fa-trash"></i></button>
                                </form>-->
                                <a class="btn btn-danger m-2 delete-form-Btn" data-delete-url="{{ route('forms.destroy', $form->id) }}" href="javascript:voide(0);" data-toggle="modal" data-target="#deleteModal">
                                    <i class="fas fa-trash"></i>
                                </a>

                                <a href="{{ route('forms.view', ['form' => $form->id]) }}" class="btn btn-primary m-2">
                                    <i class="fa fa-eye"></i>
                                </a>
                            </td>
                            <!--<td>
                                <form action="{{ route('forms.destroy', $form->id) }}" method="post" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>-->
                        </tr>
                        @endforeach
                        @else
                        <tr>
                            <td colspan="5">There are no data.</td>
                        </tr>
                        @endif
                    </tbody>
                </table>

                {{-- $forms->links() --}}
                {{ $forms->appends(request()->query())->links() }}
            </div>
        </div>
    </div>

</div>
@include('forms.delete-modal')
@endsection

@push('script')
<script>
    $(document).ready(function() {
        $(".delete-form-Btn").click(function(event) {
            var deleteSectionUrl = $(this).data('delete-url');
            //alert(deleteSectionUrl); //section-delete-form
            $("#form-delete-form").attr('action', deleteSectionUrl);
        });

        $(".update-form-approve-status").click(function(event) {
            event.preventDefault();
            var url = baseUrl + "/forms/update-form-approve-status";
            var formId = $(this).data('form-id');
            var updateStatus = $(this).data('form-new-approve-status');
            //alert(updateStatus);
            if (confirm('Are you sure to update this data?')) {
                $.ajax({
                    url: url,
                    method: 'POST',
                    data: {
                        id: formId,
                        is_approved: updateStatus,
                        //_token: csrfToken
                    },
                    dataType: 'JSON',
                    success: function(response) {
                        window.location.reload();
                    },
                    error: function(response) {}
                });
            }
        });
    });
</script>
@endpush