@extends('layouts.admin')
@section('content')
<div class="col-9 main-dash-left">
    <div class="comm_head_top">
        <div class="name-head">
            <h2>Upload Mother Excel File</h2>
            <div class="d-flex comm_head_top_right">
                <div class="sownload-cv-pdf">

                    <!-- ⚠️ Attention Message -->
                    

                    <form action="{{  route('admin.roofrack.import')  }}" method="POST" id="updload_csv"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="file" class="add-notification-btn d-none" id="price_csv_upload" accept=".csv">
                        <label for="price_csv_upload" class="add-notification-btn">Upload CSV</label>
                    </form>

                    <form action="{{ route('admin.roofrack.export') }}" method="GET" style="display:inline;">
                        <button class="download-pdf" type="submit">Download CSV</button>
                    </form>
                </div>
            </div>
            

            <form action="{{ route('admin.roofrack.import') }}" method="POST" enctype="multipart/form-data" id="csv-upload-form" style="display: none;">
                @csrf
                <input type="file" name="file" required>
                <button type="submit">Upload</button>
            </form>
        </div>
            <div style=" font-size:14px ; border:2px solid white; background:#f12929; color:white; padding:15px; 
                        border-radius:8px; font-family:Arial, sans-serif; line-height:1.6; margin-bottom:15px;">
                        <strong>⚠️ Attention:</strong><br>
                        Before performing an upload, always <strong>download a copy of the current data</strong>!  
                        This backup ensures that if anything goes wrong during the upload, you can restore the system 
                        to its previous state by re-uploading the downloaded file.
                    </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    $('#price_csv_upload').on('change', function() {
        var formData = new FormData();
        var file = $('#price_csv_upload')[0].files[0];
        formData.append('file', file);
        formData.append('_token', '{{ csrf_token() }}'); // CSRF token

        $('#loader').show();
        $('#price_csv_upload').prop('disabled', true);

        $.ajax({
            url: '{{ route('admin.roofrack.import') }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#loader').hide();
                $('#price_csv_upload').prop('disabled', false);

                Swal.fire({
                    icon: 'success',
                    title: 'File Uploaded Successfully!',
                    text: 'Your file has been uploaded.',
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.reload();
                    }
                });
                $('#price_csv_upload').val('');
            },
            error: function(xhr, status, error) {
                $('#loader').hide();
                $('#price_csv_upload').prop('disabled', false);

                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Something went wrong, please try again!',
                });
            }
        });
    });
});
</script>
@endsection