@extends('layouts.admin-panel')

@section('head')
    @include('admin-panel/includes/head')
    @include('admin-panel/includes/addHead')
    <!-- Latest compiled and minified CSS -->
{{--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">--}}

    <!-- Optional theme -->
{{--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">--}}
    <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"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
    <style>
        .fileinput-remove, .fileinput-upload {
            color: black !important;
        }
    </style>

@stop

@section('nav')
    @include('admin-panel/includes/navbar')
@stop

@section('content')

    @include('admin-panel/includes/sidebar')

    <!-- Main content -->
    <div class="content-wrapper">

        @include('admin-panel/includes/header')

        <!-- Content area -->
            <div class="content">

                <!-- Vertical form options -->
                <div class="row">
                    <div class="col-md-12">

                        <!-- Basic layout-->
                        <div class="card">
                            <div class="card-header header-elements-inline">
                                <h5 class="card-title">Manga bölümü əlavə et</h5>
                                <div class="header-elements">
                                    <div class="list-icons">
                                        <a class="list-icons-item" data-action="collapse"></a>
                                        <a class="list-icons-item" data-action="reload"></a>
                                        <a class="list-icons-item" data-action="remove"></a>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                {!! csrf_field() !!}
                                <div class="file-loading">
                                    <input id="input-711" name="image[]" type="file" multiple>
                                </div>
                                <form action="{{route('delMangaSeriesFolderApi',[$manga_folder,$manga_series])}}" method="POST">
                                    @csrf
                                    Bu bölümdə hal-hazırda yüklənmiş <b>{{ $filesCount }}</b> şəkil var! Silinsinmi? <button class="btn btn-default btn-outline-secondary fileinput-remove fileinput-remove-button">Sil</button>
                                </form>
                            </div>
                        </div>
                        <!-- /basic layout -->

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

        <!-- /content area -->


        @include('admin-panel/includes/footer')

    </div>
    <!-- /main content -->
@endsection
@section('scripts')

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{{--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js"--}}
{{--        type="text/javascript"></script>--}}

<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.2/js/fileinput.min.js"></script>
<script>
    $(document).ready(function () {
        $("#input-711").fileinput({
            uploadUrl: "{{route('dropStore',$id)}}",
            uploadExtraData: function () {
                return {
                    _token: $("input[name='_token']").val(),
                };
            },
            maxFileCount: 120,
            showBrowse: false,
            browseOnZoneClick: true
        });
    });
</script>

@endsection