@extends('admin.template.master')

@section('stylesheets')
    {!! Html::style('assets/admin/bower_components/select2/dist/css/select2.min.css') !!}

    <style>
        /*Select2 style*/
        .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            padding: 6px 12px;
            height: 34px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-right: 10px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
            padding-right: 0;
            height: auto;
            margin-top: -4px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 28px;
            right: 3px;
        }

        .help-block {
            color: #dd4b39;
        }

        .table-striped > tbody > tr:nth-of-type(odd) {
            background-color: #e2e2e282;
        }

        .table-hover > tbody > tr:hover {
            background-color: rgba(208, 208, 208, 0.51);
        }

        /*Select2 style*/

        table.dataTable {
            width: 100% !important;
        }
    </style>
@endsection

@section('title')
    <section class="content-header">
        <h1>
            Product Comparison
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Product Comparison</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
        <div class="row">
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title" style="vertical-align: middle;">Search products</h3>

                        <div class="input-group" style="float: right;">
                            <div id="radioBtn" class="btn-group">
                                <a class="btn btn-primary btn-sm active inv-code-btn" data-toggle="check_item_type"
                                   data-title="1">INV Code</a>
                                <a class="btn btn-primary btn-sm notActive item-type-btn" data-toggle="check_item_type"
                                   data-title="2">Item Type</a>
                            </div>
                        </div>
                    </div>

                    {!! Form::open(['url' => '/admin/products/comparison/search']) !!}
                    {!! Form::hidden('check_item_type', 1, ['id' => 'check_item_type']) !!}
                    <div class="box-body">
                        <div class="form-group inv-code-box">
                            {!! Form::label('INV Code') !!}
                            {!! Form::text('product_code_inv', null, ['class' => 'form-control', 'placeholder' => 'INV Code', 'id' => 'product_code_inv']) !!}
                            <span class="help-block"></span>
                        </div>

                        <div class="form-group item-type-box">
                            {!! Form::label('Item Type') !!}
                            {!! Form::select('item_type_id', $item_types, null, ['placeholder' => 'Select item type', 'class'=> 'form-control', 'id' => 'item_type_id']) !!}
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="box-footer">
                        {!! Form::button('Search',['class' => 'btn btn-primary search-by-id']) !!}
                    </div>
                    {!! Form::close() !!}

                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body table-responsive">
                        {{--Status start--}}
                        <div class="row" style="display: block;">
                            <div class="form-group col-md-6">
                                <div class="input-group">
                                    <label style="display: block;">Status</label>
                                    <div id="radioBtn-go" class="btn-group">
                                        <a class="btn btn-primary btn-sm notActive" data-toggle-go="status-go"
                                           data-title-go="2">Active</a>
                                        <a class="btn btn-primary btn-sm notActive" data-toggle-go="status-go"
                                           data-title-go="1">Inactive</a>
                                    </div>
                                    {!! Form::hidden('status-go', 0, ['id' => 'status-go']) !!}
                                </div>
                            </div>

                            <div class="form-group col-md-6">
                                <div class="input-group" style="float: right;">
                                    <label style="display: block; text-align: right;">Status</label>
                                    <div id="radioBtn-com" class="btn-group">
                                        <a class="btn btn-primary btn-sm notActive" data-toggle-com="status-com"
                                           data-title-com="4">Active</a>
                                        <a class="btn btn-primary btn-sm notActive" data-toggle-com="status-com"
                                           data-title-com="3">Inactive</a>
                                    </div>
                                    {!! Form::hidden('status-com', 0, ['id' => 'status-com']) !!}
                                </div>
                            </div>
                        </div>
                        {{--Status end--}}
                        <table class="table table-hover" style="margin-bottom: 15px;">
                            <tr style="background: black; color: white;">
                                <th colspan="5" width="50%" style="text-align: center;">Ryans Go</th>
                                <th colspan="5" width="50%" style="text-align: center;">Ryans Computers</th>
                            </tr>
                        </table>
                        <table class="table table-hover" id="product_table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Regular&nbsp;Price</th>
                                <th>Special&nbsp;Price</th>
                                <th>Status</th>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Regular&nbsp;Price</th>
                                <th>Special&nbsp;Price</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
    {!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}

    <script type="text/javascript">
        $(document).ready(function () {
            $('#item_type_id').select2();

            $('#radioBtn-go a').on('click', function () {
                var sel = $(this).data('title-go');
                var tog = $(this).data('toggle-go');
                $('#' + tog).prop('value', sel);

                $('a[data-toggle-go="' + tog + '"]').not('[data-title-go="' + sel + '"]').removeClass('active').addClass('notActive');
                $('a[data-toggle-go="' + tog + '"][data-title-go="' + sel + '"]').removeClass('notActive').addClass('active');

                // remove active class from go status button
                $('#radioBtn-com a').removeClass('active');

                // get product by ryans go active or inactive
                getComparedProducts(sel);
            });

            $('#radioBtn-com a').on('click', function () {
                var sel = $(this).data('title-com');
                var tog = $(this).data('toggle-com');
                $('#' + tog).prop('value', sel);

                $('a[data-toggle-com="' + tog + '"]').not('[data-title-com="' + sel + '"]').removeClass('active').addClass('notActive');
                $('a[data-toggle-com="' + tog + '"][data-title-com="' + sel + '"]').removeClass('notActive').addClass('active');

                // remove active class from go status button
                $('#radioBtn-go a').removeClass('active');

                // get product by ryans com active or inactive
                getComparedProducts(sel);
            });

            $('#radioBtn a').on('click', function () {
                var sel = $(this).data('title');
                var tog = $(this).data('toggle');
                $('#' + tog).prop('value', sel);

                $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
                $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
            });

            $(".search-by-id").click(function () {
                var check_item_type = parseInt($('input[name=check_item_type]').val());
                if (check_item_type === 1) {
                    if ($('#product_code_inv').val() === '') {
                        alert('Please enter INV code');
                        return false;
                    }
                } else if (check_item_type === 2) {
                    if ($("#item_type_id option:selected").val() === '') {
                        alert('Please select item type');
                        return false;
                    }
                }

                getComparedProducts(0);
            });

            function getComparedProducts(active_inactive) {
                var check_item_type = $("#check_item_type").val();
                var product_code_inv = $("#product_code_inv").val();
                var item_type_id = $("#item_type_id").val();

                $('#product_table').DataTable({
                    "destroy": true,
                    "processing": true,
                    "serverSide": true,
                    "pageLength": 25,
                    "lengthMenu": [10, 25, 50, 75, 100, 200],
                    "ajax": {
                        url: "{{ route('getComparedProducts') }}",
                        data: function (d) {
                            d.check_item_type = check_item_type;
                            d.product_code_inv = product_code_inv;
                            d.item_type_id = item_type_id;
                            d.active_inactive = active_inactive;
                        }
                    },
                    "order": [[0, "desc"]],
                    "columns": [
                        {data: 'go_sku'},
                        {data: 'go_name'},
                        {data: 'go_price'},
                        {data: 'go_specialPrice'},
                        {data: 'go_status'},
                        {data: 'com_sku'},
                        {data: 'com_name'},
                        {data: 'com_price'},
                        {data: 'com_specialPrice'},
                        {data: 'com_status'},
                    ]
                });
            }

            $("#product_code_inv").blur(function () {
                if ($("#product_code_inv").val()) {
                    $('.help-block').text('');
                }
            });

            $('.item-type-box').hide();

            $(".item-type-btn").click(function (e) {
                e.preventDefault();
                $(".inv-code-box").hide('fast');
                $(".item-type-box").show('fast');
            });

            $(".inv-code-btn").click(function (e) {
                e.preventDefault();
                $(".inv-code-box").show('fast');
                $(".item-type-box").hide('fast');
            });
        });
    </script>
@endsection