@extends('layouts.fixed')
@section('title','Convert Category report')
@section('css')
    <style>
        body {
            overflow-y: hidden;
            /*font-family: "Times New Roman";*/
            color: #000000;
        }
        .table-bordered td, .table-bordered th {
            border: 0.1rem solid rgba(8, 8, 8, 0.33) !important;
        !important;
        }

        h5.heading-title {
            text-transform: initial;
            font-weight: bold;
            letter-spacing: 1px;
        }

        tr th, tr td {
            line-height: 1.0;
            font-size: 15px;
            padding: 7px !important;

        }

        tr th, span strong, div span {
            text-transform: initial;
            font-weight: bold;
        }

        @media print {
            @page {
                size: A4 landscape;
                padding: 0 !important;
                margin: 0 !important;
            }
            .table-bordered td, .table-bordered th {
                border: 0.1rem solid rgba(8, 8, 8, 0.50) !important;
            }

            body{
                overflow: hidden !important;
                color: #000000;
            }

            div.card-body{
                margin: auto 20px;
            }

            div.card-body{
                padding-top: 0;
            }
            .table .thead-dark th {
                color: #000 !important;
                background-color: #dadada !important;
                /*border-color: #32383e !important;*/
            }
            /*body {*/
            /*-webkit-print-color-adjust: exact;*/
            /*}*/

        }
    </style>
@stop
@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Convert Category</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Report</a></li>
                        <li class="breadcrumb-item active">Convert Category</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <section class="content no-print">
        <div class="container-fluid">
            {{--start --}}
            <div class="col-lg-12 col-sm-8 col-md-6 col-xs-12">
                <div class="card card-primary card-outline">
                    <div class="card-body " style="padding-bottom:0">
                        {{ Form::open(['route'=>'convert-category','method'=>'post']) }}

                        <div class="form-row">
                            
                            <div class="form-group col-md-5" >
                                <label>From Category</label>
                                {{ Form::select('from_category_id[]',$categories,null,['id'=>'from_category_id','class'=>'select2 form-control','multiple'=>'multiple','required'=>'required']) }}
                            </div>
                            <div class="form-group col-md-5" >
                                <label>To Category</label>
                                {{ Form::select('to_category_id',$categories,null,['id'=>'to_category_id','class'=>'select2 form-control','placeholder'=>'Select Category','required'=>'required']) }}
                            </div>
                            <div class="form-group col-md-2" style="margin-top: 30px">
                                <button type="submit" class="btn btn-info btn-md btn-block"><i class="fa fa-exchange"></i> Convert</button>
                            </div>

                        </div>
                        {{  Form::close() }}
                    </div>
                </div>
                <!-- /.card -->
            </div>
        </div>{{--end --}}
    </section>
@stop

@section('style')

@stop


@section('plugin')
    <!-- DataTables -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('plugins/datatables/dataTables.bootstrap4.js') }}"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
@stop

@section('script')
    <!-- page script -->
    <script type="text/javascript">
        $('.select2').select2()
        //Initialize Select2 Elements
        $('.select2bs4').select2({
          theme: 'bootstrap4'
        })
    </script>
@stop
