@extends('layout')
@section('content')
    <div class="content-wrapper">
        <div class="content">
            <div id="floating-alert-container">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show floating-alert">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="close" data-dismiss="alert">×</button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show floating-alert">
                        <strong>{{ session('error') }}</strong>
                        <button type="button" class="close" data-dismiss="alert">×</button>
                    </div>
                @endif

                @if ($errors->any())
                    @foreach ($errors->all() as $error)
                        <div class="alert alert-danger alert-dismissible fade show floating-alert">
                            <strong>{{ $error }}</strong>
                            <button type="button" class="close" data-dismiss="alert">×</button>
                        </div>
                    @endforeach
                @endif
            </div>
            <div id="ajax-container-volunteer-details" data-url="{{ url('volunteer-details') }}"></div>
            <div class="container-fluid">
                <div class="form">
                    <!-- search form -->
                    {{ Form::open(['url' => url('/volunteer-list'), 'method' => 'GET', 'id' => 'volunteerListForm', 'class' => 'search-form']) }}
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="volunteer_name">Volunteer Name</label>
                                <input type="text" name="volunteer_name"
                                    class="form-control form-control-sm"value="{{ @$_REQUEST['volunteer_name'] }}">
                            </div>
                        </div>
                        <div class="col-md-2" style="margin-top: 18px;">
                            <div class="form-group d-flex">
                                <button type="submit" id="search" class="btn btn-solid btn-xs mr-2"><i
                                        class="fas fa-search"></i>Search</button>

                                <a href="{{ url('/volunteer-list') }}" class="btn btn-outline btn-xs flex-fill">
                                    <i class="fas fa-redo"></i> Reset
                                </a>
                            </div>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
            <div class="cotainer-fluid">
                <div class="row">
                    <div class="col-md-12">
                        @if (auth()->user()->role_id == 4 || auth()->user()->role_id == 2 || auth()->user()->role_id == 1)
                            <div class="text-right mb-2">
                                {{-- <a href="{{ url('volunteer-save') }}" class="btn btn-solid btn-xs mt-3">Add Volunteer</a> --}}
                                <button class="btn btn-solid btn-xs" data-toggle="modal" data-target="#UpdateVolunteer"
                                    id="volunteer-new">Add Volunteer</button>
                            </div>
                        @endif
                        <div id='TBL_EXPORT' class="table-responsive">
                            <table id="example2" class="table table-bordered table-striped" border="1">
                                <thead>
                                    <tr class="text-center">
                                        <th>Action</th>
                                        <th>Name</th>
                                        <th>Contact No.</th>
                                        <th>Email</th>
                                        <th>Address</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (count($data['volunteerList']) > 0)
                                        @foreach ($data['volunteerList'] as $key => $value)
                                            <tr>
                                                <td>
                                                    <div class="btn-group">
                                                        <button type="button" class="btn btn-default btn-xs"><i
                                                                class="fas fa-cog"></i></button>
                                                        <button type="button"
                                                            class="btn btn-default btn-xs dropdown-toggle dropdown-icon"
                                                            data-toggle="dropdown">
                                                            <span class="sr-only">Toggle Dropdown</span>
                                                        </button>
                                                        <div class="dropdown-menu ag-dropdown-menu" role="menu">
                                                            <button class="dropdown-item UpdateVolunteer" type="button"
                                                                id="UpdateVolunteer_{{ $value->volunteer_id }}"
                                                                data-volunteer_id="{{ $value->volunteer_id }}"
                                                                data-toggle="modal" data-target="#UpdateVolunteer">
                                                                <i class="fa fa-check mr-2"></i> Update Volunteer
                                                            </button>
                                                            {{ Form::open(['url' => url('/volunteer-delete'), 'method' => 'POST', 'id' => 'confirmfrm_' . $value->volunteer_id]) }}
                                                            <input type="hidden" name="volunteer_id"
                                                                value="{{ $value->volunteer_id }}">
                                                            <button class="dropdown-item btnCofirm1" type="button"
                                                                id="btnCofirm1_{{ $value->volunteer_id }}">
                                                                <i class="fa fa-trash mr-2"></i> Delete
                                                            </button>
                                                            {{ Form::close() }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td> {{ $value->volunteer_name }} </td>
                                                <td align="center"> {{ $value->contract_no }} </td>
                                                <td> {{ $value->email }} </td>
                                                <td> {{ $value->address }} </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="5" class="text-danger" style="text-align:center">No Record Found
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                                <tfoot class="noExl">
                                    <tr>
                                        <td colspan="2" style="border: 0;" class="noExl">
                                            <div id="paginationxx">
                                                <p class="tsc_pagination">
                                                    {{ $data['volunteerList']->appends(Request::except('page'))->links() }}
                                                </p>
                                            </div>
                                        </td>
                                        <td colspan="3" style="border: 0;" class="noExl">
                                            <div style="text-align:right;">
                                                <p>
                                                    {{ $data['volunteerList']->firstItem() }} to
                                                    {{ $data['volunteerList']->lastItem() }} Out of
                                                    {{ $data['volunteerList']->total() }}
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="UpdateVolunteer" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header ag-modal-header">
                    <h4 class="modal-title"><i class="fas fa-plus"></i><span id="title-span">Add Volunteer</span>
                    </h4>
                </div>
                {{ Form::open(['url' => url('/volunteer-save'), 'method' => 'POST', 'id' => 'volunteerAddForm', 'class' => 'search-form']) }}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-5 border-right">

                            <div class="row">
                                <div class="form-group col-md-12 mb-1">
                                    <label for="Name">Name</label>
                                    <input class="form-control form-control-sm" id="volunteer_name" name="volunteer_name"
                                        oninput="this.value=this.value.replace(/[^A-Za-z ]/g,'').replace(/(\..*)\./g, '$1');"
                                        required maxlength="100">
                                </div>
                                <div class="form-group col-md-12 mb-1">
                                    <label for="Contact No.">Contact No.</label>
                                    <input type="text" id="contract_no" name="contract_no"
                                        class="form-control form-control-sm numbers-only" required maxlength="10"
                                        pattern="[0-9]{10}" title="Phone No. must be exactly 10 digits">
                                </div>
                                <div class="form-group col-md-12 mb-1">
                                    <label for="Email">Email</label>
                                    <input type="text" id="email" name="email"
                                        class="form-control form-control-sm" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="Address">Address</label>
                                    <textarea type="text" id="address" name="address" class="form-control form-control-sm" required
                                        maxlength="500" rows="6"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="volunteer_id" id="volunteer_id" value="0">
                    <button type="button" class="btn btn-solid btn-xs mr-2" id="btnAddVolunteerSubmit">
                        <i class="fas fa-save"></i> <span id="button-span">Save</span>
                    </button>
                    <a href="javascript:void(0)" class="btn btn-outline btn-xs" data-dismiss="modal" id="cancelModal"><i
                            class="fas fa-times"></i> Cancel</a>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>

    <script src="{{ asset('dist/js/pages/volunteer.js') }}"></script>
@endsection