@extends('layouts.seller')

@section('css')
    <style>
        /* Remove up and down arrows from number input */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
            border: 1px solid #858585;
            padding: 18px 0px;
        }

        .add-quantity {
            background: #f7f7f7;
            border: 1px solid #858585;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 4px;
        }
        .specific-category-item{
            display: flex;
            place-items: center;
            margin: auto;
        }
    </style>

    @endsection()
@section('content')
    @php
        $pageHeading = __('printers.add');
        if(isset($duplicate) && $duplicate){
            $pageHeading = __('printers.new_printer');
        }elseif ($data->id){
            $pageHeading = __('printers.edit');
        }
        $selectedCat = [] ;
        if(isset($data->category) && !empty($data->category)) $selectedCat = explode(',',$data->category);
        $allCategoryChecked = (count($selectedCat) <= 0);
    @endphp
<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            {{ $pageHeading }}
        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{__('common.home') }}</a></li>
                    <li class="breadcrumb-item" aria-current="page"><a href="{{route('printers.index')}}">{{ __('printers.title') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page"> {{ $pageHeading }}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    {{ Form::open(array('route' => $routes, 'method' => 'POST', 'id' => 'ajaxSave'))}}
    <div class="row">
        <div class="col-xs-12 col-sm-7 col-md-7">
            <div class="round-white-bg box-shadow">
                <div class="error-msg font-14"></div>
                @if (isset($duplicate) && $duplicate)
                    {{ Form::hidden('is_duplicate', 1) }}
                @endif
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="custom-input-group colored-field-group">
                            {!! Form::label('printer_name', __('printers.printer_name')) !!}
                            {!! Form::text('printer_name', $data->printer_name ?? '', ['class' => 'form-control']) !!}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="custom-input-group colored-field-group">
                            {!! Form::label('model_name', __('printers.model_name')) !!}
                            {!! Form::text('model_name', $data->model_name ?? '', ['class' => 'form-control']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="custom-input-group colored-field-group">
                            {!! Form::label('port_name', __('printers.port_name')) !!}
                            {!! Form::text('port_name', $data->port_name ?? '', ['class' => 'form-control','readonly' => $data->id ? true : false]) !!}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="custom-input-group colored-field-group">
                            {!! Form::label('printer_for', __('printers.for')) !!}
                            {!! Form::select('printer_for', [1 => 'Bluetooth', 2 => 'Wifi', 3 => 'USB Connected'], ($data->printer_for ?? null), ['class' => 'form-control select2']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="custom-input-group colored-field-group">
                            {!! Form::label('device_id', __('printers.pos_device')) !!}
                            {!! Form::select('device_id', $posDevices ?? [], $data->device_id ?? null, ['class' => 'form-control select2']) !!}
                        </div>
                    </div>
                    <div class="col-md-6">
                        {!! Form::label('print_receipt_count', __('printers.receipts_count')) !!}
                        <div class="number-input md-number-input d-flex">
                            <a class="minus add-quantity" href="javascript:void(0)">
                                <i class="fa fa-minus" aria-hidden="true"></i>
                            </a>
                            {!! Form::number('print_receipt_count', $data->print_receipt_count ?? 0, ['class' => 'form-control col-md-2 mx-3 text-center']) !!}
                            <a id="add" class="plus add-quantity" href="javascript:void(0)">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="custom-input-group colored-field-group custom-input-group-small">
                            {{Form::label('status', __('printers.status'), array('class' => 'control-label'))}}
                            <div class="global-item-top-box mt-3">
                                <label class="yummy-switch-label">
                                    {!! Form::checkbox('status',1,$data->status ?? 1) !!}
                                    <span class="yummy-switch-box"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="custom-input-group colored-field-group custom-input-group-small">
                            {{Form::label('full_receipt', __('printers.full_receipt'), array('class' => 'control-label'))}}
                            <div class="global-item-top-box mt-3">
                                <label class="yummy-switch-label">
                                    {!! Form::checkbox('full_receipt',$data->full_receipt ?? 0,$data->full_receipt == 1, ['class' => '_toggle_val']) !!}
                                    <span class="yummy-switch-box"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="custom-input-group colored-field-group custom-input-group-small">
                            {{Form::label('kitchen_receipt', __('printers.kitchen_receipt'), array('class' => 'control-label'))}}
                            <div class="global-item-top-box mt-3">
                                <label class="yummy-switch-label">
                                    {!! Form::checkbox('kitchen_receipt',$data->kitchen_receipt ?? 0,$data->kitchen_receipt == 1, ['class' => '_toggle_val']) !!}
                                    <span class="yummy-switch-box"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="custom-input-group colored-field-group custom-input-group-small">
                            {{Form::label('print_web_order', __('printers.print_web_order'), array('class' => 'control-label'))}}
                            <div class="global-item-top-box mt-3">
                                <label class="yummy-switch-label">
                                    {!! Form::checkbox('print_web_order',$data->print_web_order ?? 0,$data->print_web_order == 1,['class' => '_toggle_val']) !!}
                                    <span class="yummy-switch-box"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="custom-input-group colored-field-group custom-input-group-small">

                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="custom-input-group colored-field-group custom-input-group-small">
                            {{Form::label('z_report', __('printers.z_report'), array('class' => 'control-label'))}}
                            <div class="global-item-top-box mt-3">
                                <label class="yummy-switch-label">
                                    {!! Form::checkbox('z_report',$data->z_report ?? 0,$data->z_report == 1,['class' => '_toggle_val']) !!}
                                    <span class="yummy-switch-box"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="custom-input-group colored-field-group custom-input-group-small">
                            {{Form::label('kvittering', __('printers.kvittering'), array('class' => 'control-label'))}}
                            <div class="global-item-top-box mt-3">
                                <label class="yummy-switch-label">
                                    {!! Form::checkbox('kvittering',$data->kvittering ?? 0,$data->kvittering == 1,['class' => '_toggle_val']) !!}
                                    <span class="yummy-switch-box"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                {{ Form::submit( __('common.save'), array('class' => 'btn btn-primary width80'))}}
            </div>
        </div>
        <div class="col-xs-12 col-sm-5 col-md-5">
            <div class="round-white-bg box-shadow">
                {!! Form::label('category', __('printers.category'), ['class' => 'mt-3']) !!}
                <div class="row col-md-12 mt-1">
                    <div class="col-md-3">
                        <div class="custom-input-group colored-field-group custom-input-group-small specific-category-item">
                            {{Form::label('category_all', __('printers.category_all'), array('class' => 'control-label mr-3 mt-3'))}}
                            <div class="global-item-top-box mt-3">
                                <label class="yummy-switch-label">
                                    {!! Form::checkbox('category_all',1,$allCategoryChecked, ['class' => '_toggle_val']) !!}
                                    <span class="yummy-switch-box"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="custom-input-group colored-field-group custom-input-group-small specific-category-item">
                            {{Form::label('category_specific', __('printers.category_specific'), array('class' => 'control-label mr-3 mt-3'))}}
                            <div class="global-item-top-box mt-3">
                                <label class="yummy-switch-label">
                                    {!! Form::checkbox('category_specific',1,!$allCategoryChecked, ['class' => '_toggle_val']) !!}
                                    <span class="yummy-switch-box"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-3 col-md-12 __specific_categories" @if($allCategoryChecked)style="display: none"@endif>
                    {{Form::label('specific_categories', __('printers.specific_categories'), array('class' => 'control-label'))}}
                    <div class="row col-12">
                        @foreach( $category as $k => $c)
                            @php
                                $checked = in_array($k,$selectedCat) ? '1' : '0';
                            @endphp
                            <div class="custom-input-group colored-field-group custom-input-group-small specific-category-item col-6">
                                {{Form::label('', $c.' ('.$k.')', array('class' => 'control-label mr-3 mt-3 col-md-7'))}}
                                <div class="global-item-top-box mt-3 col-md-5">
                                    <label class="yummy-switch-label">
                                        {!! Form::checkbox('category[]',$k,$checked,['class' => '_toggle_val _specific_cat']) !!}
                                        <span class="yummy-switch-box"></span>
                                    </label>
                                </div>
                            </div>
                        @endforeach
                        <div class="clearfix col-6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ Form::close()}}
</div>
@endsection

@section('script')
    <script>

        $(document).on('input','._toggle_val',function () {
            let checked = $(this).is(':checked');
            let fieldName = $(this).prop('name');

            if(!($(this).hasClass('_specific_cat'))) $(this).val(checked ? '1' : '0');

            if(fieldName == 'category_all' || fieldName == 'category_specific'){
                toggleAllSpecifcCategories(fieldName,checked);
            }

            if(fieldName == 'category[]'){
                let checkedSpecificCat = ($('[name="category[]"]:checked').length > 0);
                toggleAllSpecifcCategories('category_specific',checkedSpecificCat);
                $('input[name="category_specific"]').prop('checked',checkedSpecificCat);
            }
        });

        function toggleAllSpecifcCategories(fieldName,checked)
        {
            if(fieldName == 'category_all'){
                $('input[name="category_specific"]').prop('checked',!checked);
                $('.__specific_categories').toggle(!checked);
            }else{
                $('input[name="category_all"]').prop('checked',!checked);
                $('.__specific_categories').toggle(checked);
            }
        }

        $(document).on('click','.add-quantity',function () {
            let plus = $(this).hasClass('plus');
            let inpElem = $('input[name="print_receipt_count"]');
            let currVal = parseInt(inpElem.val());
            if(plus){
                inpElem.val(currVal+1);
            }else{
                if(currVal <= 0) return;
                inpElem.val(currVal-1);
            }
        })

    </script>
@endsection