@extends('admin.layouts.app')
@section('title','Product Image')
@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
      Product Images
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ url('admin/dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="{{ url('admin/product') }}"></i> Product</a></li>
        <li class="active"> Product Images</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
  <div class="row">
         <div class="col-md-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title"><i class="fa fa-circle-o"></i> Add Product Image For {{ $product->title ?? '' }} </h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
               
              </div>
            </div>

  <div class="box-body" >
      <!-- Info boxes -->
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
          <form class="form-horizontal" action="{{ action('AdminController\ProductImageController@store', [$product->id]) }}" id="add_form" method="post" enctype="multipart/form-data">
            @csrf
              <div class="box-body">
                <div class="form-group">
                  <label for="" class="col-sm-2 control-label">Choose Image<span style="color: red">*</span></label>

                  <div class="col-sm-10">
                    <p>Can Choose Multiple Image</p>
                    <input type="file" name="image_name[]" class="form-control" onchange="fileValidation(this)" id="file" multiple required>
                  </div>
                </div>
                
                <!-- <div class="form-group">
                  <label for="" class="col-sm-2 control-label">Choose Image</label>

                  <div class="col-sm-10">
                    <input type="file" name="image_name" class="form-control" id=""  onchange="preview_image(event)">
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-2 control-label"></label>

                  <div class="col-sm-10">
                    
                     <img id="output_image" src="{{ asset('admin') }}/dist/img/placeholder/download.png" style="width: 200px;height: 200px;"/>
                  </div>
                </div> -->
              </div>
              <!-- /.box-body -->
              <div class="box-footer text-right">
                <button type="reset" class="btn btn-default">Reset</button>
                <button type="submit" class="btn btn-main">Submit</button>
              </div>
              <!-- /.box-footer -->
            </form>
        </div>
        <div class="col-md-2"></div>
      </div>
    </div>
      </div>
      </div>
      </div>
      <!-- /.row -->

        <div class="row">
         <div class="col-md-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title"><i class="fa fa-circle-o"></i> Product Images</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
               
              </div>
            </div>
         
            <!-- /.box-header -->
            <div class="box-body">
              <div class="table-responsive">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>S.No</th>
                  <th>Product Image</th>
                  <th>Main Image</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @php $sr = 1 @endphp 
                @foreach($productImages as $productImage)
                <tr>
                  <td>{{ $sr++ }}</td>
                  <td><img width="50" src="{{ asset($productImage->image_path ?? '') }}"></td>
                  <td> 
                  	@if($productImage->main_image == 1)
                  	  <button class="btn btn-primary">Yes</button>
                  	@else
                  	  <button class="btn btn-danger">No</button>
                  	@endif

                  </td>
                  <td> 
                  	@if($productImage->status == 1)
                  	  <button class="btn btn-success">Active</button>
                  	@else
                  	  <button class="btn btn-danger">Deactive</button>
                  	@endif

                  </td>
                  <td>
                   <!--  <button type="button" href="#" data-href="{{ action('AdminController\ProductImageController@update', [$productImage->id]) }}" class="btn btn-primary btn-xs edit_model" data-toggle="modal" data-target="edit_model"  data-container=".edit_model"><i class="fa fa-edit"></i></button> -->

                    <button type="button" href="{{ action('AdminController\ProductImageController@delete', [$productImage->id]) }}" class="btn btn-danger btn-xs" id="delete"><i class="fa fa-trash-o"></i></button>

                    <a 
                      type="button" 
                       @if($productImage->main_image == 1)
                        id="main_image"
                        class="btn btn-danger btn-xs" 
                       @else
                        id="main_image"
                        class="btn btn-primary btn-xs" 
                       @endif
                      href="{{ action('AdminController\ProductImageController@mainImage', [$productImage->id]) }}" 
                    >
                     @if($productImage->main_image == 1)
                      Main Image 
                     @else
                      Main Image
                     @endif                       
                    </a>

                    <a 
                      type="button" 
                       @if($productImage->status == 1)
                        id="deactivate"
                        class="btn btn-danger btn-xs" 
                       @else
                        id="activate"
                        class="btn btn-success btn-xs" 
                       @endif
                      href="{{ action('AdminController\ProductImageController@status', [$productImage->id]) }}" 
                    >
                     @if($productImage->status == 1)
                      Deactivate 
                     @else
                      Activate
                     @endif                       
                    </a>
                  </td>
                </tr>
                @endforeach                
              </tbody>
              </table>
            </div>
            </div>
            </div>
            </div>
            </div>
            <!-- /.box-body -->
  </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
@endsection