@extends('admin.layouts.app')
@section('content')


<section class="content">
    <!-- Default box -->

    <div class="container-fluid">

        <div class="container">
            <div class="p-1 bg-dark d-flex align-items-center justify-content-between">
                <p class="p-1 mb-0">USERS</p>
                <a class="p-1 btn btn-primary" href="" type="button" data-title="create" data-toggle="modal" data-target="#create">Create User</a>
            </div>
            <div class="row">


                <div class="col-md-12">
                    <div class="table-responsive">

                        <table id="mytable" class="table table-bordred table-striped">
                            <thead>
                                <th>Name</th>
                                <th>E-mail</th>
                                <th>Phone</th>
                                <th>Address</th>
                                <th>City</th>
                                <th>Zip Code </th>
                                <th>State </th>
                                <th>Country </th> <!-- Added Name column here -->
                                <!-- Added Name column here -->
                                <th class="text-center" colspan="2">Action</th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Administrator</td>
                                    <td>admin@example.com</td>
                                    <td>+923113657336</td>
                                    <td>Office</td>
                                    <td>Karachi</td>
                                    <td>75600</td>
                                    <td>Sindh</td>
                                    <td>Pakistan</td>

                                    <td class="text-center">
                                        <p data-placement="top" data-toggle="tooltip" title="Edit">
                                            <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                        </p>

                                    </td>
                                    <td class="text-center">
                                        <p data-placement="top" data-toggle="tooltip" title="Delete">
                                            <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </p>
                                    </td>
                                </tr>

                            </tbody>
                        </table>


                        <div class="clearfix"></div>
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-center">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">Next</a>
                                </li>
                            </ul>
                        </nav>

                    </div>

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


    <div class="modal fade" id="create" tabindex="-1" role="dialog" aria-labelledby="create" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title custom_align" id="Heading"> Create User </h4>
                    <button type="button" class="btn-close " data-dismiss="modal" aria-hidden="true"></button>

                </div>
                <div class="modal-body">
                    <div class="form-row">

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="#g1"> FIRST NAME </label>
                                <input class="form-control " id="g1" type="text" placeholder="FIRST NAME ">
                            </div>
                            <div class="form-group">
                                <label for="#g2"> EMAIL</label>
                                <input class="form-control " id="g2" type="text" placeholder="EMAIL">
                            </div>
                            <div class="form-group">
                                <label for="#g3"> ADDRESS</label>
                                <input class="form-control " id="g3" type="text" placeholder="ADDRESS">
                            </div>
                            <div class="form-group">
                                <label for="#g4"> ZIP CODE</label>
                                <input class="form-control " id="g4" type="text" placeholder="ZIP CODE">
                            </div>
                            <div class="form-group">
                                <label for="#g5"> COUNTRY</label>
                                <select  class="form-control form-select" name="country" id="#g5">
                                    <option value="1">Pakistan</option>
                                    <option value="2">Saudi Arabia</option>
                                    <option value="3">England</option>
                                    <option value="4">UK</option>
                                    <option value="5">USA</option>
                                    <option value="6">Japan</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="#g6"> ROLES</label>
                                <select  class="form-control form-select" name="ROLES" id="#g6">
                                    <option value="1">Drivers</option>
                                    <option value="2">Student</option>
                                    <option value="3">Admin</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="#g7"> Last Name</label>
                                <input class="form-control " id="g7" type="text" placeholder="Last Name">
                            </div>
                            <div class="form-group">
                                <label for="#g8"> PHONE</label>
                                <input class="form-control " id="g8" type="text" placeholder="PHONE">
                            </div>
                            <div class="form-group">
                                <label for="#g9">CITY </label>
                                <input class="form-control " id="g9" type="text" placeholder="CITY">
                            </div>
                            <div class="form-group">
                                <label for="#g10">STATE </label>
                                <input class="form-control " id="g10" type="text" placeholder="STATE">
                            </div>
                            <div class="form-group">
                                <label for="#g11">PROFILE IMAGE </label>
                                <input class="form-control " id="g11" type="file">
                            </div>
                            <div class="form-group">
                                <label for="#g12"> DEPARTMENTS</label>
                                <select  class="form-control form-select" name="ROLES" id="#g12">
                                    <option value="1">Web Development</option>
                                    <option value="2">Mobile Development</option>
                                    <option value="3">SEO & Marketing</option>
                                  
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer ">
                    <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span>Submit</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title custom_align" id="Heading">Edit User </h4>
                    <button type="button" class="btn-close " data-dismiss="modal" aria-hidden="true"></button>

                </div>
                <div class="modal-body">
                    <div class="form-row">

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="#g1"> FIRST NAME </label>
                                <input class="form-control " id="g1" type="text" value="Administrator" >
                            </div>
                            <div class="form-group">
                                <label for="#g2"> EMAIL</label>
                                <input class="form-control " id="g2" type="text" value="admin@example.com" >
                            </div>
                            <div class="form-group">
                                <label for="#g3"> ADDRESS</label>
                                <input class="form-control " id="g3" type="text" value="Office" >
                            </div>
                            <div class="form-group">
                                <label for="#g4"> ZIP CODE</label>
                                <input class="form-control " id="g4" type="text" value="75600" >
                            </div>
                            <div class="form-group">
                                <label for="#g5"> COUNTRY</label>
                                <select class="form-control form-select" name="country" id="#g5">
                                    <option selected value="1">Pakistan</option>
                                    <option value="2">Saudi Arabia</option>
                                    <option value="3">England</option>
                                    <option value="4">UK</option>
                                    <option value="5">USA</option>
                                    <option value="6">Japan</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="#g6"> ROLES</label>
                                <select class="form-control form-select" name="ROLES" id="#g6">
                                    <option value="1">Tag Encoder</option>
                                    <option value="2">Washer</option>
                                    <option selected value="3">Dryer</option>
                                    <option value="4">Packager</option>
                                    <option value="5">Iron</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="#g7"> Last Name</label>
                                <input class="form-control " id="g7" type="text" value="" >
                            </div>
                            <div class="form-group">
                                <label for="#g8"> PHONE</label>
                                <input class="form-control " id="g8" type="text" value="+923113657336" >
                            </div>
                            <div class="form-group">
                                <label for="#g9">CITY </label>
                                <input class="form-control " id="g9" type="text" value="+923113657336" >
                            </div>
                            <div class="form-group">
                                <label for="#g10">STATE </label>
                                <input class="form-control " id="g10" type="text" value="Sindh" >
                            </div>
                            <div class="form-group">
                                <label for="#g11">PROFILE IMAGE </label>
                                <input class="form-control " id="g11" type="file">
                            </div>
                            <div class="form-group">
                                <label for="#g12"> DEPARTMENTS</label>
                                <select  class="form-control form-select" name="ROLES" id="#g12">
                                    <option selected value="1">Washing</option>
                                    <option value="2">Iron</option>
                                    <option value="3">Tag Encoder</option>
                                    <option value="4">Dryer</option>
                                    <option value="5">Packing</option>
                                    <option value="6">Delivery</option>
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="modal-footer ">
                        <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </div>



    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
                    <button type="button" class="btn-close " data-dismiss="modal" aria-hidden="true"></button>

                </div>
                <div class="modal-body">

                    <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

                </div>
                <div class="modal-footer ">
                    <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


</section>









@endsection

@section('customJs')


@endsection