@extends('layouts.master')
@section('content')
<style>
    .card .card-header {
         min-height: 47px !important;
        padding: 1.20rem !important;

    }
    .loader {
        display: none;
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        margin-left: 6px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
<div class="container mt-5">
    <div class="card shadow">
        <div class="card-header bg-primary text-white">
            Upload RateCon & Import Load
        </div>
        <div class="card-body">

            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            @if(session('success'))
                <div class="alert alert-success">
                    PDF processed successfully!
                </div>
            @endif

            <form method="POST" action="{{ route('assets.loads.importLoad') }}" enctype="multipart/form-data">
                @csrf
                <div class="mb-3">
                    <label for="pdf" class="form-label">Select PDF File</label>
                    <input type="file" name="pdf" id="pdf" class="form-control @error('pdf') is-invalid @enderror" accept="application/pdf" required>
                    @error('pdf')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <button type="submit" class="btn btn-success btn-sm" id="importBtn">
                    Import
                    <span class="loader" id="importLoader"></span>
                </button>
            </form>

            @if(session('responseJson'))
                <hr>
                <h5>JSON Output</h5>
                <pre class="bg-dark text-light p-3 rounded" style="max-height:400px;overflow:auto;">{{ session('responseJson') }}</pre>
            @endif

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

<script>
    document.querySelector("form").addEventListener("submit", function () {
        document.getElementById("importLoader").style.display = "inline-block";
        document.getElementById("importBtn").disabled = true;
    });
</script>
@endsection()