@extends('home.home')
@section('content')
    <div class="container ">
        <div class="mx-auto ">

            <div class="card card-primary ">
                <div class="card-header" style="background-image: linear-gradient(to bottom, #000428, #073863);">
                    <h3 class="card-title">New</h3>

                </div>

                <form id="myform">
                    @csrf
                    <div class="card-body">

                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="ASSET_ID">Asset ID</label>
                                    <input type="text" class="form-control " id="ASSET_ID" name="ASSET_ID"
                                        placeholder="Asset ID">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="EMP_NAME">EMP Name</label>
                                    <select class="form-control select2" id="EMP_NAME" name="EMP_NAME"
                                        style="width: 100%;">
                                        <option value="" selected="selected">==SELECT==</option>
                                        @foreach ($emp_info as $emp_infos)
                                            <option value="{{ $emp_infos->emp_name }}">{{ $emp_infos->emp_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="company">Company</label>
                                    <select class="form-control select2" id="company" name="company"
                                        style="width: 100%;">
                                        <option value="" selected="selected">==SELECT==</option>
                                        @foreach ($companys as $company)
                                            <option value="{{ $company->company_name }}">{{ $company->company_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="ITEM_TYPE">Item Type </label>
                                    <select class="form-control select2" id="ITEM_TYPE" name="ITEM_TYPE"
                                        style="width: 100%;">
                                        <option value="" selected="selected">==SELECT==</option>
                                        @foreach ($item_types as $item_type)
                                            <option value="{{ $item_type->PRODUCT_NAME }}">{{ $item_type->PRODUCT_NAME }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="total_persons">Brand </label>
                                    <select class="form-control select2" id="BRAND" name="BRAND" style="width: 100%;">
                                        <option value="" selected="selected">==SELECT==</option>
                                        @foreach ($brands as $brand)
                                            <option value="{{ $brand->BRAND_NAME }}">{{ $brand->BRAND_NAME }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="EMAIL">Email </label>
                                    <input type="email" min="0" class="form-control" id="EMAIL" name="EMAIL"
                                        placeholder="Email">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="LOCATION">Location</label>
                                    <select class="custom-select form-control" id="LOCATION" name="LOCATION">
                                        <option value="">=SELECT=</option>
                                        <option value="GULSHAN">GULSHAN</option>
                                        <option value="GULSHAN-COR">GULSHAN-COR</option>
                                        <option value="BANANI">BANANI</option>
                                        <option value="AIRPORT TERMINAL">AIRPORT TERMINAL</option>
                                        <option value="KHULNA">KHULNA</option>
                                        <option value="AGRABAD">AGRABAD</option>
                                        <option value="AIRPORT CARGO">AIRPORT CARGO</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="total_persons">Ext </label>
                                    <input type="number" min="0" class="form-control" id="EXT" name="EXT"
                                        placeholder="Extension">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer text-right">
                        <button type="button" onclick="FromsCheck();" class="btn btn-primary hvr-grow"><i
                                class="ri-save-3-line hvr-pulse"></i> |
                            Save</button>
                    </div>
                </form>
            </div>

            <div class="card card-primary">
                <div class="card-header" style="background-image: linear-gradient(to bottom, #000428, #073863);">
                    <h3 class="card-title">Save List</h3>
                    <div class="card-tools">
                        <div class="my-buttons"></div>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-striped" id="EntryTable" width="100%">

                        <thead>
                            <tr>
                                <th>Sn</th>
                                <th>Code</th>
                                <th>Name</th>
                                <th>Item</th>
                                <th>Brand</th>
                                <th>AssetID</th>
                                <th>Email</th>
                                <th>Location</th>
                                <th>Company</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>

                        </tbody>

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

        </div>
    </div>
@endsection
@push('script')
    <script type="text/javascript">
        //Initialize Select2 Elements
        $('.select2').select2({
            theme: 'bootstrap4'
        })

        var firstValue = $("#myform").serialize();

        function FromsCheck() {

            var ASSET_ID = document.getElementById('ASSET_ID').value;
            if (ASSET_ID == '') {
                message('ASSET_ID Field is Empty!', '#FF0000', 'white', 'error', 'Error');
                document.getElementById("ASSET_ID").focus();
                return false;
            }

            var EMP_NAME = document.getElementById('EMP_NAME').value;
            if (EMP_NAME == '') {
                message('EMP NAME Field is Empty!', '#FF0000', 'white', 'error', 'Error');
                document.getElementById("EMP_NAME").focus();
                return false;
            }
            var ITEM_TYPE = document.getElementById('ITEM_TYPE').value;
            if (ITEM_TYPE == '') {
                message('ITEM TYPE is Empty!', '#FF0000', 'white', 'error', 'Error');
                document.getElementById("ITEM_TYPE").focus();
                return false;
            }
            var BRAND = document.getElementById('BRAND').value;
            if (BRAND == '') {
                message('BRAND Field is Empty!', '#FF0000', 'white', 'error', 'Error');
                document.getElementById("BRAND").focus();
                return false;
            }
            var LOCATION = document.getElementById('LOCATION').value;
            if (LOCATION == '') {
                message('LOCATION Field is Empty!', '#FF0000', 'white', 'error', 'Error');
                document.getElementById("LOCATION").focus();
                return false;
            }

            save();
            return true;

        }

        function save() {

            var allInputs = $("#myform").serialize();

            if (firstValue == allInputs) {
                message('Nothing changed !', '#FECC43', '#1A389F', 'info', 'Info');
            } else {
                $.ajax({
                    beforeSend: function() {
                        // $('#spinShowHide').show();
                    },
                    error: function(res) {
                        // $('#spinShowHide').hide();

                        const ErrowArray = res.responseJSON['message'];
                        const EE = res.responseJSON['exception'];
                        const msgs = ErrowArray.split(':');
                        if (EE=='ErrorException') {
                            message(ErrowArray, '#FF0000', 'white', 'error','সমস্যা');
                        } else {
                            message(msgs[2], '#FF0000', 'white', 'error', msgs[1]);
                        }
                    },
                    complete: function() {
                        // $('#spinShowHide').hide();
                    },
                    type: 'POST',
                    url: "{{ route('save_entry') }}", // Route
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: allInputs,
                    success: function(res) {
                        if (res.types == 'e') {
                            message(res.messege, '#FF0000', 'white', 'error', 'error');
                        } else {
                            message(res.messege, '#29912b', 'white', 'error', 'Success');
                            $('#EMP_NAME').val(null).trigger('change');
                            $('#ITEM_TYPE').val(null).trigger('change');
                            $('#BRAND').val(null).trigger('change');
                            document.getElementById('myform').reset();
                            $('#EntryTable').DataTable().ajax.reload();
                        }
                    }
                });
            }

        }

        function callDel(id) {
            // var url = "{{ route('deletedata', 'id') }}";
	        // location.href = url;

            var id = id;
            var url = "{{ route('deletedata', ':id') }}";
            url = url.replace(':id', id);
            location.href = url;

        }

        $(document).ready(function() {

            var table = $('#EntryTable').DataTable({
                processing: false,
                serverSide: false,
                responsive: true,
                dom:  "<'row'<'col-sm-4'l><'col-sm-4'B><'col-sm-4'f>>" +
          "<'row'<'col-sm-12'tr>>" +
          "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                buttons: [{
                        extend: 'print',
                        text: '<i class="fa fa-print"></i> Print',
                        title: 'Manual Asset Checklist',
                        className: 'btn btn-warning btn-sm text-secondary',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7,8]
                        }
                    },
                    {
                        extend: 'excel',
                        text: '<i class="fa fa-file-excel"></i> Excel',
                        title: 'Manual Asset Checklist',
                        className: 'btn btn-info btn-sm text-white',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7,8]
                        }
                    }
                ],
                columnDefs: [{
                    "defaultContent": "N/A",
                    "targets": "_all"
                }],
                ajax: "{{ route('Get_Table_data') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        render: function(data, type, row) {
                            const myArray1 = row.emp_name.split("~");
                            return myArray1[1];
                        }
                    },
                    {
                        render: function(data, type, row) {
                            const myArray = row.emp_name.split("~");
                            return myArray[0];
                        }
                    },
                    {
                        render: function(data, type, row) {
                            return row.item_type;
                        }
                    },
                    {
                        render: function(data, type, row) {
                            return row.brand;
                        }
                    },
                    {
                        data: 'asset_id',
                        name: 'asset_id'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'location',
                        name: 'location'
                    },
                    {
                        data: 'company',
                        name: 'company'
                    },
                    {
                        render: function(data, type, row) {
                            var idd = "'" + row.id + "'";
                            var html = '';
                            html += '<div class="row justify-content-center align-items-center">';
                            html +=
                                '<button class="btn btn-sm btn-danger hvr-grow m-1" style="width: 80px" onclick="callDel(' +idd+');">';
                            html += '<i class="ri-arrow-up-line"></i> | DEL</button>';
                            html += '</div>';
                            return html;
                        }
                    },
                ]
            });


        });
    </script>

    <script>
        @if (Session::has('messege'))
            var type = "{{ Session::get('alert-type') }}"
            var mess = "{{ Session::get('messege') }}"
            switch (type) {
                case 's':
                    message(mess, '#53C75F', 'white', 'error');
                    break;
                case 'e':
                    message(mess, '#FF0000', 'white', 'error');
                    break;
            }
        @endif
    </script>
@endpush