@extends('layouts.app')

@section('content')
@include('admin.adminheader')

<div class='container'>
    <div class="page-title-box">
        <div class="row align-items-center">
                    <div class="col-sm-6">
                        <h4 class="page-title">Closers</h4>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li>
                            <li class="breadcrumb-item active">Closers</li>
                        </ol>
                    </div>
                </div>
                <!-- end row -->
        </div>

<div class='row d-flex justify-content-center mt-5'>
        <div class='col-md-12 mb-3 text-end'>
        <a  data-bs-toggle="modal" data-bs-target="#addclosermodal" class='btn btn-primary text-white text-small'><i class="fa fa-plus-circle" aria-hidden="true"></i>
        Add New Closer</a> 
        </div>
</div>
<div class='row d-flex justify-content-center'>
    <div class='col-md-12'>
            @if (Session::has('closer'))
                <div class='alert alert-success alert-dismissible fade show' role='alert'>
                {{ Session::get('closer') }}
                </div>
                @endif

                @if (Session::has('error'))
                <div class='alert alert-danger alert-dismissible fade show' role='alert'>
                {{ Session::get('error') }}
                </div>
                @endif
                <table id="example" class="table table-striped data-table" style="width:100%">
                                <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
            </div>
        </div>
    </div>

      <!-- Modal -->
<div class="modal fade" id="addclosermodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Closer</h5>
      </div>
      
      <div class="modal-body">
    <form method='post' action="{{ route('change-to-closer')}}">
        @csrf
        @if($users->isEmpty())
       No User Found
       @else
        <div class='form-group my-3'>
            <label class="my-1 mr-2" for="user">Select User</label>
            <select class="form-control custom-select my-1" id="user" name='userid'>
                @foreach($users as $user)
                    <option value='{{$user->id}}'>{{$user->first_name}} {{$user->last_name}}</option>
                @endforeach
            </select>
        </div>
       <div class="form-group my-3">
            <label>Enter Closer ID</label>
            <input type="text" class="form-control py-1" id="clsrid" name='closer_id'  placeholder="Enter ID">
        </div>  
        <div class="form-group">
            <input type="text" hidden class="form-control" id="firstname" name='firstname' value='{{$users[0]->first_name}}'>
            <input type="text" hidden class="form-control" id="lastname" name='lastname' value='{{$users[0]->last_name}}'>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary success-btn" data-bs-dismiss="modal">Cancel</button>
            <button type='submit' class='btn btn-primary success-btn'>Save Changes</button>
        </div>
        @endif
    </form>
</div>

    </div>
  </div>
</div>

    <script type="text/javascript">

jQuery(document).ready(function($) {
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('all-closers') }}",
        columns: [
            {data: 'closerid'},
            {data: 'first_name'},
            {data: 'last_name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},

        ]
    });
});

</script>


@endsection