@extends('tenant.layouts.admin')

{{--Tilte Section--}}
@section('title', 'Import Flows Management')

{{--Style Section--}}
@section('style')
    <!-- bootstrap 5.x or 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">

    <!-- default icons used in the plugin are from Bootstrap 5.x icon library (which can be enabled by loading CSS below) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">

    <!-- alternatively you can use the font awesome icon library if using with `fas` theme (or Bootstrap 4.x) by uncommenting below. -->
    <!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous" -->

    <!-- the fileinput plugin styling CSS file -->
    <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

    <style>
        .krajee-default.file-preview-frame {
            width: 99% !important;
        }
        .krajee-default .file-footer-caption {
            height: 198% !important;

        }
    </style>

@endsection

{{--Content Section--}}
@section('content')
    <div class="row pt-2 px-5">
        <div class="card p-0 shadow rounded overflow-hidden">
            <div class="card-header gradient-border"></div>
            <div class="card-body pb-0">
                <form method="POST" action="{{route('admin.store.index')}}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-12">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if (session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif
                            @if (session('errors2'))
                                <div class="alert alert-danger">
                                    {{ session('errors2') }}
                                </div>
                            @endif
                        </div>
                        <div class="col-md-12 ">
                            <div class="mb-3">
                                <div class="row mb-2">
                                    <div class="col-12"><label for="formFile" class="form-label ms-3 m-0 mt-1"><strong style="color: red">This decision it will delete all data in the ticketing system flow:</strong></label></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-6"><label for="formFile" class="form-label ms-3 m-0 mt-1"><strong>Import JSON File:</strong></label></div>
                                    <div class="col-6" style="float: right;text-align: right"><label for="formFile" class="form-label ms-3 m-0 mt-1"><strong>Demo File</strong> <a href="{{global_asset('assets/files/uploader.json')}}" download="Ticketing-Flows.json"><i class="fa fa-eye"></i></a></label></div>
                                </div>
                                <input class="form-control p-3" type="file" id="fileinput"  name="file" accept=".json" >
                                @error('file')<p class="ms-2 ps-1 text-nowrap text-danger">{{$message}}</p>@enderror
                            </div>
                        </div>

                    </div>
                    <div class="row mb-3 mt-lg-0 mt-3 ms-2 ps-lg-1 ps-3">
                        <button class="btn btn-md btn-success upload-button border rounded" type="submit" name="submit">Upload File</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

{{--Script Section--}}
@section('script')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/fileinput.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/locales/LANG.js"></script>
    <script>
        $("#fileinput").fileinput({
            'theme': 'fas',
            'showUpload': false,
            'showCancel': false,
            'showClose': false,
            'showRemove': true,
            'showBrowse': false,
            'maxFileCount': 1,
            'autoReplace': true,
            "browseOnZoneClick": true,
            "msgProcessing": "",
            'previewFileType': 'any',
            'allowedFileExtensions': ["json"],
            'allowedPreviewExtensions': ['json'],
            'msgValidationErrorIcon': "",
            'hideThumbnailContent': true,
            'dropZoneTitle': "Json File",
            'dropZoneClickTitle': "<h6 class=\"text-success\">Drag And Drop</h6>",
        });
    </script>
@endsection