@extends('dashboard.layouts.master')

@section('title')
Opet   dashboard
@endsection
<!-- ======= Header ======= -->

<!-- End Header -->
@section('content')

<input type="hidden" id="load_services" value="{{route('services.edit')}}">
<input type="hidden" id="token_search" value="{{csrf_token() }}">
<div class="wrapper">
    @include('dashboard.layouts.nav')
    @include('dashboard.layouts.aside')
   
    <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
                <div class="row">
                    
                    @if(Session::has('success'))
                    <div class=" col-12 alert alert-success outline form-control">{{Session::get('success')}}</div>
                    @endif
                    <div class="col-6">
                        <h2 class="page-title">  Services </h2>
                    </div>
                    <div class="col-6 text-right">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Add</button>

                    </div>
                </div>                
                <div class="table-responsive">
                    <table class="table display datatables" id="ajax-data-object">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title En</th>
                                <th >Title Ar</th>
                               
                                <th>Action</th>
                               

                                
                            </tr>
                        </thead>
                        <tbody>

                            @if(@isset($data) && !@empty($data))
                                @foreach( $data as $index => $info)

                                    <tr>
                                        <td>{{$index +1 }}</td>
                                        <td>
                                            {{$info->title_en}}
                                        </td>
                                        
                                        <td>
                                            {{$info->title_ar}}
                                        </td>
                                        <td>
                                            <a href="{{ route('services.sub_services', $info->id) }}" class="btn btn-info btn-sm">Sub Services </a>
                                            <a id="service" data-toggle="modal" data-target="#edit_item_model" data-id="{{$info->id}}" class="btn btn-primary btn-sm">Edit</لا>
                                            <a href="{{ route('services.delete',$info->id) }}" class="btn btn-danger btn-sm">Delete</a>
                                        </td>
                                        
                                    </tr>
                        
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="5" class="alert alert-danger">No Data</td>
                                </tr>

                            @endif
                        </tbody>
                    </table>
                </div>
          </div>
          <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"> Services</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                <form action="{{route('services.store' )}}" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                            @csrf
                        <div class="row">
                            <div class="col-6">
                                <div>
                                    <label class="col-form-label pt-0" for="title">Title En </label>
                                    <input class="form-control" id="title_en" type="text" name="title_en">
                                </div>
                                <div>
                                    <label class="col-form-label pt-0" for="title">praagraph En </label>
                                    <textarea class="form-control" id="pragraph_en" rows="4" name="pragraph_en"></textarea>
                                </div>
                                
                            </div>
                            <div class="col-6">
                                <div>
      
                                    <label class="col-form-label pt-0" for="title">Title ar </label>
                                    <input class="form-control" id="title_ar" type="text" name="title_ar">
                                </div>
                                <div>
      
                                    <label class="col-form-label pt-0" for="title">praagraph ar </label>
                                    <textarea class="form-control" id="pragraph_ar" rows="4" name="pragraph_ar"></textarea>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="col-form-label pt-0" for="image"> Services Image </label>
                                <input class="form-control" id="image" name="image" type="file">
                            </div>
                        </div>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button  type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                  </form>   
              </div>
            </div>
          </div>


          <div class="modal fade" id="edit_item_model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">update  Services</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body" id="edit_services">

                  </div>
              </div>
            </div>
          </div>
       
        </div> <!-- .container-fluid -->
       
        
      
       
    </main> <!-- main -->

     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>

        $(document).ready(function() {
             $(document).on("click", "#service", function (e) {
                event.preventDefault();
                
                
                var id =$(this).data('id');
                var token = $('#token_search').val();
                var url = $('#load_services').val();

                
                jQuery.ajax({
                    url:url,
                    type:'post',
                    cache:false ,
                    data:{
                         "_token":token , id:id
                    },
                    success:function(data){
                        
                        $('#edit_services').html(data);


                        

                    },error: function() {
                        alert('error in the edit_item_model')
                    }
                    
                });
                
                

            });
            
        });

    </script>
@endsection