@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
        <h5 class="card-header">Product   &nbsp;&nbsp;&nbsp;
            <a href="{{ route('product.add') }}" type="button" class="btn btn-primary">
                <span class="tf-icons bx bx-plus"></span>&nbsp; Add New Product
            </a>
        </h5>      

        <div class="card-body">

            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ $message }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <div class="table-responsive text-nowrap">
                <table class="table table-bordered data-table">
                <caption class="ms-4">
                    Product
                </caption>
                <thead>
                    <tr>
                        <th>Sr No.</th>
                        <th>Product Name</th>
                        <th>Product Slug</th>
                        <th>Material</th>
                        <th>Image</th>
                        <th>Price</th>
                        <th>Sale Price</th>
                        <th>Create At</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
</div>


<div class="modal fade" id="view_img" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCenterTitle">Product Image</h5>
                <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                <div id="pr_img">
                    
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                Close
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script type="text/javascript">
  $(function () {
    
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        
        ajax: "{{ route('product.index') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'product_name', name: 'product_name'},
            {data: 'product_slug', name: 'product_slug'},
            {data: 'material', name: 'material'},
            {data: 'image', name: 'image'},
            {data: 'product_price', name: 'product_price'},
            {data: 'product_sale_price', name: 'product_sale_price'},
            {data: 'created_at', name: 'created_at'},
            {data: 'status', name: 'status'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
  });

  $(document).on('click', '#show_iamge', function(event) {
    var pro_id = $(this).attr('data-id');
    $.ajax({
        url : "{{ route('product.image') }}",
        type: "POST",
        data : {pro_id:pro_id,"_token": "{{ csrf_token() }}"},
        dataType : 'JSON',
        success: function(result) {
            var pro_img = result.image;
            var pro_thm_img = result.thumb_img;
            $('#view_img').modal("show");
            $('#pr_img').html('<img src="../'+ pro_img + '" width="100%"/>');
        }
    });
  });

  function delete_product(id){
    var idd = id;
    $.ajax({
        url : '{{ route("product.delete") }}',
        type : "POST",
        data : {id:idd,"_token": "{{ csrf_token() }}"},
        success:function(data){
            $('#login_success').html('<div class="alert alert-success" role="alert">Product Deleted successfully.</div>');
            $('.data-table').DataTable().ajax.reload();
        }
    })
  }
</script>
@endsection