<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <title>{{ config('app.name', 'Laravel') }}</title>

  <!-- Fonts -->
  <!-- Styles -->
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  <!-- <link rel="stylesheet" href="{{ asset('css/sbadmin_pro.css') }}"> -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" >
  <link rel="stylesheet" href="{{ asset('plugins/datatables/css/jquery.dataTables.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables/css/buttons.dataTables.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables/css/rowReorder.dataTables.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables/css/fixedHeader.dataTables.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables/css/responsive.dataTables.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables/css/scroller.dataTables.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables/css/fixedColumns.dataTables.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables/css/select.bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/editor/css/editor.dataTables.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/editor/css/editor.bootstrap.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/editor/css/editor.quill.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/editor/css/editor.title.css') }}" >
  <link rel="stylesheet" href="{{ asset('plugins/editor/css/select2.min.css') }}" >
  <link rel="stylesheet" href="{{ asset('plugins/fontawesome/css/all.css') }}">
  <link rel="stylesheet" href="{{ asset('css/bootstrap-datetimepicker.min.css') }}" >
  <link rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}">
  <link href="{{ asset('css/custom.css') }}?v={{time()}}" rel="stylesheet">

  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>
  <!-- <script src="{{ asset('js/sbadmin_pro.js') }}" defer></script> -->
  <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
  <!-- <script src="{{ asset('js/tinymce.min.js') }}"></script> -->
  <script src="{{ asset('js/jquery-ui.js') }}"></script>
  <script src="{{ asset('js/moment-with-locales.js') }}"></script>
  <script src="{{ asset('js/popper.min.js') }}" ></script>
  <!-- <script src="{{ asset('js/clipboard.min.js') }}" ></script> -->
  <script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script>
  <script src="{{ asset('/js/bootbox.all.min.js')}}"></script>


  <script src="{{ asset('plugins/toast/jquery.toast.min.js') }}" ></script>
  <link rel="stylesheet" href="{{ asset('plugins/toast/jquery.toast.min.css') }}">

  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  <!-- <script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script> -->

  <script src="{{ asset('plugins/datatables/js/jquery.dataTables.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/dataTables.buttons.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/dataTables.select.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/buttons.print.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/buttons.flash.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/buttons.html5.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/jszip.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/pdfmake.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/vfs_fonts.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/dataTables.rowReorder.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/dataTables.fixedHeader.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/dataTables.responsive.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/dataTables.keyTable.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/dataTables.scroller.min.js') }}"></script>
  <script src="{{ asset('plugins/datatables/js/dataTables.fixedColumns.min.js') }}"></script>
  <script src="{{ asset('plugins/editor/js/editor.title.js')}}"></script>

  <script src="{{ asset('plugins/editor/js/dataTables.editor.js')}}"></script>
  <script src="{{ asset('plugins/editor/js/editor.quill.js')}}"></script>
  <script src="{{ asset('plugins/editor/js/editor.select2.js')}}"></script>
  <script src="{{ asset('plugins/editor/js/select2.min.js')}}"></script>
  <script src="{{ asset('/js/signature_pad.min.js')}}"></script>

  <!-- Select2 editor -->
  <script>
  (function( factory ){
    if ( typeof define === 'function' && define.amd ) {
      // AMD
      define( ['jquery', 'datatables.net', 'datatables.net-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
      // Node / CommonJS
      module.exports = function ($, dt) {
        if ( ! $ ) { $ = require('jquery'); }
        factory( $, dt || $.fn.dataTable || require('datatables') );
      };
    }
    else if ( jQuery ) {
      // Browser standard
      factory( jQuery, jQuery.fn.dataTable );
    }
  }(function( $, DataTable ) {
    'use strict';


    if ( ! DataTable.ext.editorFields ) {
      DataTable.ext.editorFields = {};
    }

    var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;

    _fieldTypes.select2 = {
      _addOptions: function ( conf, opts ) {
        var elOpts = conf._input[0].options;

        elOpts.length = 0;

        if ( opts ) {
          DataTable.Editor.pairs( opts, conf.optionsPair, function ( val, label, i ) {
            elOpts[i] = new Option( label, val );
          } );
        }
      },

      create: function ( conf ) {
        conf._input = $('<select/>')
        .attr( $.extend( {
          id: DataTable.Editor.safeId( conf.id )
        }, conf.attr || {} ) );

        var options = $.extend( {
          width: '100%'
        }, conf.opts );

        _fieldTypes.select2._addOptions( conf, conf.options || conf.ipOpts );
        conf._input.select2( options );

        var open;
        conf._input
        .on( 'select2:open', function () {
          open = true;
        } )
        .on( 'select2:close', function () {
          open = false;
        } );

        // On open, need to have the instance update now that it is in the DOM
        this.one( 'open.select2-'+DataTable.Editor.safeId( conf.id ), function () {
          conf._input.select2( options );

          if ( open ) {
            conf._input.select2( 'open' );
          }
        } );

        return conf._input[0];
      },

      get: function ( conf ) {
        var val = conf._input.val();
        val =  conf._input.prop('multiple') && val === null ?
        [] :
        val;

        return conf.separator ?
        val.join( conf.separator ) :
        val;
      },

      set: function ( conf, val ) {
        if ( conf.separator && ! Array.isArray( val ) ) {
          val = val.split( conf.separator );
        }

        // Clear out any existing tags
        if ( conf.opts && conf.opts.tags ) {
          conf._input.val([]);
        }

        // The value isn't present in the current options list, so we need to add it
        // in order to be able to select it. Note that this makes the set action async!
        // It doesn't appear to be possible to add an option to select2, then change
        // its label and update the display
        var needAjax = false;

        if ( conf.opts && conf.opts.ajax ) {
          if ( Array.isArray( val ) ) {
            for ( var i=0, ien=val.length ; i<ien ; i++ ) {
              if ( conf._input.find('option[value="'+val[i]+'"]').length === 0 ) {
                needAjax = true;
                break;
              }
            }
          }
          else {
            if ( conf._input.find('option[value="'+val+'"]').length === 0 ) {
              needAjax = true;
            }
          }
        }

        if ( needAjax && val ) {
          $.ajax( $.extend( {
            beforeSend: function ( jqXhr, settings ) {
              // Add an initial data request to the server, but don't
              // override `data` since the dev might be using that
              var initData = conf.urlDataType === undefined || conf.urlDataType === 'json'
              ? 'initialValue=true&value='+JSON.stringify(val)
              : $.param({initialValue: true, value: val});

              if ( typeof conf.opts.ajax.url === 'function' ) {
                settings.url = conf.opts.ajax.url();
              }

              if ( settings.type === 'GET' ) {
                settings.url += settings.url.indexOf('?') === -1 ?
                '?'+initData :
                '&'+initData;
              }
              else {
                settings.data = settings.data ?
                settings.data +'&'+ initData :
                initData;
              }
            },
            success: function ( json ) {
              var addOption = function ( option ) {
                if ( conf._input.find('option[value="'+option.id+'"]').length === 0 ) {
                  $('<option/>')
                  .attr('value', option.id)
                  .text( option.text )
                  .appendTo( conf._input );
                }
              }

              if ( Array.isArray( json ) ) {
                for ( var i=0, ien=json.length ; i<ien ; i++ ) {
                  addOption( json[i] );
                }
              }
              else if ( json.results && Array.isArray( json.results ) ) {
                for ( var i=0, ien=json.results.length ; i<ien ; i++ ) {
                  addOption( json.results[i] );
                }
              }
              else {
                addOption( json );
              }

              conf._input
              .val( val )
              .trigger( 'change', {editor: true} );
            }
          }, conf.opts.ajax ) );
        }
        else {
          conf._input
          .val( val )
          .trigger( 'change', {editor: true} );
        }
      },

      enable: function ( conf ) {
        $(conf._input).removeAttr( 'disabled' );
      },

      disable: function ( conf ) {
        $(conf._input).attr( 'disabled', 'disabled' );
      },

      // Non-standard Editor methods - custom to this plug-in
      inst: function ( conf ) {
        var args = Array.prototype.slice.call( arguments );
        args.shift();

        return conf._input.select2.apply( conf._input, args );
      },

      update: function ( conf, data ) {
        var val = _fieldTypes.select2.get( conf );

        _fieldTypes.select2._addOptions( conf, data );

        // Restore null value if it was, to let the placeholder show
        if ( val === null ) {
          _fieldTypes.select2.set( conf, null );
        }

        $(conf._input).trigger('change', {editor: true} );
      },

      focus: function ( conf ) {
        if ( conf._input.is(':visible') && conf.onFocus === 'focus' ) {
          conf._input.select2('open');
        }
      },

      owns: function ( conf, node ) {
        if ( $(node).closest('.select2-container').length || $(node).closest('.select2').length || $(node).hasClass('select2-selection__choice__remove') ) {
          return true;
        }
        return false;
      },

      canReturnSubmit: function() {
        return false;
      }
    };


  }));

  // Datepicker options
  $.datepicker.setDefaults({dateFormat: 'dd/mm/yy'});
  // End options
  </script>
</head>

<body class="font-sans antialiased">
  <div class="min-h-screen bg-gray-100">
    @include('layouts.navigation')

    <!-- Page Heading -->
    <header class="bg-white shadow">
      <div class="max-w-full mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {{ $header }}
      </div>
    </header>

    <!-- Page Content -->
    <main class="py-10">
      {{ $slot }}
    </main>
  </div>
</body>
</html>
