@extends('layouts.main')
@section('title')
    Uploader
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item active">Uploader</li>
@endsection

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">
                        Uploader
                    </div>
                </div>
                <form action="{{ route('admin.file.upload.store') }}" method="POST" enctype="multipart/form-data"
                      id="data_form1" data-redirection_url="{{ route('admin.file.upload.view') }}"> @csrf @method('POST')
                    <div class="card-body">
                        <div class="row gy-4">
                            <div class="col-8">
                                <label for="upload_file">File</label>
                                <input type="file" class="form-control" id="upload_file" name="upload_file">
                            </div>
                            <div class="col-4">
                                <label for="upload_file_type">File Type</label>
                                <select class="form-control" id="upload_file_type" name="upload_file_type">
                                    @foreach($data['upload_file_type']  as $key => $value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-primary pull-right mb-2" type="submit" id="submit_button1">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $('#data_form1').submit(function (e) {
            e.preventDefault();
            const form = $(this);
            const url = form.attr('action');
            const redirection_url = form.data('redirection_url');
            const formData = new FormData(form[0]);

            $.ajax({
                url: url,
                method: form.attr('method'),
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $('.loader').removeClass('d-none');
                },
                success: function (response) {
                    Swal.fire({
                        title: "Success!",
                        text: response.message,
                        icon: "success",
                        confirmButtonText: "OK"
                    }).then(() => {
                        window.location.href = redirection_url;
                    });
                },
                error: function (xhr, status, error) {
                    const errorMessage = xhr.responseJSON?.message || "An error occurred.";
                    Swal.fire({
                        title: "Error!",
                        text: errorMessage,
                        icon: "error",
                        confirmButtonText: "OK"
                    });
                },
                complete: function () {
                    $('.loader').addClass('d-none');
                }
            });
        });
    </script>
@endsection