@extends('layouts.app')

@section('stitle', __('messages.Suppliers'))
@section('title', __('messages.Suppliers'))

@section('content')
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
        @if(session()->get('title') == "success")
            <div class="alert alert-success" role="alert">
                <h4 class="alert-heading">Success</h4>
                <div class="alert-body">
                    {{ session()->get('message') }}
                </div>
            </div>
        @elseif (session()->get('title') == "error")
            <div class="alert alert-danger" role="alert">
                <h4 class="alert-heading">Error</h4>
                <div class="alert-body">
                    {{ session()->get('message') }}
                </div>
            </div>
        @endif
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">@yield('title')</h2>
                    </div>
                </div>
            </div>
            <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                <div class="form-group breadcrumb-right">
                    <button class="btn btn-primary waves-effect waves-float waves-light" type="button" onclick="location.href='{{ route('supplier_items.view',$supplier->id) }}'" >{{__('messages.ViewItems')}}</button>
                    <button class="btn btn-warning waves-effect waves-float waves-light" onclick="location.href='{{ route('supplier_purchase_order.list',$supplier->id) }}'" type="button" >{{__('messages.ViewPurchaseOrders')}}</button>
                </div>
            </div>
        </div>
        <div class="content-body mb-2">
            <!-- Table Hover Animation start -->
            <div class="row" id="table-hover-animation">
                <div class="col-12">
                    <div class="card mt-1" >
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                    <label>{{__('messages.name')}}</label>
                                    <h5 class="mt-1">{{$supplier->name}}</h5>
                                <hr>
                                </div>
                                <div class="col-6">
                                <label>{{__('messages.ContactName')}}</label>
                                    <h5 class="mt-1">{{$supplier->contact_name}}</h5>
                                <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label>{{__('messages.PHONE')}}</label>
                                    <h5 class="mt-1">{{$supplier->phone}}</h5>
                                <hr>
                                </div>
                                <div class="col-6">
                                <label>{{__('messages.EMAIL')}}</label>
                                    <h5 class="mt-1">{{$supplier->email}}</h5>
                                <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label>{{__('messages.SupplierCode')}}</label>
                                    <h5 class="mt-1">{{$supplier->supplier_code}}</h5>
                                    <hr>
                                </div>
                                <div class="col-6">
                                    <label>{{__('messages.VAT')}}</label>
                                    <h5 class="mt-1">{{$supplier->vat}}</h5>
                                    <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label>{{__('messages.BankDetails')}}</label>
                                    <h5 class="mt-1">{{$supplier->bank_details}}</h5>
                                    <hr>
                                </div>
                                <div class="col-6">
                                    <label>{{__('messages.Address')}}</label>
                                    <h5 class="mt-1">{{$supplier->supplier_code}}</h5>
                                    <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label>{{__('messages.Country')}}</label>
                                    <h5 class="mt-1">{{$supplier->country}}</h5>
                                    <hr>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- tag section -->
            <div id="card" class="content-header row mt-2">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h5 class=" float-left mb-0 pt-1">{{__('messages.Tags')}}</h5>
                        </div>
                    </div>
                </div>
                <div id="button" class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                    <div class="form-group breadcrumb-right mb-1">
                            <button class="btn btn-primary waves-effect waves-float waves-light edit_tag" onclick="getTag({{ $supplier->id }})" type="button"data-toggle="modal" data-target="#tag">{{__('messages.EditTags')}}</button>
                    </div>
                </div>
            </div>
            <div  class="card">
                <div id="tag-list-card-body" class="card-body">
                    @foreach($supplier_tags as $supplierTag)
                        <span class="badge bg-secondary">{{$supplierTag->name}}</span>
                    @endforeach
                </div>
                <input type="hidden" class="supplier_id" name="supplier_id" value="{{ $supplier->id }}">
            </div>


            <!-- Link Items -->
            <div class="inventory-items-section content-header row mt-3">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h5 class=" float-left mb-0 pt-1">{{__('messages.InventoryItem')}}</h5>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                    <div class="form-group breadcrumb-right mb-1">
                    <button onclick="getItem({{ $supplier->id }})" class="btn btn-primary waves-effect waves-float waves-light" type="button" data-toggle="modal" data-target="#item_link_modal">{{__('messages.LinkItem')}}</button>
                    </div>
                </div>
            </div>
            <div class="card">
                <form id="items-form">
                    <div>
                        <table class="inventory-items-table table">
                            <thead>
                                <tr>
                                    <th>{{__('messages.Item')}}</th>
                                    <th>{{__('messages.SKU')}}</th>
                                    <th>{{__('messages.BARCODE')}}</th>
                                    <th>{{__('messages.CATEGORY')}}</th>
                                    <th>{{__('messages.ACTIONS')}}</th>
                                </tr>
                            </thead>
                            <tbody class="inventory-items-table-body">
                            @foreach($supplier_items as $supplier_item)
                                <tr >
                                    <td>{{ $supplier_item->name }}</td>
                                    <td>{{ $supplier_item->sku }}</td>
                                    <td>{{ $supplier_item->barcode }}</td>
                                    <td>{{ $supplier_item->getItemCategory->name }}</td>
                                    <td>
                                        <a class="mr-1 remove-modifier-btn" onclick="removeItem({{ $supplier_item->id }})" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{__('messages.Delete')}}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash text-danger"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
{{--            <div class="row item_update">--}}
{{--                <div class="col-10"></div>--}}
{{--                <div class="col-2 text-right">--}}
{{--                    <button class="btn btn-success item_update_btn" onclick="updateItem()">Update</button>--}}
{{--                </div>--}}
{{--            </div>--}}
</div>

</div>

    <!-- tag mode -->
    <div class="modal-size-md d-inline-block">
        <!-- Modal -->
        <div class="modal fade text-left" id="tag" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                    <form class="dt_adv_search" method="POST">
                        <div class="modal-header">
                            @if($supplier->tag->count() > 0)
                                <h4 class="modal-title" id="myModalLabel17">Edit tags</h4>
                            @else
                                <h4 class="modal-title" id="myModalLabel17">Add tags</h4>
                            @endif
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div class="row">
                                <div class="col-12">
                                    <div class="form-row mb-1">
                                        <div class="col-md-12 mb-1">
                                            <label>{{__('messages.Tags')}}:</label>
                                            <select id="add_tag_select"
                                                    class="select2 form-control form-control-lg"
                                                    name="add_modifiers[]" multiple required>
                                                @foreach($tag as $supplierTag)
                                                    <option value="{{$supplierTag->id}}">{{$supplierTag->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="submit" onclick="addTag({{ $supplier->id }})" class="btn btn-primary" data-dismiss="modal">{{__('messages.Apply')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<!-- Item-Link-Modal-Start -->
<div class="modal-size-md d-inline-block">
    <!-- Modal -->
    <div class="modal fade text-left" id="item_link_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
{{--                <form class="dt_adv_search" method="POST">--}}
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel17">{{__('messages.AddItem')}}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label>{{__('messages.SelectItem')}}:</label>
                                        <select id="item_select"
                                                class="select2 form-control form-control-lg"
                                                name="items[]" multiple required>
                                            @foreach($items as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" class="supplier_id" name="supplier_id" value="{{ $supplier->id }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" onclick="addItem({{ $supplier->id }})" class="item_link_save_btn btn btn-primary" data-dismiss="modal">{{__('messages.Save')}}</button>
                    </div>
{{--                </form>--}}
            </div>
        </div>
    </div>
</div>
<!-- Item-Link-Modal-End -->
@endsection

@push('my_scripts')
        <script>

            // Get tag on Modal Show
            function getTag(supplier_id){
                let tag_select = $("#add_tag_select");
                // alert(supplier_id);
                const method = 'POST';
                const url = "{{ route('supplier.get_tag') }}";
                const headers = {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                };
                const data = {
                    supplier_id,
                };
                $.ajax({
                    method,
                    url,
                    headers,
                    data, // data to be sent to server
                    dataType: 'json', // type of data expecting back from server
                    success: function (data) {
                        const { supplier_tags } = data;
                        tag_select.val(supplier_tags); // Select the option with a values in array
                        tag_select.trigger('change');
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            }
            // Add Tag to Product
            function addTag(supplier_id){
                let tag_ids = $('#add_tag_select').val(); // select2 options
                console.log(tag_ids);
                // if(tag_ids.length > 0){
                const method = 'POST';
                const url = "{{ route('supplier.add_tag') }}";
                const headers = {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                };
                const data = {
                    supplier_id,
                    tag_ids,
                };
                $.ajax({
                    method,
                    url,
                    headers,
                    data, // data to be sent to server
                    dataType: 'json', // type of data expecting back from server
                    success: function (data) {
                        console.log(data);
                        const { status, message, supplier_tag } = data;
                        const card_body = $('#tag-list-card-body');
                        const button = $('#button');
                        card_body.empty();

                        $.each(supplier_tag, function(i, supplier_tag){
                            card_body
                                .append(` <span class="badge bg-secondary">${supplier_tag.name}</span>`);
                            {{--button.append('<button class="btn btn-primary waves-effect waves-float waves-light" onclick="getTag({{ $product->id }})" type="button"data-toggle="modal" data-target="#tag">Edit Tags</button>');--}}
                        });
                        Swal.fire({
                            icon: 'success',
                            title: `${status}`,
                            text: `${message}`,
                        })
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
                // }else{
                //     Swal.fire({
                //         title: 'Error!',
                //         text: 'Select Tags',
                //         icon: 'error',
                //         customClass: {
                //             confirmButton: 'btn btn-primary'
                //         },
                //         showClass: {
                //             popup: 'animate__animated animate__shakeX'
                //         },
                //         buttonsStyling: false
                //     });
                // }

            }



            function getItem(supplier_id){
                let item_select = $("#item_select");
                const method = 'POST';
                const url = "{{ route('supplier.get_item') }}";
                const headers = {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                };
                const data = {
                    supplier_id,
                };
                $.ajax({
                    method,
                    url,
                    headers,
                    data, // data to be sent to server
                    dataType: 'json', // type of data expecting back from server
                    success: function (data) {
                        const { supplier_items } = data;
                        item_select.val(supplier_items); // Select the option with a values in array
                        item_select.trigger('change');
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            }

            function addItem(supplier_id){
                let item_ids = $('#item_select').val(); // select2 options
                console.log(item_ids);
                if(item_ids.length > 0){ // if no modifier selected
                    const method = 'POST';
                    const url = "{{ route('supplier.add_item') }}";
                    const headers = {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    };
                    const data = {
                        supplier_id,
                        item_ids,
                    };
                    $.ajax({
                        method,
                        url,
                        headers,
                        data, // data to be sent to server
                        dataType: 'json', // type of data expecting back from server
                        success: function (data) {
                            console.log(data);
                            const { status, message, supplier_items } = data;
                            console.log(supplier_items);
                            const items_table = $('.inventory-items-table-body');
                            items_table.empty();
                            $.each(supplier_items, function(i, supplier_item){
                                items_table
                                    .append(`<tr>
                                            <td>${supplier_item.name}</td>
                                            <td>${supplier_item.sku}</td>
                                            <td>${supplier_item.barcode}</td>
                                            <td>${supplier_item.get_item_category.name}</td>
                                            <td>
                                                <a class="mr-1 remove-modifier-btn" onclick="removeItem(${ supplier_item.id })" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash text-danger"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                                </a>
                                            </td>
                                        </tr>`);
                            });
                            Swal.fire({
                                icon: 'success',
                                title: `${status}`,
                                text: `${message}`,
                            })
                        },
                        error: function (data) {
                            console.log(data);
                        }
                    });
                }
                else{
                    Swal.fire({
                        title: 'Error!',
                        text: 'Select Items',
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        showClass: {
                            popup: 'animate__animated animate__shakeX'
                        },
                        buttonsStyling: false
                    });
                }
            }

            function removeItem(item_id){
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    customClass: {
                        confirmButton: 'btn btn-primary',
                        cancelButton: 'btn btn-danger m-1'
                    },
                    buttonsStyling: false
                }).then(function (result) {
                    if (result.value) {
                        var supplier_id = $('.supplier_id').val(); // supplier_id - hidden
                        const method = 'POST';
                        const url = "{{ route('supplier.remove_item') }}";
                        const headers = {
                            'X-CSRF-TOKEN': $('input[name="_token"]').val()
                        };
                        const data = {
                            supplier_id,
                            item_id,
                            _method: "DELETE"
                        };
                        $.ajax({
                            method,
                            url,
                            headers,
                            data, // data to be sent to server
                            dataType: 'json', // type of data expecting back from server
                            success: function (data) {
                                console.log(data);
                                const { status, message, supplier_items } = data;
                                const items_table = $('.inventory-items-table-body');
                                items_table.empty();
                                $.each(supplier_items, function(i, supplier_item){
                                    items_table
                                        .append(`<tr>
                                            <td>${supplier_item.name}</td>
                                            <td>${supplier_item.sku}</td>
                                            <td>${supplier_item.barcode}</td>
                                            <td>${supplier_item.get_item_category.name}</td>
                                            <td>
                                                <a class="mr-1 remove-modifier-btn" onclick="removeItem(${ supplier_item.id })" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash text-danger"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                                </a>
                                            </td>
                                        </tr>`);
                                });
                                Swal.fire({
                                    icon: 'success',
                                    title: `${status}`,
                                    text: `${message}`,
                                })
                            },
                            error: function (data) {
                                console.log(data);
                            }
                        });
                    }
                });

            }
        </script>
@endpush