@extends('voyager::master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('page_title', 'Supplier Brands')

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-ticket"></i>
        Supplier Brands
    </h1>
@stop

@section('content')
    <div class="page-content edit-add container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="add-page-wrapper">
                    <a href="{{ route('supplier_brands.add') }}" class="btn btn-secondary add-page"><span class="icon voyager-plus"></span>Add New</a>
                </div>

                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="table-responsive">
                            <div id="dataTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                <table id="dataTable" class="table table-hover dataTable no-footer" role="grid">
                                    <thead>
                                        <tr>
                                          <!--  <th>Id</th>  -->
                                            <th>Brand Name</th>
                                            <th>Supplier</th>
                                            <th>Count</th>
                                            <th>Date Added</th>
                                            <th>Active</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if(!empty($supplier_brands))
                                            @foreach($supplier_brands as $sb)
                                            <tr>
                                               <!-- <td>{{ $sb->id }}</td> -->
                                                <td>{{ $sb->name }}</td>
                                                <td>{{ \App\Models\Supplier::where("id", $sb->supplier_id)->first()->name }}</td>
                                                <td>{{ $sb->products->count() }}</td>
                                                <td>{{ $sb->created_at->format("d-m-Y") }}</td>
                                                <td>{{ $sb->is_active ? "Yes" : "No" }}</td>
                                                <td width="250">
                                                    <a href="javascript:;" title="Delete" class="btn btn-sm btn-danger pull-right delete" data-id="{{ $sb->id }}" id="delete-{{ $sb->id }}">
                                                        <i class="voyager-trash"></i> <span class="hidden-xs hidden-sm">Delete</span>
                                                    </a>
                                                    <a href="{{ route('supplier_brands.edit', $sb->id) }}" title="Edit" class="btn btn-sm btn-primary pull-right edit">
                                                        <i class="voyager-edit"></i> <span class="hidden-xs hidden-sm">Edit</span>
                                                    </a>
                                                    <a href="{{ route('supplier_brands.view', $sb->id) }}" title="View" class="btn btn-sm btn-warning pull-right view">
                                                        <i class="voyager-eye"></i> <span class="hidden-xs hidden-sm">View</span>
                                                    </a>
                                                </td>
                                                
                                            </tr>
                                            @endforeach
                                        @endif;
                                    </tbody>
                                </table>
                        </div>
                    </div><!-- panel-body -->
                </div><!-- panel -->

            </div>
        </div>
    </div>
    <div class="modal modal-danger fade in" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title"><i class="voyager-trash"></i> Are you sure you want to delete this Supplier Brands?</h4>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('supplier_brands.delete') }}" id="delete_form" method="POST">
                        @csrf
                        <input type="hidden" name="id" value="">
                        <input type="submit" class="btn btn-danger pull-right delete-confirm" value="Yes, Delete it!">
                    </form>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

<style type="text/css">
    .add-page-wrapper .icon.voyager-plus:before {
        color: #89c33f;
        font-size: 24px;
    }
    .add-page-wrapper .icon.voyager-plus {
        height: 24px;
        width: 24px;
        vertical-align: middle;
    }
    a.btn.btn-secondary.add-page {
        border: 1px solid #89c33f;
        color: #89c33f;
        transition: all 0.2s;
        vertical-align: middle;
        display: flex;
        flex-direction: row;
        width: 150px;
        align-items: center;
        justify-content: center;
        height: 60px;
        margin-bottom: 15px;
    }
    a.btn.btn-secondary.add-page:hover {
        background-color: #89c33f;
        color: #fff;
    }
    a.btn.btn-secondary.add-page:hover .icon.voyager-plus:before {
        color:#fff;
    }
</style>
@stop

@section('javascript')
    <script>
        $(document).ready(function () {
            $('#dataTable').DataTable( );

            $("body").on("click", "a.delete", function(){
                var _id = $(this).data("id");
                console.log("id", _id);
                $('#delete_modal').find("input[name='id']").attr("id", _id);
                $('#delete_modal').find("input[name='id']").val(_id);
                $('#delete_modal').modal('show');
            });
        });
    </script>
@stop