@extends('admin.layout.layout')

@section('page-level-css')
@endsection

@section('content')
{{-- csrf token --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- csrf token --}}
<!-- START PAGE-CONTAINER -->
<div class="page-container ">
  <!-- START HEADER -->
  @include('admin.partials.header')
  <!-- END HEADER -->
  <!-- START PAGE CONTENT WRAPPER -->
  <div class="page-content-wrapper ">
    <!-- START PAGE CONTENT -->
    <div class="content sm-gutter">
      <!-- START JUMBOTRON -->
      <div data-pages="parallax">
        <div class="container-fluid p-l-25 p-r-25 sm-p-l-0 sm-p-r-0">
          <div class="inner">
            <!-- START BREADCRUMB -->
            <ol class="breadcrumb sm-p-b-5">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Create Homepage Information</li>
            </ol>
          </div>
        </div>
      </div>
      <!-- END JUMBOTRON -->
      <!-- START CONTAINER FLUID -->
      <div class="container-fluid container-fixed-lg">
        <!-- START ROW -->
        <div class="col-md-12">
          @if ($errors->any())
          <div class="alert alert-danger">
            <button class="close" data-dismiss="alert"></button>
            <ul>
              @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
          @endif
          @if(Session::has('success'))
          <div class="alert alert-success">
            <button class="close" data-dismiss="alert"></button>
            {{Session::get('success')}}
          </div>
          @endif
        </div>

        <div class="card card-default">
          <div class="card-header ">
            <div class="card-title">
              Create Home Page Information
            </div>
            <div class="tools">
              <a href="javascript:;" class="collapse"></a>
              <a href="#grid-config" data-toggle="modal" class="config"></a>
              <a href="javascript:;" class="reload"></a>
              <a href="javascript:;" class="remove"></a>
            </div>
          </div>
          <div class="card-body">
            <form data-parsley-validate method="post" action="{{route('home-page-banner.store')}}"
              enctype="multipart/form-data">
              @csrf
              <p>Title</p>
              <input type="text" class="typeahead form-control sample-typehead" name="title" placeholder="title"
                value="">

              <p>Sub Title</p>
              <input type="text" class="typeahead form-control sample-typehead" name="sub_title" placeholder="sub title"
                value="">

              <p>Description</p>
              <input type="text" class="typeahead form-control sample-typehead" name="description"
                placeholder="description" value="">

              <p>Banner Image</p>
              <input type="file" class="typeahead form-control sample-typehead" name="bannerImages[]"
                placeholder="Banner Image" value="" required>

              <p>Image Name</p>
              <input type="text" class="typeahead form-control sample-typehead" name="image_name"
                placeholder="Image Name" value="">

              <p>Image Alt Tag</p>
              <input type="text" class="typeahead form-control sample-typehead" name="image_alt_tag"
                placeholder="Image Alt Tag" value="">

              <p>Banner Url</p>
              <input type="text" class="typeahead form-control sample-typehead" name="banner_url"
                placeholder="Banner Url" value="">

              <button class="btn btn-success mt-3" type="submit">Save</button>

            </form>
            @if(!empty($data))
            <form data-parsley-validate method="post" action="{{route('home.page.content.update',['id' => $data->id])}}"
              enctype="multipart/form-data">
              @csrf
              @else
              <form data-parsley-validate method="post" action="{{route('home.page.content.store')}}"
                enctype="multipart/form-data">
                @csrf
                @endif

                <div class="card-title">
                  <h4><strong>Home Page Information</strong></h4>
                </div>
                <hr>
                <div class="row">
                  <div class="col-md-12">
                    @php
                    $banner_images = App\HomeBanner::get();
                    @endphp
                    @if( count($banner_images) != 0 )
                    <table class="table table-hover demo-table-search table-responsive-block" id="tableWithSearch">
                      <thead>
                        <tr>
                          <th style="width:1%">#</th>
                          <th style="width:10%">Image</th>
                          <th style="width:10%">Title</th>
                          <th style="width:10%">Sub Title</th>
                          <th style="width:10%">Description</th>
                          <th style="width:5%">Image Name</th>
                          <th style="width:5%">Image Alt Tag</th>
                          <th style="width:10%">url</th>
                          <th style="width:30%">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        @php
                        $sr = 1;
                        @endphp
                        @foreach( $banner_images as $banner_image )
                        <tr>
                          <td class="v-align-middle ">
                            <p>
                              {{$sr}}
                            </p>
                          </td>
                          <td class="v-align-middle">
                            @php
                            $bannerImage = json_decode($banner_image->banner_image);

                            if($bannerImage && !empty($bannerImage)){
                            $imageUrl = $bannerImage->image_url->url;
                            }else{
                            $imageUrl = null;
                            }
                            @endphp
                            @if($imageUrl)
                            <img src="{{$imageUrl}}" width="200px" />
                            @endif


                          </td>
                          <td class="v-align-middle ">
                            <p>
                              {{$banner_image->title}}
                            </p>
                          </td>
                          <td class="v-align-middle">
                            <p>{{$banner_image->sub_title}}</p>
                          </td>
                          <td class="v-align-middle">
                            <p>{{$banner_image->description}}</p>
                          </td>

                          <td class="v-align-middle">
                            <p>{{$banner_image->image_name}}</p>
                          </td>

                          <td class="v-align-middle">
                            <p>{{$banner_image->image_alt_tag}}</p>
                          </td>

                          <td class="v-align-middle">
                            <p>{{$banner_image->banner_url}}</p>
                          </td>


                          <td class="v-align-middle">
                            <a href="{{route('home-page-banner.edit',['home_page_banner' => $banner_image->id])}}"
                              class="btn btn-complete btn-sm">Edit</a>

                            <a href="#" data-toggle="modal" data-target="#modalSlideUp"
                              class="btn btn-danger btn-sm trashEntity" data-id="{{$banner_image->id}}"
                              data-url="{{route('home-page-banner.destroy',['home_page_banner' => $banner_image->id ])}}">Delete</a>
                          </td>
                        </tr>
                        @php
                        $sr++;
                        @endphp
                        @endforeach
                      </tbody>
                    </table>
                    @else
                    @endif


                  </div>
                  <div class="col-md-6">

                    {{-- <button class="btn btn-primary add_deal_button">Deal Images</button> --}}
                    @php
                    $dealImages = json_decode($data->deal_image);
                    @endphp
                    @if(!empty($data->deal_image) && count($dealImages) != 0)

                    @foreach( $dealImages as $key => $dealImage )
                    @php
                    $imageName = $dealImage->image_name;
                    $imageTitle = $dealImage->image_alt_tag;
                    $images = ($dealImage->image_url);
                    @endphp
                    <div class="input_deal_wrap">
                      <p>Current Deal Image</p>
                      <img src="{{$images->url}}" width="200px;">
                      <p>Deal Image Name</p>
                      @if($imageName)
                      <input type="text" class="typeahead form-control sample-typehead" name="dealImageName[]"
                        value="{{$imageName}}">
                      <p>Deal Image Alt Name</p>
                      @endif

                      @if($imageTitle)
                      <input type="text" class="typeahead form-control sample-typehead" name="dealImageAlttag[]"
                        value="{{$imageTitle}}">
                      <p>Deal Image</p>
                      <input type="file" class="typeahead form-control sample-typehead" name="dealImagerImages[]">
                      @endif
                      {{-- <a href="#" class="btn btn-danger remove_field" data-image-key="{{$key}}" data-content-id =
                      "{{$data->id}}">Remove</a> --}}
                    </div>
                    @endforeach
                    @else
                    <div class="input_deal_wrap">
                      <p>Deal Image Name</p>
                      <input type="text" class="typeahead form-control sample-typehead" name="dealImageName[]" value="">
                      <p>Deal Image Alt Name</p>
                      <input type="text" class="typeahead form-control sample-typehead" name="dealImageAlttag[]"
                        value="">
                      <p>Deal Image</p>
                      <input type="file" class="typeahead form-control sample-typehead" name="dealImagerImages[]">
                      {{-- <a href="#" class="btn btn-danger remove_field">Remove</a> --}}
                    </div>
                    @endif

                  </div>
                </div>

          </div>

          <div class="card-title">
            <h4><strong>Other Details</strong></h4>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-4">
              <p>Title</p>
              <div class="form-group form-group-default required txtOnly">
                <input class="typeahead form-control sample-typehead" type="text" placeholder="Name" @if(
                  ($data->page_title) )
                value="{{ $data->page_title }}"
                @else
                value="{{ old('name') }}"
                @endif

                name="page_title" required="required">
              </div>
            </div>
            <div class="col-md-4">
              <p>Author</p>
              <div class="form-group form-group-default required txtOnly">
                <input class="typeahead form-control sample-typehead" type="text" placeholder="Author" @if(
                  ($data->author) )
                value="{{ $data->author }}"
                @else
                value="{{ old('name') }}"
                @endif
                name="author" required="required">
              </div>
            </div>
            <div class="col-md-12">
              <p>Canonical URLS</p>
              <div class="form-group form-group-default required txtOnly">
                <textarea class="typeahead form-control sample-typehead" type="text" name="canonical_url"
                  placeholder="Canonical URLS">@if( ($data->canonical_url) ){{ $data->canonical_url }} @else {{ old('canonical_url') }} @endif </textarea>
              </div>
            </div>
            <div class="col-md-12">
              <p>Description</p>
              <div class="form-group form-group-default required txtOnly">
                <textarea class="typeahead form-control sample-typehead" type="text" name="description"
                  placeholder="Description">@if( ($data->description) ){{ $data->description }} @else {{ old('description') }} @endif</textarea>
              </div>
            </div>
            <div class="col-md-12">
              <p>Keywords</p>
              <div class="form-group form-group-default required txtOnly">
                <textarea class="typeahead form-control sample-typehead" type="text" name="keywords"
                  placeholder="Keywords">@if( ($data->keywords) ){{ $data->keywords }} @else {{ old('keywords') }} @endif</textarea>
              </div>
            </div>

          </div>

          <div class="card-title">
            <h4><strong>Status</strong></h4>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <select class="full-width" data-init-plugin="select2" name="status">
                  <option value="1" @if(old('status')==1) selected="selected" @endif>Active</option>
                  <option value="2" @if(old('status')==2) selected="selected" @endif>Inactive</option>
                </select>
              </div>
            </div>
            <div class="col-md-8">
              <button class="btn btn-success pull-right" type="submit">Save</button>
            </div>
          </div>
          </form>
        </div>
      </div>
      <!-- END ROW -->
    </div>
    <!-- END CONTAINER FLUID -->
  </div>
  @include('admin.partials.trashModal')
  <!-- END PAGE CONTENT -->
  @include('admin.partials.footer')
  <!-- END COPYRIGHT -->
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
@endsection

@section('page-level-js')
<script>
  $(document).ready(function() {
  
	var max_fields      = 10; //maximum input boxes allowed
	var wrapper   		= $(".input_fields_wrap_add_new"); //Fields wrapper
	var add_button      = $(".add_field_button"); //Add button ID
	
	var x = 1; //initlal text box count
	$(add_button).click(function(e){ //on add input button click
		e.preventDefault();
		if(x < max_fields){ //max input box allowed
			x++; //text box increment
			$(wrapper).append('<div><p>Banner Image Name</p><input type="text" class="typeahead form-control sample-typehead" name="bannerImageName[]"><p>Banner Image Alt Name</p><input type="text" class="typeahead form-control sample-typehead" name="bannerImageAlttag[]"><p>Banner URL</p><input type="text" class="typeahead form-control sample-typehead" name="bannerUrl[]" value=""><p>Banner Image</p><input type="file" class="typeahead form-control sample-typehead" name="bannerImages[]"><a href="#" class="btn btn-danger remove_field">Remove</a></div>'); //add input box
		}
	});
  
	$( ".remove_field" ).click(function(e) {
  // $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
		var dataId = $(this).attr('data-content-id');
    var dataKey = $(this).attr('data-image-key');
    
    console.log(dataId);
    $.ajax({
                url: "{{route('home.page.remove.image')}}",
                type: "get",
                data: {'dataId' : dataId,'dataKey' : dataKey},
                success: function(response) {
                    console.log(response);
                    
                }
            })
            e.preventDefault(); $(this).parent('div').remove(); x--;
	})
});

</script>
<script type="text/javascript">
  $(document).on('click', '.trashEntity', function(event) {
    var entityId = $(this).attr('data-id');
    var entityUrl = $(this).attr('data-url');
    // need to import delete modal (double check)
    console.log(entityId);
    $('#entity_id').val(entityId);
    $('#trashEntityForm').attr('action', entityUrl);
    $('#confirmationMessage').html('<h5>Are you sure, <span class="semi-bold">you want to delete it.?</span></h5><p class="p-b-10">Once deleted it can be recovered</p>');
  }); 
</script>
@endsection