@extends('layouts.admin_layout')

@section('title', 'Billing Category List')

@section('content')

    <div class="container-fluid my-3">
        <div class="row my-3">
        	<div class="col-md-12">
                <div class="card r-0">
                	<div class="card-header white">
                        <strong>Mobile Image</strong>
                        <a href={{ route('mobile_image.store') }}>
                            <button class="btn btn-dark btn-xs float-right">
                                <i class="icon icon-plus"></i>New Mobile Image
                            </button>
                        </a>
                    </div>
                    <div tabindex="-1" role="dialog" id="modaledit" class="modal fade" role="dialog">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title">Confirmation</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <strong><p id="confirmation" >Do you to change its status?</p></strong>
                            </div>
                            <div class="modal-footer">
                              <form method="POST" action={{ route("mobile_image.change_status") }} >
                                @csrf
                                <input type="text" name="id" id="image_id" hidden>
                              <button id="confirm" type="submit" class="btn btn-primary">Save changes</button>
                            </form>
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover r-0">
                            <thead>
                            <tr class="no-b">
                                <th>SN</th>
                                <th>IMAGE</th>
                                <th>NAME</th>
                                <th>STATUS</th>
                                <th>ACTION</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach($images as $image)
                                    <tr>
                                        <td>{{$loop->iteration}}</td>
                                        <td><img class="img-rounded" style="height:50px; width:50px; " src="{{asset('images/'.$image->image)}}"/></td>
                                        <td>{{$image->image_name}}</td>
                                        <td><span class="icon icon-circle s-12  mr-2 text-warning"></span>{{$image->status}}</td>
                                        <td>
                                            <a href="{{ route('mobile_image.update', $image->id)}}" class="btn btn-primary btn-xs">Edit</a>
                                            <a href="#" id="change" data-target="#modaledit" data-toggle="modal" data-id="{{ $image->id }}" class="btn btn-primary btn-xs change">{{$image->status == "active" ? "Deactivate" : "Activate"}}</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <script>
    $(document).ready(function(){
      $('.change').on('click',function(){
         let id = $(this).attr('data-id');
         var txt = $(this).html();
         if (txt === "Activate"){
           $('#confirmation').html('Do you want to Activate this Image?');
           $('#confirm').html('Activate');
         }else{
           $('#confirmation').html('Do you want to Deactivate this Image?');
           $('#confirm').html('Deactivate');
           $('#confirm').attr('class', 'btn btn-danger');
         }
         $('#image_id').val(id);
    });
    }); 
  </script>
@endsection