@extends('dashboard.layouts.master')

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

<!-- End Header -->
@section('content')
<div class="wrapper">
    @include('dashboard.layouts.nav')
    @include('dashboard.layouts.aside')
   
    <input type="hidden" id="load_edit_item" value="{{route('services.sub_services.load_edit_item')}}">
    <input type="hidden" id="load_edit_images" value="{{route('services.sub_services.load_edit_images')}}">
    <input type="hidden" id="load_edit_elements" value="{{route('services.sub_services.load_elements')}}">
    <input type="hidden" id="token_search" value="{{csrf_token() }}">
    

    @if(Session::has('success'))
    <div class="alert alert-success outline form-control text-center">{{Session::get('success')}}</div>
    @endif
    @if(Session::has('errors'))
    <div class="alert alert-danger outline form-control text-center">{{Session::get('errors')}}</div>
    @endif
    <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
                <div class="row">
                    <div class="col-6">
                        <h2 class="page-title">Sub  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 id="addElements" data-toggle="modal" data-target="#elements" data-id="{{$info->id}}" class="btn btn-info btn-sm">Elements </a>
                                            
                                            <a id="addImages" data-toggle="modal" data-target="#exampleModal" data-id="{{$info->id}}" class="btn btn-info btn-sm">Images</a>
                                            <a id="addButton" data-toggle="modal" data-target="#edit_item_model" data-id="{{$info->id}}" class="btn btn-primary btn-sm">Edit</a>
                                            <a href="{{ route('services.sub_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 id="new" 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">Create Sub services</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                 
                <form action="{{route('Sub_services.store',$services_id )}}" method="post">
                    <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" required>
                                </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" required>
                                </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>
                        
                    </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 id="edit_item_model" 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">update Sub 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_sub_services">

                  </div>
                
                   
                   
                  
              </div>
            </div>
          </div>
          <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Sub Services Images</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="sub_services_images">
                  
                </div>
                
              </div>
            </div>
          </div>
          <div class="modal fade" id="elements" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Elements</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="sub_services_elements">
                  
                </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", "#addButton", function (e) {
                
                var id =$(this).data('id');
                var token = $('#token_search').val();
                var url = $('#load_edit_item').val();

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

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

            });
            
            $(document).on("click", "#addImages", function (e) {
         
                var id_sub_services =$(this).data('id');
                
                var token = $('#token_search').val();
                var url = $('#load_edit_images').val();

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

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

            });


            
                $(document).on("click", "#addElements", function (e) {
                    
                var id_sub_services =$(this).data('id');
                var token = $('#token_search').val();
                var url = $('#load_edit_elements').val();

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

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

            });
            
        });

    </script>
@endsection