@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a href="{{ url('admin/settings') }}">Settings</a></li>
                <li><a href="#">Order Types</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="portlet">
            <!-- BEGIN PAGE HEADER-->
            <div class="portlet-title page_heading">
                <div class="row">
                    <div class="col-md-9">
                        <div class="caption">
                            <h2 style="font-weight: 600; margin-top: 0;">Order Types</h2>
                            <span class="subtitle">Manage your order types other than the general types here.</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- BEGIN PAGE BAR -->

            <div class="row"> 
                <div class="col-md-12">
                    <div class="col-md-4">
                        <div class="new_product_left">
                            <h4>ORDER TYPES</h4>
                            <p>Do you have any other order types in your business?</p>
                            <p>You can add or modify your the order types for your business here, you can use <br> these types while setting your sales. You can have reportings based on these <br> order types.</p>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-7">
                        <div class="row">
                            <div class="col-md-12 inner_row">
                                <div class="input-group order_type_names">
                                    <input class="form-control title" value="" id="title" type="text" autocomplete="off" placeholder="Enter order type names seperated by comma to add multiple">
                                    <span class="input-group-btn">
                                        <button class="btn default save_new" type="button" style="margin: 0">
                                            <i class="fa fa-plus"></i>
                                        </button>
                                    </span>
                                </div>
                                <p class="text-danger department hidden"></p>
                            </div>
                        </div>

                        <!-- <div class="row">
                            <div class="portlet-body">
                                <div class="products box role">
                                
                                    <div class="header_tbl">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="col-md-1 row_header"></div>
                                                <div class="col-md-4 row_header">Partner Title</div>
                                                <div class="col-md-7 row_header b4_del_header">Description</div>
                                            </div>
                                        </div>
                                        
                                    </div> -->
                        <div class="portlet-body">
                            <div class="products box role"> 
                                <div class="header_tbl">
                                    <div class="row">

                                        <div class="col-md-12">
                                            <div class="col-md-1 row_header">

                                            </div>
                                            <div class="col-md-4 row_header ">
                                                Partner Title
                                            </div>

                                            <div class="col-md-7 row_header b4_del_header">
                                                Description
                                            </div>
                                            <div class=" del_header"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row_wrap roles" id="roles">
                                    @if(!empty($data["selected"]))
                                    @foreach($data["selected"] as $order)
                                    <div class="row_inner_wrap">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="col-md-1 inner_row">
                                                    <div class="del_icon delete-order-type" id="{{$order['id']}}" data-url="{{route('admin.order-types.destroy', $order['id'])}}">
                                                        <i class="fa fa-trash-o del delete-item" data-type="channel" aria-hidden="true" style="visibility: visible"></i>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 inner_row b4_del_header">
                                                    <!-- <select class="select2 parent_role select2-hidden-accessible" name="title[]" tabindex="-1" aria-hidden="true"> -->
                                                    <input type="text" name="title"  placeholder="" value="{{ $order['title'] }}" class="form-control description" readonly>

                                                    <i class="fa fa-check edit_source edit_field edit_field_title" id= "{{$order['id']}}"></i>
                                                    <p class="text-danger edit_allowance_type hidden" style="position:relative;margin-bottom:10px;"></p>
                                                </div>
                                                <div class="col-md-7 inner_row b4_del_header">
                                                    <input type="text" name="description"  placeholder="" value="{{$order['description']}}" class="form-control description " readonly>
                                                    <i class="fa fa-check edit_source edit_field edit_field_title" id= "{{$order['id']}}"></i>
                                                </div>    
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                    <div class="row_inner_wrap order-type-wrap">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="col-md-1 inner_row">
                                                </div>
                                                <div class="col-md-4 inner_row b4_del_header">
                                                    <select class="select2 title_new select2-hidden-accessible validate" name="" tabindex="-1" aria-hidden="true" id="title_new">
                                                        <option></option>
                                                        @if(!empty($data['unselected']))
                                                        @foreach($data['unselected'] as $value)
                                                        <option value="{{$value['id']}}">{{$value['title']}}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                                <div class="col-md-7 inner_row b4_del_header">
                                                    <div class="input-group">
                                                        <input class="form-control description"  value="" type="text" placeholder="Input a description" autocomplete="off">
                                                        <p class="text-danger hidden"></p>
                                                        <span class="input-group-btn">
                                                            <button class="btn default save_order_type" type="button" style="margin: 0">
                                                                <i class="fa fa-plus "></i>
                                                                <i class="fa fa-check edit_row" style="display: none;"></i>
                                                            </button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="col-sm-12" style="margin-top: 50px">
                                            <div class="col-md-8 each_input" style="float:right; margin-right: -45px;">
                                                <input type="hidden" name="submit" value="1">
                                                <input type="submit" name="save" value="Update" class="btn theme_btn_round float_btn update" style="float:right;">
                                                <a href="" class="btn theme_btn_round cancel float_btn" style="float:right;">Cancel</a>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                 
            </div>
        </div>
    </div>
</div>

<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" >
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Do you want to delete?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>
<!-- //SWEET_ALERT END// -->
@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/settings.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/custom.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/custom-style.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css"/>
<!-- DATE PICKER -->
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css" />
    <style>
        .add{
            float: left;
            width: 100%;
        }
        .add_icon{
            float: right;
            margin-right: -18px;
        }
        .delete-item{
            display: none;
        }
        .row{
            margin-left: -5px;
            margin-right: -35px;
        }
        .btn.default{
            background-color: #ececec !important;
            border-radius: 0px 5px 5px 0px;
        }

        .form-control {
            height: 34px !important;
        }

        .breadcrumbs li:first-child a{
            color: #00919e;
        }

        .form-control[disabled], fieldset[disabled] .form-control {
            color: #bdbdbd;
        }

        .form-control, .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
            font-weight: 500;
        }

        .del_icon{
            left:-4px !important;
            width: 34%;
            background: none !important;
            border:none !important;
            font-size: 18px !important;
        }

        .col-md-4{
            right: 39px;
        }

        .col-md-7{
            right: 26px;
        }
        
        .col-md-1{
            border-left: none;
            width: 64px !important;
        }

        .order_type_names{
            margin-right: 30px ;
        }

        body{
            overflow-x:hidden !important;
        }

        .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
            left: 18px;
            border-color: black transparent transparent transparent !important;
        }

        .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
            padding: 0 16px;
            border: 1px solid #c6c8cc;
            right: 0;
            border-radius: 0 4px 4px 0;
            background: #ececec;
        }

        .select2-container--bootstrap.select2-container--open .select2-selection__arrow b {
            border-color: transparent transparent black !important;
        }

        .select2-container--bootstrap .select2-selection__clear {
            display: none;
        }

        .help_btn {
            background: #A8A8A8;
            text-align: center;
            margin-right: 22px;
            margin-top: 5px;
        }
            
            
    </style>
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/general.js')}}"></script>
@include('admin.js.order-type')
@stop