@extends('layouts.app')
@section('styles')
    <style>
        .upload-dropzone {
            position: relative;
            border: 2px dashed #e3e6ef;
            border-radius: 10px;
            padding: 40px 20px;
            text-align: center;
            background-color: #fbfbfd;
            cursor: pointer;
            transition: border-color .15s ease, background-color .15s ease;
        }
        .upload-dropzone:hover,
        .upload-dropzone.is-dragover {
            border-color: #635cf0;
            background-color: rgba(99, 92, 240, 0.04);
        }
        .upload-dropzone.is-invalid {
            border-color: #ff4d4f;
        }
        .upload-dropzone input[type="file"] {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .upload-dropzone__icon {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(99, 92, 240, 0.12);
            color: #635cf0;
            margin-bottom: 14px;
        }
        .upload-dropzone__filename {
            color: #635cf0;
            font-weight: 500;
            word-break: break-all;
        }
        .upload-columns code {
            color: #635cf0;
            background-color: rgba(99, 92, 240, 0.08);
            padding: 2px 6px;
            border-radius: 4px;
        }
    </style>
@endsection
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="social-dash-wrap">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="breadcrumb-main">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                        </div>
                    </div>
                </div>
                @foreach (['success' => ['alert-success', 'Success'], 'error' => ['alert-danger', 'Error']] as $key => [$alertClass, $heading])
                    @if (session($key))
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert-big alert {{ $alertClass }} alert-dismissible fade show mb-25" role="alert">
                                    <div class="alert-content">
                                        <h6 class="alert-heading">{{ $heading }}</h6>
                                        <p>{{ session($key) }}</p>
                                        <button type="button" class="close text-capitalize" data-dismiss="alert" aria-label="Close">
                                            <span data-feather="x" aria-hidden="true"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
                @if (session('rowErrors'))
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert-big alert alert-warning alert-dismissible fade show mb-25" role="alert">
                                <div class="alert-content">
                                    <h6 class="alert-heading">Skipped Rows</h6>
                                    <ul class="mb-0 pl-3">
                                        @foreach (session('rowErrors') as $rowError)
                                            <li>{{ $rowError }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="close text-capitalize" data-dismiss="alert" aria-label="Close">
                                        <span data-feather="x" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="row">
                    <div class="col-lg-8">
                        <div class="card mb-30">
                            <div class="card-header color-dark fw-500">Upload Excel File</div>
                            <div class="card-body">
                                <form action="{{ route('kutipan.upload.store') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="upload-dropzone @error('file') is-invalid @enderror" id="upload-dropzone">
                                        <input type="file" name="file" id="upload-file" accept=".xlsx,.xls,.csv" required>
                                        <div class="upload-dropzone__icon">
                                            <span data-feather="upload-cloud"></span>
                                        </div>
                                        <p class="color-dark fw-500 fs-15 mb-1">Drag &amp; drop your file here, or click to browse</p>
                                        <p class="fs-13 color-light mb-0">.xlsx, .xls or .csv &middot; max 10MB</p>
                                        <p class="upload-dropzone__filename mt-2 mb-0 d-none" id="upload-filename"></p>
                                    </div>
                                    @error('file')
                                        <p class="text-danger fs-13 mt-2 mb-0">{{ $message }}</p>
                                    @enderror
                                    <div class="d-flex justify-content-end mt-25">
                                        <a href="{{ route('kutipan.index') }}" class="btn btn-light btn-default btn-squared mr-10">Cancel</a>
                                        <button type="submit" class="btn btn-primary btn-default btn-squared" id="upload-submit">
                                            <span data-feather="upload"></span>
                                            <span>Upload</span>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card mb-30">
                            <div class="card-header color-dark fw-500">File Format</div>
                            <div class="card-body upload-columns">
                                <p class="fs-14 mb-15">The first row must be a header row with these columns:</p>
                                <ul class="mb-20 pl-3">
                                    <li class="mb-2"><code>donator_name</code> <span class="color-danger">*</span></li>
                                    <li class="mb-2"><code>mobile_no</code> <span class="color-danger">*</span></li>
                                </ul>
                                <p class="fs-13 color-light mb-20">
                                    <span class="color-danger">*</span> Required. Numbers starting with 0 are converted to 60 (e.g. 0123456789 &rarr; 60123456789).
                                </p>
                                <a href="{{ route('kutipan.upload.template') }}" class="btn btn-outline-primary btn-default btn-squared btn-block">
                                    <span data-feather="download"></span>
                                    <span>Download Template</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(function () {
            var $dropzone = $('#upload-dropzone');
            var $input = $('#upload-file');
            var $filename = $('#upload-filename');

            $input.on('change', function () {
                var file = this.files[0];
                $filename.text(file ? file.name : '').toggleClass('d-none', !file);
                $dropzone.removeClass('is-invalid');
            });

            $dropzone.on('dragenter dragover', function () {
                $dropzone.addClass('is-dragover');
            }).on('dragleave drop', function () {
                $dropzone.removeClass('is-dragover');
            });

            $dropzone.closest('form').on('submit', function () {
                $('#upload-submit').prop('disabled', true).find('span:last').text('Uploading...');
            });
        });
    </script>
@endsection