@extends('admin.layout')

@section('content')

<h5>
    <button type="button" class="btn btn-icon bg-white me-2"
        style="box-shadow:0px 9px 12px -2px #66328E1F;"
        onclick="history.back()">
        <i class="ti tabler-chevron-left text-dark"></i>
    </button>
    Unit Purchase
</h5>

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card p-4 border-1" style="border:1px solid #660066">

            <h5>Upload</h5>

            <form id="importForm" method="POST"
                action="{{ route('admin.import_ipl_users') }}"
                enctype="multipart/form-data">
                @csrf

                <div class="mb-3">
                    <label for="fileInput" class="form-label fw-bold">Upload File</label>
                    <input type="file" name="file" id="fileInput"
                        class="form-control" required>

                    <small class="text-muted mt-2 d-block">
                        Please upload a file in Excel format (.xls, .xlsx)
                    </small>
                </div>

                <div class="text-center mt-4">
                    <!-- ✅ FIX: Added modal trigger -->
                    <button type="button" class="btn btn-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#submitModal">
                        <i class="ti tabler-file-upload me-1"></i> Upload
                    </button>
                </div>

            </form>

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

<!-- Modal -->
<div class="modal fade" id="submitModal" tabindex="-1"
    data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">

            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit?</p>

            <div class="d-flex justify-content-center gap-3 mt-4">

                <button type="button"
                    class="btn btn-outline-primary p-3 fw-semibold"
                    data-bs-dismiss="modal">
                    Cancel
                </button>

                <button type="button" id="submit_btn"
                    class="btn btn-success p-3 fw-semibold">
                    Yes, Sure
                </button>

            </div>

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

<!-- ✅ FIXED SCRIPT -->
<script>
document.addEventListener('DOMContentLoaded', function () {

    const submitBtn = document.getElementById('submit_btn');
    const form = document.getElementById('importForm');

    if (submitBtn && form) {
        submitBtn.addEventListener('click', function () {

            this.disabled = true;
            this.innerText = 'Processing...';

            form.submit();
        });
    } else {
        console.error('Button or form not found');
    }

});
</script>

@endsection