@extends('layout.Main')
@section('container')

<!-- @if ($errors)
   @foreach ($errors->all() as $error)
   <div class="alert alert-outline-warning" role="alert">
    {{ $error }}
    </div>  
   @endforeach
@endif -->

<!-- Page Content-->
<div class="page-content">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="col-sm-12">
            <div class="page-title-box">
                <div class="row">
                    <div class="col">
                        <h4 class="page-title">{{ $title }}</h4>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Master</a></li>
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Inventory</a></li>
                            <li class="breadcrumb-item active">Ship</li>
                        </ol>
                    </div><!--end col-->
                    <div class="col-auto align-self-center">
                        <a href="#" class="btn btn-sm btn-outline-primary" id="Dash_Date">
                            <span class="day-name" id="Day_Name">Today:</span>&nbsp;
                            <span class="" id="Select_date">Jan 11</span>
                            <i data-feather="calendar" class="align-self-center icon-xs ms-1"></i>
                        </a>
                        <a href="#" class="btn btn-sm btn-outline-primary">
                            <i data-feather="download" class="align-self-center icon-xs"></i>
                        </a>
                    </div><!--end col-->  
                </div><!--end row-->                                                              
            </div><!--end page-title-box-->
        </div><!--end col-->
    </div><!--end row-->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="nav-link">
                            <a class=" btn btn-sm btn-soft-primary"  href="" href="" role="button" data-bs-toggle="modal" data-bs-target="#InputDataShip"><i class="fas fa-plus me-2" ></i>New Ship</a>
                        </div>
                    </div><!--end card-header-->
                    <div class="card-body">
                        <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                            <tr>
                                <th>Ship ID</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th class="text-center">Ship Image</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                                @if (!@empty($ships))
                                
                                @foreach ($ships as $ship)
                                <tr>
                                    <td>{{ $ship->ship_id }}</td>
                                    <td>{{ $ship->ship_name }}</td>
                                    <td>{{ $ship->ship_desc }}</td>
                                    <td class="text-center"><img src=" {{ asset('storage/' . $ship->ship_image) }}" alt="" width=100px length=200px></td>
                                    <td class="text-center">                                                       
                                        <a class="badge bg-warning border-0" href="/inv/ship/edit/{{$ship->ship_id}}"><i class="las la-pen"></i></a> 
                                        <a class="badge bg-danger border-0" href="/inv/ship/{{$ship->ship_id}}" onclick="return confirm('Anda yakin menghapus data ini ?')"><i class="las la-trash-alt"></i></a>
                                    </td> 
                                </tr>   
                                @endforeach
                                @endif
                            </tbody>
                        </table>        
                    </div>
                </div>
            </div> <!-- end col -->
        </div> <!-- end row -->

        <div class="modal fade" id="InputDataShip" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalFullscreenLgLabel">Master Ship</h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form method="POST" action="/inv/ship" enctype="multipart/form-data">
                                @csrf
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Ship ID</label>
                                    <div class="col-sm-3">
                                        <input class="form-control form-control-sm" type="text" name="ship_id" placeholder="" id="ship_id" required>
                                    </div>
                                </div>   
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Name</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" name="ship_name" placeholder="" id="ship_name" required>
                                    </div>
                                </div>       
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Description</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control form-control-sm" rows="3" name="ship_desc" type="text" placeholder="" id="ship_desc" required></textarea>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Image</label>
                                    <div class="col-sm-8">
                                        <input type="file" id="ship_image" name="ship_image" class="dropify @error('ship_image') is-invalid @enderror" data-default-file="../plugins/dropify/images/1.jpg" />
                                        @error('ship_image')
                                            <div class="invalid-feedback">
                                                {{$errors}}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <div class="button-items"> 
                                        <button type="submit" id="mg_save" class="btn btn-primary"><i class="mdi mdi-check-all me-2"></i>Add</button>
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="mdi mdi-alert-outline me-2"></i>Close</button> 
                                    </div>
                                </div>   
                            </form>
                                    
                        </div>
                    </div>   
                </div>
              </div>
            </div>
        </div>

        <!-- <div class="modal fade" id="EditDataShip" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalFullscreenLgLabel">Master Ship</h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form method="POST" action="">
                                @csrf
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Ship ID</label>
                                    <div class="col-sm-3">
                                        <input class="form-control form-control-sm" type="text" id="ship_id" name="ship_id" placeholder="" id="example-text-input-sm" value="" readonly>
                                    </div>
                                </div>   
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Name</label>
                                    <div class="col-sm-8">
                                        <input class="form-control form-control-sm" type="text" id="ship_name" name="ship_name" placeholder="" id="example-text-input-sm" value="">
                                    </div>
                                </div>       
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Description</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control form-control-sm" rows="3" id="ship_desc" name="ship_desc" type="text" placeholder="" id="example-text-input-sm"></textarea>
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-3 form-label align-self-center mb-lg-0 text-end">Image</label>
                                    <div class="col-sm-8">
                                        <input type="file" id="ship_image" name="ship_image" class="dropify @error('ship_image') is-invalid @enderror" data-default-file="../plugins/dropify/images/1.jpg" />
                                        @error('ship_image')
                                            <div class="invalid-feedback">
                                                {{$error}}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-2 row">
                                    <div class="button-items"> 
                                        <button type="submit" id="mg_update" class="btn btn-primary"><i class="mdi mdi-check-all me-2"></i>Update</button>
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="mdi mdi-alert-outline me-2"></i>Close</button> 
                                    </div>
                                </div>   
                            </form>       
                        </div>
                    </div>   
                </div>
              </div>
            </div>
        </div> -->

        <!-- <div class="modal fade" id="DeleteDataShip" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalFullscreenLgLabel">Master Ship</h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form method="POST" action="">
                                @method('delete')
                                @csrf
                                <div class="mb-2 row">
                                    <label for="example-text-input-sm" class="col-sm-4 form-label align-self-center mb-lg-0 text-end">Yakin Hapus Data ini ?</label>
                                </div>   
                                <div class="mb-2 row">
                                    <div class="button-items"> 
                                        <button class="btn btn-danger"><i class="mdi mdi-check-all me-2"></i>Yes</button>
                                        <button class="btn btn-success" data-bs-dismiss="modal"><i class="mdi mdi-alert-outline me-2"></i>Cancel</button> 
                                    </div>
                                </div>   
                            </form>
                                    
                        </div>
                    </div>   
                </div>
              </div>
            </div>
        </div> -->
          <!-- Group Modal --> 
          
    </div><!-- container -->

    <footer class="footer text-center text-sm-start">
        &copy; <script>
            document.write(new Date().getFullYear())
        </script> Dastone <span class="text-muted d-none d-sm-inline-block float-end">Crafted with <i
                class="mdi mdi-heart text-danger"></i> by AIN Production</span>
    </footer><!--end footer-->
</div>
<!-- end page content -->

<!-- <script>
    $(document).ready(function(){
        var table = $('#datatable').DataTable();

        table.on('click', '.edit', function(){
            $tr = $(this).closeest('tr');
            if($($tr)).hasClass('child'){
                $tr = $tr.prev('.parent');
            }

            var data = table.row($tr).data();
            console.log($data);
            
            $('#ship_id').val(data[1]);
            $('#ship_name').val(data[2]);
            $('#ship_desc').val(data[3]);

            $('editForm').attr('action', '/inv/ship'+data[1]);
            $('#EditDataShip').modal('show');
        })
    })
</script> -->


<script>
    jQuery(document).ready(function($){
        $('.alert_notif').on('click',function(){
            var getLink = $(this).attr('href');
            //console.text
            console.log(getLink);
            swal({
                    title: 'Alert',
                    text: 'Hapus Data?',
                    html: true,
                    confirmButtonColor: '#d9534f',
                    showCancelButton: true,
                    },function(){
                    window.location.href = getLink
                });
            return false;
        });
    });
 
</script>

@endsection