@extends('layout/master')
@section('content')
<div class="row">
            <div class="col-sm-6">
                <div class="page-title-box">
                    
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="/dashboard">{{__('Dashboard')}}</a></li>
                        <li class="breadcrumb-item active">{{__('Goal settings')}}</li>
                    </ol>
                </div>
            </div>
            <div class="col-sm-6">

            </div>
        </div>


<div class="row">
<div class="col-lg-4">
    <a href=""   data-bs-toggle="modal" data-bs-target=".bs-example-modal-lg">
    <button class="btn bg-gradient-primary"><i class="fa fa-plus"> </i> Add new Goal</button>
    </a>
        
        
    </div>
    <div class="col-lg-4">

    </div>
    <div class="col-lg-4"></div>
    
</div>




<div class="box mt-2">
   
   <!-- /.box-header -->
   <div class="box-body">
       <div class="table-responsive">
         <table id="example5" class="table table-bordered table-striped" style="width:100%">
           <thead>
               <tr>
                   <th>Name</th>
                   <th>Description</th>
                   <th>Pass 7 days conversion</th>
                   <th>Enable/Disable</th>
                   
                   
               </tr>
           </thead>
           <tbody>
            
               <tr>
                   <td>Sajid</td>
                   <td>lorem ipsum dnhf this the we try</td>
                   <td>-</td>
                   <td>
                   <button type="button" class="btn btn-sm btn-toggle btn-success active" data-bs-toggle="button"
            aria-pressed="true" autocomplete="off">
        </button>
                   </td>
                   
                  
               </tr>
 
           </tbody>
           
       </table>
       </div>
   </div>
   <!-- /.box-body -->
 </div>
 <!-- /.box -->      
</div>




<!-- modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myLargeModalLabel">Add new Goal</h4>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">

                <div class="box">
						
						<!-- /.box-header -->
						<form class="form">
							<div class="box-body">
								<class="my-15">
								<div class="row">
								  <div class="col-lg-12">
									<div class="form-group">
									  <label class="form-label">Name</label>
									  <input type="text" name="name" class="form-control" placeholder="Name">
									</div>
								  </div>
							
								</div>

                                <div class="form-group">
								  <label class="form-label">Descripiton</label>
								  <textarea rows="5" class="form-control" placeholder="About goal"></textarea>
								</div>

                                <div class="row">
								  <div class="col-lg-12">
									<div class="form-group">
									  <label class="form-label">Enter URL</label>
									  <input type="text" name="url" class="form-control" placeholder="url">
									</div>
								  </div>
							
								</div>
                               								
								
								
							</div>
							<!-- /.box-body -->
							<div class="box-footer">
							
								<button type="submit" class="btn btn-primary">
								  <i class="ti-save-alt"></i> Save goal
								</button>
							</div>  
						</form>
					  </div>

				</div>
				
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>

@endsection