@extends('Admin.layouts.app')
@section('title', 'Services')

@section('content')
      

<!-- Page Heading -->
<h1 class="page-title h3 mb-2 text-gray-800">
    List Of Services
</h1>
<!-- DataTales Example -->
<div class="card border-0 mb-4">
    <div class="card-header text-end py-3">
        <div> 
            {{-- <a  href="{{route('admin.service.form')}}" class="btn-gazna" style="text-decoration:none;height:50px;font-size:14px;" >Add Service</a> --}}
            <button  type="button" class="btn-gazna" data-bs-toggle="modal" data-bs-target="#exampleModal" > Add Service</button>
        </div>
    </div>
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @elseif(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif
    <div class="">
        <div class="table-responsive">
            <table class="table categoryTable" id="laravel_datatable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        {{-- <th>S.No</th> --}}
                        <th>Name</th>
                        <th>Price</th>
                        <th>Status</th>
                        <th width="105px">Action</th>
                        
                    </tr>
                </thead>
               
              
            </table>
        </div>
    </div>

</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Add Service</h1>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <img src="{{ asset('admin/img/x.png') }}" alt="">
        </button>
      </div>
      <div class="modal-body">
      <form method="post" action="{{ route('admin.service.add') }}" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" value="{{ old('name') }}" name="name" id="name" placeholder="Enter Service" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="price">Price</label>
                <input type="number" class="form-control"  value="{{ old('price') }}" id="price" name="price" placeholder="Enter Price" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="type">Type</label>
                <select class="form-control" id="type" name="type">
                <option value="" selected disabled>Select Service Type</option>
                    <option value="online" {{ old('type') == 'online' ? 'selected' : '' }}>Online</option>
                    <option value="physical" {{ old('type') == 'physical' ? 'selected' : '' }}>Physical</option>
                    <option value="all" {{ old('type') == 'all' ? 'selected' : '' }}>All</option>
                </select>

            </div>
        </div>
        <div class="col-lg-12">
            <div class="form-group mt-3">
                <button class="btn-gazna w-100" style="height:50px;font-size:14px;" type="submit">Submit</button>
            </div>
        </div>
    </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- /.container-fluid -->
  @endsection


  @push('body-scripts')
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
   
<script>
$(document).ready(function(){
    $('#laravel_datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.services') }}",
        columns: [
            // {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            { data: 'name', name: 'name' },
            { data: 'price', name: 'price' },
            { data: 'status', name: 'status' },
            {data: 'action', name: 'action', orderable: false, searchable: false}
          
        
        ]
    });
});
</script>

@endpush